/* EBITDAswag — App entry, Tweaks panel */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c9a44c",
  "background": "#0a0e1a",
  "displayFont": "Space Grotesk",
  "headlineLayout": "stacked",
  "tickerSpeed": 70,
  "showTicker": true
}/*EDITMODE-END*/;

const FONT_OPTIONS = ['Space Grotesk', 'Archivo', 'Inter Tight', 'Bebas Neue', 'JetBrains Mono'];

function Tweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);

  useEffectApp(() => {
    const root = document.documentElement;
    root.style.setProperty('--gold', tweaks.accent);
    root.style.setProperty('--bg', tweaks.background);
    root.style.setProperty('--display', `"${tweaks.displayFont}", "Helvetica Neue", Arial, sans-serif`);
    document.querySelectorAll('.ticker-track').forEach((el) => {
      const isReverse = el.parentElement.classList.contains('reverse');
      el.style.animationDuration = `${tweaks.tickerSpeed * (isReverse ? 1.3 : 1)}s`;
    });
    const t = document.querySelector('.ticker-section');
    if (t) t.style.display = tweaks.showTicker ? '' : 'none';
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor label="Brand accent"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          presets={['#c9a44c', '#e64545', '#3aa663', '#7d5fff', '#ff9f1c', '#f4f1e8']} />
      </TweakSection>
      <TweakSection title="Background">
        <TweakRadio label="Mode"
          value={tweaks.background}
          options={[
            { value: '#0a0e1a', label: 'Navy' },
            { value: '#000000', label: 'Black' },
            { value: '#0f1117', label: 'Coal' },
          ]}
          onChange={(v) => setTweak('background', v)} />
      </TweakSection>
      <TweakSection title="Display font">
        <TweakSelect label="Headline typeface"
          value={tweaks.displayFont}
          options={FONT_OPTIONS}
          onChange={(v) => setTweak('displayFont', v)} />
      </TweakSection>
      <TweakSection title="Ticker">
        <TweakToggle label="Show ticker"
          value={tweaks.showTicker}
          onChange={(v) => setTweak('showTicker', v)} />
        <TweakSlider label="Speed (slower → faster)"
          value={tweaks.tickerSpeed}
          min={30} max={140} step={5}
          onChange={(v) => setTweak('tickerSpeed', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  return (
    <>
      <TopBar />
      <Hero />
      <Ticker />
      <Origin />
      <Products />
      <YouMightNeed />
      <Values />
      <Wild />
      <EmailCapture />
      <FAQSection />
      <Footer />
      <Tweaks />
    </>
  );
}

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