// Landing page sections: How it works, Cast, Remix, Proof, FAQ, Final CTA, Footer

function HowItWorks() {
  return (
    <section className="how" data-screen-label="How it works">
      <div className="container">
        <div className="how-head">
          <div>
            <div className="section-kicker">How it works</div>
            <h2 className="section-title">Three steps.<br />No editor.</h2>
          </div>
          <p className="section-lede" style={{ margin: 0, maxWidth: 420 }}>
            You write the premise. Episodo handles the cast, camera, edit, captions, and export. Minutes, not weekends.
          </p>
        </div>
        <div className="how-grid">
          <div className="how-card">
            <div className="step-num">1</div>
            <div className="how-illustration one" style={{ padding: 0, background: 'linear-gradient(180deg, #FFD98A 0%, #E8A94A 100%)', display: 'grid', placeItems: 'end center', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 6 }}>
                <span style={{ background: '#0B1B4A', color: '#FFD60A', fontFamily: 'Figtree', fontWeight: 900, fontSize: 10, padding: '3px 8px', borderRadius: 4, letterSpacing: '0.08em' }}>CASTING</span>
              </div>
              <div style={{ position: 'relative', transform: 'translateY(6px)', filter: 'drop-shadow(0 10px 14px rgba(0,0,0,0.3))' }}>
                <Headshot id="dog" size={140} />
              </div>
              {/* deck of other characters peeking */}
              <div style={{ position: 'absolute', right: -8, bottom: 14, transform: 'rotate(8deg)', opacity: 0.85, filter: 'drop-shadow(0 6px 10px rgba(0,0,0,0.2))' }}>
                <Headshot id="tomato" size={70} />
              </div>
              <div style={{ position: 'absolute', left: -6, bottom: 8, transform: 'rotate(-10deg)', opacity: 0.85, filter: 'drop-shadow(0 6px 10px rgba(0,0,0,0.2))' }}>
                <Headshot id="robot" size={64} />
              </div>
            </div>
            <h3>Pick your cast</h3>
            <p>Start from 50+ house characters, or lock in a series lead. They keep the same look, voice, and bit across every episode.</p>
          </div>
          <div className="how-card">
            <div className="step-num">2</div>
            <div className="how-illustration two">
              <div style={{ background: '#fff', border: '2.5px solid #0B1B4A', borderRadius: 14, padding: '14px 18px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 14, color: '#0B1B4A', maxWidth: 220, boxShadow: '0 4px 0 0 #0B1B4A', transform: 'rotate(-2deg)' }}>
                "Late-night cooking show, but the host is a tomato and everything is catching fire."
              </div>
            </div>
            <h3>Write or remix a premise</h3>
            <p>Type a sitcom logline, paste a YouTube title, or remix a favorite show. Episodo turns it into a shootable script.</p>
          </div>
          <div className="how-card">
            <div className="step-num">3</div>
            <div className="how-illustration three">
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 70, height: 110, background: '#0B1B4A', borderRadius: 10, border: '2.5px solid #0B1B4A', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 4, background: '#6BE4B5', borderRadius: 6 }} />
                </div>
                <div style={{ fontFamily: 'Figtree', fontWeight: 900, fontSize: 22, color: '#0B1B4A' }}>→</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 8, padding: '4px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>TikTok ✓</div>
                  <div style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 8, padding: '4px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>Reels ✓</div>
                  <div style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 8, padding: '4px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>Shorts ✓</div>
                </div>
              </div>
            </div>
            <h3>Generate + post</h3>
            <p>9:16 rendered, captioned, sized for TikTok and Reels. Schedule straight from Episodo or download and post yourself.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    'NOW CASTING',
    'A COOKING SHOW STARRING A TOMATO',
    'A LATE-NIGHT HOST WHO IS A GOLDEN RETRIEVER',
    'A COURT DRAMA WHERE THE JUDGE IS A DUCK',
    'A ROBOT WHO DOES STAND-UP',
    'A UNICORN INFLUENCER',
  ];
  return (
    <div className="marquee" data-screen-label="Marquee">
      {[0, 1].map(k => (
        <div className="marquee-track" key={k}>
          {items.map((t, i) => (
            <React.Fragment key={i}>
              <span>{t}</span>
              <span className="dot" />
            </React.Fragment>
          ))}
        </div>
      ))}
    </div>
  );
}

function Cast() {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section className="cast" data-screen-label="Character library">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap', marginBottom: 48 }}>
          <div>
            <div className="section-kicker">The cast</div>
            <h2 className="section-title">A cast<br />that shows up<br />on camera.</h2>
          </div>
          <p className="section-lede" style={{ margin: 0, maxWidth: 380 }}>
            Recurring characters — not one-off clips. They remember who they are. So will your audience.
          </p>
        </div>

        <div className="cast-grid">
          {CHARACTERS.slice(0, 12).map((c, i) => {
            const isHover = hovered === c.id;
            return (
              <div
                key={c.id}
                className="cast-tile"
                style={{
                  background: c.bg || '#FFE86A',
                  transform: isHover ? 'translateY(-6px) rotate(-2deg)' : undefined,
                  padding: 0, overflow: 'hidden',
                  display: 'grid', placeItems: 'end center',
                }}
                onMouseEnter={() => setHovered(c.id)}
                onMouseLeave={() => setHovered(null)}
              >
                {/* stripe backdrops for visual variety */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.25) 0%, transparent 55%), linear-gradient(180deg, ${c.bg || '#FFE86A'} 0%, ${c.bg2 || '#FFC420'} 100%)`,
                }} />
                <div style={{
                  position: 'relative',
                  transform: `translateY(10px) ${isHover ? 'scale(1.05) rotate(-2deg)' : 'scale(1)'}`,
                  transition: 'transform 300ms cubic-bezier(.2,.7,.2,1)',
                  filter: 'drop-shadow(0 14px 16px rgba(0,0,0,0.35))',
                }}>
                  <Headshot id={c.id} size={150} />
                </div>
                <div className="name" style={{
                  position: 'absolute', left: 10, bottom: 10,
                  background: 'rgba(11,27,74,0.92)', color: '#fff',
                  padding: '4px 10px', borderRadius: 6,
                  fontFamily: 'Figtree', fontWeight: 900, fontSize: 13,
                  letterSpacing: '0.02em',
                  boxShadow: '0 4px 10px rgba(0,0,0,0.4)',
                }}>{c.name}</div>
              </div>
            );
          })}
        </div>

        <div className="cast-cta-row">
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <div className="stat-card">
              <strong>50+</strong>
              <span>Characters</span>
            </div>
            <div className="stat-card" style={{ background: '#FF5E8A', color: '#fff' }}>
              <strong>∞</strong>
              <span>Series slots</span>
            </div>
          </div>
          <button className="btn btn-yellow btn-lg" onClick={scrollToCTA}>Browse all characters →</button>
        </div>
      </div>
    </section>
  );
}

function TVRemix() {
  const [tab, setTab] = React.useState('seinfeld');

  const examples = {
    seinfeld: {
      showTitle: 'Seinfeld',
      showSub: '"A show about nothing" · 1989',
      prompt: 'A sitcom about four dogs in New York who meet at the same diner every day to complain about absolutely nothing. No plot. No resolution. Pure tail wag.',
      episodeTitle: 'S03E12 · The Squirrel',
      caption: [
        { text: "what's the" }, { text: 'deal', tone: 'blue' }, { text: 'with', tone: 'yellow' }, { text: 'squirrels', tone: 'pink' },
      ],
      accent: '#FFB800',
      accent2: '#FF7A2B',
      char: 'dog',
    },
    succession: {
      showTitle: 'Succession',
      showSub: '"A family drama" · 2018',
      prompt: 'A boardroom drama about a citrus dynasty. Four oranges fight for control of the family grove. Everyone is squeezed. No one is peeled.',
      episodeTitle: 'S01E01 · Juice Box',
      caption: [
        { text: 'fuck off' }, { text: 'dad', tone: 'blue' }, { text: "I'm an", tone: 'yellow' }, { text: 'orange', tone: 'pink' },
      ],
      accent: '#FF7A2B',
      accent2: '#E74C3C',
      char: 'tomato',
    },
  };
  const ex = examples[tab];

  return (
    <section className="remix" data-screen-label="TV remix">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="section-kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>TV-show inspiration</div>
          <h2 className="section-title" style={{ margin: '0 auto' }}>
            Steal any plot.<br />
            <span style={{ background: 'linear-gradient(var(--sunshine), var(--sunshine)) no-repeat 0 88%/100% 22%' }}>Recast it as your own.</span>
          </h2>
          <p className="section-lede" style={{ margin: '20px auto 0' }}>
            Episodo reads the DNA of shows you love and rebuilds the premise around your cast. Keep the format. Change the entire species.
          </p>
        </div>

        <div className="remix-panel">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 10, height: 10, background: '#E74C3C', borderRadius: 999, animation: 'blink 1.2s infinite' }} />
              <div style={{ fontFamily: 'Figtree', fontWeight: 900, fontSize: 14, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink)' }}>Try a remix</div>
            </div>
            <div className="remix-toggle">
              <button className={tab === 'seinfeld' ? 'active' : ''} onClick={() => setTab('seinfeld')}>Seinfeld but dogs</button>
              <button className={tab === 'succession' ? 'active' : ''} onClick={() => setTab('succession')}>Succession but oranges</button>
            </div>
          </div>

          <div className="remix-flow">
            <div className="remix-card input-show">
              <div className="label">Inspiration</div>
              <div className="title-line">{ex.showTitle}</div>
              <div className="body-text">{ex.showSub}</div>
              <div style={{
                marginTop: 'auto',
                height: 120,
                borderRadius: 14,
                border: '2px solid #0B1B4A',
                background: '#111',
                display: 'grid', placeItems: 'center',
                color: '#fff',
                fontFamily: 'Figtree',
                fontWeight: 900,
                fontSize: 22,
                letterSpacing: '0.04em',
              }}>
                📺
              </div>
            </div>

            <div className="remix-arrow">
              <div className="remix-arrow-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>
              </div>
            </div>

            <div className="remix-card prompt">
              <div className="label">Episodo prompt</div>
              <div className="body-text" style={{ fontSize: 15, lineHeight: 1.45 }}>{ex.prompt}</div>
              <div style={{ marginTop: 'auto', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                <span style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 999, padding: '3px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>#sitcom</span>
                <span style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 999, padding: '3px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>#deadpan</span>
                <span style={{ background: '#fff', border: '2px solid #0B1B4A', borderRadius: 999, padding: '3px 10px', fontFamily: 'Figtree', fontWeight: 800, fontSize: 11 }}>#9:16</span>
              </div>
            </div>

            <div className="remix-arrow">
              <div className="remix-arrow-icon" style={{ background: 'var(--pink)' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>
              </div>
            </div>

            <div className="remix-card output">
              <div className="label">Rendered</div>
              <div className="title-line">{ex.episodeTitle}</div>
              <div className="remix-video" style={{ background: '#000', overflow: 'hidden' }}>
                {ex.char === 'dog' ? <NewsDeskSet /> : <KitchenSet />}
                <div style={{ position: 'absolute', bottom: 70, left: '50%', transform: 'translateX(-50%)', filter: 'drop-shadow(0 10px 16px rgba(0,0,0,0.6))' }}>
                  {ex.char === 'dog' ? <AnchorDog size={190} /> : <ChefTomato size={190} />}
                </div>
                {/* broadcast chyron tag */}
                <div style={{
                  position: 'absolute', top: 14, left: 14,
                  background: ex.char === 'dog' ? '#E83C28' : '#FF7A2B',
                  color: '#fff', padding: '6px 10px',
                  fontFamily: 'Figtree', fontWeight: 900, fontSize: 11,
                  letterSpacing: '0.08em', borderRadius: 6,
                  boxShadow: '0 4px 10px rgba(0,0,0,0.4)',
                }}>
                  {ex.char === 'dog' ? 'THE DAILY BARK · EP 7' : 'JUICE BOX · S01E01'}
                </div>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,0.4) 100%)', pointerEvents: 'none' }} />

                <div className="burst-caption" style={{ paddingBottom: 18, alignItems: 'end' }}>
                  <div>
                    {ex.caption.map((w, i) => (
                      <span key={i} className={`chip ${w.tone === 'blue' ? 'blue' : ''}`} style={{
                        background: w.tone === 'pink' ? 'var(--pink)' : w.tone === 'blue' ? 'var(--cobalt)' : 'var(--sunshine)',
                        color: w.tone ? '#fff' : 'var(--ink)',
                      }}>{w.text}</span>
                    ))}
                  </div>
                </div>
                <div className="play-btn">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="#0B1B4A"><path d="M8 5v14l11-7z" /></svg>
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 32, textAlign: 'center' }}>
            <button className="btn btn-primary btn-lg" onClick={scrollToCTA}>Remix your favorite show →</button>
            <div style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-soft)' }}>
              Parody only. We don't recreate anyone else's characters or IP.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Proof() {
  const [count, setCount] = React.useState(2847291);
  React.useEffect(() => {
    const t = setInterval(() => setCount(c => c + Math.floor(Math.random() * 3) + 1), 2200);
    return () => clearInterval(t);
  }, []);

  const quotes = [
    {
      text: "Stopped editing at 2am. My tomato-host show has 40K followers. I don't make the rules.",
      name: 'Maya R.',
      handle: '@lateshow.tomato',
      emoji: '🍅',
      bg: '#FFE0DC',
    },
    {
      text: "My characters feel like real cast members now. People DM asking when the dog is back on.",
      name: 'Dev K.',
      handle: '@goldie.nightly',
      emoji: '🐶',
      bg: '#FFE8BF',
    },
    {
      text: "Went from 'another AI tool' to my whole content pipeline in a week. Reels love it.",
      name: 'Priya T.',
      handle: '@priya.makes',
      emoji: '✨',
      bg: '#D4E3F7',
    },
  ];

  const series = [
    { title: 'Goldie Nightly',    eps: 42, key: 'dog' },
    { title: 'Simmer Down',       eps: 28, key: 'tomato' },
    { title: 'Bleep Tonight',     eps: 19, key: 'robot' },
    { title: 'Mango Files',       eps: 14, key: 'cat' },
    { title: 'Boo in Charge',     eps: 11, key: 'ghost' },
    { title: 'Orange is the New', eps:  8, key: 'duck' },
  ];

  return (
    <section className="proof" data-screen-label="Social proof">
      <div className="container">
        <div className="counter-row">
          <div className="section-kicker" style={{ color: 'var(--ink)', justifyContent: 'center', display: 'inline-flex' }}>
            <span style={{ background: 'var(--ink)', width: 28, height: 2, borderRadius: 2, marginRight: 8 }} />
            Already running
          </div>
          <div className="counter-huge">{count.toLocaleString()}</div>
          <div className="counter-label">episodes generated · and counting</div>
        </div>

        <div className="quotes-grid">
          {quotes.map((q, i) => (
            <div className="quote-card" key={i}>
              <svg width="32" height="24" viewBox="0 0 32 24" fill="var(--cobalt)">
                <path d="M0 24V12C0 5.4 5.4 0 12 0v6c-3.3 0-6 2.7-6 6h6v12H0zm20 0V12c0-6.6 5.4-12 12-12v6c-3.3 0-6 2.7-6 6h6v12H20z" />
              </svg>
              <p className="big-quote">{q.text}</p>
              <div className="attr">
                <div className="avatar" style={{ background: q.bg }}>{q.emoji}</div>
                <div className="meta">
                  <div className="name">{q.name}</div>
                  <div className="handle">{q.handle}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80 }}>
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 24, marginBottom: 20, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'Figtree', fontWeight: 900, fontSize: 28, letterSpacing: '-0.02em' }}>Series currently airing →</div>
            <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>Scroll for more</div>
          </div>
          <div className="series-strip">
            {series.map((s, i) => {
              const bgs = {
                dog: ['#0E1540', '#050820'],
                tomato: ['#6E2818', '#4A1A08'],
                robot: ['#5A1A3A', '#0A0210'],
                cat: ['#2A1A08', '#0A0604'],
                ghost: ['#2A1A4A', '#0A0418'],
                duck: ['#2A1810', '#0A0604'],
              }[s.key] || ['#1a1a1a', '#000'];
              return (
                <div key={i} className="series-thumb" style={{ background: `linear-gradient(180deg, ${bgs[0]} 0%, ${bgs[1]} 100%)`, overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', bottom: 44, left: '50%', transform: 'translateX(-50%)', filter: 'drop-shadow(0 10px 14px rgba(0,0,0,0.5))' }}>
                    <Headshot id={s.key} size={120} />
                  </div>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%)', pointerEvents: 'none' }} />
                  <div className="episode-count">EP {s.eps}</div>
                  <div className="series-title">{s.title}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'What video model is under the hood?', a: 'We use Veo 3 as the primary renderer with our own character-consistency layer on top, so your cast actually looks like your cast from episode to episode.' },
  { q: 'What aspect ratios can I export?', a: '9:16 vertical is the default (TikTok, Reels, Shorts). 1:1 and 16:9 are one click away. We render in 1080p; Pro unlocks 4K.' },
  { q: 'Can I post directly to TikTok and Instagram?', a: 'Yes. Connect your accounts once and schedule or publish from Episodo. We support TikTok, Reels, Shorts, and X.' },
  { q: 'How does content safety work?', a: 'Every render passes through a safety layer before export — no real-people likenesses, no hateful content, no copyrighted characters. Parody and homage are fine; impersonation is not.' },
  { q: 'Can I use my own characters or art?', a: 'Upload a reference sheet and we\'ll build a consistent character from it. Your uploads, your IP — we don\'t train on your custom characters.' },
  { q: 'Refunds?', a: 'Cancel anytime. If something breaks, email support and we\'ll hand back unused credits no-questions.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="FAQ" style={{ background: '#fff' }}>
      <div className="container">
        <div className="faq-inner">
          <div>
            <div className="section-kicker">FAQ</div>
            <h2 className="section-title">The stuff<br />you were about<br />to ask.</h2>
            <p className="section-lede" style={{ marginTop: 20 }}>
              Still got a question? Email <a href="#" style={{ color: 'var(--cobalt)', fontWeight: 700 }}>hello@episodo.ai</a>.
            </p>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-q-icon">+</span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (!email || !email.includes('@') || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const r = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      if (!r.ok) throw new Error('request failed');
      setSent(true);
    } catch {
      setError("Couldn't save that — try again?");
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <section id="final-cta" className="final-cta" data-screen-label="Final CTA">
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="section-kicker" style={{ color: 'var(--sunshine)', justifyContent: 'center', display: 'inline-flex' }}>
          <span style={{ background: 'var(--sunshine)', width: 28, height: 2, borderRadius: 2, marginRight: 8 }} />
          Your cast is waiting
        </div>
        <h2 className="section-title" style={{ fontSize: 'clamp(56px, 9vw, 130px)' }}>
          Make a show,<br />not just a clip.
        </h2>
        <p className="section-lede">
          We're onboarding creators in waves. Drop your email and skip the line — no credit card, no spam, one email when your studio is ready.
        </p>

        <form className={`email-form ${sent ? 'sent' : ''}`} onSubmit={submit}>
          <input
            type="email"
            placeholder={sent ? "You're in — check your inbox." : 'your@email.com'}
            value={sent ? '✓ Saved. Welcome to the network.' : email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={sent}
            required
          />
          {!sent && <button type="submit" disabled={submitting}>{submitting ? 'Saving…' : 'Reserve my studio →'}</button>}
        </form>
        {error && <div style={{ marginTop: 12, color: '#fff', fontWeight: 700 }}>{error}</div>}

        <div className="final-cta-mascots">
          <div style={{ transform: 'rotate(-6deg)', filter: 'drop-shadow(0 6px 0 rgba(0,0,0,0.4))' }}><Headshot id="dog" size={100} /></div>
          <div style={{ transform: 'rotate(4deg) translateY(10px)', filter: 'drop-shadow(0 6px 0 rgba(0,0,0,0.4))' }}><Headshot id="tomato" size={100} /></div>
          <div style={{ transform: 'rotate(-2deg)', filter: 'drop-shadow(0 6px 0 rgba(0,0,0,0.4))' }}><Headshot id="robot" size={100} /></div>
          <div style={{ transform: 'rotate(6deg) translateY(4px)', filter: 'drop-shadow(0 6px 0 rgba(0,0,0,0.4))' }}><Headshot id="cat" size={100} /></div>
          <div style={{ transform: 'rotate(-4deg) translateY(12px)', filter: 'drop-shadow(0 6px 0 rgba(0,0,0,0.4))' }}><Headshot id="unicorn" size={100} /></div>
        </div>
      </div>

      {/* decorative */}
      <div style={{ position: 'absolute', top: 40, left: '6%', width: 120, height: 120, background: 'var(--pink)', borderRadius: 28, border: '3px solid #fff', transform: 'rotate(12deg)', opacity: 0.9 }} />
      <div style={{ position: 'absolute', top: 120, right: '8%', width: 80, height: 80, background: 'var(--mint)', borderRadius: 999, border: '3px solid #fff' }} />
      <div style={{ position: 'absolute', bottom: 60, left: '12%', width: 60, height: 60, background: 'var(--sunshine)', borderRadius: 999, border: '3px solid #fff' }} />
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <img src="assets/episodo-logo.png" alt="Episodo" />
          <div className="footer-links">
            <a href="terms.html">Terms</a>
            <a href="privacy.html">Privacy</a>
            <a href="#" className="footer-handle">@episodo</a>
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>© 2026 Episodo AI, Inc.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HowItWorks, Marquee, Cast, TVRemix, Proof, FAQ, FinalCTA, Footer,
});