// app.jsx — Gretl landing entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accentHue": 145,
  "accentChroma": 0.22,
  "accentLight": 0.86
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    const root = document.documentElement.style;
    const L = t.theme === 'light' ? Math.min(0.62, t.accentLight * 0.72) : t.accentLight;
    root.setProperty('--accent', `oklch(${L} ${t.accentChroma} ${t.accentHue})`);
    root.setProperty('--accent-soft', `oklch(${L} ${t.accentChroma} ${t.accentHue} / 0.18)`);
    root.setProperty('--accent-glow', `oklch(${L} ${t.accentChroma} ${t.accentHue} / 0.45)`);
    root.setProperty('--accent-ink', t.theme === 'light' ? '#fff' : `oklch(0.22 0.05 ${t.accentHue})`);
  }, [t]);

  const swap = () => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark');

  return (
    <React.Fragment>
      <header className="nav">
        <div className="container nav-inner">
          <Brand />
          <nav className="nav-links">
            <a href="#features">Product</a>
            <a href="docs.html">Docs</a>
            <a href="#sdks">SDKs</a>
            <a href="#pricing">Pricing</a>
            <a href="#"><Icon name="gh" size={14} /></a>
          </nav>
          <div className="nav-cta">
            <button className="theme-toggle" onClick={swap} title="Toggle theme">
              <Icon name={t.theme === 'dark' ? 'sun' : 'moon'} size={15} />
            </button>
            <a className="btn">Sign in</a>
            <a className="btn btn-primary"><Icon name="apple" size={14} /> Download</a>
          </div>
        </div>
      </header>

      <Hero />
      <div className="glow-divider container" />
      <span id="features" />
      <NameSection />
      <GroupSection />
      <AppShotSection />
      <FeatureSection />
      <span id="sdks" />
      <SdkSection />
      <ExtensionSection />
      <CliSection />
      <span id="pricing" />
      <PricingSection />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={[{ label: 'Dark', value: 'dark' }, { label: 'Light', value: 'light' }]}
          onChange={(v) => setTweak('theme', v)} />
        <TweakSection label="Accent" />
        <TweakSlider label="Hue" value={t.accentHue} min={0} max={360} step={1} unit="°"
          onChange={(v) => setTweak('accentHue', v)} />
        <TweakSlider label="Saturation" value={t.accentChroma} min={0} max={0.32} step={0.01}
          onChange={(v) => setTweak('accentChroma', v)} />
        <TweakSlider label="Lightness" value={t.accentLight} min={0.55} max={0.95} step={0.01}
          onChange={(v) => setTweak('accentLight', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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