function Packages() {
  const tiers = [
    {
      label: 'Editing',
      title: 'Need Editing?',
      tagline: 'Send footage, get polished cuts back in 48 hours.',
      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 becomes a full 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: 'View our process',
      ctaHref: '#process',
    },
    {
      label: 'Repurposing',
      title: 'Repurposing',
      tagline: 'One long-form video in, ten hook-engineered shorts out.',
      headline: '10×',
      headlineLabel: 'clips per video',
      points: [
        'Hook-engineered shorts from your footage',
        'Per-platform ratios + captions',
        'No new camera days required',
      ],
      cta: 'Repurpose mine',
    },
  ];

  return (
    <section id="packages" style={{ padding: '120px 0', position: 'relative', overflow: 'visible' }}>
      <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-ghost">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;
          isolation: isolate;
          padding: 36px 32px 32px;
          border-radius: 26px;
          background:
            radial-gradient(130% 90% at 88% 8%, rgba(74,142,255,0.10), transparent 52%),
            linear-gradient(168deg, rgba(28,38,62,0.55) 0%, rgba(12,17,30,0.62) 46%, rgba(8,11,22,0.7) 100%);
          background-color: rgba(9,13,24,0.6);
          border: 1px solid rgba(255,255,255,0.07);
          box-shadow:
            0 30px 60px -34px rgba(0,0,0,0.8),
            inset 0 1px 0 rgba(255,255,255,0.06);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          min-height: 500px;
          transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
        }
        .pkg-card .pkg-aura {
          position: absolute;
          left: 50%; bottom: -46%;
          transform: translateX(-50%);
          width: 150%; height: 80%;
          background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(96,156,255,0.42) 0%, rgba(74,142,255,0.18) 38%, transparent 72%);
          filter: blur(40px);
          opacity: 0.5;
          z-index: -1;
          pointer-events: none;
          transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .pkg-card::before {
          content: '';
          position: absolute; inset: 0;
          border-radius: inherit;
          background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 26%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          padding: 1px;
          opacity: 0.8;
          pointer-events: none;
          z-index: 1;
        }
        .pkg-card:hover {
          transform: translateY(-5px);
          border-color: rgba(255,255,255,0.12);
          box-shadow:
            0 44px 80px -36px rgba(0,0,0,0.85),
            0 0 50px -20px rgba(74,142,255,0.25),
            inset 0 1px 0 rgba(255,255,255,0.08);
        }
        .pkg-card:hover .pkg-aura { opacity: 0.82; transform: translateX(-50%) translateY(-8%); }

        /* ---- Featured: SAME blue-glass family as siblings, just elevated ----
           Brighter/more-saturated glass + accent border + stronger glow so it
           reads as a highlighted version of the same card, not a new component. */
        .pkg-card--featured {
          background:
            /* brighter blue wash in the top-right corner (same spot as siblings) */
            radial-gradient(130% 95% at 88% 6%, rgba(96,156,255,0.24) 0%, rgba(74,142,255,0.06) 40%, transparent 58%),
            /* concentrated blue glow rising from the base */
            radial-gradient(125% 80% at 50% 122%, rgba(110,167,255,0.38) 0%, rgba(60,120,240,0.10) 40%, transparent 66%),
            /* same diagonal body gradient as siblings, lifted a touch */
            linear-gradient(168deg, rgba(40,58,98,0.62) 0%, rgba(18,27,50,0.66) 46%, rgba(11,17,32,0.74) 100%);
          background-color: rgba(11,17,32,0.66);
          border-color: rgba(110,167,255,0.42);
          box-shadow:
            0 42px 80px -34px rgba(0,0,0,0.85),
            0 0 60px -26px rgba(74,142,255,0.4),
            inset 0 1px 0 rgba(255,255,255,0.1);
        }
        /* keep real content above the gloss + aura */
        .pkg-card--featured > .pkg-head,
        .pkg-card--featured > .pkg-title,
        .pkg-card--featured > .pkg-tagline,
        .pkg-card--featured > .pkg-stat,
        .pkg-card--featured > .pkg-divider,
        .pkg-card--featured > .pkg-points,
        .pkg-card--featured > .pkg-cta {
          position: relative;
          z-index: 2;
        }
        .pkg-card--featured .pkg-aura {
          opacity: 0.8;
          left: 50%; bottom: -42%;
          width: 138%; height: 76%;
          background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124,176,255,0.7) 0%, rgba(74,142,255,0.3) 36%, transparent 70%);
          filter: blur(46px);
        }
        .pkg-card--featured::before {
          background: linear-gradient(180deg, rgba(168,202,255,0.6), rgba(120,170,255,0.06) 26%, transparent 40%);
          opacity: 1;
        }
        .pkg-card--featured:hover {
          border-color: rgba(140,188,255,0.55);
          box-shadow:
            0 56px 96px -36px rgba(0,0,0,0.94),
            0 0 80px -24px rgba(74,142,255,0.55),
            inset 0 1px 0 rgba(255,255,255,0.2),
            inset 0 -60px 90px -58px rgba(74,142,255,0.42);
        }
        .pkg-card--featured:hover .pkg-aura { opacity: 1; transform: translateX(-50%) translateY(-10%); }

        /* ---- Header: tiny mono label + optional popular badge ---- */
        .pkg-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 22px;
        }
        .pkg-label {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-muted);
        }
        .pkg-badge {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 11px;
          border-radius: 999px;
          background: rgba(110,167,255,0.12);
          border: 1px solid rgba(110,167,255,0.34);
          font-size: 11px;
          font-weight: 500;
          color: #cfe0ff;
        }
        .pkg-badge::before {
          content: '';
          width: 5px; height: 5px; border-radius: 50%;
          background: #6ea7ff; box-shadow: 0 0 6px #6ea7ff;
        }

        /* ---- Title + tagline: SAME sans font now, no serif italic ---- */
        .pkg-title {
          font-size: 25px;
          font-weight: 600;
          letter-spacing: -0.025em;
          line-height: 1.1;
          color: var(--ink);
          margin: 0 0 10px;
        }
        .pkg-tagline {
          font-size: 14.5px;
          line-height: 1.5;
          letter-spacing: -0.005em;
          color: var(--ink-muted);
          margin: 0 0 24px;
          max-width: 30ch;
        }

        /* ---- Stat row ---- */
        .pkg-stat {
          display: flex;
          align-items: baseline;
          gap: 9px;
          margin-bottom: 22px;
        }
        .pkg-stat-num {
          font-size: 40px;
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 0.9;
          color: var(--ink);
        }
        .pkg-card--featured .pkg-stat-num { color: #fff; }
        .pkg-stat-label {
          font-size: 13px;
          color: var(--ink-muted);
          letter-spacing: -0.005em;
        }

        .pkg-divider {
          height: 1px;
          background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
          margin: 0 0 22px;
        }

        /* ---- Feature points ---- */
        .pkg-points {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 11px;
          margin: 0 0 28px;
          padding: 0;
          flex: 1;
        }
        .pkg-points li {
          display: flex;
          gap: 11px;
          align-items: flex-start;
          font-size: 13.5px;
          line-height: 1.45;
          color: var(--ink-dim);
          letter-spacing: -0.005em;
        }
        .pkg-dot {
          margin-top: 6px;
          width: 5px; height: 5px;
          border-radius: 50%;
          flex-shrink: 0;
          background: var(--ink-muted);
        }
        .pkg-card--featured .pkg-dot {
          background: var(--accent-2);
          box-shadow: 0 0 8px var(--accent-2);
        }

        /* ---- CTA: full-width button ---- */
        .pkg-cta {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 13px 18px;
          border-radius: 14px;
          border: 1px solid rgba(255,255,255,0.14);
          background: rgba(255,255,255,0.05);
          color: var(--ink);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: -0.005em;
          transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
        }
        .pkg-cta:hover {
          background: rgba(255,255,255,0.1);
          border-color: rgba(255,255,255,0.24);
        }
        .pkg-card--featured .pkg-cta {
          background: linear-gradient(180deg, #6ea7ff 0%, #2b6cf0 100%);
          border-color: transparent;
          color: #fff;
          box-shadow: 0 8px 22px -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 28px -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 aria-hidden className="pkg-aura" />

      <div className="pkg-head">
        <span className="pkg-label">{tier.label}</span>
        {tier.featured && <span className="pkg-badge">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-divider" />

      <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 });