function Packages() {
  const tiers = [
    {
      label: 'Editing',
      title: 'Need Editing?',
      tagline: 'Send footage. Get polished cuts back.',
      headline: '48h',
      headlineLabel: 'turnaround',
      points: [
        'YouTube, VSLs, webinars, sales videos',
        'Captions, color, motion graphics',
        'Revisions until you\'re happy',
      ],
      cta: 'View portfolio',
      ctaHref: 'portfolio.html',
    },
    {
      label: 'Content System',
      title: '30-Day Package',
      tagline: 'One 2-hour shoot. A month of content live.',
      headline: '30+',
      headlineLabel: 'posts / month',
      points: [
        'Scripts, edits, captions, thumbnails',
        'Reels, TikToks, LinkedIn — at once',
        'Performance retros + monthly review',
      ],
      featured: true,
      cta: 'Get the system',
    },
    {
      label: 'Repurposing',
      title: 'Content Repurposing',
      tagline: 'One long-form in. Ten shorts out.',
      headline: '10×',
      headlineLabel: 'clips per video',
      points: [
        'Hook-engineered shorts from existing footage',
        'Per-platform aspect ratios + captions',
        'No new camera days required',
      ],
      cta: 'Repurpose mine',
    },
  ];

  return (
    <section id="packages" style={{ padding: '120px 0', position: 'relative', overflow: 'visible' }}>
      {/* Horizon glow — sits at the bottom boundary, bleeds into the marquee below so it crosses through */}
      <div aria-hidden className="pkg-glow" style={{
        position: 'absolute',
        left: '50%', bottom: -260,
        transform: 'translateX(-50%)',
        width: 'min(1500px, 110%)', height: 520,
        background: 'radial-gradient(ellipse 55% 55% at 50% 50%, rgba(200,222,255,0.95) 0%, rgba(140,185,255,0.7) 18%, rgba(95,150,255,0.42) 42%, rgba(74,142,255,0.18) 62%, transparent 80%)',
        filter: 'blur(34px)',
        pointerEvents: 'none',
      }} />
      {/* Tight hot core to punch the brightness right at the seam */}
      <div aria-hidden className="pkg-glow-core" style={{
        position: 'absolute',
        left: '50%', bottom: -220,
        transform: 'translateX(-50%)',
        width: 'min(720px, 70%)', height: 260,
        background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(225,238,255,0.75) 0%, rgba(150,190,255,0.4) 40%, transparent 75%)',
        filter: 'blur(22px)',
        mixBlendMode: 'screen',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ textAlign: 'center', marginBottom: 64, position: 'relative', zIndex: 2 }}>
        <SectionEyebrow label="Packages" />
        <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 22, lineHeight: 1.05 }}>
          <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Pick The Package</span><br />
          That Fits Your Stage
        </h2>
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="pkg-grid">
          {tiers.map((t, i) => <PackageCard key={i} tier={t} />)}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <div style={{ fontSize: 12.5, color: 'var(--ink-muted)', fontFamily: "'Geist Mono', ui-monospace, monospace", letterSpacing: '0.04em', marginBottom: 18 }}>
            Not sure which fits? · We'll match you on the call
          </div>
          <a href="#book-a-call" className="btn btn-primary">Book a 30-min call <IconArrow size={12} /></a>
        </div>
      </div>

      <style>{`
        .pkg-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          align-items: stretch;
        }
        @media (max-width: 980px) {
          .pkg-grid { grid-template-columns: 1fr; }
        }

        .pkg-card {
          position: relative;
          padding: 36px 32px 32px;
          border-radius: 24px;
          background: rgba(255,255,255,0.018);
          border: 1px solid var(--line);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
        }
        .pkg-card:hover {
          transform: translateY(-3px);
          border-color: var(--line-2);
          background: rgba(255,255,255,0.03);
        }
        .pkg-card--featured {
          background: linear-gradient(180deg, rgba(74,142,255,0.09), rgba(74,142,255,0.015));
          border-color: rgba(110,167,255,0.28);
        }
        .pkg-card--featured:hover {
          border-color: rgba(110,167,255,0.5);
          background: linear-gradient(180deg, rgba(74,142,255,0.12), rgba(74,142,255,0.02));
        }
        .pkg-card--featured::before {
          content: '';
          position: absolute; inset: -1px;
          border-radius: inherit;
          background: linear-gradient(180deg, rgba(110,167,255,0.4), transparent 50%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          padding: 1px;
          pointer-events: none;
        }

        .pkg-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 28px;
        }
        .pkg-label {
          font-size: 11px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-muted);
        }
        .pkg-card--featured .pkg-label { color: var(--accent-2); }
        .pkg-tag {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 10px;
          border-radius: 999px;
          background: rgba(110,167,255,0.14);
          border: 1px solid rgba(110,167,255,0.38);
          font-size: 10px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #cfe0ff;
        }
        .pkg-tag::before {
          content: '';
          width: 5px; height: 5px; border-radius: 50%;
          background: #6ea7ff; box-shadow: 0 0 6px #6ea7ff;
        }

        .pkg-title {
          font-family: 'Geist', system-ui, sans-serif;
          font-size: clamp(28px, 2.6vw, 36px);
          font-weight: 700;
          letter-spacing: -0.03em;
          line-height: 1.05;
          margin-bottom: 14px;
          color: var(--ink);
        }
        .pkg-card--featured .pkg-title {
          background: linear-gradient(180deg, #fff, #cfe0ff);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .pkg-tagline {
          font-family: 'Instrument Serif', serif;
          font-style: italic;
          font-size: 18px;
          color: var(--ink-dim);
          line-height: 1.35;
          margin-bottom: 28px;
        }

        .pkg-stat {
          display: inline-flex;
          align-items: baseline;
          gap: 8px;
          padding: 8px 14px;
          border-radius: 999px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--line-2);
          margin-bottom: 28px;
          align-self: flex-start;
        }
        .pkg-card--featured .pkg-stat {
          background: rgba(110,167,255,0.12);
          border-color: rgba(110,167,255,0.35);
        }
        .pkg-stat-num {
          font-size: 14px;
          font-weight: 600;
          color: var(--ink);
          letter-spacing: -0.01em;
        }
        .pkg-card--featured .pkg-stat-num { color: #fff; }
        .pkg-stat-label {
          font-size: 11px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-muted);
        }

        .pkg-rule {
          height: 1px;
          background: var(--line);
          margin-bottom: 22px;
        }

        .pkg-points {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 13px;
          margin: 0 0 32px;
          padding: 0;
          flex: 1;
        }
        .pkg-points li {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          font-size: 13.5px;
          line-height: 1.5;
          color: var(--ink-dim);
        }
        .pkg-dot {
          margin-top: 7px;
          width: 4px; height: 4px;
          border-radius: 50%;
          background: var(--ink-muted);
          flex-shrink: 0;
        }
        .pkg-card--featured .pkg-dot {
          background: var(--accent-2);
          box-shadow: 0 0 6px var(--accent-2);
        }

        .pkg-cta {
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 14px 18px;
          border-radius: 12px;
          border: 1px solid var(--line-2);
          background: rgba(255,255,255,0.02);
          color: var(--ink);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: -0.005em;
          transition: all 0.2s ease;
        }
        .pkg-cta:hover {
          background: rgba(255,255,255,0.05);
          border-color: rgba(255,255,255,0.22);
        }
        .pkg-card--featured .pkg-cta {
          background: linear-gradient(180deg, #6ea7ff 0%, #2b6cf0 100%);
          border-color: transparent;
          color: #fff;
          box-shadow: 0 8px 24px -10px rgba(74,142,255,0.6), inset 0 1px 0 rgba(255,255,255,0.22);
        }
        .pkg-card--featured .pkg-cta:hover {
          transform: translateY(-1px);
          box-shadow: 0 14px 30px -10px rgba(74,142,255,0.7), inset 0 1px 0 rgba(255,255,255,0.28);
        }
      `}</style>
    </section>
  );
}

function PackageCard({ tier }) {
  const ref = useReveal();
  return (
    <div ref={ref} className={`reveal pkg-card ${tier.featured ? 'pkg-card--featured' : ''}`}>
      <div className="pkg-head">
        <span className="pkg-label">{tier.label}</span>
        {tier.featured && <span className="pkg-tag">Most popular</span>}
      </div>

      <h3 className="pkg-title">{tier.title}</h3>
      <p className="pkg-tagline">{tier.tagline}</p>

      <div className="pkg-stat">
        <span className="pkg-stat-num">{tier.headline}</span>
        <span className="pkg-stat-label">{tier.headlineLabel}</span>
      </div>

      <div className="pkg-rule" />

      <ul className="pkg-points">
        {tier.points.map((p, j) => (
          <li key={j}>
            <span className="pkg-dot" />
            <span>{p}</span>
          </li>
        ))}
      </ul>

      <a href={tier.ctaHref || '#book-a-call'} className="pkg-cta">
        <span>{tier.cta}</span>
        <IconArrow size={12} />
      </a>
    </div>
  );
}

Object.assign(window, { Packages, PackageCard });