// home.jsx — mounts VariantB full-bleed with Tweaks for accent + copy/sections.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF3B1F",
  "headline": "",
  "showTerminal": true,
  "showMetricBar": true,
  "logoOnly": false
}/*EDITMODE-END*/;

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

  // push accent to CSS custom property so variant-b picks it up everywhere
  React.useEffect(() => {
    document.documentElement.style.setProperty('--b-accent', t.accent);
  }, [t.accent]);

  return (
    <React.Fragment>
      <VariantB
        headline={t.headline || null}
        showTerminal={t.showTerminal}
        showMetricBar={t.showMetricBar}
        logoOnly={t.logoOnly}
      />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#FF3B1F', '#F5D90A', '#00C16A', '#3B5BFF', '#E84CC4', '#ffffff']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Nav mark"
          value={t.logoOnly ? 'logo' : 'logo+word'}
          options={['logo+word', 'logo']}
          onChange={(v) => setTweak('logoOnly', v === 'logo')}
        />
        <TweakSection label="Hero copy" />
        <TweakText
          label="Headline override"
          value={t.headline}
          placeholder="(default: Agents · that don't · just talk · They ship.)"
          onChange={(v) => setTweak('headline', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle label="Live terminal" value={t.showTerminal} onChange={(v) => setTweak('showTerminal', v)} />
        <TweakToggle label="Metric bar" value={t.showMetricBar} onChange={(v) => setTweak('showMetricBar', v)} />
        <TweakSection label="Compare directions" />
        <TweakButton label="Open canvas (A · B · C)" onClick={() => window.location.href = 'explore.html'} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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