// Vantuz landing — root composition + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "aurora": "blue",
  "showVinhoAccent": true,
  "heroVariant": "ai-attacker",
  "density": "balanced"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <Nav/>
      <Hero tweaks={t}/>
      <ThreatSection/>
      <MethodSection/>
      <ConsoleSample/>
      <CoverageSection/>
      <IntelSection/>
      <CTASection/>
      <FooterSection/>

      <TweaksPanel title="Tweaks · Vantuz">
        <TweakSection title="Atmosphere">
          <TweakColor
            label="Aurora palette"
            value={t.aurora}
            onChange={v => setTweak('aurora', v)}
            options={[
              ['#4a6df5','#6c8bff','#a8b9ff'],
              ['#7b6cf2','#a18bff','#c5b5ff'],
              ['#5570d7','#7b6cf2','#90a8ff'],
              ['#8a2b3f','#6b1e2e','#3a1018'],
            ]}
            labels={['blue','periwinkle','cool','vinho']}
            valueFromOption={(opt, i) => ['blue','periwinkle','cool','vinho'][i]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Claim variant"
            value={t.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value:'ai-attacker', label:'AI attacker' },
              { value:'manifesto',   label:'Manifesto' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);