// App — composes nav, hero, and all sections. Includes Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "pink",
  "displayFont": "Figtree",
  "cornerRoundness": 28,
  "copyTone": "showbiz",
  "showMarquee": true
}/*EDITMODE-END*/;

const ACCENTS = {
  pink:   { hex: '#FF5E8A', name: 'Showbiz Pink' },
  mint:   { hex: '#6BE4B5', name: 'Studio Mint' },
  orange: { hex: '#FF7A2B', name: 'Broadcast Orange' },
  grape:  { hex: '#A855F7', name: 'Channel Grape' },
};

const FONTS = ['Figtree', 'Poppins', 'Sora', 'Space Grotesk'];

const HERO_COPY = {
  showbiz: {
    eyebrow: 'Now casting · AI video series',
    h1a: 'Make a show,',
    h1b: 'not just a clip.',
    sub: 'Short-form video series starring your AI cast — write a premise, pick a character, post in minutes. Your own studio, in your pocket.',
    cta: 'Start your first episode — free',
  },
  neutral: {
    eyebrow: 'AI video · series format',
    h1a: 'Series-first',
    h1b: 'video creation.',
    sub: 'Generate episodic short-form video with a consistent AI cast. Pick characters, write a premise, export to TikTok or Reels.',
    cta: 'Create your first episode',
  },
  punchy: {
    eyebrow: 'Drop ep. 1 today',
    h1a: 'Prompt a show.',
    h1b: 'Post it tonight.',
    sub: 'Cast of characters. Real series energy. TikTok and Reels-ready in minutes — no editor, no camera, no crew.',
    cta: 'Cast my first episode →',
  },
};

function scrollToCTA(e) {
  if (e && e.preventDefault) e.preventDefault();
  const el = document.getElementById('final-cta');
  if (el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setTimeout(() => {
      const input = el.querySelector('input[type="email"]');
      if (input) input.focus({ preventScroll: true });
    }, 600);
  }
}

function Nav({ copy }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <img src="assets/episodo-logo.png" alt="Episodo" style={{ height: 128 }} />
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#cast">Cast</a>
          <a href="#remix">Remix</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="#" className="nav-login">Log in</a>
          <button className="btn btn-primary" style={{ padding: '12px 20px', fontSize: 15 }} onClick={scrollToCTA}>{copy.cta.replace(' →', '')} →</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ copy }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="container hero-inner">
        <div>
          <div className="eyebrow">
            <span className="dot" />
            {copy.eyebrow}
          </div>
          <h1>
            {copy.h1a}<br />
            <span className="underline-pink">not just</span> a <span className="sunshine-chip">clip.</span>
          </h1>
          <p className="subhead">{copy.sub}</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={scrollToCTA}>{copy.cta}</button>
            <button className="btn btn-ghost btn-lg">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
              Watch 15s demo
            </button>
          </div>
          <div className="hero-meta">
            <div className="stat"><span className="check">✓</span><strong>No credit card</strong></div>
            <div className="stat"><span className="check">✓</span><strong>3 free episodes</strong></div>
            <div className="stat"><span className="check">✓</span><strong>Veo 3 under the hood</strong></div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-bg-blob" />
          <div className="hero-bg-blob blob-yellow" />
          <div className="hero-bg-blob blob-pink" />
          <div className="hero-bg-blob blob-mint" />

          <div className="sticker sticker-live">● LIVE ON SET</div>
          <div className="sticker sticker-new">NEW EP WEEKLY</div>
          <div className="sticker sticker-caption-count">AUTO-CAPTIONED</div>

          <HeroPhone />
        </div>
      </div>
    </section>
  );
}

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

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    const accent = ACCENTS[tweaks.accent] || ACCENTS.pink;
    root.style.setProperty('--pink', accent.hex);
    root.style.setProperty('--display', `'${tweaks.displayFont}', system-ui, sans-serif`);
    root.style.setProperty('--r-lg', `${tweaks.cornerRoundness}px`);
    root.style.setProperty('--r-xl', `${tweaks.cornerRoundness + 12}px`);

    // load font if not Figtree
    if (tweaks.displayFont !== 'Figtree' && !document.getElementById(`font-${tweaks.displayFont}`)) {
      const link = document.createElement('link');
      link.id = `font-${tweaks.displayFont}`;
      link.rel = 'stylesheet';
      link.href = `https://fonts.googleapis.com/css2?family=${tweaks.displayFont.replace(' ', '+')}:wght@400;600;700;800;900&display=swap`;
      document.head.appendChild(link);
    }
  }, [tweaks]);

  const copy = HERO_COPY[tweaks.copyTone] || HERO_COPY.showbiz;

  return (
    <>
      <Nav copy={copy} />
      <Hero copy={copy} />
      {tweaks.showMarquee && <Marquee />}
      <HowItWorks />
      <Cast />
      <TVRemix />
      <Proof />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakRadio
            label="Accent color"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={Object.entries(ACCENTS).map(([id, a]) => ({ value: id, label: a.name }))}
          />
          <TweakSelect
            label="Display font"
            value={tweaks.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={FONTS.map(f => ({ value: f, label: f }))}
          />
          <TweakSlider
            label="Corner roundness"
            value={tweaks.cornerRoundness}
            min={8}
            max={48}
            step={2}
            onChange={(v) => setTweak('cornerRoundness', v)}
          />
        </TweakSection>
        <TweakSection title="Copy">
          <TweakRadio
            label="Hero tone"
            value={tweaks.copyTone}
            onChange={(v) => setTweak('copyTone', v)}
            options={[
              { value: 'showbiz', label: 'Showbiz (default)' },
              { value: 'neutral', label: 'Neutral SaaS' },
              { value: 'punchy', label: 'Punchy & short' },
            ]}
          />
          <TweakToggle
            label="Marquee band"
            value={tweaks.showMarquee}
            onChange={(v) => setTweak('showMarquee', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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