// Main App — orchestrates the site
const { Nav, Hero, HowItWorks, SampleRoasts, StyleGallery, Science, Video, FAQ, Footer, Icon } = window.RMS;

function Marquee({ items, color = 'ink', speedSec = 38 }) {
  // duplicate for seamless loop
  const dup = [...items, ...items];
  const dotColor = color === 'ink' ? 'var(--flame)' : 'var(--ink)';
  return (
    <div className="marquee" style={{
      background: color === 'ink' ? 'var(--ink)' : 'var(--flame)',
      color: color === 'ink' ? 'var(--paper)' : 'var(--ink)',
      marginTop: 56,
      marginBottom: 8,
    }}>
      <div className="marquee-track" style={{ animationDuration: speedSec + 's' }}>
        {dup.map((it, i) => (
          <React.Fragment key={i}>
            <span>{it}</span>
            <span style={{
              width: 10, height: 10, borderRadius: 999,
              background: dotColor, display: 'inline-block', flexShrink: 0,
            }}/>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

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

  function scrollToNotify() {
    const target = document.getElementById('notify');
    if (!target) return;
    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    window.setTimeout(() => {
      document.getElementById('notify-email')?.focus({ preventScroll: true });
    }, 650);
  }

  async function notifyLaunch(email, source) {
    const response = await fetch('/api/notify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email,
        source,
        page: window.location.href,
      }),
    });

    if (!response.ok) {
      throw new Error('notify_failed');
    }
  }

  return (
    <div>
      <Nav onCta={scrollToNotify}/>
      <Hero tweaks={t} onNotify={(email) => notifyLaunch(email, 'hero')}/>

      {t.showMarquees && (
        <Marquee
          color="ink"
          speedSec={t.marqueeSpeedSec}
          items={[
            'SNAP THE SNACK',
            'ROAST THE SNACK NEVER THE KID',
            'GLOW-UP APPROVED',
            'RESPECTFULLY DESTROYED',
            'KING TOOTH ENERGY',
          ]}
        />
      )}

      <HowItWorks/>

      {t.showMarquees && (
        <Marquee
          color="flame"
          speedSec={t.marqueeSpeedSec}
          items={[
            'TWO PANELS · ONE VERDICT',
            'BACKEND-DRAWN BUBBLES',
            'NO MELTING TEXT',
            'SIX COMIC STYLES',
            'FOR ENTERTAINMENT ONLY',
          ]}
        />
      )}

      <SampleRoasts tweaks={t}/>
      <StyleGallery/>
      <Science/>
      <Video/>
      <FAQ/>
      <Footer onNotify={(email) => notifyLaunch(email, 'footer')}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Dr. Hawley (hero)" />
        <TweakSlider label="Vertical position" value={t.hawleyOffsetY}
                     min={-80} max={80} unit="px"
                     onChange={(v) => setTweak('hawleyOffsetY', v)} />
        <TweakSlider label="Size" value={t.hawleyMaxWidthPct}
                     min={40} max={100} unit="%"
                     onChange={(v) => setTweak('hawleyMaxWidthPct', v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Bold word" value={t.heroBoldWord}
                   onChange={(v) => setTweak('heroBoldWord', v)} />
        <TweakText label="Stamp text" value={t.heroStampText}
                   onChange={(v) => setTweak('heroStampText', v)} />
        <TweakText label="Bubble line" value={t.heroBubbleText}
                   onChange={(v) => setTweak('heroBubbleText', v)} />
        <TweakColor label="Bold-word color" value={t.heroAccent}
                    options={['#F39B5C', '#A8E5C5', '#F6C065', '#E27892', '#3F6B3A']}
                    onChange={(v) => setTweak('heroAccent', v)} />

        <TweakSection label="Snack · Verdict · Comic" />
        <TweakRadio label="Layout" value={t.roastVariant}
                    options={['Triptych', 'Spread', 'Wall']}
                    onChange={(v) => setTweak('roastVariant', v)} />

        <TweakSection label="Marquees" />
        <TweakToggle label="Show marquees" value={t.showMarquees}
                     onChange={(v) => setTweak('showMarquees', v)} />
        <TweakSlider label="Marquee speed" value={t.marqueeSpeedSec}
                     min={10} max={90} unit="s"
                     onChange={(v) => setTweak('marqueeSpeedSec', v)} />
      </TweaksPanel>
    </div>
  );
}

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