// Moviio — AI marketing studio cinematic landing
const { useState, useEffect, useRef } = React;
const { motion } = window.Motion;

// ── Inline icons
const ArrowUpRight = ({ className = 'h-5 w-5' }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17L17 7" /><path d="M7 7h10v10" />
  </svg>
);
const Play = ({ className = 'h-4 w-4' }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4" /></svg>
);
// Service icons (Material outline)
const ReelIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M4 6.47 5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.89-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4Z" /></svg>
);
const VideoCamIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></svg>
);
const WebIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V8h14v10z" /></svg>
);
const TemplateIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 5h-4V5h4v3zm-6-3v6H5V5h8zm-8 8h4v6H5v-6zm6 6v-6h8v6h-8z" /></svg>
);
const BoltIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M7 2v11h3v9l7-12h-4l3-8z" /></svg>
);
const HeartIcon = ({ cls = 'h-6 w-6 text-white' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg>
);
const PriceIcon = ({ cls = 'h-7 w-7' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20.59 13.41 13 21l-9-9V4h8l8.59 8.59a2 2 0 0 1 0 2.82z" /><circle cx="7.5" cy="7.5" r="1.5" />
  </svg>
);
const SparkIcon = ({ cls = 'h-7 w-7' }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
  </svg>
);

// ── FadingVideo (HLS + rAF crossfade)
function FadingVideo({ src, className, style }) {
  const ref = useRef(null);
  const rafRef = useRef(null);
  const fadingOutRef = useRef(false);
  const FADE_MS = 500;
  const FADE_OUT_LEAD = 0.55;

  const fadeTo = (target, duration) => {
    const v = ref.current; if (!v) return;
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    const start = parseFloat(v.style.opacity || '0');
    const t0 = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - t0) / duration);
      v.style.opacity = String(start + (target - start) * t);
      if (t < 1) rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
  };

  useEffect(() => {
    const v = ref.current; if (!v) return;
    v.style.opacity = '0';
    let hls = null;
    const isHls = /\.m3u8(\?|$)/i.test(src);
    if (isHls && window.Hls && window.Hls.isSupported()) {
      hls = new window.Hls();
      hls.loadSource(src);
      hls.attachMedia(v);
    } else {
      v.src = src;
    }
    const onLoaded = () => { v.style.opacity = '0'; v.play().catch(() => {}); fadeTo(1, FADE_MS); };
    const onTime = () => {
      if (fadingOutRef.current || !isFinite(v.duration)) return;
      const remain = v.duration - v.currentTime;
      if (remain <= FADE_OUT_LEAD && remain > 0) {
        fadingOutRef.current = true;
        fadeTo(0, FADE_OUT_LEAD * 1000);
      }
    };
    const onEnded = () => {
      v.style.opacity = '0';
      setTimeout(() => {
        v.currentTime = 0; v.play().catch(() => {});
        fadingOutRef.current = false; fadeTo(1, FADE_MS);
      }, 100);
    };
    v.addEventListener('loadeddata', onLoaded);
    v.addEventListener('timeupdate', onTime);
    v.addEventListener('ended', onEnded);
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      if (hls) hls.destroy();
      v.removeEventListener('loadeddata', onLoaded);
      v.removeEventListener('timeupdate', onTime);
      v.removeEventListener('ended', onEnded);
    };
  }, [src]);

  return (
    <video ref={ref} autoPlay muted playsInline preload="auto"
      className={className} style={{ opacity: 0, ...style }} />
  );
}

// ── BlurText word-by-word
function BlurText({ text, className }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.1 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const words = text.split(' ');
  return (
    <p ref={ref} className={className} style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', columnGap: '0.55em', rowGap: '0.05em' }}>
      {words.map((w, i) => (
        <motion.span key={i}
          style={{ display: 'inline-block' }}
          initial={{ filter: 'blur(10px)', opacity: 0, y: 50 }}
          animate={visible ? {
            filter: ['blur(10px)', 'blur(5px)', 'blur(0px)'],
            opacity: [0, 0.5, 1], y: [50, -5, 0],
          } : {}}
          transition={{ duration: 0.7, times: [0, 0.5, 1], ease: 'easeOut', delay: (i * 100) / 1000 }}>
          {w}
        </motion.span>
      ))}
    </p>
  );
}

const fadeUp = (delay = 0) => ({
  initial: { filter: 'blur(10px)', opacity: 0, y: 20 },
  animate: { filter: 'blur(0px)', opacity: 1, y: 0 },
  transition: { duration: 0.8, ease: 'easeOut', delay },
});

// ── Navbar
function Navbar() {
  return (
    <div className="fixed top-4 left-0 right-0 z-50 px-6 lg:px-12 flex items-center justify-between">
      <motion.div {...fadeUp(0.1)}
        className="liquid-glass logo-pill h-12 px-5 flex items-center justify-center rounded-full cursor-pointer">
        <span className="logo-sheen" />
        <span className="font-heading italic text-2xl leading-none -mt-0.5 inline-flex items-baseline">
          <span className="logo-word">Moviio</span>
          <span className="logo-mark" aria-hidden="true" />
        </span>
      </motion.div>

      <motion.nav {...fadeUp(0.2)}
        className="hidden md:flex liquid-glass items-center gap-1 px-1.5 py-1.5 rounded-full">
        {[
          { l: 'Work',    href: '#reels' },
          { l: 'Concept', href: '#concept' },
          { l: 'Pricing', href: '#packages' },
          { l: 'About',   href: '#versus' },
        ].map((item, i) => (
          <a key={i} href={item.href}
            className="px-3 py-2 text-sm font-medium text-white/85 hover:text-white font-body transition-colors">
            {item.l}
          </a>
        ))}
        <a href="#cta"
          className="ml-2 bg-white text-black rounded-full px-4 py-2 text-sm font-medium font-body whitespace-nowrap inline-flex items-center gap-1 hover:scale-[1.04] transition-transform">
          Get a Quote <ArrowUpRight className="h-4 w-4" />
        </a>
      </motion.nav>

      <div className="md:invisible">
        <button className="liquid-glass-strong rounded-full px-3 py-2 text-xs text-white">Menu</button>
      </div>
    </div>
  );
}

// ── Hero
function Hero() {
  return (
    <section className="relative w-full h-screen overflow-hidden bg-black">
      <FadingVideo
        src="https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8"
        className="absolute left-1/2 top-0 -translate-x-1/2 object-cover object-center z-0"
        style={{ width: '140%', height: '140%' }}
      />
      <div className="absolute inset-0 z-[1] pointer-events-none"
        style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0.95) 95%, #000 100%)' }} />

      <div className="relative z-10 w-full h-full flex flex-col">
        <Navbar />
        <div className="flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center">
          <motion.div {...fadeUp(0.4)}
            className="liquid-glass rounded-full inline-flex items-center gap-2 pl-1 pr-5 py-1">
            <span className="bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body whitespace-nowrap">New</span>
            <span className="text-sm text-white/90 font-body whitespace-nowrap">3 AI Reels from $149 · 48hr</span>
          </motion.div>

          <div className="mt-6">
            <BlurText text="AI Marketing Videos & Websites for Small Business"
              className="text-5xl md:text-6xl lg:text-[5rem] font-heading italic text-white leading-[0.85] max-w-4xl mx-auto"
            />
          </div>

          <motion.p {...fadeUp(0.8)}
            className="mt-5 text-base md:text-lg text-white/90 max-w-2xl font-body font-light leading-snug">
            Realistic AI reels, commercial-style videos, branding templates, and clean websites — to help your business sell online without filming, actors, or agency fees.
          </motion.p>

          <motion.div {...fadeUp(1.1)}
            className="flex items-center gap-5 mt-7">
            <button className="liquid-glass-strong rounded-full px-5 py-3 text-sm font-medium text-white inline-flex items-center gap-2 whitespace-nowrap">
              View Packages <ArrowUpRight className="h-5 w-5" />
            </button>
            <button className="text-sm font-medium text-white inline-flex items-center gap-2 whitespace-nowrap">
              Watch a Reel <Play className="h-4 w-4" />
            </button>
          </motion.div>

          <motion.div {...fadeUp(1.3)}
            className="flex items-stretch gap-4 mt-10">
            <div className="p-5 w-[220px] rounded-[1.25rem] text-left"
              style={{
                background: 'rgba(255,255,255,0.04)',
                backdropFilter: 'blur(20px)',
                WebkitBackdropFilter: 'blur(20px)',
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06)',
              }}>
              <PriceIcon cls="h-7 w-7 text-white" />
              <div className="text-4xl font-heading italic text-white tracking-[-1px] leading-none mt-3">$149+</div>
              <div className="text-xs text-white/80 font-body font-light mt-2">3-Reel Pack starts here</div>
            </div>
            <div className="p-5 w-[220px] rounded-[1.25rem] text-left"
              style={{
                background: 'rgba(255,255,255,0.04)',
                backdropFilter: 'blur(20px)',
                WebkitBackdropFilter: 'blur(20px)',
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06)',
              }}>
              <SparkIcon cls="h-7 w-7 text-white" />
              <div className="text-4xl font-heading italic text-white tracking-[-1px] leading-none mt-3">48 hr</div>
              <div className="text-xs text-white/80 font-body font-light mt-2">Average turnaround</div>
            </div>
          </motion.div>
        </div>

      </div>
    </section>
  );
}

// ── ServicesGrid: 4 boxes "What we create" — scales up on scroll
function ServicesGrid() {
  const cards = [
    { icon: <ReelIcon />, title: 'AI Reels', body: 'Up to 15s of realistic AI footage. Music, captions, ready to post on Instagram, TikTok, or Facebook.', tag: 'from $49 per reel' },
    { icon: <VideoCamIcon />, title: 'Commercial Videos', body: '30s–60s brand films that feel like a TV ad. Script, voiceover, and editing included.', tag: 'from $250' },
    { icon: <WebIcon />, title: 'Websites', body: 'Mobile-friendly landing pages and full multi-page sites with clear messaging, motion and contact forms.', tag: 'from $499' },
    { icon: <TemplateIcon />, title: 'Branding Templates', body: 'Reusable social and story templates so every weekly post stays on brand.', tag: 'from $99' },
  ];
  return (
    <section id="services" data-section="services" className="relative w-full bg-black py-32 md:py-40 px-6 md:px-16 lg:px-24 overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="text-sm font-body text-white/60 mb-5">// What we create</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5.5rem] leading-[0.95] max-w-4xl"
          style={{ letterSpacing: '-3px' }}>
          Four ways to put your<br />business on screen.
        </h2>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-16" data-services-grid>
          {cards.map((c) => (
            <div key={c.title} data-service-card
              className="liquid-glass rounded-[1.5rem] p-6 min-h-[320px] flex flex-col">
              <div className="flex items-start justify-between gap-4">
                <div className="liquid-glass rounded-[0.75rem] w-11 h-11 flex items-center justify-center shrink-0">
                  {c.icon}
                </div>
                <span className="liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap">{c.tag}</span>
              </div>
              <div className="flex-1" />
              <div className="mt-6">
                <h3 className="font-heading italic text-white text-3xl md:text-4xl leading-none" style={{ letterSpacing: '-1px' }}>{c.title}</h3>
                <p className="mt-3 text-sm text-white/85 font-body font-light leading-snug max-w-[32ch]">{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── ScalingShowcase: middle video that scales bigger as you scroll
function ScalingShowcase() {
  return (
    <section id="showcase" data-section="showcase" className="relative w-full overflow-hidden bg-black py-24">
      <div className="max-w-7xl mx-auto px-6 md:px-16 lg:px-24 mb-16 text-center">
        <div className="text-sm font-body text-white/60 mb-4">// What it looks like</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5.5rem] leading-[0.95] max-w-3xl mx-auto"
          style={{ letterSpacing: '-3px' }}>
          Cinematic. Fast.<br />Affordable.
        </h2>
        <p className="mt-5 text-base md:text-lg text-white/80 max-w-xl mx-auto font-body font-light">
          Real footage looks expensive because it is. Moviio gives you the same polish — generated, edited, and delivered in days.
        </p>
      </div>

      {/* The video: full-bleed background, pinned + scaled by GSAP */}
      <div data-showcase-pin className="relative w-full" style={{ height: '160vh' }}>
        <div data-showcase-sticky className="sticky top-0 w-full h-screen overflow-hidden">
          <div data-showcase-frame
            className="absolute inset-0 scale-stage overflow-hidden">
            <FadingVideo
              src="https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8"
              className="absolute inset-0 w-full h-full object-cover"
              style={{ width: '120%', height: '120%', left: '-10%', top: '-10%' }}
            />
          </div>
          {/* edge fades so the motion blends into the surrounding black */}
          <div className="absolute inset-0 pointer-events-none z-[2]"
            style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, #000 100%)' }} />
          {/* corner caption */}
          <div className="absolute bottom-8 left-8 z-10 px-3.5 py-1.5 text-xs font-body text-white rounded-full"
            style={{
              background: 'rgba(0,0,0,0.5)',
              backdropFilter: 'blur(20px)',
              WebkitBackdropFilter: 'blur(20px)',
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)',
            }}>
            Sample · 30s commercial for a local cafe
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Packages
function Packages() {
  const packs = [
    // payUrl: Stripe Payment Link — leave empty/null to route through the brief form instead
    { title: '3-Reel Pack', price: 'from $149', best: false,
      eyebrow: 'Content add-on',
      items: ['3× 15s AI reels', 'Captions + music', 'Square + vertical', '48-hour delivery'],
      cta: 'Order pack',
      // Stripe link saved — send manually after brief: https://buy.stripe.com/4gM5kF30c8pY9E9aSie7m02
      payUrl: null },
    { title: 'Commercial Video', price: 'from $250', best: false,
      eyebrow: 'Content add-on',
      items: ['30–60s brand film', 'Script + voiceover', 'Music + edit', 'Website-ready master'],
      cta: 'Brief us',
      payUrl: null /* needs scoping → form */ },
    { title: 'Spark', price: 'from $499', best: false,
      eyebrow: 'Website · 1 page',
      items: ['Single-page landing site', 'Cinematic motion + brand visuals', 'Contact form', '1 round of revisions'],
      cta: 'Buy Spark',
      // Stripe link saved — send manually after brief: https://buy.stripe.com/6oU6oJfMYgWu2bH1hIe7m01
      payUrl: null },
    { title: 'Launch Combo', price: 'from $899', best: true,
      eyebrow: 'Best value',
      items: ['Spark landing site', '3× AI reels', '1× short commercial', 'Social templates + captions'],
      cta: 'Buy combo',
      // Stripe link saved — send manually after brief: https://buy.stripe.com/14A3cx1W835EeYt2lMe7m00
      payUrl: null },
    { title: 'Studio', price: 'from $2,499', best: false,
      eyebrow: 'Website · 5 pages',
      items: ['5-page business site', 'Stripe / Square checkout embedded', '3× reels included', 'Basic SEO + analytics'],
      cta: 'Brief us',
      payUrl: null /* needs scoping → form */ },
    { title: 'Brand World', price: 'from $4,999', best: false,
      eyebrow: 'Full custom',
      items: ['7+ pages · payments + booking', 'Reels pack + branding templates', '60 days of edits included', 'Ongoing partner option'],
      cta: 'Talk to us',
      payUrl: null /* needs scoping → form */ },
  ];
  return (
    <section id="packages" data-section="packages" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      {/* Live video background — glass cards sit on top of this motion */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <FadingVideo
          src="https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8"
          className="absolute inset-0 w-full h-full object-cover"
          style={{ width: '110%', height: '110%', left: '-5%', top: '-5%' }}
        />
        {/* long top + bottom fade so the motion bleeds slowly out of the section above and into the one below */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.92) 8%, rgba(0,0,0,0.7) 18%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 82%, rgba(0,0,0,0.92) 92%, #000 100%)' }} />
        {/* left + right edge fade so the motion dissolves into the page sides */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to right, #000 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, #000 100%)' }} />
      </div>
      <div className="relative max-w-7xl mx-auto">
        <div className="text-sm font-body text-white/60 mb-5">// Packages</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5.5rem] leading-[0.95] max-w-4xl"
          style={{ letterSpacing: '-3px' }}>
          Pick a pack.<br />Get back to work.
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-16" data-packs>
          {packs.map((p) => (
            <div key={p.title} data-pack
              className={`${p.best ? 'liquid-glass-strong' : 'liquid-glass'} rounded-[1.5rem] p-7 flex flex-col relative`}>
              {p.best && (
                <span className="self-start mb-3 bg-white text-black text-[10px] font-body font-semibold tracking-[0.18em] uppercase px-3 py-1 rounded-full">
                  Most Picked
                </span>
              )}
              <div className="text-xs text-white/60 font-body uppercase tracking-[0.18em]">{p.eyebrow || 'Package'}</div>
              <h3 className="font-heading italic text-white text-3xl md:text-4xl mt-2 leading-none" style={{ letterSpacing: '-1px' }}>{p.title}</h3>
              <div className="font-heading italic text-white/80 text-2xl mt-1">{p.price}</div>
              <ul className="mt-6 flex flex-col gap-2 text-sm text-white/85 font-body font-light flex-1">
                {p.items.map((it) => (
                  <li key={it} className="flex gap-2 items-start"><span className="text-white/40 mt-1">—</span><span>{it}</span></li>
                ))}
              </ul>
              <a
                href={p.payUrl ? p.payUrl : '#cta'}
                target={p.payUrl ? '_blank' : undefined}
                rel={p.payUrl ? 'noopener noreferrer' : undefined}
                className={`${p.best ? 'bg-white text-black' : 'liquid-glass text-white'} rounded-full mt-7 px-4 py-3 text-sm font-medium font-body inline-flex items-center justify-center gap-2 hover:scale-[1.03] transition-transform`}>
                {p.cta} <ArrowUpRight className="h-4 w-4" />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Why / Who it's for combined
function WhyAndWho() {
  const whys = [
    { icon: <BoltIcon />, title: 'No filming required', body: 'Skip the shoot day. Skip the actors. Skip the kit.' },
    { icon: <SparkIcon cls="h-6 w-6 text-white" />, title: 'Faster than a traditional shoot', body: 'Reels in 48 hours. Sites in a week.' },
    { icon: <HeartIcon />, title: 'Built for small budgets', body: 'Starts at $49 per reel. No surprise invoices.' },
    { icon: <PriceIcon cls="h-6 w-6 text-white" />, title: 'Ready for socials', body: 'Vertical, square, captioned, exported.' },
  ];
  return (
    <section id="why" data-section="why" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      {/* Bubble motion — focused behind the cards on the right, deep fade into black on every side */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <FadingVideo
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4"
          className="absolute object-cover"
          style={{
            top: '50%', left: '72%', transform: 'translate(-50%, -50%)',
            width: '70%', height: '110%',
            mixBlendMode: 'screen', opacity: 0.75,
            WebkitMaskImage: 'radial-gradient(ellipse 55% 60% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 65%, transparent 95%)',
            maskImage: 'radial-gradient(ellipse 55% 60% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 65%, transparent 95%)',
          }}
        />
        {/* deep top fade so it blends seamlessly into the section above (no hard edge) */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.85) 12%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 88%, #000 100%)' }} />
      </div>
      <div className="relative z-10 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
        <div>
          <div className="text-sm font-body text-white/60 mb-5">// Why Moviio</div>
          <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[4.5rem] leading-[0.95]"
            style={{ letterSpacing: '-3px' }}>
            The polish of an<br />agency. The price of<br /><em className="text-white/60">a takeaway.</em>
          </h2>
          <p className="mt-6 text-base text-white/80 max-w-md font-body font-light">
            Perfect for small businesses, local services, tradies, product brands, real estate, medical, care services, and professional businesses.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-md ml-auto">
          {whys.map((w) => (
            <div key={w.title} data-why-card
              className="liquid-glass rounded-[1rem] p-4">
              <div className="liquid-glass rounded-[0.6rem] w-8 h-8 flex items-center justify-center mb-3">{React.cloneElement(w.icon, { cls: 'h-4 w-4 text-white', className: 'h-4 w-4' })}</div>
              <h3 className="font-heading italic text-white text-lg leading-none" style={{ letterSpacing: '-0.3px' }}>{w.title}</h3>
              <p className="mt-1.5 text-xs text-white/80 font-body font-light leading-snug">{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Stand out — why a real website beats Linktree / Square / templates
function StandOut() {
  const stacks = [
    {
      name: 'Linktree',
      tagline: 'A list of links.',
      pros: ['Free', 'Set up in 5 min', 'One bio URL'],
      cons: ['Looks generic', 'No SEO', 'You don\'t own it'],
      verdict: 'A bio-link bridge — not a brand.',
      tone: 'muted',
    },
    {
      name: 'Square Online',
      tagline: 'A template + a checkout.',
      pros: ['Plugs into Square POS', 'Takes payments instantly'],
      cons: ['Looks like every Square site', 'Templated', 'Monthly fee + cut'],
      verdict: 'Fine for a till. Not for a brand.',
      tone: 'muted',
    },
    {
      name: 'A real Moviio site',
      tagline: 'A first impression that fits your brand.',
      pros: [
        'Total design control',
        'Cinematic motion',
        'Owns SEO',
        'You own everything',
        'One simple build — we handle the lot',
      ],
      cons: [],
      verdict: 'A brand that arrives, not a page that loads.',
      tone: 'highlight',
    },
  ];

  return (
    <section id="standout" data-section="standout" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">

      {/* Floating bubble accents — 3 around the section, only the highlights show through */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        {/* top-left bubble — large, behind the hook */}
        <FadingVideo
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4"
          className="absolute object-cover"
          style={{
            top: '-8%', left: '-12%',
            width: '46%', aspectRatio: '1 / 1',
            mixBlendMode: 'screen',
            opacity: 0.6,
            WebkitMaskImage: 'radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,0.4) 60%, transparent 90%)',
            maskImage: 'radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,0.4) 60%, transparent 90%)',
          }}
        />
        {/* middle-right bubble — medium, behind the comparison cards */}
        <FadingVideo
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4"
          className="absolute object-cover"
          style={{
            top: '38%', right: '-14%',
            width: '40%', aspectRatio: '1 / 1',
            mixBlendMode: 'screen',
            opacity: 0.55,
            WebkitMaskImage: 'radial-gradient(circle at 50% 50%, #000 25%, rgba(0,0,0,0.4) 60%, transparent 90%)',
            maskImage: 'radial-gradient(circle at 50% 50%, #000 25%, rgba(0,0,0,0.4) 60%, transparent 90%)',
          }}
        />
        {/* bottom-left bubble — smaller, behind the closing */}
        <FadingVideo
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4"
          className="absolute object-cover"
          style={{
            bottom: '-6%', left: '8%',
            width: '32%', aspectRatio: '1 / 1',
            mixBlendMode: 'screen',
            opacity: 0.5,
            WebkitMaskImage: 'radial-gradient(circle at 50% 50%, #000 25%, rgba(0,0,0,0.35) 60%, transparent 90%)',
            maskImage: 'radial-gradient(circle at 50% 50%, #000 25%, rgba(0,0,0,0.35) 60%, transparent 90%)',
          }}
        />
        {/* gentle top + bottom dissolve so the bubbles don't fight the section borders */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, #000 100%)' }} />
      </div>

      {/* Hook */}
      <div className="relative z-10 max-w-5xl mx-auto text-center">
        <div className="text-sm font-body text-white/60 mb-5">// First impressions</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[6rem] leading-[0.95]"
          style={{ letterSpacing: '-3px' }}>
          Stand out,<br /><em className="text-white/60">or scroll past.</em>
        </h2>
      </div>

      {/* Stat block — the 1.6-second hook lifted out of the paragraph */}
      <div className="relative z-10 max-w-4xl mx-auto mt-16 rounded-[1.5rem] p-8 md:p-10 grid grid-cols-1 md:grid-cols-[auto,1fr] gap-8 md:gap-12 items-center"
        style={{ background: 'rgba(255,255,255,0.04)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06)' }}>
        <div className="text-center md:text-left">
          <div className="font-heading italic text-white text-[7rem] md:text-[10rem] leading-none tracking-[-6px]">
            1.6<span className="text-white/45 text-5xl md:text-7xl">s</span>
          </div>
        </div>
        <div className="text-center md:text-left">
          <div className="text-xs uppercase tracking-[0.28em] text-white/55 font-body mb-3">All you get</div>
          <p className="font-heading italic text-white text-2xl md:text-3xl leading-tight" style={{ letterSpacing: '-0.5px' }}>
            That's the time a customer gives your page before they stay or scroll.
          </p>
          <p className="mt-3 text-base text-white/70 font-body font-light leading-relaxed">
            You're not just up against the business next door. You're up against every other business in the feed selling the same thing.
          </p>
        </div>
      </div>

      <div className="relative z-10 max-w-3xl mx-auto text-center mt-12">
        <p className="font-heading italic text-white text-3xl md:text-4xl leading-snug" style={{ letterSpacing: '-1px' }}>
          However small the business —<br />
          <em className="text-white/60">blending in is losing.</em>
        </p>
      </div>

      {/* Three-way comparison — cleaner card system */}
      <div className="relative z-10 max-w-6xl mx-auto mt-20 grid grid-cols-1 md:grid-cols-3 gap-5">
        {stacks.map((s) => {
          const isHighlight = s.tone === 'highlight';
          return (
            <div key={s.name}
              className={`relative rounded-[1.5rem] p-7 md:p-8 flex flex-col ${isHighlight ? 'liquid-glass-strong' : ''}`}
              style={{
                ...(!isHighlight && {
                  background: 'rgba(255,255,255,0.025)',
                  boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)',
                }),
                ...(isHighlight && {
                  transform: 'scale(1.03)',
                }),
              }}>
              {isHighlight && (
                <span className="self-start mb-4 bg-white text-black text-[10px] font-body font-semibold tracking-[0.18em] uppercase px-3 py-1 rounded-full">
                  Built by Moviio
                </span>
              )}

              <h3 className={`font-heading italic leading-none ${isHighlight ? 'text-white text-4xl md:text-5xl' : 'text-white/75 text-3xl md:text-[2.25rem]'}`}
                style={{ letterSpacing: '-1.5px' }}>
                {s.name}
              </h3>
              <p className={`mt-2 text-sm font-body italic ${isHighlight ? 'text-white/80' : 'text-white/45'}`}>
                {s.tagline}
              </p>

              <div className="my-6 h-px" style={{ background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent)' }} />

              {/* Pros — green check rows */}
              <ul className="flex flex-col gap-2.5 text-sm font-body">
                {s.pros.map((p) => (
                  <li key={p} className="flex gap-2.5 items-start">
                    <span className="text-emerald-400 text-base leading-tight shrink-0 mt-0.5">✓</span>
                    <span className={isHighlight ? 'text-white/95' : 'text-white/70'}>{p}</span>
                  </li>
                ))}
              </ul>

              {/* Cons — red dash rows */}
              <ul className="flex flex-col gap-2.5 text-sm font-body mt-3">
                {s.cons.map((c) => (
                  <li key={c} className="flex gap-2.5 items-start">
                    <span className="text-rose-400/70 text-base leading-tight shrink-0 mt-0.5">✕</span>
                    <span className={isHighlight ? 'text-white/75' : 'text-white/45'}>{c}</span>
                  </li>
                ))}
              </ul>

              <div className="flex-1" />

              {/* Verdict */}
              <div className={`mt-7 pt-5 border-t font-heading italic text-base md:text-lg leading-snug ${isHighlight ? 'border-white/15 text-white' : 'border-white/10 text-white/55'}`}
                style={{ letterSpacing: '-0.3px' }}>
                {s.verdict}
              </div>
            </div>
          );
        })}
      </div>

      {/* Price reality — apples-to-apples for the single-page landing tier */}
      <div className="relative z-10 max-w-6xl mx-auto mt-20">
        <div className="text-center mb-12">
          <div className="text-xs uppercase tracking-[0.28em] text-white/55 font-body mb-4">What it really costs · 1-page landing</div>
          <h3 className="font-heading italic text-white text-4xl md:text-5xl lg:text-[3.75rem] leading-[1.05]"
            style={{ letterSpacing: '-2px' }}>
            Stop <em className="text-white/55">renting</em> your landing page.<br />Pay once. Own it forever.
          </h3>
          <p className="mt-7 text-base md:text-lg text-white/75 max-w-2xl mx-auto font-body font-light leading-relaxed">
            Apples-to-apples on a <strong className="font-medium text-white">single-page landing site</strong>.
            Linktree and Wix keep billing every month for as long as you exist.
            Moviio is built once, paid once, owned forever.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {[
            {
              name: 'Linktree',
              type: 'subscription',
              fee: '$15 / month',
              note: 'Pro tier (the one without their logo)',
              total: '$900',
              forever: 'Keeps charging year 6, 7, 8…',
              tone: 'muted',
            },
            {
              name: 'Wix / Squarespace',
              type: 'subscription',
              fee: '$16 / month',
              note: 'Templates only · no custom design',
              total: '$960',
              forever: 'Keeps charging year 6, 7, 8…',
              tone: 'muted',
            },
            {
              name: 'Moviio Spark',
              type: 'one-time',
              fee: '$499 once',
              note: 'Plus ~$20 / year for the domain',
              total: '$599',
              forever: 'Yours. No more invoices.',
              tone: 'highlight',
            },
          ].map((p) => {
            const isHighlight = p.tone === 'highlight';
            return (
              <div key={p.name}
                className={`relative rounded-[1.5rem] p-7 md:p-8 ${isHighlight ? 'liquid-glass-strong' : ''}`}
                style={!isHighlight ? {
                  background: 'rgba(255,255,255,0.025)',
                  boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)',
                } : { transform: 'scale(1.03)' }}>
                {isHighlight && (
                  <span className="self-start mb-4 bg-white text-black text-[10px] font-body font-semibold tracking-[0.18em] uppercase px-3 py-1 rounded-full">
                    The cheapest by year 4
                  </span>
                )}

                <div className={`text-[10px] uppercase tracking-[0.22em] font-body mb-2 ${isHighlight ? 'text-emerald-400/85' : 'text-white/40'}`}>
                  {p.type === 'one-time' ? 'One-time payment' : 'Monthly subscription'}
                </div>
                <h4 className={`font-heading italic leading-none ${isHighlight ? 'text-white text-4xl md:text-5xl' : 'text-white/80 text-3xl md:text-[2.25rem]'}`}
                  style={{ letterSpacing: '-1.5px' }}>
                  {p.name}
                </h4>
                <p className={`mt-3 text-base font-body ${isHighlight ? 'text-white/90' : 'text-white/60'}`}>
                  {p.fee}
                </p>
                <p className={`mt-1 text-xs font-body italic ${isHighlight ? 'text-white/65' : 'text-white/40'}`}>
                  {p.note}
                </p>

                <div className="my-6 h-px" style={{ background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent)' }} />

                <div className={`text-[10px] uppercase tracking-[0.22em] font-body mb-2 ${isHighlight ? 'text-white/65' : 'text-white/40'}`}>
                  Cost over 5 years
                </div>
                <div className={`font-heading italic leading-none tracking-[-2px] ${isHighlight ? 'text-white text-6xl md:text-[5rem]' : 'text-white/85 text-5xl md:text-6xl'}`}>
                  {p.total}
                </div>
                <p className={`mt-3 text-sm font-body font-light leading-snug ${isHighlight ? 'text-white/85' : 'text-rose-300/65'}`}>
                  {p.forever}
                </p>
              </div>
            );
          })}
        </div>

        <p className="mt-10 text-center font-heading italic text-white text-2xl md:text-3xl leading-snug max-w-3xl mx-auto" style={{ letterSpacing: '-0.5px' }}>
          By year four, Moviio Spark is already <em className="text-emerald-400/90">cheaper than Linktree or Wix</em>.<br className="hidden md:block" />
          <span className="text-white/65">And it doesn't look like a template.</span>
        </p>
      </div>

      {/* Scale-up tier ladder — "we can do more, way under agency prices" */}
      <div className="relative z-10 max-w-6xl mx-auto mt-24">
        <div className="text-center mb-12">
          <div className="text-xs uppercase tracking-[0.28em] text-white/55 font-body mb-4">When you outgrow a landing page</div>
          <h3 className="font-heading italic text-white text-4xl md:text-5xl lg:text-[3.75rem] leading-[1.05]"
            style={{ letterSpacing: '-2px' }}>
            Designer-built websites,<br /><em className="text-white/55">at a fraction of agency prices.</em>
          </h3>
          <p className="mt-7 text-base md:text-lg text-white/75 max-w-2xl mx-auto font-body font-light leading-relaxed">
            Same scope a marketing agency would quote you <strong className="font-medium text-white">$5,000–$25,000</strong> for —
            we build it for a fraction, owned outright, in a fraction of the time.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {[
            {
              tier: 'Spark',
              scope: 'Single-page landing site',
              detail: 'One scrolling page · brand visuals · contact form · 1 round of revisions · cinematic motion',
              price: '$499',
              vs: 'Agency: $2,500–$5,000',
              accent: false,
            },
            {
              tier: 'Studio',
              scope: '5-page business site',
              detail: 'Home · Services · About · Booking/Shop · Contact · Stripe or Square checkout embedded · 3 reels · SEO',
              price: '$2,499',
              vs: 'Agency: $10,000–$20,000',
              accent: true,
            },
            {
              tier: 'Brand World',
              scope: 'Full custom build',
              detail: '7+ pages · payments · reels pack · branding templates · 60 days of edits · ongoing partner',
              price: 'from $4,999',
              vs: 'Agency: $25,000+',
              accent: false,
            },
          ].map((t) => (
            <div key={t.tier}
              className={`relative rounded-[1.5rem] p-7 md:p-8 flex flex-col ${t.accent ? 'liquid-glass-strong' : ''}`}
              style={!t.accent ? {
                background: 'rgba(255,255,255,0.025)',
                boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
              } : { transform: 'scale(1.03)' }}>
              {t.accent && (
                <span className="self-start mb-4 bg-white text-black text-[10px] font-body font-semibold tracking-[0.18em] uppercase px-3 py-1 rounded-full">
                  Sweet spot
                </span>
              )}
              <div className={`text-[10px] uppercase tracking-[0.22em] font-body mb-2 ${t.accent ? 'text-white/65' : 'text-white/45'}`}>
                Tier
              </div>
              <h4 className={`font-heading italic leading-none ${t.accent ? 'text-white text-4xl md:text-5xl' : 'text-white/85 text-3xl md:text-[2.25rem]'}`}
                style={{ letterSpacing: '-1.5px' }}>
                {t.tier}
              </h4>
              <p className={`mt-2 text-sm font-body italic ${t.accent ? 'text-white/85' : 'text-white/55'}`}>
                {t.scope}
              </p>

              <div className="my-5 h-px" style={{ background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent)' }} />

              <p className={`text-sm font-body font-light leading-relaxed flex-1 ${t.accent ? 'text-white/90' : 'text-white/70'}`}>
                {t.detail}
              </p>

              <div className="mt-6 pt-5 border-t border-white/10">
                <div className={`text-[10px] uppercase tracking-[0.22em] font-body mb-2 ${t.accent ? 'text-emerald-400/85' : 'text-white/45'}`}>
                  Moviio price · one-time
                </div>
                <div className={`font-heading italic leading-none tracking-[-1.5px] ${t.accent ? 'text-white text-5xl md:text-6xl' : 'text-white/85 text-4xl md:text-5xl'}`}>
                  {t.price}
                </div>
                <p className="mt-3 text-xs text-rose-300/65 font-body font-light line-through decoration-white/20 decoration-1">
                  {t.vs}
                </p>
              </div>
            </div>
          ))}
        </div>

        <p className="mt-10 text-center font-heading italic text-white text-2xl md:text-3xl leading-snug max-w-3xl mx-auto" style={{ letterSpacing: '-0.5px' }}>
          The <em className="text-white/65">designer quality</em> of an agency.<br className="hidden md:block" />
          <span className="text-emerald-400/90">A quarter of the price.</span>
        </p>
      </div>

      {/* Clarifier — Linktree & Square aren't websites, they're tools */}
      <div className="relative z-10 max-w-5xl mx-auto mt-24">
        <div className="text-center mb-10">
          <div className="text-xs uppercase tracking-[0.28em] text-white/55 font-body mb-4">To be clear</div>
          <h3 className="font-heading italic text-white text-3xl md:text-5xl leading-tight" style={{ letterSpacing: '-1.5px' }}>
            You only need <em className="text-white/55">one</em> website.<br />The rest are tools.
          </h3>
          <p className="mt-6 text-base md:text-lg text-white/75 max-w-2xl mx-auto font-body font-light leading-relaxed">
            Linktree and Square aren't websites — they're single-job utilities. Your Moviio site is the brand. If you want them, they plug in. If you don't, you don't miss anything.
          </p>
        </div>

        {/* Hierarchy: Moviio big and primary, the other two small underneath as optional plug-ins */}
        <div className="rounded-[1.5rem] p-7 md:p-9 liquid-glass-strong text-center mt-2">
          <span className="inline-block bg-white text-black text-[10px] font-body font-semibold tracking-[0.18em] uppercase px-3 py-1 rounded-full mb-5">
            What you actually need
          </span>
          <h4 className="font-heading italic text-white text-4xl md:text-5xl leading-none" style={{ letterSpacing: '-1.5px' }}>
            A Moviio site
          </h4>
          <p className="mt-4 text-base md:text-lg text-white/85 font-body font-light max-w-xl mx-auto leading-relaxed">
            One real website. Your brand, your story, your first impression — and where every customer ends up no matter how they found you.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-5">
          <div className="rounded-[1.25rem] p-6"
            style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)' }}>
            <div className="text-[10px] uppercase tracking-[0.22em] text-white/45 font-body mb-3">Optional plug-in · for socials</div>
            <h4 className="font-heading italic text-white/85 text-2xl leading-none mb-3" style={{ letterSpacing: '-0.5px' }}>Linktree</h4>
            <p className="text-sm text-white/65 font-body font-light leading-relaxed">
              Useful only as a bio link from Instagram or TikTok — and even then, it just forwards people back to your Moviio site.
            </p>
          </div>
          <div className="rounded-[1.25rem] p-6"
            style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)' }}>
            <div className="text-[10px] uppercase tracking-[0.22em] text-white/45 font-body mb-3">Optional plug-in · for checkout</div>
            <h4 className="font-heading italic text-white/85 text-2xl leading-none mb-3" style={{ letterSpacing: '-0.5px' }}>Square / Stripe</h4>
            <p className="text-sm text-white/65 font-body font-light leading-relaxed">
              Useful only if you sell something online — embed their checkout button inside your Moviio site, no separate store needed.
            </p>
          </div>
        </div>

        <p className="mt-8 text-center text-sm md:text-base text-white/55 font-body font-light leading-relaxed max-w-2xl mx-auto">
          So no — you don't need to buy three things. You need one website. The others only exist to make jobs that website can't do on its own a little easier.
        </p>
      </div>

      {/* Closing punchline */}
      <div className="relative z-10 max-w-4xl mx-auto text-center mt-24">
        <p className="font-heading italic text-white text-4xl md:text-5xl lg:text-[3.75rem] leading-[1.05]" style={{ letterSpacing: '-2px' }}>
          The brands that show up first<br />
          <em className="text-white/60">show up best.</em>
        </p>
        <p className="mt-7 text-base md:text-lg text-white/75 max-w-xl mx-auto font-body font-light leading-relaxed">
          Moviio fits your <strong className="font-medium text-white">brand</strong> to your <strong className="font-medium text-white">first impression</strong> — so the 1.6 seconds someone spends on you actually count.
        </p>
      </div>
    </section>
  );
}

// ── Sample reels — 3D coverflow carousel
function SampleReels() {
  const reels = [
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3CIjqzTsrKEUr8OzFBaYO4ux3nG/hf_20260413_121933_7dfa9582-a536-4a83-9041-ee5aa102ff8c.mp4',
      tag: 'Lifestyle', label: 'Beauty' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3Cfdr00kbZ1hJCLpPQkaicInqxv/hf_20260421_221116_5e4782a0-5148-4832-9362-d17ba238b58b.mp4',
      tag: 'Mobile app', label: 'Mobile app' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_34hPp7fXOu4gkTrKKk2ESqFSfG1/hf_20260413_124545_9ae0acdc-4d0e-4c03-a065-b572bf9c66cf.mp4',
      tag: 'Brand film', label: 'Brand' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3851FRH7py0ic3Lz4LK4KAl7UWy/hf_20260422_001333_36103dd7-9f8a-414f-9b5f-23683f07f703.mp4',
      tag: 'Beauty brand', label: 'Beauty brand' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_2vtxM3DRcDcQIjpmiCpUDF2wcAT/hf_20260413_134418_6d688d5f-a19e-453c-95ac-72829a69a19b.mp4',
      tag: 'Fashion', label: 'Fashion brand' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3B9ysSkvPFs8NnELOqJwjcodGpA/hf_20260411_171147_ace9e350-0b28-4082-9685-3e4ac89288b0.mp4',
      tag: 'Tutorial', label: 'Try the brand' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3Cfdr00kbZ1hJCLpPQkaicInqxv/hf_20260422_003529_ac15e1e6-f5c0-4410-af4b-2179ef19849b.mp4',
      tag: 'Reel', label: 'Reel' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3CIjqzTsrKEUr8OzFBaYO4ux3nG/hf_20260413_131601_e29e767d-fe44-4b42-a751-01b178692f67.mp4',
      tag: 'Reel', label: 'Reel' },
    { src: 'https://d8j0ntlcm91z4.cloudfront.net/user_3B9ysSkvPFs8NnELOqJwjcodGpA/hf_20260410_200105_6b9142b4-9ac9-4c42-9206-84b70c939e52.mp4',
      tag: 'Reel', label: 'Reel' },
  ];

  const [active, setActive] = useState(Math.floor(reels.length / 2));
  const [lightbox, setLightbox] = useState(null);
  const wheelLockRef = useRef(0);

  const next = () => setActive((a) => Math.min(reels.length - 1, a + 1));
  const prev = () => setActive((a) => Math.max(0, a - 1));

  const onWheel = (e) => {
    if (Math.abs(e.deltaX) < Math.abs(e.deltaY)) return; // only horizontal wheel
    e.preventDefault();
    const now = Date.now();
    if (now - wheelLockRef.current < 280) return;
    wheelLockRef.current = now;
    if (e.deltaX > 0) next(); else prev();
  };

  // touch drag
  const dragRef = useRef({ start: 0, active: false });
  const onTouchStart = (e) => { dragRef.current = { start: e.touches[0].clientX, active: true }; };
  const onTouchEnd = (e) => {
    if (!dragRef.current.active) return;
    const dx = e.changedTouches[0].clientX - dragRef.current.start;
    if (Math.abs(dx) > 50) (dx < 0 ? next : prev)();
    dragRef.current.active = false;
  };

  // arrow keys
  useEffect(() => {
    const onKey = (e) => {
      if (lightbox) { if (e.key === 'Escape') setLightbox(null); return; }
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightbox]);

  return (
    <section id="reels" data-section="reels" className="relative w-full bg-black py-32 px-6 md:px-16 overflow-hidden">
      <div className="max-w-7xl mx-auto text-center">
        <div className="text-sm font-body text-white/60 mb-5">// Sample reels</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] max-w-3xl mx-auto"
          style={{ letterSpacing: '-3px' }}>
          Real outputs.<br />Scroll the deck.
        </h2>
        <p className="mt-6 text-base md:text-lg text-white/75 max-w-xl mx-auto font-body font-light leading-relaxed">
          Every reel ships vertical 9:16 — captioned, music-locked, ready for Instagram, TikTok or Facebook.
        </p>
      </div>

      {/* Coverflow stage */}
      <div
        className="relative w-full mt-16 select-none"
        style={{ height: '70vh', perspective: '1600px', overscrollBehaviorX: 'contain', touchAction: 'pan-y' }}
        onWheel={onWheel}
        onTouchStart={onTouchStart}
        onTouchEnd={onTouchEnd}>
        <div className="absolute inset-0 flex items-center justify-center" style={{ transformStyle: 'preserve-3d' }}>
          {reels.map((r, i) => {
            const offset = i - active;
            const abs = Math.abs(offset);
            const sign = Math.sign(offset);
            const x = offset * 230;
            const z = -abs * 220;
            const rotateY = -sign * Math.min(abs, 3) * 38;
            const opacity = abs > 3 ? 0 : 1;
            const scale = abs === 0 ? 1.05 : 0.92 - abs * 0.04;
            return (
              <div key={i} data-reel-card
                onClick={() => {
                  if (i === active) setLightbox(r);
                  else setActive(i);
                }}
                className="absolute liquid-glass rounded-[1.5rem] overflow-hidden cursor-pointer"
                style={{
                  width: 'min(34vw, 320px)',
                  aspectRatio: '9 / 16',
                  transform: `translate3d(${x}px, 0, ${z}px) rotateY(${rotateY}deg) scale(${scale})`,
                  transformStyle: 'preserve-3d',
                  transition: 'transform 0.8s cubic-bezier(.2,.8,.2,1), opacity 0.6s, box-shadow 0.6s',
                  opacity,
                  zIndex: 100 - abs,
                  boxShadow: i === active
                    ? '0 40px 80px -20px rgba(0,0,0,0.85), 0 0 60px -12px rgba(255,255,255,0.18)'
                    : '0 30px 60px -20px rgba(0,0,0,0.7)',
                  pointerEvents: abs > 3 ? 'none' : 'auto',
                }}>
                <FadingVideo
                  src={r.src}
                  className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 pointer-events-none"
                  style={{
                    background: i === active
                      ? 'linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%)'
                      : 'linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.65) 100%)',
                  }} />
                <span className="absolute top-4 left-4 z-10 px-3 py-1 text-[10px] uppercase tracking-[0.2em] text-white rounded-full"
                  style={{ background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18)' }}>
                  {r.tag}
                </span>
                <div className="absolute bottom-4 left-4 right-4 z-10 flex items-end justify-between">
                  <div className="text-sm font-body text-white/95 font-medium">{r.label}</div>
                  {i === active && (
                    <span className="text-[10px] uppercase tracking-[0.2em] text-white/70 font-body">Click to expand →</span>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Side gradients to fade out far cards */}
        <div className="absolute top-0 left-0 bottom-0 w-32 pointer-events-none z-20"
          style={{ background: 'linear-gradient(to right, #000, transparent)' }} />
        <div className="absolute top-0 right-0 bottom-0 w-32 pointer-events-none z-20"
          style={{ background: 'linear-gradient(to left, #000, transparent)' }} />

        {/* Prev / Next buttons */}
        <button onClick={prev} disabled={active === 0}
          className="absolute left-6 md:left-12 top-1/2 -translate-y-1/2 z-30 liquid-glass rounded-full w-12 h-12 flex items-center justify-center text-white text-xl disabled:opacity-30 disabled:cursor-not-allowed">‹</button>
        <button onClick={next} disabled={active === reels.length - 1}
          className="absolute right-6 md:right-12 top-1/2 -translate-y-1/2 z-30 liquid-glass rounded-full w-12 h-12 flex items-center justify-center text-white text-xl disabled:opacity-30 disabled:cursor-not-allowed">›</button>
      </div>

      {/* Dot indicator */}
      <div className="flex items-center justify-center gap-2 mt-10">
        {reels.map((_, i) => (
          <button key={i} onClick={() => setActive(i)}
            className="rounded-full transition-all"
            style={{
              width: i === active ? 28 : 8,
              height: 8,
              background: i === active ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.3)',
            }} />
        ))}
      </div>

      <div className="text-center text-[10px] uppercase tracking-[0.3em] text-white/40 font-body mt-6">
        Scroll · Drag · Arrow keys · Click center to expand
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div className="fixed inset-0 z-[200] bg-black/85 backdrop-blur-md flex items-center justify-center p-6"
          onClick={() => setLightbox(null)}>
          <div className="relative max-w-md w-full liquid-glass-strong rounded-[2rem] overflow-hidden"
            style={{ aspectRatio: '9 / 16' }}
            onClick={(e) => e.stopPropagation()}>
            <FadingVideo src={lightbox.src} className="absolute inset-0 w-full h-full object-cover" />
            <div className="absolute inset-0 pointer-events-none"
              style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%)' }} />
            <span className="absolute top-5 left-5 z-10 px-3 py-1 text-[10px] uppercase tracking-[0.2em] text-white rounded-full"
              style={{ background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' }}>
              {lightbox.tag}
            </span>
            <button onClick={() => setLightbox(null)}
              className="absolute top-4 right-4 z-10 liquid-glass rounded-full w-9 h-9 flex items-center justify-center text-white">✕</button>
            <div className="absolute bottom-5 left-5 z-10 text-sm text-white font-body">{lightbox.label}</div>
          </div>
        </div>
      )}
    </section>
  );
}

// ── Concept lab — stacked-card deck of bespoke creative work
function ConceptDeck() {
  const cards = [
    { type: 'image',
      src: 'https://dqv0cqkoy5oj7.cloudfront.net/user_3CgVhvaX3mV5mOxcjBTK96F6n03/hf_20260422_202551_baf580a8-979d-486e-b0a0-b0b09ee83d6d.png',
      tag: 'Visual art', label: 'Editorial poster' },
    { type: 'image',
      src: 'https://dqv0cqkoy5oj7.cloudfront.net/user_3CIjqzTsrKEUr8OzFBaYO4ux3nG/hf_20260421_144013_38e67ed5-cd38-4509-9855-9c4cc9b32fe6.png',
      tag: 'Social media', label: 'Campaign visual' },
    { type: 'image',
      src: 'https://dqv0cqkoy5oj7.cloudfront.net/user_3Bu5JuVtOLeUf9Tqr2GbRxGUfPp/hf_20260422_132318_ba7fc1f7-9011-47ca-bd0d-af690c4cf934.png',
      tag: 'Brand world', label: 'Mood concept' },
    { type: 'image',
      src: 'https://dqv0cqkoy5oj7.cloudfront.net/user_3CgVhvaX3mV5mOxcjBTK96F6n03/hf_20260422_212327_3e910da2-86aa-4fac-adbe-4215fe2110a5.png',
      tag: 'Editorial', label: 'Print concept' },
    { type: 'image',
      src: 'https://dqv0cqkoy5oj7.cloudfront.net/user_3CgVhvaX3mV5mOxcjBTK96F6n03/hf_20260422_215626_8f188629-c5bb-441a-a0fe-a0be4d976fc6.png',
      tag: 'Concept', label: 'Bespoke concept' },
  ];

  const [lightbox, setLightbox] = useState(null);

  // Esc closes the lightbox
  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightbox]);

  return (
    <section id="concept" data-section="concept" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      {/* Live video background — sits behind the record-player deck */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <FadingVideo
          src="https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8"
          className="absolute inset-0 w-full h-full object-cover"
          style={{ width: '110%', height: '110%', left: '-5%', top: '-5%' }}
        />
        {/* deep top + bottom fade so the motion bleeds out of and back into the surrounding sections */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.92) 8%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.65) 80%, rgba(0,0,0,0.92) 92%, #000 100%)' }} />
        {/* left + right edge fade so the motion dissolves into the page sides */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to right, #000 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, #000 100%)' }} />
      </div>
      <div className="relative z-10 max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div>
          <div className="text-sm font-body text-white/60 mb-5">// Concept lab</div>
          <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95]"
            style={{ letterSpacing: '-3px' }}>
            Bespoke visuals.<br /><em className="text-white/60">Owned forever.</em>
          </h2>
          <p className="mt-7 text-base md:text-lg text-white/80 max-w-md font-body font-light leading-relaxed">
            No stock. No Pinterest dupes. We design original brand worlds, posters, social campaigns and editorial visuals
            built for your business — and you keep them, full rights, no recurring fees.
          </p>

          <ul className="mt-8 space-y-2 text-sm text-white/75 font-body font-light max-w-sm">
            {[
              'Original concepts only — never re-used for another brand',
              'Print-ready, web-ready, social-ready in one delivery',
              'Full commercial rights handed over with the files',
              'Unlimited concept iterations until you say "that\'s the one"',
            ].map((t) => (
              <li key={t} className="flex gap-3 items-start">
                <span className="text-white/40 mt-1">—</span><span>{t}</span>
              </li>
            ))}
          </ul>

          <div className="mt-10 flex items-center gap-5 flex-wrap">
            <span className="text-xs font-body uppercase tracking-[0.25em] text-white/50">
              Tap any card to expand →
            </span>
          </div>
        </div>

        {/* Floating gallery — 4 small cards drifting in 3D, scattered, each clickable */}
        <div className="relative h-[520px] md:h-[640px]"
          style={{ perspective: '2000px' }}>

          {cards.map((c, i) => {
            // Predetermined "scattered but balanced" positions for 5 cards
            const positions = [
              { top: '2%',  left: '0%',   rotate: -9, size: '40%' },   // top-left
              { top: '6%',  left: '40%',  rotate: 5,  size: '36%' },   // top-mid
              { top: '0%',  left: '70%',  rotate: -4, size: '32%' },   // top-right
              { top: '50%', left: '8%',   rotate: 6,  size: '38%' },   // bottom-left
              { top: '48%', left: '52%',  rotate: -7, size: '42%' },   // bottom-right
            ];
            const pos = positions[i % positions.length];
            return (
              <div key={i}
                onClick={() => setLightbox(c)}
                className="absolute cursor-pointer group"
                style={{
                  top: pos.top,
                  left: pos.left,
                  width: pos.size,
                  maxWidth: '280px',
                  aspectRatio: '3 / 4',
                  transform: `rotateZ(${pos.rotate}deg)`,
                  transformStyle: 'preserve-3d',
                  transition: 'transform 0.5s cubic-bezier(.2,.8,.2,1), z-index 0s',
                  zIndex: 10 + i,
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = `rotateZ(0deg) translateY(-12px) scale(1.08)`;
                  e.currentTarget.style.zIndex = '50';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = `rotateZ(${pos.rotate}deg) translateY(0) scale(1)`;
                  e.currentTarget.style.zIndex = `${10 + i}`;
                }}>
                {/* floating wrapper — independent 3D drift per card */}
                <div
                  className="deck-float liquid-glass overflow-hidden rounded-[1.25rem] absolute inset-0"
                  style={{
                    animationDelay: `${-i * 2.3}s`,
                    animationDuration: `${7 + i * 0.8}s`,
                    boxShadow: '0 30px 60px -15px rgba(0,0,0,0.7), 0 0 40px -10px rgba(255,255,255,0.08)',
                  }}>
                  {c.type === 'video' ? (
                    <FadingVideo src={c.src} className="absolute inset-0 w-full h-full object-cover" />
                  ) : (
                    <img src={c.src} alt={c.label} loading="lazy"
                      className="absolute inset-0 w-full h-full object-cover" />
                  )}
                  <div className="absolute inset-0 pointer-events-none"
                    style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%)' }} />
                  <span className="absolute top-3 left-3 z-10 px-2.5 py-0.5 text-[9px] uppercase tracking-[0.2em] text-white rounded-full"
                    style={{ background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18)' }}>
                    {c.tag}
                  </span>
                  <div className="absolute bottom-3 left-3 right-3 z-10">
                    <div className="text-xs font-body text-white/95 font-medium">{c.label}</div>
                  </div>
                  {/* hover ring */}
                  <div className="absolute inset-0 rounded-[1.25rem] pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity"
                    style={{ boxShadow: 'inset 0 0 0 2px rgba(255,255,255,0.4), 0 0 60px -8px rgba(255,255,255,0.35)' }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Lightbox — dramatic 3D rise entrance, much bigger card */}
      {lightbox && (
        <div className="fixed inset-0 z-[200] bg-black/90 backdrop-blur-xl flex items-center justify-center p-4 md:p-8"
          onClick={() => setLightbox(null)}
          style={{ perspective: '2000px' }}>
          <div className="relative w-full max-w-3xl liquid-glass-strong rounded-[2rem] overflow-hidden lightbox-rise"
            style={{
              aspectRatio: '3 / 4',
              maxHeight: '92vh',
              boxShadow: '0 60px 140px -20px rgba(0,0,0,0.95), 0 0 100px -10px rgba(255,255,255,0.15)',
              transformStyle: 'preserve-3d',
            }}
            onClick={(e) => e.stopPropagation()}>
            {lightbox.type === 'video' ? (
              <FadingVideo src={lightbox.src} className="absolute inset-0 w-full h-full object-cover" />
            ) : (
              <img src={lightbox.src} alt={lightbox.label}
                className="absolute inset-0 w-full h-full object-cover" />
            )}
            <div className="absolute inset-0 pointer-events-none"
              style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%)' }} />
            <span className="absolute top-6 left-6 z-10 px-4 py-1.5 text-xs uppercase tracking-[0.25em] text-white rounded-full"
              style={{ background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18)' }}>
              {lightbox.tag}
            </span>
            <button onClick={() => setLightbox(null)}
              className="absolute top-5 right-5 z-10 liquid-glass rounded-full w-11 h-11 flex items-center justify-center text-white text-lg hover:scale-110 transition-transform">✕</button>
            <div className="absolute bottom-6 left-6 right-6 z-10 flex items-end justify-between gap-4">
              <div>
                <div className="font-heading italic text-white text-3xl md:text-4xl leading-none" style={{ letterSpacing: '-1px' }}>
                  {lightbox.label}
                </div>
                <div className="mt-2 text-xs uppercase tracking-[0.22em] text-white/65 font-body">Original concept · made for you · owned forever</div>
              </div>
            </div>
          </div>
          {/* small hint to close */}
          <div className="absolute bottom-5 left-1/2 -translate-x-1/2 text-[10px] uppercase tracking-[0.3em] text-white/40 font-body pointer-events-none">
            Click outside · or press Esc
          </div>
        </div>
      )}
    </section>
  );
}

// ── Why marketing matters (calm section, no video — between motion blocks)
function WhyMarketing() {
  const stats = [
    { k: '93%', v: 'of small business buyers research on Instagram, TikTok or Google before they call.' },
    { k: '5×', v: 'more conversions when a landing page has a short video at the top.' },
    { k: '48 h', v: 'is all you need from brief to a finished reel ready for socials.' },
  ];
  return (
    <section id="marketing" data-section="marketing" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      <div className="max-w-5xl mx-auto text-center">
        <div className="text-sm font-body text-white/60 mb-5">// Why marketing matters now</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95]"
          style={{ letterSpacing: '-3px' }}>
          Your customers are<br /><em className="text-white/60">scrolling right now.</em>
        </h2>
        <p className="mt-7 text-base md:text-lg text-white/80 max-w-2xl mx-auto font-body font-light leading-relaxed">
          People decide who to call, book, or buy from in the first three seconds of a feed.
          If your business doesn't show up — looking polished, sounding clear, and moving like the big brands —
          someone else's does. Moviio gives time-poor owners that same finish, without the crew, cost or timeline of an agency.
        </p>
      </div>

      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-5 mt-20">
        {stats.map((s) => (
          <div key={s.k} className="rounded-[1.25rem] p-7 text-left"
            style={{
              background: 'rgba(255,255,255,0.03)',
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.05)',
            }}>
            <div className="font-heading italic text-white text-6xl leading-none tracking-[-2px]">{s.k}</div>
            <p className="mt-4 text-sm text-white/75 font-body font-light leading-snug">{s.v}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Why Moviio vs traditional agency
function VersusAgency() {
  const rows = [
    { label: 'Time to deliver',     m: '3 reels in 48 hours · site in a week', a: '4–8 weeks per ad · 6–10 weeks per site' },
    { label: 'Starting price',      m: 'From $49',                              a: 'From $5,000+' },
    { label: 'Production day',      m: 'No shoot · no crew · no weather delays', a: '10+ people on set · half-day of your time' },
    { label: 'Concepts per round',  m: '3–5 directions, you pick the one',      a: '1 storyboard · pivot = re-shoot fee' },
    { label: 'Volume per brief',    m: '9:16, 1:1, captions, voiceovers — bundled', a: 'One master · every variant line-itemed' },
    { label: 'Cadence',             m: 'Always-on monthly drumbeat',            a: 'Campaign cycles · gaps between drops' },
    { label: 'Pivots & edits',      m: 'Swap a scene or voiceover in hours',    a: 'Re-shoot or senior editor day-rate' },
    { label: 'Built for',           m: 'Tradies, local service, product brands, pros', a: 'Enterprise retainers · creative awards' },
    { label: 'You own the work',    m: 'Yes — full rights, bespoke originals',  a: 'Yes — but at agency price' },
  ];
  return (
    <section id="versus" data-section="versus" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      <div className="max-w-6xl mx-auto text-center">
        <div className="text-sm font-body text-white/60 mb-5">// Why Moviio</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5.5rem] leading-[0.95] max-w-4xl mx-auto"
          style={{ letterSpacing: '-3px' }}>
          AI isn't a replacement.<br /><em className="text-white/60">It's a revolution.</em>
        </h2>
        <p className="mt-7 text-base md:text-lg text-white/80 max-w-2xl mx-auto font-body font-light leading-relaxed">
          A new way of thinking about marketing for small business. Save the time and money you used to lose to shoots,
          edits and agency invoices — and spend it on the things that actually grow the business: serving customers, crafting your product, showing up.
        </p>
      </div>

      <div className="max-w-6xl mx-auto mt-20 rounded-[2rem] overflow-hidden liquid-glass-strong">
        {/* header row */}
        <div className="grid grid-cols-3 text-xs uppercase tracking-[0.22em] font-body"
          style={{ background: 'rgba(255,255,255,0.04)', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
          <div className="px-5 py-5 text-white/50">The category</div>
          <div className="px-5 py-5 text-white border-l border-white/10 flex items-center gap-2">
            <span className="font-heading italic text-base normal-case tracking-normal">Moviio</span>
            <span className="text-[10px] text-white/50">· AI marketing studio</span>
          </div>
          <div className="px-5 py-5 text-white/55 border-l border-white/10">Traditional agency</div>
        </div>
        {/* rows */}
        {rows.map((r, i) => (
          <div key={r.label}
            className="grid grid-cols-3 text-sm md:text-base font-body"
            style={{
              borderBottom: i === rows.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.08)',
              background: i % 2 === 0 ? 'rgba(255,255,255,0.015)' : 'transparent',
            }}>
            <div className="px-5 py-5 text-white/55 font-medium">{r.label}</div>
            <div className="px-5 py-5 text-white border-l border-white/10 flex items-start gap-3">
              <span className="text-emerald-400 mt-0.5 shrink-0">●</span>
              <span className="font-light leading-snug">{r.m}</span>
            </div>
            <div className="px-5 py-5 text-white/55 border-l border-white/10 flex items-start gap-3">
              <span className="text-white/30 mt-0.5 shrink-0">○</span>
              <span className="font-light leading-snug line-through decoration-white/15 decoration-1 underline-offset-2">{r.a}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="max-w-5xl mx-auto text-center mt-24">
        <p className="font-heading italic text-white text-4xl md:text-5xl lg:text-[3.75rem] leading-[1.05]" style={{ letterSpacing: '-1.5px' }}>
          Focus on customers, craft and growth.<br />
          <em className="text-white/60">Let the camera roll itself.</em>
        </p>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-5 text-left">
          {[
            { k: 'Time saved',   v: 'Weeks of shoot prep, scheduling and editing — gone. Brief on Monday, posting by Wednesday.' },
            { k: 'Money saved',  v: 'One traditional ad agency invoice funds a full year of Moviio reels, edits and refreshes.' },
            { k: 'Headspace',    v: 'You stop being a producer. You go back to being the owner — talking to customers, shipping the work.' },
          ].map((s) => (
            <div key={s.k} className="rounded-[1.5rem] p-7 md:p-8"
              style={{
                background: 'rgba(255,255,255,0.04)',
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06)',
              }}>
              <div className="font-heading italic text-white text-3xl md:text-4xl leading-none" style={{ letterSpacing: '-1px' }}>{s.k}</div>
              <p className="mt-4 text-base text-white/85 font-body font-light leading-relaxed">{s.v}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ── On authenticity — addresses the "isn't it fake?" objection head-on
function Authenticity() {
  const willDo = [
    'Brand mood, atmosphere and lifestyle scenes',
    'Product context — how it feels to use what you sell',
    'Polished concept reels that stage the truth of your offer',
    'Edits, refreshes and platform variants on demand',
  ];
  const wontDo = [
    'Fake testimonials or words in real customers\' mouths',
    'Invented awards, press logos or accolades',
    'Features your product doesn\'t actually have',
    'Skip disclosure where the law or your industry requires it',
  ];
  const brands = ['Coca-Cola', 'Heinz', 'Mango', 'Guess', 'Toys R Us', 'Klarna', 'Levi\'s', 'Adidas'];

  return (
    <section id="authenticity" data-section="authenticity" className="relative w-full bg-black pt-44 md:pt-56 pb-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      {/* Live video background — bleeds high up so the gap above is filled with motion, not flat black */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <FadingVideo
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_115655_b4d9cd77-feed-43cd-a198-af78ebdf1f7a.mp4"
          className="absolute inset-0 w-full h-full object-cover"
          style={{ width: '110%', height: '120%', left: '-5%', top: '-15%' }}
        />
        {/* much shorter top fade — motion appears immediately, dissolving softly into the section above */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 6%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.7) 82%, rgba(0,0,0,0.92) 92%, #000 100%)' }} />
        {/* left + right edge fade so motion dissolves into the page sides */}
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to right, #000 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, #000 100%)' }} />
      </div>

      {/* Bridge teaser — sits on the video, leading into the authenticity heading */}
      <div className="relative z-10 max-w-3xl mx-auto text-center mb-20 -mt-12">
        <div className="h-12 w-px mx-auto" style={{ background: 'linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0))' }} />
        <p className="mt-3 font-heading italic text-white text-2xl md:text-3xl leading-snug" style={{ letterSpacing: '-0.5px' }}>
          "But isn't AI marketing… <em className="text-white/65">fake</em>?"
        </p>
        <p className="mt-3 text-xs uppercase tracking-[0.28em] text-white/55 font-body">
          Read on — let's be clear.
        </p>
        <div className="text-white/55 text-2xl mt-3 leading-none animate-bounce">↓</div>
      </div>
      <div className="relative z-10 max-w-5xl mx-auto text-center">
        <div className="text-sm font-body text-white/60 mb-5">// On authenticity</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95]"
          style={{ letterSpacing: '-3px' }}>
          "Isn't it fake?"<br /><em className="text-white/60">Let's be clear.</em>
        </h2>
        <p className="mt-8 text-base md:text-xl text-white/85 max-w-3xl mx-auto font-body font-light leading-relaxed">
          Every ad is staged. A traditional TV commercial — paid actors, scripted lines, three lighting rigs in a studio — isn't "real" either.
          What matters is whether the marketing **delivers the feeling and the point of your product to the customer**, honestly.
          That's the only definition of authentic that means anything.
        </p>
        <p className="mt-6 text-base md:text-lg text-white/70 max-w-2xl mx-auto font-body font-light leading-relaxed">
          <em>Fake</em> isn't AI-made. <em>Fake</em> is misrepresenting your service or your product. Moviio doesn't do that — and we won't let you do it either.
        </p>
      </div>

      {/* Brand strip — "you're in good company" */}
      <div className="relative z-10 max-w-5xl mx-auto mt-20 rounded-[1.5rem] p-8 md:p-10"
        style={{ background: 'rgba(255,255,255,0.03)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.05)' }}>
        <div className="text-center text-xs uppercase tracking-[0.28em] text-white/55 font-body mb-6">
          Already running AI-led campaigns
        </div>
        <div className="flex flex-wrap items-center justify-center gap-x-10 md:gap-x-14 gap-y-4">
          {brands.map((b) => (
            <span key={b} className="font-heading italic text-white/85 text-2xl md:text-3xl tracking-tight">{b}</span>
          ))}
        </div>
        <p className="mt-7 text-center text-sm text-white/65 font-body font-light max-w-2xl mx-auto leading-relaxed">
          The world's biggest brands are already shipping AI-led campaigns. The conversation has moved from <em>"is this allowed?"</em> to <em>"who's doing it well?"</em>.
        </p>
      </div>

      {/* We will / We won't */}
      <div className="relative z-10 max-w-5xl mx-auto mt-12 grid grid-cols-1 md:grid-cols-2 gap-5">
        <div className="rounded-[1.5rem] p-7 md:p-8"
          style={{ background: 'rgba(255,255,255,0.04)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06)' }}>
          <div className="flex items-center gap-3 mb-5">
            <span className="text-emerald-400 text-2xl">●</span>
            <h3 className="font-heading italic text-white text-3xl md:text-4xl leading-none" style={{ letterSpacing: '-1px' }}>What we make</h3>
          </div>
          <ul className="flex flex-col gap-3 text-base text-white/85 font-body font-light leading-relaxed">
            {willDo.map((t) => (
              <li key={t} className="flex gap-3 items-start">
                <span className="text-white/40 mt-1 shrink-0">—</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="rounded-[1.5rem] p-7 md:p-8"
          style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.05)' }}>
          <div className="flex items-center gap-3 mb-5">
            <span className="text-rose-300/90 text-2xl">○</span>
            <h3 className="font-heading italic text-white text-3xl md:text-4xl leading-none" style={{ letterSpacing: '-1px' }}>What we won't</h3>
          </div>
          <ul className="flex flex-col gap-3 text-base text-white/80 font-body font-light leading-relaxed">
            {wontDo.map((t) => (
              <li key={t} className="flex gap-3 items-start">
                <span className="text-white/30 mt-1 shrink-0">—</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Lead, don't borrow */}
      <div className="relative z-10 max-w-5xl mx-auto mt-16 grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
        <div>
          <h3 className="font-heading italic text-white text-4xl md:text-5xl lg:text-[3.5rem] leading-[1.05]"
            style={{ letterSpacing: '-1.5px' }}>
            Be the reference.<br /><em className="text-white/60">Not the borrower.</em>
          </h3>
          <p className="mt-6 text-base md:text-lg text-white/80 font-body font-light leading-relaxed">
            Most small businesses spend their evenings scrolling Pinterest and Google Images, saving inspiration their competitors already used.
            Your brand should be the one their <em>next</em> mood board is built from.
          </p>
          <p className="mt-4 text-base md:text-lg text-white/75 font-body font-light leading-relaxed">
            Original concepts. Made for you. Owned by you. When the trend catches up, it catches up to <strong className="font-medium text-white">you</strong>.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="rounded-[1.25rem] p-6"
            style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)' }}>
            <div className="text-[10px] uppercase tracking-[0.22em] text-white/45 font-body line-through decoration-white/15 mb-3">Most brands</div>
            <ul className="flex flex-col gap-2 text-sm text-white/65 font-body font-light leading-snug">
              <li>— Pull from Pinterest</li>
              <li>— Save Google images for ref</li>
              <li>— Copy what worked last year</li>
              <li>— Look like everyone else</li>
            </ul>
          </div>
          <div className="rounded-[1.25rem] p-6"
            style={{ background: 'rgba(255,255,255,0.06)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.1)' }}>
            <div className="text-[10px] uppercase tracking-[0.22em] text-white font-body mb-3 flex items-center gap-1.5">
              <span className="text-emerald-400">●</span> Moviio brands
            </div>
            <ul className="flex flex-col gap-2 text-sm text-white/95 font-body font-light leading-snug">
              <li>— Set the look others save</li>
              <li>— Brief originals, not references</li>
              <li>— Define the trend before it has a name</li>
              <li>— Become the inspo</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="relative z-10 max-w-3xl mx-auto text-center mt-20">
        <p className="font-heading italic text-white text-3xl md:text-4xl leading-snug" style={{ letterSpacing: '-1px' }}>
          Stage the truth.<br /><span className="text-white/60">Never invent it.</span>
        </p>
      </div>
    </section>
  );
}

// ── Outcomes — what the customer actually gets (calm section)
function Outcomes() {
  const outs = [
    { t: 'A scroll-stopping reel', b: 'A 15s vertical clip your audience actually watches — captioned, music-locked, and ready for Instagram, TikTok or Facebook.' },
    { t: 'A landing page that converts', b: 'A clean, mobile-first page with a clear pitch, a contact form, and the speed to load before someone bounces.' },
    { t: 'A weekly social rhythm', b: 'Reusable templates so you (or whoever runs your socials) can keep posting without restarting from scratch every Sunday.' },
    { t: 'More qualified enquiries', b: 'When your business looks like the brands customers already trust, the people who message you are the ones ready to book.' },
  ];
  return (
    <section id="outcomes" data-section="outcomes" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="text-sm font-body text-white/60 mb-5">// What you get</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] max-w-3xl"
          style={{ letterSpacing: '-3px' }}>
          The outcome,<br />not just the asset.
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-16">
          {outs.map((o) => (
            <div key={o.t} className="rounded-[1.25rem] p-7"
              style={{
                background: 'rgba(255,255,255,0.025)',
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.05)',
              }}>
              <h3 className="font-heading italic text-white text-3xl leading-none" style={{ letterSpacing: '-0.5px' }}>{o.t}</h3>
              <p className="mt-3 text-sm text-white/80 font-body font-light leading-relaxed">{o.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ (calm section, Q&A flow before CTA)
function FAQ() {
  const qas = [
    { q: 'Is this real video, or AI?', a: 'It\'s AI-generated footage, edited like a real commercial. Most viewers can\'t tell — and your audience cares about the message, not how it was made.' },
    { q: 'How long does a project take?', a: 'A 3-reel pack lands in 48 hours. A landing page in about a week. Bigger packages with custom video are quoted with a clear timeline up front.' },
    { q: 'What do you need from me to start?', a: 'A short brief: what you sell, who you sell to, and one or two examples you like. We handle script, voiceover, music, captions and edit from there.' },
    { q: 'Can I post it on Instagram, TikTok and Facebook?', a: 'Yes. Every reel is delivered in vertical and square, captioned and exported ready for socials, ads, or your website.' },
    { q: 'What happens if I want changes?', a: 'Each pack includes one round of revisions. Bigger commercial work includes a script and storyboard sign-off before we generate, so surprises are rare.' },
    { q: 'Do you work with my industry?', a: 'Most likely yes — tradies, local services, product brands, real estate, medical and care, professional services. If we\'re not a fit we\'ll tell you straight.' },
  ];
  return (
    <section id="faq" data-section="faq" className="relative w-full bg-black py-32 px-6 md:px-16 lg:px-24 overflow-hidden">
      <div className="max-w-5xl mx-auto">
        <div className="text-sm font-body text-white/60 mb-5">// Questions, answered</div>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] max-w-3xl"
          style={{ letterSpacing: '-3px' }}>
          Before you brief us.
        </h2>

        <div className="mt-14 flex flex-col">
          {qas.map((qa, i) => (
            <details key={qa.q} className="group border-t border-white/10 py-6"
              style={i === qas.length - 1 ? { borderBottom: '1px solid rgba(255,255,255,0.1)' } : {}}>
              <summary className="flex items-start justify-between gap-6 cursor-pointer list-none">
                <h3 className="font-heading italic text-white text-2xl md:text-3xl leading-tight" style={{ letterSpacing: '-0.5px' }}>{qa.q}</h3>
                <span className="font-heading italic text-white/50 text-3xl leading-none mt-1 transition-transform group-open:rotate-45">+</span>
              </summary>
              <p className="mt-4 max-w-3xl text-sm md:text-base text-white/75 font-body font-light leading-relaxed">{qa.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Enquiry / CTA
// ── Full-spectrum colour grid (Tailwind-style) — shared across all role pickers
const SPECTRUM = [
  { name: 'Stone',   colours: ['#FAFAF9','#F5F5F4','#E7E5E4','#D6D3D1','#A8A29E','#78716C','#57534E','#44403C','#292524','#1C1917'] },
  { name: 'Zinc',    colours: ['#FAFAFA','#F4F4F5','#E4E4E7','#D4D4D8','#A1A1AA','#71717A','#52525B','#3F3F46','#27272A','#18181B'] },
  { name: 'Slate',   colours: ['#F8FAFC','#F1F5F9','#E2E8F0','#CBD5E1','#94A3B8','#64748B','#475569','#334155','#1E293B','#0F172A'] },
  { name: 'Red',     colours: ['#FEF2F2','#FEE2E2','#FECACA','#FCA5A5','#F87171','#EF4444','#DC2626','#B91C1C','#991B1B','#7F1D1D'] },
  { name: 'Orange',  colours: ['#FFF7ED','#FFEDD5','#FED7AA','#FDBA74','#FB923C','#F97316','#EA580C','#C2410C','#9A3412','#7C2D12'] },
  { name: 'Amber',   colours: ['#FFFBEB','#FEF3C7','#FDE68A','#FCD34D','#FBBF24','#F59E0B','#D97706','#B45309','#92400E','#78350F'] },
  { name: 'Yellow',  colours: ['#FEFCE8','#FEF9C3','#FEF08A','#FDE047','#FACC15','#EAB308','#CA8A04','#A16207','#854D0E','#713F12'] },
  { name: 'Lime',    colours: ['#F7FEE7','#ECFCCB','#D9F99D','#BEF264','#A3E635','#84CC16','#65A30D','#4D7C0F','#3F6212','#365314'] },
  { name: 'Green',   colours: ['#F0FDF4','#DCFCE7','#BBF7D0','#86EFAC','#4ADE80','#22C55E','#16A34A','#15803D','#166534','#14532D'] },
  { name: 'Emerald', colours: ['#ECFDF5','#D1FAE5','#A7F3D0','#6EE7B7','#34D399','#10B981','#059669','#047857','#065F46','#064E3B'] },
  { name: 'Teal',    colours: ['#F0FDFA','#CCFBF1','#99F6E4','#5EEAD4','#2DD4BF','#14B8A6','#0D9488','#0F766E','#115E59','#134E4A'] },
  { name: 'Cyan',    colours: ['#ECFEFF','#CFFAFE','#A5F3FC','#67E8F9','#22D3EE','#06B6D4','#0891B2','#0E7490','#155E75','#164E63'] },
  { name: 'Sky',     colours: ['#F0F9FF','#E0F2FE','#BAE6FD','#7DD3FC','#38BDF8','#0EA5E9','#0284C7','#0369A1','#075985','#0C4A6E'] },
  { name: 'Blue',    colours: ['#EFF6FF','#DBEAFE','#BFDBFE','#93C5FD','#60A5FA','#3B82F6','#2563EB','#1D4ED8','#1E40AF','#1E3A8A'] },
  { name: 'Indigo',  colours: ['#EEF2FF','#E0E7FF','#C7D2FE','#A5B4FC','#818CF8','#6366F1','#4F46E5','#4338CA','#3730A3','#312E81'] },
  { name: 'Violet',  colours: ['#F5F3FF','#EDE9FE','#DDD6FE','#C4B5FD','#A78BFA','#8B5CF6','#7C3AED','#6D28D9','#5B21B6','#4C1D95'] },
  { name: 'Purple',  colours: ['#FAF5FF','#F3E8FF','#E9D5FF','#D8B4FE','#C084FC','#A855F7','#9333EA','#7E22CE','#6B21A8','#581C87'] },
  { name: 'Fuchsia', colours: ['#FDF4FF','#FAE8FF','#F5D0FE','#F0ABFC','#E879F9','#D946EF','#C026D3','#A21CAF','#86198F','#701A75'] },
  { name: 'Pink',    colours: ['#FDF2F8','#FCE7F3','#FBCFE8','#F9A8D4','#F472B6','#EC4899','#DB2777','#BE185D','#9D174D','#831843'] },
  { name: 'Rose',    colours: ['#FFF1F2','#FFE4E6','#FECDD3','#FDA4AF','#FB7185','#F43F5E','#E11D48','#BE123C','#9F1239','#881337'] },
];

function SpectrumGrid({ picked, onToggle, maxReached }) {
  const cols = SPECTRUM.length;
  return (
    <div className="overflow-x-auto -mx-1 px-1">
      <div className="min-w-[640px]">
        <div className="grid gap-1 mb-1" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
          {SPECTRUM.map((c) => (
            <div key={c.name} className="text-[8px] uppercase tracking-wider text-white/40 font-body text-center truncate">{c.name}</div>
          ))}
        </div>
        <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
          {Array.from({ length: 10 }).map((_, rowI) =>
            SPECTRUM.map((col) => {
              const c = col.colours[rowI];
              const isPicked = picked.some((p) => p.toUpperCase() === c.toUpperCase());
              const isDisabled = !isPicked && maxReached;
              return (
                <button type="button" key={`${col.name}-${rowI}`}
                  onClick={() => onToggle(c)}
                  disabled={isDisabled}
                  title={`${col.name} ${(rowI + 1) * 100 - (rowI === 0 ? 50 : 0)} · ${c}`}
                  className={`aspect-square rounded-sm transition-colors ${isPicked ? 'ring-2 ring-white relative z-10' : isDisabled ? 'ring-1 ring-white/5 opacity-30 cursor-not-allowed' : 'ring-1 ring-white/10 hover:ring-white/55 hover:z-10 hover:relative cursor-pointer'}`}
                  style={{ background: c }}>
                  {isPicked && (
                    <span className="absolute inset-0 flex items-center justify-center text-[10px] font-bold mix-blend-difference text-white">✓</span>
                  )}
                </button>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

// ── Reusable role-picker — supports max colours per role (60/30/10 builder)
function RolePicker({ role, percent, label, hint, max = 1, values, onChange }) {
  const [showCustom, setShowCustom] = useState(false);
  const safeValues = Array.isArray(values) ? values : (values ? [values] : []);

  const togglePick = (c) => {
    if (safeValues.some((v) => v.toUpperCase() === c.toUpperCase())) {
      onChange(safeValues.filter((v) => v.toUpperCase() !== c.toUpperCase()));
    } else if (safeValues.length < max) {
      onChange([...safeValues, c]);
    }
  };

  const removeOne = (c) => onChange(safeValues.filter((v) => v.toUpperCase() !== c.toUpperCase()));
  const clearAll  = () => onChange([]);

  return (
    <div className="rounded-[1rem] p-4 md:p-5"
      style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)' }}>
      <div className="flex items-baseline justify-between flex-wrap gap-2 mb-4">
        <div>
          <div className="flex items-baseline gap-2">
            <span className="font-heading italic text-emerald-400/90 text-xl leading-none">{percent}</span>
            <span className="text-xs uppercase tracking-[0.22em] text-white/80 font-body">{role} · {label}</span>
            <span className="text-[10px] uppercase tracking-[0.18em] text-white/45 font-body">
              {safeValues.length}/{max} {max > 1 ? 'colours' : 'colour'}
            </span>
          </div>
          <div className="text-[10px] text-white/45 font-body italic mt-1 leading-snug">{hint}</div>
        </div>
        {safeValues.length > 0 && (
          <div className="flex items-center gap-2 flex-wrap">
            {safeValues.map((c, i) => (
              <button key={`${c}-${i}`} type="button" onClick={() => removeOne(c)}
                className="inline-flex items-center gap-1.5 rounded-full bg-white/5 hover:bg-white/10 px-2 py-1 transition-colors group"
                title={`Remove ${c}`}>
                <span className="rounded-sm ring-1 ring-white/20 w-4 h-4" style={{ background: c }} />
                <span className="text-[10px] font-body text-white/70 uppercase tracking-wider font-mono">{c.toUpperCase()}</span>
                <span className="text-white/35 group-hover:text-white text-xs leading-none">×</span>
              </button>
            ))}
            {safeValues.length > 1 && (
              <button type="button" onClick={clearAll}
                className="text-[10px] uppercase tracking-[0.18em] text-white/45 hover:text-white font-body underline-offset-4 hover:underline">
                Clear
              </button>
            )}
          </div>
        )}
      </div>

      {/* Full Tailwind-style spectrum grid */}
      <SpectrumGrid picked={safeValues} onToggle={togglePick} maxReached={safeValues.length >= max} />

      {/* Custom hex / native picker */}
      <button type="button" onClick={() => setShowCustom(!showCustom)}
        disabled={safeValues.length >= max}
        className={`mt-4 text-[10px] uppercase tracking-[0.22em] font-body inline-flex items-center gap-1.5 ${safeValues.length >= max ? 'text-white/25 cursor-not-allowed' : 'text-white/55 hover:text-white'}`}>
        <span>{showCustom ? '−' : '+'}</span> Pick any other colour
      </button>
      {showCustom && safeValues.length < max && (
        <motion.div
          initial={{ opacity: 0, y: -4 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25 }}
          className="mt-3 flex flex-wrap items-center gap-3">
          <CustomColourAdder onAdd={(c) => { togglePick(c); }} />
        </motion.div>
      )}
    </div>
  );
}

// helper to add a custom hex / wheel colour
function CustomColourAdder({ onAdd }) {
  const [draft, setDraft] = useState('#888888');
  return (
    <>
      <label className="flex items-center gap-2 cursor-pointer">
        <span className="text-[10px] uppercase tracking-[0.18em] text-white/55 font-body">Wheel</span>
        <input type="color" value={draft}
          onChange={(e) => setDraft(e.target.value.toUpperCase())}
          className="w-10 h-10 rounded-md border-0 cursor-pointer bg-transparent"
          style={{ padding: 0 }} />
      </label>
      <label className="flex items-center gap-2 flex-1 min-w-[180px]">
        <span className="text-[10px] uppercase tracking-[0.18em] text-white/55 font-body whitespace-nowrap">Hex code</span>
        <input type="text"
          placeholder="#1A1A1A"
          value={draft}
          onChange={(e) => {
            const v = e.target.value.startsWith('#') ? e.target.value : '#' + e.target.value;
            if (/^#[0-9A-Fa-f]{0,6}$/.test(v)) setDraft(v.toUpperCase());
          }}
          className="bg-white/5 border-0 rounded-full px-4 py-2 text-xs text-white placeholder-white/35 font-body focus:outline-none focus:bg-white/10 flex-1 font-mono tracking-wider" />
      </label>
      <button type="button" onClick={() => { if (/^#[0-9A-F]{6}$/.test(draft)) onAdd(draft); }}
        className="rounded-full px-4 py-2 text-xs font-body font-medium bg-white text-black hover:scale-105 transition-transform">
        Add
      </button>
    </>
  );
}

// ── Visual palette picker — preset palettes + 60/30/10 custom builder
function PalettePicker({ name, label }) {
  const palettes = [
    { id: 'pure-white',    name: 'Pure & Clean',       mood: 'Gallery · minimal',    colours: ['#FFFFFF', '#F5F5F5', '#1A1A1A'] },
    { id: 'cream-charcoal',name: 'Cream & Charcoal',   mood: 'Editorial · soft',     colours: ['#FAF6EC', '#E8DCC8', '#1A1714', '#A87C5F'] },
    { id: 'charcoal-gold', name: 'Charcoal & Gold',    mood: 'Premium · timeless',   colours: ['#1A1A1A', '#3D3D3D', '#C8A96A', '#F5F5F5'] },
    { id: 'deep-ocean',    name: 'Deep Ocean',         mood: 'Calm · trustworthy',   colours: ['#0A1F3D', '#1F4068', '#2D7DD2', '#E8F1FF'] },
    { id: 'warm-earth',    name: 'Warm Earth',         mood: 'Natural · grounded',   colours: ['#2C1810', '#5C3A21', '#A87C5F', '#F5E6D3'] },
    { id: 'bold-tech',     name: 'Bold Tech',          mood: 'Modern · electric',    colours: ['#000000', '#1A1A1A', '#00FF88', '#FFFFFF'] },
    { id: 'soft-pastel',   name: 'Soft Pastel',        mood: 'Friendly · gentle',    colours: ['#FFD6E0', '#FFB5C7', '#C8E6FF', '#FFF4D6'] },
    { id: 'forest-calm',   name: 'Forest Calm',        mood: 'Organic · trusted',    colours: ['#1A3D2E', '#2D5F47', '#7FA897', '#D4E5D9'] },
    { id: 'sunset-energy', name: 'Sunset Energy',      mood: 'Warm · vibrant',       colours: ['#3D1A1A', '#FF6B35', '#F7931E', '#FFD23F'] },
    { id: 'monochrome',    name: 'Monochrome',         mood: 'Editorial · clean',    colours: ['#000000', '#3D3D3D', '#A0A0A0', '#FFFFFF'] },
    { id: 'berry-wine',    name: 'Berry Wine',         mood: 'Bold · feminine',      colours: ['#2A0E2C', '#4A1942', '#8B2A6E', '#E8B5D3'] },
    { id: 'coastal-fresh', name: 'Coastal Fresh',      mood: 'Light · airy',         colours: ['#003D4F', '#006B7F', '#4DA8B5', '#F0F9FB'] },
    { id: 'desert-dusk',   name: 'Desert Dusk',        mood: 'Boutique · romantic',  colours: ['#3D2438', '#7C4D5E', '#C9847A', '#F5E1D8'] },
    { id: 'mint-fresh',    name: 'Mint Fresh',         mood: 'Healthy · modern',     colours: ['#0E3D33', '#2D7A5E', '#7FD9A3', '#E8F8F1'] },
  ];

  const [selectedPaletteId, setSelectedPaletteId] = useState('');
  const [bg, setBg]                               = useState([]);  // 1 colour
  const [supporting, setSupporting]               = useState([]);  // up to 2
  const [accent, setAccent]                       = useState([]);  // up to 2
  const [showGuide, setShowGuide]                 = useState(false);

  const totalPicked = bg.length + supporting.length + accent.length;

  return (
    <div className="md:col-span-2">
      <div className="text-xs uppercase tracking-[0.18em] text-white/60 font-body mb-3">{label}</div>

      {/* Preset palettes grid */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5">
        {palettes.map((p) => (
          <label key={p.id} className="cursor-pointer">
            <input type="radio" name={name} value={p.id}
              checked={selectedPaletteId === p.id}
              onChange={() => setSelectedPaletteId(p.id)}
              className="peer sr-only" />
            <div className="rounded-[1rem] p-3 bg-white/5 border border-white/10 hover:bg-white/8 hover:border-white/20 peer-checked:bg-white/10 peer-checked:border-white peer-checked:shadow-[0_0_30px_-8px_rgba(255,255,255,0.4)] transition-all group">
              <div className="flex h-10 rounded-md overflow-hidden ring-1 ring-white/10">
                {p.colours.map((c, i) => (
                  <div key={i} className="flex-1 transition-all group-hover:scale-y-110" style={{ background: c }} />
                ))}
              </div>
              <div className="mt-2.5">
                <div className="text-xs font-body font-medium text-white/90 leading-none">{p.name}</div>
                <div className="text-[10px] uppercase tracking-[0.18em] text-white/45 font-body mt-1.5">{p.mood}</div>
              </div>
              <div className="mt-1.5 text-[9px] font-body text-white/35 group-hover:text-white/60 transition-colors leading-tight">
                {p.colours.join(' · ')}
              </div>
            </div>
          </label>
        ))}
        {/* Custom — opens the swatch picker */}
        <label className="cursor-pointer">
          <input type="radio" name={name} value="custom"
            checked={selectedPaletteId === 'custom'}
            onChange={() => setSelectedPaletteId('custom')}
            className="peer sr-only" />
          <div className="rounded-[1rem] p-3 bg-white/5 border border-dashed border-white/15 hover:bg-white/8 hover:border-white/30 peer-checked:bg-white/10 peer-checked:border-white peer-checked:border-solid peer-checked:shadow-[0_0_30px_-8px_rgba(255,255,255,0.4)] transition-all min-h-[100px] flex flex-col items-center justify-center gap-2">
            <div className="flex h-10 w-full items-center justify-center text-2xl text-white/45">＋</div>
            <div className="text-xs font-body font-medium text-white/85">Build my own</div>
            <div className="text-[10px] uppercase tracking-[0.18em] text-white/45 font-body">Background + accents</div>
          </div>
        </label>
        {/* Help me choose */}
        <label className="cursor-pointer">
          <input type="radio" name={name} value="help"
            checked={selectedPaletteId === 'help'}
            onChange={() => setSelectedPaletteId('help')}
            className="peer sr-only" />
          <div className="rounded-[1rem] p-3 bg-white/5 border border-dashed border-white/15 hover:bg-white/8 hover:border-white/30 peer-checked:bg-white/10 peer-checked:border-white peer-checked:border-solid peer-checked:shadow-[0_0_30px_-8px_rgba(255,255,255,0.4)] transition-all min-h-[100px] flex flex-col items-center justify-center gap-2">
            <div className="flex h-10 w-full items-center justify-center text-2xl">✨</div>
            <div className="text-xs font-body font-medium text-white/85">Help me choose</div>
            <div className="text-[10px] uppercase tracking-[0.18em] text-white/45 font-body">We'll match your brand</div>
          </div>
        </label>
      </div>

      <p className="mt-3 text-[10px] text-white/40 font-body italic">
        Click any preset, or pick "Build my own" to choose a background tone + your own accent colours step by step.
      </p>

      {/* CUSTOM PALETTE BUILDER — 2 steps */}
      {selectedPaletteId === 'custom' && (
        <motion.div
          initial={{ opacity: 0, y: 12, height: 0 }}
          animate={{ opacity: 1, y: 0, height: 'auto' }}
          transition={{ duration: 0.45, ease: [0.2, 0.8, 0.2, 1] }}
          className="mt-5 rounded-[1.25rem] p-5 md:p-6 overflow-hidden relative"
          style={{ background: 'rgba(255,255,255,0.04)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.06)' }}>

          {/* Header with guide button */}
          <div className="flex items-baseline justify-between flex-wrap gap-3 mb-4">
            <div>
              <div className="text-xs uppercase tracking-[0.18em] text-white/65 font-body">Build your palette</div>
              <div className="text-[10px] text-white/45 font-body italic mt-1">Three roles · 1 background · 1–2 supports · 1–2 accents · up to 5 colours total.</div>
            </div>
            <button type="button" onClick={() => setShowGuide(!showGuide)}
              className="liquid-glass rounded-full w-8 h-8 flex items-center justify-center text-white/80 hover:text-white text-sm transition-colors"
              aria-label="Colour choice guide"
              title="How to pick a smart palette">
              ?
            </button>
          </div>

          {/* Smart-choice guide popover */}
          {showGuide && (
            <motion.div
              initial={{ opacity: 0, y: -8 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.25 }}
              className="mb-5 rounded-[1rem] p-5 relative"
              style={{ background: 'rgba(255,255,255,0.06)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15), inset 0 0 0 1px rgba(255,255,255,0.1)' }}>
              <button type="button" onClick={() => setShowGuide(false)}
                className="absolute top-3 right-3 text-white/55 hover:text-white text-sm">✕</button>
              <div className="text-xs uppercase tracking-[0.22em] text-white/65 font-body mb-3">How to pick a smart palette</div>
              <ul className="flex flex-col gap-2.5 text-sm text-white/85 font-body font-light leading-relaxed">
                <li className="flex gap-3 items-start">
                  <span className="font-heading italic text-emerald-400/85 text-base shrink-0">1.</span>
                  <span><strong className="font-medium text-white">Start with 1 background.</strong> 90% of your site lives on this tone — match it to the *feeling* of your brand. White = clean / gallery. Black = premium / cinematic. Cream = editorial / soft.</span>
                </li>
                <li className="flex gap-3 items-start">
                  <span className="font-heading italic text-emerald-400/85 text-base shrink-0">2.</span>
                  <span><strong className="font-medium text-white">Add 1–2 supporting colours.</strong> Used for cards, dividers, body text, secondary buttons. Quieter than the accent — usually a muted neutral or a soft complement of the accent.</span>
                </li>
                <li className="flex gap-3 items-start">
                  <span className="font-heading italic text-emerald-400/85 text-base shrink-0">3.</span>
                  <span><strong className="font-medium text-white">Pick 1 strong accent.</strong> The colour that stops the eye — buttons, links, highlights. Should pop hard against your background. Add a 2nd accent only if you have a clear "primary action / secondary action" split (e.g. <em>Buy</em> + <em>Learn more</em>).</span>
                </li>
                <li className="flex gap-3 items-start">
                  <span className="font-heading italic text-emerald-400/85 text-base shrink-0">4.</span>
                  <span><strong className="font-medium text-white">High contrast = high impact.</strong> Dark background + a bright accent (coral, gold, electric blue) reads more confident than three soft colours together.</span>
                </li>
                <li className="flex gap-3 items-start">
                  <span className="font-heading italic text-emerald-400/85 text-base shrink-0">5.</span>
                  <span><strong className="font-medium text-white">If your logo has a colour</strong> — start there. Make it your accent and build the rest of the palette around it.</span>
                </li>
              </ul>
              <p className="mt-4 text-[10px] uppercase tracking-[0.22em] text-white/45 font-body italic">
                The 60 / 30 / 10 rule: ~60% background · ~30% supporting · ~10% accent. Total: 3–5 colours.
              </p>
            </motion.div>
          )}

          {/* Live 60/30/10 preview — uses 1st colour from each role */}
          <div className="rounded-[0.75rem] overflow-hidden ring-1 ring-white/10 h-20 flex">
            {totalPicked === 0 ? (
              <div className="flex-1 flex items-center justify-center text-[10px] uppercase tracking-[0.22em] text-white/35 font-body italic"
                style={{ background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 8px, transparent 8px 16px)' }}>
                Your palette appears here · 60 / 30 / 10 →
              </div>
            ) : (
              <>
                <div className="relative flex items-end p-2"
                  style={{ flex: 6, background: bg[0] || 'rgba(255,255,255,0.04)' }}>
                  <span className="text-[9px] font-body uppercase tracking-[0.22em] mix-blend-difference"
                    style={{ color: bg[0] ? '#fff' : 'rgba(255,255,255,0.4)' }}>60% · Background</span>
                </div>
                {/* Support — split into multiple sub-stripes if multiple supports picked */}
                <div className="relative flex" style={{ flex: 3 }}>
                  {supporting.length === 0 ? (
                    <div className="flex-1 flex items-end p-2" style={{ background: 'rgba(255,255,255,0.06)' }}>
                      <span className="text-[9px] font-body uppercase tracking-[0.22em] text-white/40">30% · Support</span>
                    </div>
                  ) : supporting.map((c, i) => (
                    <div key={i} className="flex-1 relative flex items-end p-2" style={{ background: c }}>
                      {i === 0 && (
                        <span className="text-[9px] font-body uppercase tracking-[0.22em] mix-blend-difference text-white">30% · Support</span>
                      )}
                    </div>
                  ))}
                </div>
                {/* Accent — split if multiple */}
                <div className="relative flex" style={{ flex: 1 }}>
                  {accent.length === 0 ? (
                    <div className="flex-1 flex items-end p-2" style={{ background: 'rgba(255,255,255,0.08)' }}>
                      <span className="text-[9px] font-body uppercase tracking-[0.22em] text-white/40">10%</span>
                    </div>
                  ) : accent.map((c, i) => (
                    <div key={i} className="flex-1 relative flex items-end p-2" style={{ background: c }}>
                      {i === 0 && (
                        <span className="text-[9px] font-body uppercase tracking-[0.22em] mix-blend-difference text-white">10%</span>
                      )}
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>

          {totalPicked > 0 && (
            <div className="mt-2 text-[10px] font-body text-white/55 leading-relaxed flex flex-wrap gap-x-4 gap-y-1">
              {bg[0] && <span><span className="text-white/40">BG</span> {bg[0]}</span>}
              {supporting.length > 0 && <span><span className="text-white/40">SUP</span> {supporting.join(' · ')}</span>}
              {accent.length > 0 && <span><span className="text-white/40">ACC</span> {accent.join(' · ')}</span>}
              <span className="text-white/35 italic">· {totalPicked} colour{totalPicked > 1 ? 's' : ''} picked</span>
            </div>
          )}

          {/* THREE ROLE PICKERS — 60 / 30 / 10 */}
          <div className="mt-6 flex flex-col gap-4">
            <RolePicker
              role="Background"
              percent="60%"
              label="The dominant tone"
              hint="Whatever 90% of your site lives on. Pick 1 base — usually white, cream or a deep dark."
              max={1}
              values={bg}
              onChange={setBg} />

            <RolePicker
              role="Supporting"
              percent="30%"
              label="Structure & secondary"
              hint="Cards, dividers, secondary buttons, body-text contrast. Pick 1–2 quiet supports — never as bold as the main accent."
              max={2}
              values={supporting}
              onChange={setSupporting} />

            <RolePicker
              role="Accent"
              percent="10%"
              label="The eye-catcher"
              hint="The colour that stops the eye — buttons, links, highlights. Pick 1 main accent (or up to 2 if you have a primary + secondary action)."
              max={2}
              values={accent}
              onChange={setAccent} />
          </div>

          {/* Hidden fields for form submission */}
          <input type="hidden" name={`${name}_bg`} value={bg.join(',')} />
          <input type="hidden" name={`${name}_supporting`} value={supporting.join(',')} />
          <input type="hidden" name={`${name}_accent`} value={accent.join(',')} />

          {/* Footer */}
          <div className="mt-5 flex flex-wrap items-center justify-between gap-3">
            <p className="text-[10px] text-white/40 font-body italic max-w-md">
              You can build a 3-colour palette or stretch it to 5 — 1 background, 1–2 supports, 1–2 accents. Tap the <span className="text-white/70">?</span> for the smart-choice guide.
            </p>
            {totalPicked > 0 && (
              <button type="button"
                onClick={() => { setBg([]); setSupporting([]); setAccent([]); }}
                className="text-[10px] uppercase tracking-[0.22em] text-white/55 hover:text-white font-body underline-offset-4 hover:underline">
                Clear all
              </button>
            )}
          </div>
        </motion.div>
      )}
    </div>
  );
}

// ── Reusable form atoms
function Field({ label, name, placeholder, type = 'text', required, hint, full, textarea }) {
  return (
    <label className={`flex flex-col gap-2 ${full ? 'md:col-span-2' : ''}`}>
      <span className="text-xs uppercase tracking-[0.18em] text-white/60 font-body">
        {label}{required && <span className="text-emerald-400/85"> *</span>}
      </span>
      {textarea ? (
        <textarea name={name} placeholder={placeholder} rows={3}
          className="bg-white/5 border-0 rounded-[1rem] px-5 py-3 text-sm text-white placeholder-white/35 font-body focus:outline-none focus:bg-white/10 leading-relaxed" />
      ) : (
        <input type={type} name={name} placeholder={placeholder}
          className="bg-white/5 border-0 rounded-full px-5 py-3 text-sm text-white placeholder-white/35 font-body focus:outline-none focus:bg-white/10" />
      )}
      {hint && <span className="text-[10px] text-white/40 font-body italic">{hint}</span>}
    </label>
  );
}
function RadioGroup({ label, name, options, required }) {
  return (
    <div className="md:col-span-2">
      <div className="text-xs uppercase tracking-[0.18em] text-white/60 font-body mb-3">
        {label}{required && <span className="text-emerald-400/85"> *</span>}
      </div>
      <div className="flex flex-wrap gap-2">
        {options.map((o) => (
          <label key={o} className="cursor-pointer">
            <input type="radio" name={name} value={o} className="peer sr-only" />
            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-body bg-white/5 text-white/80 border border-white/10 peer-checked:bg-white peer-checked:text-black peer-checked:border-white transition-colors">
              {o}
            </span>
          </label>
        ))}
      </div>
    </div>
  );
}
function CheckGroup({ label, name, options, hint }) {
  return (
    <div className="md:col-span-2">
      <div className="text-xs uppercase tracking-[0.18em] text-white/60 font-body mb-3">{label}</div>
      <div className="flex flex-wrap gap-2">
        {options.map((o) => (
          <label key={o} className="cursor-pointer">
            <input type="checkbox" name={name} value={o} className="peer sr-only" />
            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-body bg-white/5 text-white/80 border border-white/10 peer-checked:bg-white peer-checked:text-black peer-checked:border-white transition-colors">
              {o}
            </span>
          </label>
        ))}
      </div>
      {hint && <p className="mt-2 text-[10px] text-white/40 font-body italic">{hint}</p>}
    </div>
  );
}
function FormSection({ n, title, children }) {
  return (
    <div className="rounded-[1.25rem] p-5 md:p-6"
      style={{ background: 'rgba(255,255,255,0.025)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)' }}>
      <div className="flex items-baseline gap-3 mb-5">
        <span className="font-heading italic text-white/45 text-2xl leading-none">{n}</span>
        <h4 className="font-heading italic text-white text-xl md:text-2xl leading-none" style={{ letterSpacing: '-0.5px' }}>{title}</h4>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">{children}</div>
    </div>
  );
}

// ── Website request form
function WebsiteForm() {
  const [tier, setTier] = useState('');
  return (
    <form className="flex flex-col gap-5">
      <FormSection n="01" title="About you">
        <Field label="Your name" name="name" placeholder="Sam Brown" required />
        <Field label="Email" name="email" placeholder="sam@yourbiz.com.au" type="email" required />
        <Field label="Phone" name="phone" placeholder="0412 345 678" type="tel" />
        <Field label="Business name" name="business" placeholder="Sam's Plumbing Co." required />
        <Field full label="What you do · industry" name="industry" placeholder="Plumbing & gas-fitting in Sydney's inner west" required />
        <Field full label="Existing website (if any)" name="existing" placeholder="https://" />
      </FormSection>

      <FormSection n="02" title="Project tier">
        <div className="md:col-span-2">
          <div className="text-xs uppercase tracking-[0.18em] text-white/60 font-body mb-3">Pick what fits *</div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
            {[
              { v: 'spark', t: 'Spark · 1-page landing', p: 'from $499' },
              { v: 'studio', t: 'Studio · 5-page business site', p: 'from $2,499' },
              { v: 'brand', t: 'Brand World · full custom', p: 'from $4,999' },
              { v: 'unsure', t: 'Not sure — help me decide', p: 'we\'ll guide you' },
            ].map((o) => (
              <label key={o.v} className="cursor-pointer">
                <input type="radio" name="tier" value={o.v} onChange={(e) => setTier(e.target.value)} className="peer sr-only" />
                <span className="flex items-center justify-between gap-4 px-5 py-4 rounded-[1rem] text-sm font-body bg-white/5 text-white/85 border border-white/10 peer-checked:bg-white peer-checked:text-black peer-checked:border-white transition-colors">
                  <span className="font-medium">{o.t}</span>
                  <span className="text-xs italic opacity-70">{o.p}</span>
                </span>
              </label>
            ))}
          </div>
        </div>
      </FormSection>

      {(tier === 'studio' || tier === 'brand') && (
        <FormSection n="03" title="Pages you need">
          <CheckGroup name="pages" label="Tick everything that applies"
            options={['Home', 'Services', 'About', 'Portfolio / Gallery', 'Shop / Products', 'Booking / Appointments', 'Blog', 'Contact', 'FAQ', 'Member login', 'Other']} />
        </FormSection>
      )}

      <FormSection n={tier === 'studio' || tier === 'brand' ? '04' : '03'} title="Features & motion">
        <CheckGroup name="features" label="Visual features you'd love"
          options={[
            'Cinematic video at the top',
            '3D motion / parallax',
            'Glass / frosted UI',
            'Scroll-driven animations',
            'Custom entry overlay',
            'Lightbox / image gallery',
            'Custom cursor / hover effects',
            'Dark / light mode toggle',
            'Animated typography',
            'Custom illustrations',
          ]}
          hint="Pick as many as you like — we'll match what's appropriate to your brand and budget." />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '05' : '04'} title="Functionality">
        <CheckGroup name="functions" label="Things the site needs to do"
          options={[
            'Contact form',
            'Booking / appointment system',
            'Online shop · take payments',
            'Member accounts · login',
            'Newsletter signup',
            'Live chat',
            'Multi-language',
            'Search',
            'Video portfolio',
            'Gated downloads',
          ]} />
        <RadioGroup name="payment" label="Payment system"
          options={['None needed', 'Stripe', 'Square', 'PayPal', 'Other / not sure']} />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '06' : '05'} title="Look & feel">
        <CheckGroup name="vibe" label="Vibe / mood"
          options={['Minimal', 'Cinematic', 'Bold', 'Playful', 'Editorial', 'Tech', 'Luxury', 'Warm / human', 'Dark moody', 'Bright clean']} />
        <PalettePicker name="palette" label="Colour palette · click one that feels right" />
        <Field full label="Or describe / paste your own brand colours" name="colours" placeholder="warm gold + charcoal · or paste hex codes like #1A1A1A, #C8A96A" hint="Only if 'Use my own colours' is picked above. No hex codes? Just describe in plain English." />
        <Field label="Brand fonts" name="fonts" placeholder="Instrument Serif + Barlow" hint="Or write 'help me choose'" />
        <Field label="Logo · how to share it" name="logo" placeholder="Link to file, or 'attaching in reply'" hint="Don't have one? Tick 'Help me choose' instead." />
        <Field full label="3 brands you love the look of" name="references" placeholder="aesop.com, glossier.com, your favourite IG account" />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '07' : '06'} title="Brand assets you have">
        <CheckGroup name="assets" label="Tick everything ready to share"
          options={['Logo (vector + raster)', 'Colour palette', 'Brand fonts', 'Photography', 'Brand guidelines doc', 'Tagline / tone of voice', 'Product photos', 'Existing video footage', 'None of the above']} />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '08' : '07'} title="Domain & hosting">
        <RadioGroup name="domain" label="Domain"
          options={['I own it already', 'Need to register', 'Help me decide']} />
        <Field label="Domain name (if owned)" name="domain_name" placeholder="yourbiz.com.au" />
        <RadioGroup name="hosting" label="Hosting"
          options={['Managed by Moviio', "I'll host myself", 'Need advice']} />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '09' : '08'} title="Timeline & budget">
        <RadioGroup name="timeline" label="Timeline" required
          options={['Urgent · under 1 week', 'Standard · 2–4 weeks', 'Flexible · 1–2 months', 'No rush · TBD']} />
        <RadioGroup name="budget" label="Budget range" required
          options={['Under $500', '$500 – $1,500', '$1,500 – $3,500', '$3,500 – $7,500', '$7,500 – $15,000', '$15,000+', "Tell me what you'd quote"]} />
        <RadioGroup name="decision" label="When you'll decide"
          options={['This week', 'This month', 'Researching · 1–3 months', 'Just exploring']} />
      </FormSection>

      <FormSection n={tier === 'studio' || tier === 'brand' ? '10' : '09'} title="Anything else?">
        <Field full textarea name="notes" label="Tell us anything we haven't asked" placeholder="Specific competitors you want to beat, must-have features, sketch links, anything." />
      </FormSection>

      <button type="submit" className="self-center bg-white text-black rounded-full mt-3 px-8 py-4 text-base font-medium font-body inline-flex items-center gap-3 hover:scale-[1.02] active:scale-[0.98] transition-transform shadow-[0_0_0_1px_rgba(255,255,255,0.3),0_18px_48px_-8px_rgba(255,255,255,0.4)]">
        Send my website brief <ArrowUpRight className="h-4 w-4" />
      </button>
    </form>
  );
}

// ── Reels request form
function ReelForm() {
  return (
    <form className="flex flex-col gap-5">
      <FormSection n="01" title="About you">
        <Field label="Your name" name="name" placeholder="Sam Brown" required />
        <Field label="Email" name="email" placeholder="sam@yourbiz.com.au" type="email" required />
        <Field label="Phone" name="phone" placeholder="0412 345 678" type="tel" />
        <Field label="Business name" name="business" placeholder="Sam's Plumbing Co." required />
        <Field full label="What you sell · industry" name="industry" placeholder="Skincare brand · selling online direct to customer" required />
      </FormSection>

      <FormSection n="02" title="The reels">
        <RadioGroup name="quantity" label="How many reels" required
          options={['1 reel', '3-pack', '5-pack', '10+ ongoing', 'Not sure yet']} />
        <RadioGroup name="duration" label="Duration"
          options={['15 seconds', '30 seconds', '60 seconds', 'Mixed']} />
        <CheckGroup name="formats" label="Formats you need"
          options={['9:16 vertical · IG / TikTok', '1:1 square · IG feed', '16:9 landscape · YouTube']} />
      </FormSection>

      <FormSection n="03" title="Style & vibe">
        <CheckGroup name="vibe" label="Vibe (pick a few)"
          options={['Cinematic', 'Lifestyle', 'Product-focused', 'Fashion', 'Atmospheric', 'Documentary', 'Tutorial', 'Aspirational', 'Bold-graphic', 'Editorial', 'Playful']} />
        <RadioGroup name="subject" label="What's in the reel"
          options={['A person using the product', 'Product alone, hero shot', 'Lifestyle scenario', 'Brand mood / atmosphere only', 'Mix of all']} />
        <Field full label="Reference reels you love" name="refs" placeholder="3 IG / TikTok URLs that capture the vibe" />
      </FormSection>

      <FormSection n="04" title="Audio">
        <RadioGroup name="music" label="Music style"
          options={['Upbeat', 'Moody / cinematic', 'Trending / viral', 'Calm / ambient', 'No music', "I'll provide my own"]} />
        <RadioGroup name="vo" label="Voiceover"
          options={['Yes', 'No', 'Not sure']} />
        <Field label="VO language & tone" name="vo_tone" placeholder="English (AU) · warm & friendly female" />
        <RadioGroup name="captions" label="On-screen captions"
          options={['Yes — burned in', 'Yes — toggleable', 'No']} />
      </FormSection>

      <FormSection n="05" title="Brand">
        <PalettePicker name="palette" label="Brand colours · click one that feels right" />
        <Field full label="Or describe your own colours" name="colours" placeholder="warm coral + cream · or paste #FF6B6B, #FFFFFF" hint="Only if 'Use my own' is picked above." />
        <Field label="Brand fonts" name="fonts" placeholder="Helvetica + Playfair" hint="Or 'help me choose'" />
        <Field label="Logo · how to share it" name="logo" placeholder="Link to file, or 'attaching in reply'" />
      </FormSection>

      <FormSection n="06" title="Where it'll go">
        <CheckGroup name="platforms" label="Platforms"
          options={['Instagram Reels', 'TikTok', 'Facebook', 'YouTube Shorts', 'Website hero', 'Email campaign', 'Paid ads']} />
      </FormSection>

      <FormSection n="07" title="Timeline & budget">
        <RadioGroup name="timeline" label="When you need it" required
          options={['48 hours · rush', '1 week', '2 weeks', 'Flexible']} />
        <RadioGroup name="budget" label="Budget range" required
          options={['$49 single reel', '$149 · 3-pack', '$300–$500', '$500–$1,500', '$1,500+', "Tell me what you'd quote"]} />
      </FormSection>

      <FormSection n="08" title="Anything else?">
        <Field full textarea name="notes" label="Anything else" placeholder="Specific shots, locations, must-haves, things to avoid." />
      </FormSection>

      <button type="submit" className="self-center bg-white text-black rounded-full mt-3 px-8 py-4 text-base font-medium font-body inline-flex items-center gap-3 hover:scale-[1.02] active:scale-[0.98] transition-transform shadow-[0_0_0_1px_rgba(255,255,255,0.3),0_18px_48px_-8px_rgba(255,255,255,0.4)]">
        Send my reel brief <ArrowUpRight className="h-4 w-4" />
      </button>
    </form>
  );
}

// ── Commercial Video request form
function CommercialForm() {
  return (
    <form className="flex flex-col gap-5">
      <FormSection n="01" title="About you">
        <Field label="Your name" name="name" placeholder="Sam Brown" required />
        <Field label="Email" name="email" placeholder="sam@yourbiz.com.au" type="email" required />
        <Field label="Phone" name="phone" placeholder="0412 345 678" type="tel" />
        <Field label="Business name" name="business" placeholder="Sam's Plumbing Co." required />
        <Field full label="What you sell · industry" name="industry" placeholder="Boutique furniture brand · Sydney showroom" required />
      </FormSection>

      <FormSection n="02" title="The commercial">
        <RadioGroup name="length" label="Length" required
          options={['30 seconds', '45 seconds', '60 seconds', '90 seconds', 'Other']} />
        <RadioGroup name="purpose" label="What's it for" required
          options={['TV ad', 'Website hero', 'Launch announcement', 'Brand story', 'YouTube pre-roll', 'Social-only ad', 'Other']} />
        <RadioGroup name="versions" label="How many versions"
          options={['Just 1', '2–3 cuts', '5+ cuts (different platforms)']} />
      </FormSection>

      <FormSection n="03" title="The story">
        <RadioGroup name="script" label="Script"
          options={['I have a script', 'I have a rough idea', "Help me write it"]} />
        <Field full textarea name="story" label="Message · what you want to say" placeholder="Sell the showroom experience. Show the craftsmanship. Make people want to visit." />
        <Field full label="Hero product / service to feature" name="hero" placeholder="Ember lounge chair · cantilever frame · hand-stitched leather" />
        <Field label="Call-to-action at the end" name="cta" placeholder="Visit our showroom · or 'shop now'" />
      </FormSection>

      <FormSection n="04" title="Style">
        <CheckGroup name="style" label="Visual style (pick a few)"
          options={['Cinematic', 'Documentary', 'Editorial', 'Animated', 'Fashion', 'Tech / futuristic', 'Lifestyle', 'Bold-graphic', 'Vintage / film', 'Minimalist']} />
        <CheckGroup name="tone" label="Tone"
          options={['Premium', 'Friendly', 'Bold', 'Calm', 'Playful', 'Authoritative', 'Heartfelt', 'Cool / detached']} />
        <Field full label="3 commercials you love" name="refs" placeholder="YouTube / Vimeo links that capture the feeling" />
      </FormSection>

      <FormSection n="05" title="Audio">
        <RadioGroup name="vo" label="Voiceover"
          options={['Yes', 'No', 'Not sure']} />
        <Field label="VO details" name="vo_details" placeholder="English (AU) · warm baritone male" />
        <RadioGroup name="music" label="Music"
          options={['Custom-licensed', 'Stock library', "I'll provide", 'No music']} />
        <RadioGroup name="sfx" label="Sound design / SFX"
          options={['Yes — full design', 'Light SFX only', 'No']} />
      </FormSection>

      <FormSection n="06" title="Format & talent">
        <CheckGroup name="ratios" label="Aspect ratios"
          options={['16:9 — wide / TV', '9:16 — vertical / mobile', '1:1 — square', '4:5 — IG feed', 'Cinema 2.39:1']} />
        <RadioGroup name="resolution" label="Resolution"
          options={['1080p HD', '4K UHD', 'Both']} />
        <RadioGroup name="people" label="People in the video"
          options={['Real-people-style AI talent', 'No people · product / atmosphere only', 'Mix', 'Not sure']} />
        <Field full label="Locations / scenes you imagine" name="locations" placeholder="Showroom interior · golden hour · close-ups on craftsmanship" />
      </FormSection>

      <FormSection n="07" title="Brand assets">
        <CheckGroup name="assets" label="Tick everything ready to share"
          options={['Logo (vector)', 'Colour palette', 'Brand fonts', 'Product photography', 'Existing footage', 'Brand guidelines', 'None of the above']} />
        <PalettePicker name="palette" label="Brand colours · click the closest match" />
        <Field full label="Or describe your own colours" name="colours" placeholder="warm gold + charcoal · or paste hex codes" hint="Only if 'Use my own' is picked above." />
      </FormSection>

      <FormSection n="08" title="Distribution">
        <CheckGroup name="distribution" label="Where it'll air"
          options={['Free-to-air TV', 'Cable / streaming', 'YouTube', 'Website', 'Instagram', 'TikTok', 'Facebook', 'Cinema', 'Outdoor / billboard', 'Internal use']} />
      </FormSection>

      <FormSection n="09" title="Timeline & budget">
        <RadioGroup name="timeline" label="Delivery deadline" required
          options={['1 week', '2 weeks', '3–4 weeks', 'Flexible']} />
        <RadioGroup name="budget" label="Budget range" required
          options={['$250 – $500', '$500 – $1,500', '$1,500 – $5,000', '$5,000 – $15,000', '$15,000+', "Tell me what you'd quote"]} />
      </FormSection>

      <FormSection n="10" title="Anything else?">
        <Field full textarea name="notes" label="Tell us anything we haven't asked" placeholder="Brand stories, must-haves, things to avoid, deadlines, festival deadlines..." />
      </FormSection>

      <button type="submit" className="self-center bg-white text-black rounded-full mt-3 px-8 py-4 text-base font-medium font-body inline-flex items-center gap-3 hover:scale-[1.02] active:scale-[0.98] transition-transform shadow-[0_0_0_1px_rgba(255,255,255,0.3),0_18px_48px_-8px_rgba(255,255,255,0.4)]">
        Send my commercial brief <ArrowUpRight className="h-4 w-4" />
      </button>
    </form>
  );
}

// ── CTA — Project type tabs + dynamic intake form
function CTA() {
  const [project, setProject] = useState('');
  const tabs = [
    { v: 'website', label: 'Website',          sub: 'Landing → full custom',
      tint: { from: 'rgba(120,200,255,0.18)', to: 'rgba(140,150,255,0.12)' } },
    { v: 'reel',    label: 'AI Reels',         sub: '15s · vertical · social',
      tint: { from: 'rgba(255,170,220,0.18)', to: 'rgba(255,140,180,0.12)' } },
    { v: 'commercial', label: 'Commercial',    sub: '30–90s brand film',
      tint: { from: 'rgba(255,210,140,0.18)', to: 'rgba(200,160,120,0.12)' } },
  ];
  const activeTint = tabs.find((t) => t.v === project)?.tint;
  return (
    <section id="cta" data-section="cta" className="relative w-full bg-black py-32 md:py-40 px-6 md:px-16 overflow-hidden">
      {/* Live video background at the bottom of the site */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <FadingVideo
          src="https://stream.mux.com/Kec29dVyJgiPdtWaQtPuEiiGHkJIYQAVUJcNiIHUYeo.m3u8"
          className="absolute inset-0 w-full h-full object-cover"
          style={{ width: '110%', height: '110%', left: '-5%', top: '-5%' }}
        />
        <div className="absolute inset-0"
          style={{ background: 'linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.65) 12%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.85) 92%, #000 100%)' }} />
      </div>

      <div className="relative z-10 max-w-5xl mx-auto">
        <div className="text-center">
          <div className="text-sm font-body text-white/60 mb-5">// Start a project</div>
          <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-[5.5rem] leading-[0.95]"
            style={{ letterSpacing: '-3px' }}>
            Brief us. We'll quote you<br /><em className="text-white/60">within a day.</em>
          </h2>
          <p className="mt-6 text-base md:text-lg text-white/80 max-w-xl mx-auto font-body font-light">
            Pick what you're after, then tell us as much or as little as you want. The more detail you share, the tighter our quote.
          </p>
        </div>

        {/* Project type tabs */}
        <div className="mt-12 flex flex-wrap justify-center gap-3">
          {tabs.map((t) => (
            <button key={t.v}
              onClick={() => setProject(t.v)}
              className={`group rounded-[1rem] px-5 py-3 text-left transition-all duration-500 ${
                project === t.v
                  ? 'liquid-glass-strong text-white scale-[1.06]'
                  : 'bg-white/5 text-white/70 hover:bg-white/10 hover:text-white hover:scale-[1.02]'
              }`}
              style={project === t.v ? {
                boxShadow: `inset 0 1.5px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 60px -8px ${t.tint.from}, 0 0 100px -20px ${t.tint.to}`
              } : {}}>
              <div className="font-heading italic text-xl md:text-2xl leading-none" style={{ letterSpacing: '-0.5px' }}>{t.label}</div>
              <div className={`mt-1 text-[10px] uppercase tracking-[0.22em] font-body ${project === t.v ? 'text-white/65' : 'text-white/40'}`}>{t.sub}</div>
            </button>
          ))}
        </div>

        {/* Hint when nothing picked yet */}
        {!project && (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="mt-10 text-center">
            <p className="font-heading italic text-white/55 text-2xl md:text-3xl leading-snug" style={{ letterSpacing: '-0.5px' }}>
              Pick one to begin.
            </p>
            <div className="mt-4 text-white/35 text-2xl animate-bounce">↑</div>
          </motion.div>
        )}

        {/* Dynamic form — appears with 3D motion when a tab is clicked */}
        {project && (
          <motion.div
            key={project}
            initial={{ opacity: 0, y: 60, scale: 0.92, rotateX: -10, filter: 'blur(20px)' }}
            animate={{ opacity: 1, y: 0, scale: 1, rotateX: 0, filter: 'blur(0px)' }}
            transition={{ duration: 0.9, ease: [0.2, 0.8, 0.2, 1] }}
            className="rounded-[1.5rem] p-5 md:p-8 mt-8 relative overflow-hidden"
            style={{
              transformStyle: 'preserve-3d',
              transformOrigin: 'top center',
              perspective: '2000px',
              background: 'rgba(15,15,17,0.85)',
              backdropFilter: 'blur(20px)',
              WebkitBackdropFilter: 'blur(20px)',
              boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
            }}>
            {/* Soft tint glow — subtle, no shine */}
            {activeTint && (
              <motion.div
                key={`wash-${project}`}
                initial={{ opacity: 0 }}
                animate={{ opacity: 0.35 }}
                transition={{ duration: 1.4, ease: 'easeOut' }}
                className="absolute inset-x-0 top-0 h-40 pointer-events-none"
                style={{
                  background: `radial-gradient(ellipse 80% 100% at 50% 0%, ${activeTint.from} 0%, transparent 70%)`,
                }} />
            )}

            {/* Stagger the inner form using Framer's stagger-children pattern via container */}
            <motion.div
              key={`form-${project}`}
              initial="hidden"
              animate="visible"
              variants={{
                hidden: {},
                visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
              }}>
              <motion.div
                variants={{
                  hidden: { opacity: 0, y: 20, filter: 'blur(8px)' },
                  visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.55, ease: 'easeOut' } },
                }}>
                {project === 'website' && <WebsiteForm />}
                {project === 'reel' && <ReelForm />}
                {project === 'commercial' && <CommercialForm />}
              </motion.div>
            </motion.div>

            {/* Close button to clear the form */}
            <button
              onClick={() => setProject('')}
              aria-label="Close brief"
              className="absolute top-4 right-4 z-20 liquid-glass rounded-full w-9 h-9 flex items-center justify-center text-white/70 hover:text-white text-sm transition-colors">
              ✕
            </button>
          </motion.div>
        )}

        {project && (
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 1 }}
            className="mt-8 text-center text-xs text-white/45 font-body italic">
            We reply within 1 business day · Sydney time. No spam, no autoresponders, no sales calls — just a real quote and a real timeline.
          </motion.p>
        )}

        <div className="mt-14 flex flex-col md:flex-row items-center justify-center gap-x-5 gap-y-2 text-xs uppercase tracking-[0.2em] text-white/45 font-body">
          <span>Moviio · AI Marketing Studio</span>
          <span className="hidden md:inline text-white/25">·</span>
          <span>Est. 2026 · Sydney, Australia</span>
          <span className="hidden md:inline text-white/25">·</span>
          <span className="text-white/55">ABN 19 978 226 575</span>
        </div>
        <div className="mt-3 text-[10px] tracking-[0.18em] uppercase text-white/30 font-body text-center">
          A registered Australian business — invoices issued, not just promises.
        </div>
      </div>
    </section>
  );
}

// ── Entry / intro overlay — click to enter the site
function EntryScreen({ onEnter }) {
  const [leaving, setLeaving] = useState(false);
  const lettersRef = useRef(null);
  const handleEnter = () => {
    if (leaving) return;
    setLeaving(true);
    if (window.gsap && lettersRef.current) {
      window.gsap.to(lettersRef.current.querySelectorAll('.glass-letter'), {
        yPercent: -40, scale: 1.4, rotateX: 35, opacity: 0,
        filter: 'blur(20px)',
        duration: 0.9, ease: 'power3.in', stagger: 0.04,
      });
    }
    setTimeout(() => onEnter(), 1100);
  };
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') handleEnter(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [leaving]);

  // GSAP per-letter intro + idle float
  useEffect(() => {
    if (!window.gsap || !lettersRef.current) return;
    const { gsap } = window;
    const letters = lettersRef.current.querySelectorAll('.glass-letter');
    const tl = gsap.timeline({ delay: 0.45 });
    tl.from(letters, {
      yPercent: 120, opacity: 0, rotateX: -85, rotateY: 20,
      scale: 0.6, filter: 'blur(28px)',
      duration: 1.4, ease: 'expo.out', stagger: { each: 0.1, from: 'center' },
    });
    // shine sweep across each letter
    letters.forEach((l, i) => {
      const shine = l.querySelector('.letter-shine');
      if (!shine) return;
      gsap.fromTo(shine,
        { backgroundPosition: '-150% 0' },
        { backgroundPosition: '250% 0', duration: 1.2, ease: 'power2.inOut',
          delay: 1.4 + i * 0.08 });
    });
    // gentle idle float per letter
    letters.forEach((l, i) => {
      gsap.to(l, {
        y: '+=6', rotateZ: i % 2 === 0 ? 0.8 : -0.8,
        duration: 2.4 + (i * 0.15) % 1, ease: 'sine.inOut',
        yoyo: true, repeat: -1, delay: 2 + i * 0.1,
      });
    });

    // Hologram delay-trail: each letter follows the cursor with a longer lag than the one before
    const ghosts = lettersRef.current.querySelectorAll('.letter-ghost');
    const handleMove = (e) => {
      const r = lettersRef.current.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const nx = (e.clientX - cx) / r.width;   // -0.5 .. 0.5-ish
      const ny = (e.clientY - cy) / r.height;
      // main letters lean toward cursor with stagger lag
      letters.forEach((l, i) => {
        gsap.to(l, {
          x: nx * 18 + i * 0.5,
          y: ny * 12,
          rotateY: nx * 8,
          rotateX: -ny * 6,
          duration: 0.9 + i * 0.06,
          ease: 'power3.out',
          overwrite: 'auto',
        });
      });
      // amber ghost copies trail further behind, longer duration → visible delay
      ghosts.forEach((g, i) => {
        gsap.to(g, {
          x: nx * 32,
          y: ny * 22,
          duration: 1.6 + i * 0.18,
          ease: 'power2.out',
          overwrite: 'auto',
        });
      });
    };
    window.addEventListener('mousemove', handleMove);
    return () => {
      tl.kill();
      window.removeEventListener('mousemove', handleMove);
    };
  }, []);
  return (
    <div
      onClick={handleEnter}
      className="fixed inset-0 z-[100] flex flex-col items-center justify-center cursor-pointer overflow-hidden"
      style={{
        background: '#000',
        transition: 'opacity 1s ease, transform 1s cubic-bezier(.7,0,.3,1), filter 1s ease',
        opacity: leaving ? 0 : 1,
        transform: leaving ? 'scale(1.08)' : 'scale(1)',
        filter: leaving ? 'blur(20px)' : 'blur(0)',
      }}>
      {/* faint motion behind logo */}
      <FadingVideo
        src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4"
        className="absolute inset-0 w-full h-full object-cover"
        style={{ width: '110%', height: '110%', left: '-5%', top: '-5%', opacity: 0.55 }}
      />
      <div className="absolute inset-0"
        style={{ background: 'radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 60%, #000 100%)' }} />

      <div className="relative z-10 flex flex-col items-center text-center px-6">
        <motion.div
          initial={{ opacity: 0, filter: 'blur(20px)', y: 30 }}
          animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}
          transition={{ duration: 1.2, ease: 'easeOut', delay: 0.15 }}
          className="text-xs uppercase tracking-[0.4em] text-white/60 font-body mb-8">
          AI Marketing Studio · est. 2026
        </motion.div>

        <div ref={lettersRef}
          className="glass-letters select-none"
          style={{ fontSize: 'clamp(8rem, 22vw, 20rem)', letterSpacing: '0.04em' }}>
          {['M','o','v','i','i','o'].map((ch, i) => (
            <span key={i} className="glass-letter" data-char={ch}
              style={{ marginLeft: i === 0 ? 0 : '0.04em' }}>
              {ch}
              <span className="letter-rim" aria-hidden="true">{ch}</span>
              <span className="letter-shine" aria-hidden="true">{ch}</span>
            </span>
          ))}
        </div>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, ease: 'easeOut', delay: 0.9 }}
          className="font-body text-white/85 text-base md:text-xl mt-10 max-w-2xl leading-relaxed font-light">
          AI marketing videos &amp; websites for small business.<br className="hidden md:block" />
          <span className="text-white/60">Reels, commercials, branding templates and clean landing pages — without filming, actors, or agency fees.</span>
        </motion.p>

        <motion.button
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, ease: 'easeOut', delay: 1.4 }}
          onClick={(e) => { e.stopPropagation(); handleEnter(); }}
          className="mt-12 group inline-flex items-center gap-3 px-7 py-3 rounded-full bg-white text-black text-sm font-medium font-body">
          Enter the studio
          <ArrowUpRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
        </motion.button>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1, delay: 1.8 }}
          className="fixed bottom-6 left-0 right-0 text-center text-[10px] uppercase tracking-[0.3em] text-white/40 font-body pointer-events-none">
          Click anywhere · or press Enter
        </motion.div>
      </div>
    </div>
  );
}

function App() {
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    if (entered) document.body.style.overflow = '';
    else document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [entered]);

  // GSAP scroll animations
  useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const { gsap, ScrollTrigger } = window;
    gsap.registerPlugin(ScrollTrigger);

    const ctx = gsap.context(() => {
      // 1. Service cards stagger on scroll-in + scale up
      gsap.utils.toArray('[data-service-card]').forEach((card, i) => {
        gsap.from(card, {
          y: 80, opacity: 0, scale: 0.85,
          duration: 1, ease: 'expo.out',
          delay: i * 0.08,
          scrollTrigger: { trigger: card, start: 'top 90%' },
        });
      });

      // 2. Showcase video scales bigger as user scrolls thru pinned section
      const frame = document.querySelector('[data-showcase-frame]');
      if (frame) {
        gsap.fromTo(frame,
          { scale: 1.05 },
          {
            scale: 1.2,
            ease: 'none',
            scrollTrigger: {
              trigger: '[data-showcase-pin]',
              start: 'top top',
              end: 'bottom bottom',
              scrub: 1,
            },
          }
        );
      }

      // 3. Pack cards: pop in with stagger + 3D
      gsap.utils.toArray('[data-pack]').forEach((card, i) => {
        gsap.from(card, {
          y: 100, opacity: 0, rotateX: -15,
          transformOrigin: 'center bottom',
          duration: 1, ease: 'expo.out',
          delay: i * 0.1,
          scrollTrigger: { trigger: card, start: 'top 90%' },
        });
      });

      // 4. Why cards: spring in
      gsap.utils.toArray('[data-why-card]').forEach((card, i) => {
        gsap.from(card, {
          y: 50, opacity: 0, scale: 0.9,
          duration: 0.9, ease: 'back.out(1.4)',
          delay: i * 0.1,
          scrollTrigger: { trigger: card, start: 'top 90%' },
        });
      });

      // 5. Section heading per-letter reveal (split text, animate each char)
      gsap.utils.toArray('section[data-section] h2').forEach((h2) => {
        if (h2.dataset.split) return;
        h2.dataset.split = '1';
        // Wrap each visible character in a span (preserve <br>, <em>, spaces)
        const splitNode = (node) => {
          const out = [];
          node.childNodes.forEach((c) => {
            if (c.nodeType === 3) {
              const txt = c.textContent;
              for (const ch of txt) {
                if (ch === ' ') {
                  out.push(document.createTextNode(' '));
                } else {
                  const s = document.createElement('span');
                  s.className = 'split-char';
                  s.style.display = 'inline-block';
                  s.style.willChange = 'transform, opacity, filter';
                  s.textContent = ch;
                  out.push(s);
                }
              }
            } else if (c.nodeType === 1) {
              if (c.tagName === 'BR') { out.push(c.cloneNode()); }
              else {
                const wrap = c.cloneNode(false);
                splitNode(c).forEach((n) => wrap.appendChild(n));
                out.push(wrap);
              }
            }
          });
          return out;
        };
        const replaced = splitNode(h2);
        h2.innerHTML = '';
        replaced.forEach((n) => h2.appendChild(n));

        gsap.from(h2.querySelectorAll('.split-char'), {
          yPercent: 110,
          opacity: 0,
          rotateX: -60,
          filter: 'blur(8px)',
          duration: 1, ease: 'expo.out',
          stagger: { each: 0.025, from: 'start' },
          scrollTrigger: { trigger: h2, start: 'top 88%' },
        });
      });

      // 5b. Eyebrow `// xxx` line characters drift in
      gsap.utils.toArray('section[data-section] > div .text-white\\/60, section[data-section] > div > div .text-white\\/60').forEach(() => {});

      // 5c. Animated sheen sweep across glass cards on scroll-in
      gsap.utils.toArray('[data-service-card], [data-pack], [data-why-card]').forEach((card) => {
        if (card.querySelector('.glass-sheen')) return;
        const sheen = document.createElement('span');
        sheen.className = 'glass-sheen';
        card.appendChild(sheen);
        gsap.fromTo(sheen,
          { x: '0%', opacity: 0 },
          {
            x: '300%', opacity: 1,
            duration: 1.6, ease: 'power2.inOut',
            scrollTrigger: { trigger: card, start: 'top 80%' },
            onComplete: () => gsap.to(sheen, { opacity: 0, duration: 0.4 }),
          }
        );
      });

      // 6. Subtle parallax on each section's eyebrow `// xxx` line
      gsap.utils.toArray('section[data-section] .text-white\\/60').forEach((eb) => {
        if (!eb.textContent.startsWith('//')) return;
        gsap.fromTo(eb,
          { x: -30, opacity: 0 },
          {
            x: 0, opacity: 0.6,
            ease: 'power2.out',
            scrollTrigger: { trigger: eb, start: 'top 95%', toggleActions: 'play none none reverse' },
          }
        );
      });

      // 7. Magnetic buttons (CTAs)
      document.querySelectorAll('button.bg-white, .liquid-glass-strong[class*="rounded-full"]').forEach((btn) => {
        if (btn.dataset.magnetic) return;
        btn.dataset.magnetic = '1';
        btn.addEventListener('mousemove', (e) => {
          const r = btn.getBoundingClientRect();
          gsap.to(btn, {
            x: (e.clientX - r.left - r.width / 2) * 0.2,
            y: (e.clientY - r.top - r.height / 2) * 0.2,
            duration: 0.4, ease: 'power3.out',
          });
        });
        btn.addEventListener('mouseleave', () => {
          gsap.to(btn, { x: 0, y: 0, duration: 0.6, ease: 'elastic.out(1, 0.5)' });
        });
      });
    });

    return () => ctx.revert();
  }, []);

  return (
    <React.Fragment>
      {!entered && <EntryScreen onEnter={() => setEntered(true)} />}
      <main className="bg-black">
        <Hero />
        <ServicesGrid />
        <WhyMarketing />
        <StandOut />
        <SampleReels />
        <ConceptDeck />
        <VersusAgency />
        <Authenticity />
        <Outcomes />
        <Packages />
        <FAQ />
        <CTA />
      </main>
    </React.Fragment>
  );
}

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