// Main app composition + Tweaks for Trevoga landing.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#dc3545",
  "density": "regular",
  "monoFont": "JetBrains Mono",
  "showAnnotations": false
}/*EDITMODE-END*/;

// Tweaks panel is opt-in: enable via `?tweaks=1` URL param to keep production clean.
const TWEAKS_ENABLED = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('tweaks');

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

  // Apply tweak values to CSS vars on root
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accentColor);

    // derive soft + line accent variants
    const hex = t.accentColor.replace('#', '');
    const num = parseInt(hex, 16);
    const rch = (num >> 16) & 255;
    const gch = (num >> 8) & 255;
    const bch = num & 255;
    r.style.setProperty('--accent-soft', `rgba(${rch}, ${gch}, ${bch}, 0.12)`);
    r.style.setProperty('--accent-line', `rgba(${rch}, ${gch}, ${bch}, 0.4)`);
    r.style.setProperty('--mono', `'${t.monoFont}', ui-monospace, 'SF Mono', Menlo, Consolas, monospace`);
    r.setAttribute('data-density', t.density);
  }, [t.accentColor, t.density, t.monoFont]);

  return (
    <>
      <Topbar />
      <main>
        <Hero />
        <Problems />
        <HowItWorks />
        <Features />
        <Integrations />
        <WhyUs />
        <EarlyAccess />
        <CtaBlock />
      </main>
      <Footer />

      {TWEAKS_ENABLED && (
        <TweaksPanel>
          <TweakSection label="Бренд" />
          <TweakColor
            label="Акцент"
            value={t.accentColor}
            options={['#dc3545', '#e85d04', '#9b1c1c', '#7c3aed', '#2563eb', '#16a34a']}
            onChange={(v) => setTweak('accentColor', v)}
          />

          <TweakSection label="Типографика" />
          <TweakSelect
            label="Моно-шрифт"
            value={t.monoFont}
            options={['JetBrains Mono', 'IBM Plex Mono', 'Geist Mono', 'Fira Code', 'Roboto Mono']}
            onChange={(v) => setTweak('monoFont', v)}
          />

          <TweakSection label="Плотность" />
          <TweakRadio
            label="Spacing"
            value={t.density}
            options={['compact', 'regular', 'comfy']}
            onChange={(v) => setTweak('density', v)}
          />
        </TweaksPanel>
      )}
    </>
  );
}

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