const { useState, useEffect, useRef } = React;

/* ─────────────── Icons (Lucide-equivalent, inlined) ─────────────── */
const I = {
  Clock:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>,
  Users:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  Sparkles: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3 13.8 8.2 19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 17l.9 2.1L22 20l-2.1.9L19 23l-.9-2.1L16 20l2.1-.9z"/></svg>,
  Check:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>,
  ArrowRight: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  Plus:     (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><line x1="12" y1="5" x2="12" y2="19"/></svg>,
  Play:     (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><polygon points="6 4 20 12 6 20 6 4"/></svg>,
  Star:     (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><polygon points="12 2 15.1 8.6 22 9.6 17 14.5 18.2 21.3 12 18.1 5.8 21.3 7 14.5 2 9.6 8.9 8.6"/></svg>,
  Video:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>,
  Layers:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>,
  Globe:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20"/><path d="M12 2a15 15 0 0 0 0 20"/></svg>,
  Images:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="14" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>,
  Kanban:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v12"/><path d="M15 3v8"/></svg>,
  Repeat:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>,
  Pause:    (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>,
};

/* Locked-in lime accent from the final design direction. */
const ACCENT = {
  bg: '#bef264',
  deep: '#65a30d',
  deeper: '#3f6212',
  ring: '#a3e635',
  soft: 'rgba(190,242,100,0.16)',
};

/* ─────────────── shadcn-style primitives ─────────────── */
function cn(...c) { return c.filter(Boolean).join(' '); }

function Button({ variant = 'default', size = 'md', className = '', children, ...props }) {
  const base = 'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 active:translate-y-px disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-ink-50 select-none';
  const sizes = {
    sm: 'h-9 px-3.5 text-[13px]',
    md: 'h-10 px-4 text-sm',
    lg: 'h-12 px-6 text-[15px]',
    xl: 'h-14 px-7 text-base',
  };
  const variants = {
    default: 'bg-ink-900 text-ink-50 hover:bg-ink-800 shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.2)]',
    outline: 'bg-transparent border border-ink-900/15 text-ink-900 hover:bg-ink-900/[0.04] hover:border-ink-900/25',
    ghost:   'bg-transparent text-ink-900 hover:bg-ink-900/[0.05]',
    accent:  'text-ink-900',
  };
  const style = variant === 'accent'
    ? { backgroundColor: ACCENT.bg, boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px ${ACCENT.deep}33` }
    : undefined;
  return (
    <button className={cn(base, sizes[size], variants[variant], className)} style={style} {...props}>
      {children}
    </button>
  );
}

function Card({ className = '', children, ...props }) {
  return (
    <div className={cn('rounded-xl border border-hair bg-white', className)} {...props}>
      {children}
    </div>
  );
}

function Badge({ children, className = '' }) {
  return (
    <span className={cn('inline-flex items-center gap-1.5 rounded-full border border-hair bg-white/60 backdrop-blur px-2.5 py-1 text-[11px] font-medium font-mono uppercase tracking-wider text-ink-600', className)}>
      {children}
    </span>
  );
}

/* ─────────────── Reveal-on-scroll wrapper ─────────────── */
function Reveal({ children, delay = 0, className = '', as: As = 'div' }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.style.animationDelay = `${delay}ms`;
          e.target.classList.add('reveal-in');
          e.target.classList.remove('reveal-init');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={cn('reveal-init', className)}>{children}</As>;
}

/* ─────────────── Faux reel placeholder ─────────────── */
function VideoReel({ src, className = '' }) {
  return (
    <div className={cn('relative overflow-hidden rounded-2xl border border-hair bg-ink-900 aspect-[9/16] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.18)]', className)}>
      <video
        src={src}
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        className="absolute inset-0 w-full h-full object-cover"
      />
      <div className="noise absolute inset-0" />
    </div>
  );
}

// Order matters: leftmost reads first, rightmost trails off.
// The "labeled" clip has lime-UI baked in, so it sits last to avoid
// fighting the brand accent.
const FEATURED_REELS = [
  './download.mp4',
  './f85ed0dd9d8b4a36b50496cdb56d25ba.MOV',
  './labeled_v4%202.MP4',
];

/* ─────────────── Sections ─────────────── */

function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={cn(
      'sticky top-0 z-40 transition-all duration-300',
      scrolled ? 'bg-ink-50/80 backdrop-blur-lg border-b border-hair' : 'bg-transparent border-b border-transparent'
    )}>
      <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5 sm:px-8">
        <a href="#" className="flex items-center gap-2 group">
          <span className="grid h-6 w-6 place-items-center rounded-md bg-ink-900 text-ink-50">
            <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 17c4-6 8-6 12 0" />
              <circle cx="17" cy="14" r="2" fill="currentColor" />
            </svg>
          </span>
          <span className="font-semibold tracking-tight text-[15px]">413media</span>
        </a>
        <nav className="flex items-center gap-1 sm:gap-2">
          <a href="#how" className="hidden sm:inline-flex h-9 items-center px-3 text-[13px] text-ink-600 hover:text-ink-900 transition-colors">How it works</a>
          <a href="#pricing" className="inline-flex h-9 items-center px-3 text-[13px] text-ink-600 hover:text-ink-900 transition-colors">Pricing</a>
          <a href="#faq" className="hidden sm:inline-flex h-9 items-center px-3 text-[13px] text-ink-600 hover:text-ink-900 transition-colors">FAQ</a>
          <a href="https://cal.com/miguel-de-leon-uzgzxe/15min" target="_blank" rel="noopener noreferrer" className="ml-1">
            <Button size="sm" variant="accent">
              Book a call <I.ArrowRight className="h-3.5 w-3.5" />
            </Button>
          </a>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="relative">
      <div className="mx-auto max-w-6xl px-5 sm:px-8 pt-14 sm:pt-20 pb-16 sm:pb-24">
        <div className="grid gap-12 items-center lg:grid-cols-[1.05fr_0.95fr]">
          <div>
            <Reveal>
              <Badge className="mb-6">
                <span className="h-1.5 w-1.5 rounded-full" style={{ background: ACCENT.deep }} />
                Now accepting subscribers · 3 spots left
              </Badge>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="font-semibold tracking-[-0.03em] text-ink-900 text-[44px] leading-[1.02] sm:text-[64px] sm:leading-[0.98] lg:text-[72px]">
                AI ad subscription<br />for founders.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="mt-6 max-w-xl text-ink-600 text-[17px] leading-[1.55] sm:text-[19px]">
                Unlimited AI video ads. <span className="text-ink-900">48-72 hour turnaround.</span> One flat monthly fee. Pause anytime.
              </p>
            </Reveal>
            <Reveal delay={240}>
              <div className="mt-8 flex flex-wrap items-center gap-3">
                <a href="#pricing"><Button variant="accent" size="lg">See pricing <I.ArrowRight className="h-4 w-4" /></Button></a>
                <a href="https://cal.com/miguel-de-leon-uzgzxe/15min" target="_blank" rel="noopener noreferrer"><Button variant="outline" size="lg">Book a 15-min intro call</Button></a>
              </div>
            </Reveal>
            <Reveal delay={320}>
              <div className="mt-8 flex items-center gap-3 text-[13px] text-ink-500">
                <div className="flex items-center gap-0.5" style={{ color: ACCENT.deep }}>
                  {[0,1,2,3,4].map(i => <I.Star key={i} className="h-3.5 w-3.5" />)}
                </div>
                <span>Trusted by SaaS founders shipping ads weekly</span>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120} className="hidden lg:block">
            <div className="grid grid-cols-3 gap-3">
              {FEATURED_REELS.map((src, i) => (
                <VideoReel key={src} src={src} />
              ))}
            </div>
          </Reveal>
        </div>
      </div>
      <div className="border-y border-hair">
        <div className="mx-auto max-w-6xl px-5 sm:px-8 py-5 flex flex-wrap items-center justify-between gap-x-8 gap-y-3">
          <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-500">Built for</span>
          <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-ink-700">
            {['B2B SaaS', 'Indie hackers', 'Bootstrapped founders', 'Series A startups', 'Product-led growth'].map((n, i, arr) => (
              <React.Fragment key={n}>
                <span className="text-[14px] font-medium tracking-tight">{n}</span>
                {i < arr.length - 1 && <span className="text-ink-300 select-none">·</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const cards = [
    {
      icon: <I.Clock className="h-5 w-5" />,
      title: 'Traditional production',
      tag: 'The agency way',
      stat: { k: '$2-5K', v: 'per ad' },
      bullets: ['2–4 weeks turnaround', 'Manage freelancers + scope creep', 'Stalls when you need to test fast'],
    },
    {
      icon: <I.Users className="h-5 w-5" />,
      title: 'In-house creative',
      tag: 'The hire',
      stat: { k: '$80K+', v: '/year' },
      bullets: ['One designer, capped output', 'Slow turnaround once they’re busy', 'Hard to scale, harder to pause'],
    },
    {
      icon: <I.Sparkles className="h-5 w-5" />,
      title: '413media',
      tag: 'Subscription',
      stat: { k: '$4,995', v: '/month' },
      bullets: ['48–72hr turnaround', 'Unlimited requests + revisions', 'Pause anytime'],
      highlight: true,
    },
  ];
  return (
    <section className="relative py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-5 sm:px-8">
        <Reveal>
          <div className="max-w-2xl">
            <Badge className="mb-5">The problem</Badge>
            <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[44px] leading-[1.05] text-ink-900">
              Your ad creative is the bottleneck.
            </h2>
            <p className="mt-4 text-ink-600 text-[16px] sm:text-[17px] leading-relaxed">
              Paid social rewards volume and iteration. Traditional production gives you neither.
            </p>
          </div>
        </Reveal>

        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={i * 80}>
              <Card
                className={cn(
                  'p-6 h-full flex flex-col transition-transform duration-300 hover:-translate-y-0.5',
                  c.highlight && 'relative'
                )}
                style={c.highlight ? { borderColor: ACCENT.deep, boxShadow: `0 0 0 1px ${ACCENT.deep}, 0 16px 40px -20px ${ACCENT.deep}33` } : undefined}
              >
                {c.highlight && (
                  <span
                    className="absolute -top-2.5 left-6 font-mono text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full text-ink-900"
                    style={{ background: ACCENT.bg }}
                  >
                    You, in 1 hour
                  </span>
                )}
                <div className="flex items-center justify-between">
                  <div
                    className="grid h-9 w-9 place-items-center rounded-md border border-hair text-ink-700"
                    style={c.highlight ? { background: ACCENT.soft, color: ACCENT.deeper, borderColor: `${ACCENT.deep}33` } : undefined}
                  >
                    {c.icon}
                  </div>
                  <span className="font-mono text-[10px] uppercase tracking-wider text-ink-500">{c.tag}</span>
                </div>
                <h3 className="mt-5 text-[17px] font-semibold tracking-tight text-ink-900">{c.title}</h3>
                <div className="mt-3 flex items-baseline gap-1.5">
                  <span className="text-[28px] font-semibold tracking-tight text-ink-900 tabular-nums">{c.stat.k}</span>
                  <span className="text-ink-500 text-[13px]">{c.stat.v}</span>
                </div>
                <ul className="mt-5 space-y-2.5 text-[14px] text-ink-600">
                  {c.bullets.map((b, j) => (
                    <li key={j} className="flex items-start gap-2.5">
                      <span
                        className="mt-[7px] h-1 w-1 rounded-full flex-none"
                        style={{ background: c.highlight ? ACCENT.deep : '#a8a29e' }}
                      />
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </Card>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', title: 'Subscribe', body: 'Pick a plan. We add you to your private Trello board within an hour.', icon: <I.Repeat className="h-4 w-4" /> },
    { n: '02', title: 'Request', body: 'Drop any ad concept on the board — written brief, Loom, wireframe, raw idea.', icon: <I.Kanban className="h-4 w-4" /> },
    { n: '03', title: 'Receive', body: 'AI-produced ad delivered in 48–72 hours, ready for paid social.', icon: <I.Video className="h-4 w-4" /> },
    { n: '04', title: 'Iterate', body: 'Unlimited revisions. Ship the winner. Queue the next one.', icon: <I.ArrowRight className="h-4 w-4" /> },
  ];
  return (
    <section id="how" className="relative py-20 sm:py-28 bg-ink-900 text-ink-50">
      <div className="mx-auto max-w-6xl px-5 sm:px-8">
        <Reveal>
          <div className="max-w-2xl">
            <span className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.04] px-2.5 py-1 text-[11px] font-medium font-mono uppercase tracking-wider text-white/70 mb-5">
              How it works
            </span>
            <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[44px] leading-[1.05] text-white">
              Brief in. <span style={{ color: ACCENT.bg }}>Ads out.</span>
            </h2>
            <p className="mt-4 text-white/60 text-[16px] sm:text-[17px] leading-relaxed">
              No calls. No SOWs. No agency politics. Just a board, a queue, and ads landing in your inbox.
            </p>
          </div>
        </Reveal>

        <div className="relative mt-14">
          <div className="hidden lg:block absolute top-[42px] left-0 right-0 dotted-x opacity-50" style={{ backgroundImage: 'radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px)' }} />

          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 90}>
                <div className="relative rounded-xl border border-white/10 bg-white/[0.03] p-6 h-full backdrop-blur-sm transition-all hover:bg-white/[0.06]">
                  <div className="flex items-center justify-between">
                    <span
                      className="font-mono text-[11px] tabular-nums tracking-wider px-2 py-1 rounded-md border border-white/15"
                      style={{ color: ACCENT.bg, background: 'rgba(255,255,255,0.04)' }}
                    >
                      {s.n}
                    </span>
                    <span className="text-white/40">{s.icon}</span>
                  </div>
                  <h3 className="mt-6 text-[18px] font-semibold tracking-tight text-white">{s.title}</h3>
                  <p className="mt-2 text-[14px] leading-relaxed text-white/60">{s.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatYouGet() {
  const features = [
    { icon: <I.Video className="h-5 w-5" />, title: 'AI video ads', body: '15–30s formats, every aspect ratio (9:16, 1:1, 4:5, 16:9).' },
    { icon: <I.Layers className="h-5 w-5" />, title: 'Multiple hooks per concept', body: 'A/B-test what converts. Scale winners. Kill losers fast.' },
    { icon: <I.Globe className="h-5 w-5" />, title: 'AI avatars in 20+ languages', body: 'Localize for global expansion without a second studio.' },
    { icon: <I.Images className="h-5 w-5" />, title: 'Static + carousel ads', body: 'Beyond video. Same board, same turnaround.' },
    { icon: <I.Kanban className="h-5 w-5" />, title: 'Trello board management', body: 'Your queue, transparent and managed. No black box.' },
    { icon: <I.Repeat className="h-5 w-5" />, title: 'Unlimited revisions', body: 'Refine until you ship the winner. No ticket caps.' },
  ];
  return (
    <section className="relative py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-5 sm:px-8">
        <Reveal>
          <div className="max-w-2xl">
            <Badge className="mb-5">What you get</Badge>
            <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[44px] leading-[1.05] text-ink-900">
              Everything you need to scale ad creative.
            </h2>
          </div>
        </Reveal>

        <div className="mt-12 grid gap-px md:grid-cols-2 bg-ink-900/[0.08] rounded-xl border border-hair overflow-hidden">
          {features.map((f, i) => (
            <Reveal key={f.title} delay={(i % 2) * 80}>
              <div className="bg-white p-7 h-full flex gap-4 transition-colors hover:bg-ink-50">
                <div
                  className="flex-none grid h-10 w-10 place-items-center rounded-md border border-hair text-ink-700"
                  style={{ background: ACCENT.soft, color: ACCENT.deeper, borderColor: `${ACCENT.deep}33` }}
                >
                  {f.icon}
                </div>
                <div>
                  <h3 className="text-[16px] font-semibold tracking-tight text-ink-900">{f.title}</h3>
                  <p className="mt-1.5 text-[14px] leading-relaxed text-ink-600">{f.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const bullets = [
    'One active request at a time',
    '48–72 hour avg. turnaround',
    'Unlimited brands',
    'Unlimited revisions',
    'All aspect ratios (9:16, 1:1, 4:5, 16:9)',
    'AI avatars + 20+ languages',
    'Trello board management',
    'Up to 2 users',
    'Pause or cancel anytime',
  ];
  return (
    <section id="pricing" className="relative py-20 sm:py-28 bg-gradient-to-b from-ink-50 to-white">
      <div className="mx-auto max-w-6xl px-5 sm:px-8">
        <Reveal>
          <div className="text-center max-w-2xl mx-auto">
            <Badge className="mb-5">Pricing</Badge>
            <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[44px] leading-[1.05] text-ink-900">
              One plan. One price. No surprises.
            </h2>
            <p className="mt-4 text-ink-600 text-[16px] sm:text-[17px] leading-relaxed">
              Cheaper than a freelancer. Faster than an agency. More scalable than a hire.
            </p>
          </div>
        </Reveal>

        <Reveal delay={100} className="mt-12">
          <div className="mx-auto max-w-2xl">
            <Card className="relative overflow-hidden p-0 shadow-[0_2px_4px_rgba(0,0,0,0.04),0_32px_80px_-32px_rgba(0,0,0,0.18)]">
              <div className="pointer-events-none absolute -top-32 -right-32 h-64 w-64 rounded-full blur-3xl opacity-50" style={{ background: ACCENT.soft }} />
              <div className="relative grid sm:grid-cols-[1.1fr_1fr] gap-0">
                <div className="p-8 sm:p-10 border-b sm:border-b-0 sm:border-r border-hair">
                  <div className="flex items-center justify-between">
                    <span className="font-mono text-[11px] uppercase tracking-wider text-ink-500">Monthly Subscription</span>
                    <span
                      className="font-mono text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full"
                      style={{ background: ACCENT.bg, color: ACCENT.deeper }}
                    >
                      Most flexible
                    </span>
                  </div>
                  <div className="mt-6 flex items-baseline gap-2">
                    <span className="font-semibold tracking-[-0.04em] text-ink-900 text-[64px] sm:text-[72px] leading-none tabular-nums">$4,995</span>
                    <span className="text-ink-500 text-[15px]">/month</span>
                  </div>
                  <p className="mt-3 text-ink-600 text-[14px]">Pause or cancel anytime. No contracts, no surprise fees.</p>

                  <div className="mt-8 space-y-3">
                    <a href="https://buy.stripe.com/aFa28r7Ks44qbB6bFQ2kw06" target="_blank" rel="noopener noreferrer" className="block">
                      <Button variant="accent" size="xl" className="w-full">
                        Subscribe today <I.ArrowRight className="h-4 w-4" />
                      </Button>
                    </a>
                    <a href="https://cal.com/miguel-de-leon-uzgzxe/15min" target="_blank" rel="noopener noreferrer" className="block text-center text-[13px] text-ink-500 hover:text-ink-900 transition-colors">
                      Not sure? Book a 15-min intro call →
                    </a>
                  </div>
                </div>

                <div className="p-8 sm:p-10 bg-ink-50/60">
                  <span className="font-mono text-[11px] uppercase tracking-wider text-ink-500">Included</span>
                  <ul className="mt-5 space-y-3">
                    {bullets.map((b, i) => (
                      <li key={i} className="flex items-start gap-2.5 text-[14px] text-ink-800">
                        <span
                          className="mt-0.5 flex-none grid h-4 w-4 place-items-center rounded-full"
                          style={{ background: ACCENT.bg, color: ACCENT.deeper }}
                        >
                          <I.Check className="h-2.5 w-2.5" strokeWidth="3" />
                        </span>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Card>

            <div className="mt-5 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[12px] text-ink-500 font-mono uppercase tracking-wider">
              <span className="flex items-center gap-1.5"><I.Pause className="h-3 w-3" /> Pause anytime</span>
              <span className="opacity-30">·</span>
              <span>No contracts</span>
              <span className="opacity-30">·</span>
              <span>Cancel in 1 click</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'How fast will I receive my ads?', a: 'Most requests are delivered in 48–72 hours. Complex concepts with multiple hooks or avatars may take a touch longer — we tell you up front in the board.' },
    { q: 'What if I don’t like the ad?', a: 'We iterate until you do. Revisions are unlimited and we don’t move on from a request until you greenlight it. No revision tickets, no surcharges.' },
    { q: 'How does pausing work?', a: 'Pause your subscription whenever you don’t need new ads — between campaigns, during slow seasons, or when you’re testing existing winners. Billing stops at the end of your current billing cycle. When you’re ready, unpause in one click and we pick up right where we left off.' },
    { q: 'Can I cancel anytime?', a: 'Yes. One click in the dashboard. No exit fees, no claw-backs, no awkward emails.' },
    { q: 'What platforms are the ads optimized for?', a: 'Meta (Facebook + Instagram), TikTok, YouTube Shorts, LinkedIn. We deliver every aspect ratio you need: 9:16, 1:1, 4:5, 16:9.' },
    { q: 'What if I only need ads occasionally?', a: 'Subscribe in a sprint, get a batch of variations, then pause. Most founders run 413media 2–3 months on, 1 month off — testing in bursts, then scaling winners.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="relative py-20 sm:py-28">
      <div className="mx-auto max-w-3xl px-5 sm:px-8">
        <Reveal>
          <div className="text-center mb-12">
            <Badge className="mb-5">FAQ</Badge>
            <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[44px] leading-[1.05] text-ink-900">
              Questions, answered.
            </h2>
          </div>
        </Reveal>

        <div className="rounded-xl border border-hair bg-white overflow-hidden divide-y divide-ink-900/[0.06]">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i}>
                <button
                  className="w-full flex items-center justify-between gap-4 p-5 sm:p-6 text-left hover:bg-ink-50 transition-colors"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span className="text-[15px] sm:text-[16px] font-medium tracking-tight text-ink-900">{it.q}</span>
                  <span
                    className="flex-none grid h-7 w-7 place-items-center rounded-full border border-hair text-ink-700 transition-transform duration-300"
                    style={{ transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)' }}
                  >
                    <I.Plus className="h-3.5 w-3.5" />
                  </span>
                </button>
                <div
                  className="grid transition-all duration-300 ease-out"
                  style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
                >
                  <div className="overflow-hidden">
                    <div className="px-5 sm:px-6 pb-5 sm:pb-6 -mt-1 max-w-2xl text-[14px] leading-relaxed text-ink-600">
                      {it.a}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="relative py-20 sm:py-28">
      <div className="mx-auto max-w-5xl px-5 sm:px-8">
        <div className="relative overflow-hidden rounded-2xl bg-ink-900 text-white p-10 sm:p-16">
          <div className="pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full blur-3xl opacity-30" style={{ background: ACCENT.bg }} />
          <div className="pointer-events-none absolute inset-0 opacity-[0.06]"
               style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)', backgroundSize: '48px 48px' }} />
          <div className="relative">
            <Reveal>
              <h2 className="font-semibold tracking-[-0.025em] text-[34px] sm:text-[52px] leading-[1.03] text-white max-w-3xl">
                Stop letting creative<br />bottleneck your growth.
              </h2>
            </Reveal>
            <Reveal delay={100}>
              <p className="mt-5 text-white/65 text-[17px] sm:text-[18px] leading-relaxed max-w-2xl">
                Subscribe today, or book a 15-minute call to see if 413media is a fit.
              </p>
            </Reveal>
            <Reveal delay={180}>
              <div className="mt-8 flex flex-wrap gap-3">
                <a href="https://buy.stripe.com/aFa28r7Ks44qbB6bFQ2kw06" target="_blank" rel="noopener noreferrer"><Button variant="accent" size="lg">Subscribe now <I.ArrowRight className="h-4 w-4" /></Button></a>
                <a href="https://cal.com/miguel-de-leon-uzgzxe/15min" target="_blank" rel="noopener noreferrer">
                  <Button size="lg" className="bg-white/10 hover:bg-white/15 text-white border border-white/15">
                    Book a call
                  </Button>
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-hair">
      <div className="mx-auto max-w-6xl px-5 sm:px-8 py-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          <span className="grid h-5 w-5 place-items-center rounded-md bg-ink-900 text-ink-50">
            <svg viewBox="0 0 24 24" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 17c4-6 8-6 12 0" />
              <circle cx="17" cy="14" r="2" fill="currentColor" />
            </svg>
          </span>
          <span className="text-[13px] text-ink-500">© 2026 413media. All rights reserved.</span>
        </div>
        <div className="flex items-center gap-6 text-[13px] text-ink-500">
          <a href="#" className="hover:text-ink-900 transition-colors">Terms</a>
          <a href="#" className="hover:text-ink-900 transition-colors">Privacy</a>
          <a href="https://cal.com/miguel-de-leon-uzgzxe/15min" target="_blank" rel="noopener noreferrer" className="hover:text-ink-900 transition-colors">Contact</a>
        </div>
      </div>
    </footer>
  );
}

function LandingPage() {
  return (
    <div className="min-h-screen bg-ink-50 text-ink-900 antialiased">
      <Navbar />
      <main>
        <Hero />
        <Problem />
        <HowItWorks />
        <WhatYouGet />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
    </div>
  );
}

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