/* VideoGen AI — landing page */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F5BFF",
  "headline": "Make once.",
  "headlineTail": "everywhere.",
  "rotatingPlatforms": true
}/*EDITMODE-END*/;

const BILLING_URL = "https://video.vangogodesign.com/billing";

// ── Data ────────────────────────────────────────────────────────────────────

const PLATFORMS = [
  { name: "TikTok",       short: "TT",  spec: "9:16 · 15–60s" },
  { name: "Reels",        short: "IG",  spec: "9:16 · ≤90s" },
  { name: "Shorts",       short: "YT",  spec: "9:16 · ≤60s" },
  { name: "LinkedIn",     short: "LI",  spec: "1:1 · ≤3min" },
  { name: "X",            short: "X",   spec: "16:9 · ≤2:20" },
  { name: "Facebook",     short: "FB",  spec: "1:1 · ≤90s" },
  { name: "Pinterest",    short: "PI",  spec: "9:16 · ≤60s" },
  { name: "YouTube",      short: "YT",  spec: "16:9 · long-form" },
];

const TIERS = [
  {
    name: "Starter",
    tag: "Slider clips",
    desc: "Slider videos up to 1 minute. Social-media posts only — Reels, TikTok, Shorts.",
    priceMo: 19,
    priceYr: 15,
    features: [
      "Slider clips up to 60 seconds",
      "Auto-publish to social platforms",
      "Per-platform captions + hashtags",
      "Music, transitions, templates",
      "Download to edit yourself",
    ],
  },
  {
    name: "Creator",
    tag: "Real animation",
    desc: "Real animation rendered on professional engines. Up to 3 minutes. The growth tier.",
    priceMo: 49,
    priceYr: 39,
    featured: true,
    badge: "Most popular",
    features: [
      "Up to 3-minute animated videos",
      "Professional animation engines",
      "AI script, voiceover, motion",
      "Product placement in every shot",
      "All social platforms, every aspect",
      "Scheduled drops + A/B titles",
      "Upload your own images & clips",
    ],
  },
  {
    name: "Pro",
    tag: "Unlimited length",
    desc: "Unlimited length — up to 60 minutes. Consistent characters, cinematic camera, lip-sync.",
    priceMo: 129,
    priceYr: 99,
    features: [
      "Long-form up to 60 minutes",
      "Voice clone — your voice, any script",
      "Multi-character support",
      "Consistent characters & locations",
      "Cinematic camera + action moves",
      "AI presenter with lip-sync",
      "Brand kit, fonts, templates",
      "Team seats (5) + API",
    ],
  },
];

const FEATURES = [
  ["One brief →", "ten platforms", "Drop an idea or upload a clip. We re-cut, re-caption, and re-format it for every feed. You approve once."],
  ["Caption rewrites", "for each algorithm", "Same idea, ten different captions. Hooks tuned to each platform's ranking signals — not a copy-paste."],
  ["Hashtags &", "keywords on autopilot", "We pull trending tags hourly, score them by reach + competition, and slot the right mix per platform."],
  ["AI voiceover", "in 32 voices", "Pick a voice, paste a script, or let the AI write it. Lip-sync on Creator and Pro."],
  ["Best-time", "scheduling", "Per-platform drop windows trained on your audience. Queue a week in three minutes."],
  ["Analytics", "that compare apples", "One dashboard. Cross-platform views, retention, and ROI — normalized so you can compare what's actually winning."],
];

const FAQ = [
  ["Do you actually publish, or just export?", "Both. Connect your platform accounts and VideoGen AI publishes on schedule. Prefer to download? Every video exports as MP4 in all aspect ratios."],
  ["Which platforms does the auto-publish cover?", "TikTok, Instagram Reels, YouTube Shorts & Long-form, LinkedIn, Facebook, X, Pinterest, Threads, and Snapchat. New platforms are added monthly."],
  ["How is each platform 'optimized'?", "Same idea, ten outputs: aspect ratio, length, hook timing, caption length, hashtag density, and the title/description structure each algorithm rewards. We rewrite — not resize."],
  ["What's the difference between Creator and Pro?", "Creator is animation, AI voiceover, and motion graphics up to 3 minutes. Pro adds AI presenters with lip-sync and long-form (20+ min) — built for YouTube, sales, and webinars."],
  ["Can I keep my brand consistent?", "Yes. Upload your brand kit (logos, colors, fonts, intros, outros, lower-thirds). Every export uses your kit by default."],
  ["What happens to my data and accounts?", "Your raw assets are yours. Platform tokens are encrypted and revocable. We never post without your queue's approval."],
  ["Is there a free trial?", "Get Early Access for free during the beta. No card required — you'll only see billing after the public launch."],
];

const SAMPLES = [
  { tag: "Starter",  title: "Local bakery", platform: "Reels · 28s" },
  { tag: "Creator",  title: "SaaS feature drop", platform: "Shorts · 1:42" },
  { tag: "Creator",  title: "Real-estate tour", platform: "TikTok · 0:58" },
  { tag: "Pro",      title: "Founder interview", platform: "YouTube · 12:08" },
];

// ── Hooks ───────────────────────────────────────────────────────────────────

function useRotator(items, interval = 1800, enabled = true) {
  const [i, setI] = useState(0);
  useEffect(() => {
    if (!enabled) return;
    const id = setInterval(() => setI((x) => (x + 1) % items.length), interval);
    return () => clearInterval(id);
  }, [items.length, interval, enabled]);
  return [i, items[i]];
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ── Atoms ───────────────────────────────────────────────────────────────────

const Arrow = ({ size = 14 }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Play = () => (
  <svg viewBox="0 0 48 48" fill="none">
    <circle cx="24" cy="24" r="23" stroke="currentColor" strokeWidth="1.5" opacity=".5"/>
    <path d="M20 16l12 8-12 8V16z" fill="currentColor"/>
  </svg>
);

// ── Sections ────────────────────────────────────────────────────────────────

function Nav() {
  return (
    <nav className="nav" data-screen-label="nav">
      <div className="wrap nav-row">
        <a className="brand" href="#">
          <span className="brand-mark"><img src="logo.png" alt="VideoGen AI"/></span>
          VideoGen AI
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#tiers">Tiers</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <a className="btn btn-ghost" href="https://video.vangogodesign.com">Sign in</a>
          <a className="btn btn-primary" href={BILLING_URL}>Get Early Access<Arrow/></a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ headline, tail, rotating }) {
  const [idx] = useRotator(PLATFORMS, 1800, rotating);
  return (
    <header className="hero" data-screen-label="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>Now in private beta · Get Early Access</div>
          <h1 className="hero-headline" style={{ marginTop: 24 }}>
            {headline}<br/>
            Post to{" "}
            <span className="roll">
              <span className="roll-track" style={{ transform: `translateY(-${idx * 0.96}em)` }}>
                {PLATFORMS.map((p) => <span key={p.name}>{p.name}.</span>)}
              </span>
            </span>
            <br/>
            <span style={{ color: 'var(--ink-3)' }}>And {tail}</span>
          </h1>
          <p className="hero-sub">
            VideoGen AI plans, scripts, and ships social video across every platform — each
            one rewritten for its own algorithm. <b style={{color:'var(--ink)'}}>One workflow, one subscription,</b> zero tab-juggling.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary btn-lg" href={BILLING_URL}>Get Early Access<Arrow/></a>
            <a className="btn btn-ghost btn-lg" href="#demo">Watch a 60-sec demo</a>
          </div>
          <div className="hero-meta">
            <div className="item">Multiple platforms supported</div>
            <div className="item">One subscription</div>
            <div className="item">Cancel anytime</div>
          </div>
        </div>

        <DemoMock activePlatform={PLATFORMS[idx]} />
      </div>
    </header>
  );
}

function DemoMock({ activePlatform }) {
  // Cycle through three "publish states" to feel alive.
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1800);
    return () => clearInterval(id);
  }, []);
  const states = ["queued", "live", "done"];
  const rows = PLATFORMS.slice(0, 6).map((p, i) => {
    const offset = (tick + i) % 7;
    let st = "queued";
    if (offset < 2) st = "queued";
    else if (offset < 4) st = "live";
    else st = "done";
    return { ...p, st };
  });

  return (
    <div className="demo" id="demo" data-screen-label="demo-mock">
      <div className="demo-bar">
        <span className="dot" style={{background:'#FF5F57'}}></span>
        <span className="dot" style={{background:'#FEBC2E'}}></span>
        <span className="dot" style={{background:'#28C840'}}></span>
        <span className="crumb">app.videogen.ai / projects / spring-campaign</span>
      </div>
      <div className="demo-body">
        <div className="demo-panel">
          <div className="demo-label">Project · Master cut</div>
          <div className="demo-thumb">
            <div className="play"><Play/></div>
            <div className="time">0:47</div>
          </div>
          <div className="demo-title">"3 ways our espresso saves you 20 min a day"</div>
          <div className="demo-sub">creator tier · ai voice: Mira · 9 outputs</div>
          <div className="caption-card">
            POV: you're a small-business owner and you just got 20 minutes back.{"\n"}
            <span className="hash">#smallbiz #productivity #coffee #foundermode</span>
          </div>
        </div>

        <div className="demo-panel">
          <div className="demo-label">Publishing queue · Tonight 6:00 PM local</div>
          {rows.map((r) => (
            <div className="pubrow" key={r.name}>
              <div className="left">
                <span className="plat" style={r.name === activePlatform.name ? { background:'var(--accent)', color:'var(--accent-ink)' } : {}}>
                  {r.short}
                </span>
                <div>
                  <div style={{ fontWeight: 500 }}>{r.name}</div>
                  <div style={{ fontFamily:'var(--mono)', fontSize: 10, color:'var(--ink-4)' }}>{r.spec}</div>
                </div>
              </div>
              <div className={`status ${r.st === 'done' ? 'done' : ''} ${r.st === 'live' ? 'live' : ''}`}>
                {r.st === 'queued' && 'queued'}
                {r.st === 'live' && 'publishing'}
                {r.st === 'done' && '✓ posted'}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Problem() {
  return (
    <section className="wrap" data-screen-label="problem" id="problem">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>The problem</div>
          <h2 style={{ marginTop: 16 }}>Twelve tabs.<br/>Four subscriptions.<br/>One human.</h2>
        </div>
        <p className="meta">
          Marketers and small-business owners didn't sign up to be video editors,
          copywriters, and social-media managers. They signed up to ship.
        </p>
      </div>

      <div className="problem-grid">
        <div className="problem-card bad" data-reveal>
          <h3>The old way</h3>
          <p>Cut in one tool. Caption in another. Rewrite for each feed. Schedule somewhere else. Forget what you posted where.</p>
          <div className="tabs-illo">
            <span className="tab">capcut.com</span>
            <span className="tab">descript</span>
            <span className="tab">canva.com</span>
            <span className="tab">buffer</span>
            <span className="tab">later</span>
            <span className="tab">notion</span>
            <span className="tab">chatgpt</span>
            <span className="tab muted">+ 5 more</span>
          </div>
          <div className="pc-list">
            <div className="item"><span>Tools open</span><b>12</b></div>
            <div className="item"><span>Monthly cost</span><b>$214</b></div>
            <div className="item"><span>Time per video</span><b>3h 40m</b></div>
            <div className="item"><span>Per-platform rewrites</span><b>manual</b></div>
          </div>
        </div>

        <div className="problem-card good" data-reveal>
          <h3>With VideoGen AI</h3>
          <p>One brief. One subscription. Every platform optimized — and posted — automatically.</p>
          <div className="one-illo">
            <span className="brand-mark"><img src="logo.png" alt=""/></span>
            <div>
              <div className="label">VideoGen AI</div>
              <div className="sub">videogen.ai · one tab</div>
            </div>
          </div>
          <div className="pc-list">
            <div className="item"><span>Tools open</span><b>1</b></div>
            <div className="item"><span>Monthly cost</span><b>from $19</b></div>
            <div className="item"><span>Time per video</span><b>12 min</b></div>
            <div className="item"><span>Per-platform rewrites</span><b>automatic</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="wrap" data-screen-label="how" id="how">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>How it works</div>
          <h2 style={{ marginTop: 16 }}>Pick a tier.<br/>Drop an idea.<br/>Direct the film.</h2>
        </div>
        <p className="meta">No prompts to engineer. No timeline to fight. You stay the director — VideoGen AI handles the production line.</p>
      </div>

      <div className="steps">
        <div className="step" data-reveal>
          <h3>Pick a tier</h3>
          <p>Starter for slider clips up to 1 min — social posts only. Creator for real animation on professional engines, up to 3 min. Pro for unlimited length.</p>
          <div className="illo">
            <div style={{display:'flex',flexDirection:'column',gap:6,alignItems:'flex-start'}}>
              <span style={{padding:'4px 8px',background:'#1A1A1A',borderRadius:6}}>Starter · ≤1 min</span>
              <span style={{padding:'4px 8px',background:'var(--accent)',color:'var(--accent-ink)',borderRadius:6}}>Creator · 3 min</span>
              <span style={{padding:'4px 8px',background:'#1A1A1A',borderRadius:6}}>Pro · ≤60 min</span>
            </div>
          </div>
        </div>

        <div className="step" data-reveal>
          <h3>Drop an idea</h3>
          <p>Type a line. Get a real storyboard you can tweak shot-by-shot. Consistent characters and locations across every cut (Pro). Long-form up to 60 minutes.</p>
          <div className="illo">
            <div style={{color:'var(--accent)'}}>&gt; brief</div>
            <div style={{marginTop:6}}>"3 ways our espresso saves 20 min a day"</div>
            <div style={{marginTop:8,display:'flex',gap:4}}>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3}}></span>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3}}></span>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3,outline:'1px solid var(--accent)'}}></span>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3}}></span>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3}}></span>
              <span style={{flex:1,height:18,background:'#1A1A1A',borderRadius:3}}></span>
            </div>
            <div style={{marginTop:6,opacity:.6}}>shot 03 / 06 · 4.2s · consistent character</div>
          </div>
        </div>

        <div className="step" data-reveal>
          <h3>Direct the film</h3>
          <p>Animate the action and camera moves like a film pro — push-ins, parallax, whip-pans, lip-sync. Approve once; we ship to every platform on its own best time.</p>
          <div className="illo">
            <div style={{display:'flex',justifyContent:'space-between'}}>
              <span>Camera</span><span style={{color:'var(--accent)'}}>push-in 1.4×</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:6}}>
              <span>Action</span><span style={{color:'var(--accent)'}}>hand-off → cup</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:6}}>
              <span>Lip-sync</span><span style={{color:'var(--accent)'}}>Mira · EN-US</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:6,opacity:.6}}>
              <span>Ship to</span><span>8 platforms</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NotOneClick() {
  return (
    <section className="wrap" data-screen-label="not-one-click" id="craft">
      <div className="craft-wrap" data-reveal>
        <div className="craft-head">
          <div className="eyebrow"><span className="dot"></span>For real creators</div>
          <h2 className="craft-title">
            This is <span className="strike-not">NOT</span> <span className="strike">one-click<br/>trash</span>.
            <br/>This is for creators<br/>who care.
          </h2>
        </div>
        <div className="craft-grid">
          <div className="craft-cell">
            <div className="craft-num">01</div>
            <h4>Storyboard you can tweak</h4>
            <p>Every shot is its own card. Reorder, replace, retime. The AI follows the storyboard — not the other way around.</p>
          </div>
          <div className="craft-cell">
            <div className="craft-num">02</div>
            <h4>Download any image</h4>
            <p>Pull any frame, key art, or generated image out as a layered file. Open it in Photoshop, Figma, or your editor of choice. Bring it back in.</p>
          </div>
          <div className="craft-cell">
            <div className="craft-num">03</div>
            <h4>Bring your own footage</h4>
            <p>Upload your own images, B-roll, voice, or product clips. VideoGen AI weaves them in alongside the generated shots.</p>
          </div>
          <div className="craft-cell">
            <div className="craft-num">04</div>
            <h4>Consistent characters & places</h4>
            <p>Lock a character, a brand, a location — then keep them on-model across every shot of a 60-minute long-form (Pro).</p>
          </div>
          <div className="craft-cell">
            <div className="craft-num">05</div>
            <h4>Film-pro camera moves</h4>
            <p>Push-ins, parallax, whip-pans, rack-focus. Animate the action and the camera, not just the subject.</p>
          </div>
          <div className="craft-cell">
            <div className="craft-num">06</div>
            <h4>Frame-level control</h4>
            <p>Trim by the frame. Adjust easing. Swap voices. The details that separate work from slop — they're all here.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// Tier output style — visual preview of what each tier produces.
const TIER_PREVIEWS = {
  Starter: (
    <div className="tier-prev tp-starter">
      <div className="tp-slide"><div className="tp-bar a"/><div className="tp-bar b"/></div>
      <div className="tp-slide"><div className="tp-bar c"/><div className="tp-bar a"/></div>
      <div className="tp-slide"><div className="tp-bar b"/><div className="tp-bar c"/></div>
      <div className="tp-cap">SLIDE 02 / 06</div>
    </div>
  ),
  Creator: (
    <div className="tier-prev tp-creator">
      <div className="tp-blob"/>
      <div className="tp-blob tp-blob-2"/>
      <div className="tp-waveform">
        {Array.from({length: 28}).map((_,i)=>(
          <i key={i} style={{ height: `${20 + Math.abs(Math.sin(i*.7))*70}%`,
            animationDelay: `${i*60}ms` }}/>
        ))}
      </div>
      <div className="tp-cap">AI · MIRA · 02:47</div>
    </div>
  ),
  Pro: (
    <div className="tier-prev tp-pro">
      <div className="tp-face"/>
      <div className="tp-lipsync">
        <div className="tp-row"><span/><span/><span/><span className="active"/><span/></div>
        <div className="tp-timeline">
          <div className="tp-play"/>
        </div>
      </div>
      <div className="tp-cap">LIP-SYNC · 12:08</div>
    </div>
  ),
};

function Tiers() {
  return (
    <section className="wrap" data-screen-label="tiers" id="tiers">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>Three tiers of creation</div>
          <h2 style={{ marginTop: 16 }}>From slideshow<br/>to lip-synced epic.</h2>
        </div>
        <p className="meta">
          Start where you are. Upgrade when you outgrow it. Every tier publishes to every
          platform — they differ on the kind of video the AI can make.
        </p>
      </div>

      <div className="tiers">
        {TIERS.map((t) => (
          <div key={t.name} className={`tier ${t.featured ? 'featured' : ''}`} data-reveal>
            {t.badge && <span className="badge">{t.badge}</span>}
            <div className="tier-name">{t.tag}</div>
            <h3>{t.name}</h3>
            {TIER_PREVIEWS[t.name]}
            <p className="desc">{t.desc}</p>
            <ul className="feat">
              {t.features.slice(0,4).map((f) => <li key={f}>{f}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{textAlign:'center',marginTop:36}} data-reveal>
        <a className="btn btn-ghost btn-lg" href="#pricing">See pricing<Arrow/></a>
      </div>
    </section>
  );
}

function PlatformMarquee() {
  // Duplicate the list so the marquee can loop seamlessly with translateX(-50%).
  const doubled = [...PLATFORMS, ...PLATFORMS];
  return (
    <section className="tight" data-screen-label="platforms" style={{padding:'48px 0'}}>
      <div className="wrap" data-reveal>
        <div className="eyebrow" style={{textAlign:'center',marginBottom:8}}>
          <span className="dot"></span>Publishes everywhere your audience is
        </div>
      </div>
      <div className="marquee-wrap" data-reveal>
        <div className="marquee">
          {doubled.map((p, i) => (
            <React.Fragment key={i}>
              <div className="pill">
                <span className="glyph">{p.short}</span>
                {p.name}
              </div>
              <span className="sep">/</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  return (
    <section className="wrap" data-screen-label="features" id="features">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>What's inside</div>
          <h2 style={{ marginTop: 16 }}>The whole content<br/>line, on one screen.</h2>
        </div>
        <p className="meta">
          Hooks, scripts, motion, voiceover, captions, hashtags, scheduling, analytics.
          What used to be a stack is now a sidebar.
        </p>
      </div>
      <div className="feat-grid" data-reveal>
        {FEATURES.map(([a, b, p], i) => (
          <div className="feat-cell" key={i}>
            <div className="num">F.{String(i+1).padStart(2,'0')}</div>
            <h4>{a}<br/><span style={{color:'var(--accent)'}}>{b}</span></h4>
            <p>{p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Samples() {
  return (
    <section className="wrap" data-screen-label="samples" id="samples">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>Sample output</div>
          <h2 style={{marginTop:16}}>A taste of what<br/>ships at each tier.</h2>
        </div>
        <p className="meta">Real outputs from the beta. Each card is the same idea, ten platform cuts.</p>
      </div>
      <div className="samples" data-reveal>
        {SAMPLES.map((s, i) => (
          <div className="sample" key={i}>
            <span className="tag">{s.tag}</span>
            <div className="play-c"><Play/></div>
            <div className="meta">
              {s.title}
              <div className="sub">{s.platform}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Pricing({ yearly, setYearly }) {
  return (
    <section className="wrap" data-screen-label="pricing" id="pricing">
      <div className="pricing-head" data-reveal>
        <div className="eyebrow"><span className="dot"></span>Pricing</div>
        <h2>One subscription.<br/>Replaces the rest.</h2>
        <p style={{maxWidth:560,fontSize:16}}>Cancel anytime. Yearly saves you 20%. Beta pricing locks in for life.</p>
        <BillingToggle yearly={yearly} setYearly={setYearly} />
      </div>
      <div className="tiers">
        {TIERS.map((t) => (
          <div key={t.name} className={`tier ${t.featured ? 'featured' : ''}`}>
            {t.badge && <span className="badge">{t.badge}</span>}
            <div className="tier-name">{t.tag}</div>
            <h3>{t.name}</h3>
            <p className="desc">{t.desc}</p>
            <div className="tier-price">
              <span className="price-num">${yearly ? t.priceYr : t.priceMo}</span>
              <span className="price-suf">/ {yearly ? 'mo · billed yearly' : 'month'}</span>
            </div>
            <ul className="feat">
              {t.features.map((f) => <li key={f}>{f}</li>)}
            </ul>
            <a className={`btn ${t.featured ? 'btn-ghost' : 'btn-primary'}`} href={BILLING_URL}
               style={t.featured ? { background:'var(--accent-ink)', color:'var(--accent)', borderColor:'var(--accent-ink)' } : {}}>
              Choose {t.name}<Arrow/>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

function BillingToggle({ yearly, setYearly }) {
  const ref = useRef(null);
  return (
    <div className="billing-toggle" ref={ref}>
      <div className="billing-thumb" style={{
        left: yearly ? 'calc(50% + 2px)' : '4px',
        width: 'calc(50% - 4px)',
      }}/>
      <button className={!yearly ? 'active' : ''} onClick={() => setYearly(false)}>Monthly</button>
      <button className={yearly ? 'active' : ''} onClick={() => setYearly(true)}>
        Yearly
      </button>
      <span className="save-tag">−20%</span>
    </div>
  );
}

function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="wrap" data-screen-label="faq" id="faq">
      <div className="section-head" data-reveal>
        <div>
          <div className="eyebrow"><span className="dot"></span>FAQ</div>
          <h2 style={{marginTop:16}}>Questions we get<br/>every demo.</h2>
        </div>
        <p className="meta">Anything else? Email <a href="mailto:hi@videogen.ai" style={{color:'var(--accent)'}}>hi@videogen.ai</a> — a human gets back same-day.</p>
      </div>
      <div className="faq-list" data-reveal>
        {FAQ.map(([q, a], i) => (
          <div key={i} className="faq-item" data-open={open === i ? '1' : '0'}
               onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span>{q}</span>
              <span className="toggle">
                <svg viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
              </span>
            </div>
            <div className="faq-a"><div><p>{a}</p></div></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="wrap" data-screen-label="final-cta">
      <div className="final" data-reveal>
        <div className="eyebrow" style={{color:'rgba(10,10,10,.6)'}}>
          <span className="dot" style={{background:'var(--accent-ink)'}}></span>Get Early Access — free during beta
        </div>
        <h2>Ship video, everywhere,<br/>before your coffee's cold.</h2>
        <p>Beta seats are limited. Pricing locks in for life if you join now.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',justifyContent:'center'}}>
          <a className="btn btn-primary btn-lg" href={BILLING_URL}>Get Early Access<Arrow/></a>
          <a className="btn btn-ghost btn-lg" href="#demo">Watch the demo</a>
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer>
      <div className="wrap foot-row">
        <div className="brand">
          <span className="brand-mark"><img src="logo.png" alt=""/></span>
          VideoGen AI
        </div>
        <div className="foot-links">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Status</a>
          <a href="#">Changelog</a>
          <a href="mailto:hi@videogen.ai">hi@videogen.ai</a>
        </div>
        <div>© 2026 VideoGen AI</div>
      </div>
    </footer>
  );
}

// ── App root ────────────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [yearly, setYearly] = useState(true);
  useReveal();

  // Apply accent live
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  return (
    <>
      <Nav/>
      <Hero headline={t.headline} tail={t.headlineTail} rotating={t.rotatingPlatforms}/>
      <Problem/>
      <PlatformMarquee/>
      <HowItWorks/>
      <NotOneClick/>
      <Tiers/>
      <Features/>
      <Samples/>
      <Pricing yearly={yearly} setYearly={setYearly}/>
      <FAQSection/>
      <FinalCTA/>
      <Foot/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor label="Accent" value={t.accent}
            options={['#D7FF3F','#FF5C39','#7C5CFF','#00E0C7','#F2F0EA']}
            onChange={(v)=>setTweak('accent', v)} />
        </TweakSection>
        <TweakSection label="Hero copy">
          <TweakText label="Headline (line 1)" value={t.headline}
            onChange={(v)=>setTweak('headline', v)} />
          <TweakText label="Headline (tail)" value={t.headlineTail}
            onChange={(v)=>setTweak('headlineTail', v)} />
          <TweakToggle label="Rotate platforms" value={t.rotatingPlatforms}
            onChange={(v)=>setTweak('rotatingPlatforms', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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