/* Handoff — the closing scene. Everything the film built now ships into
   WordPress + Elementor. Links out to the styled template pack. */
const Handoff = () => {
  const ref = React.useRef(null);
  const p = useScrollProgress(ref);

  const templates = [
    { n: '01', t: 'Home',           d: 'Hero · stack · showcase' },
    { n: '02', t: 'AI Receptionist', d: 'Live demo · personas' },
    { n: '03', t: 'Websites',       d: 'Tiers · portfolio' },
    { n: '04', t: 'Industries',     d: 'Tabbed trades' },
    { n: '05', t: 'Pricing',        d: 'Toggle · compare' },
    { n: '06', t: 'Bundles',        d: 'Calculator' },
    { n: '07', t: 'About',          d: 'Story · values' },
    { n: '08', t: 'Contact',        d: 'Form · map' },
    { n: '09', t: 'Store',          d: 'Hardware grid' },
  ];

  return (
    <section ref={ref} id="handoff" className="relative py-32 md:py-40 overflow-hidden">
      <div className="mx-auto max-w-[1400px] px-6">
        {/* scene marker */}
        <div className="flex items-center justify-between mb-12" data-reveal>
          <div className="flex items-center gap-3 font-mono text-[10px] tracking-[0.3em] text-white/45 uppercase">
            <span className="text-flame">SC 06</span>
            <span className="w-8 h-px bg-white/20"></span>
            <span>Handoff · ship it</span>
          </div>
          <span className="font-mono text-[10px] tracking-[0.28em] text-white/40 uppercase hidden md:inline">WordPress + Elementor · Free stack</span>
        </div>

        <div className="grid lg:grid-cols-[1.05fr_1fr] gap-12 lg:gap-16 items-center">
          {/* LEFT — closing statement */}
          <div>
            <h2 className="word-rev text-[clamp(40px,6.2vw,104px)] leading-[0.94] tracking-[-0.04em] font-bold">
              {splitWords("Then it all")}<br/>
              <span className="serif text-flame text-[1.04em] font-normal">{splitWords("ships to Elementor.")}</span>
            </h2>
            <p className="mt-8 text-white/70 text-lg leading-relaxed max-w-[52ch]" data-reveal data-reveal-delay="2">
              Every scene you just scrolled through is mapped to a rebuild-ready
              <b className="text-white"> Elementor template</b> — nine pages, a header/footer kit,
              the wow-effect CSS, and an install order. All on free plugins.
            </p>

            <div className="mt-10 flex flex-wrap gap-3 items-center" data-reveal data-reveal-delay="3">
              <a href="elementor-templates.html" className="group inline-flex items-center gap-2.5 bg-flame hover:bg-ember text-black font-semibold px-7 py-4 rounded-full transition-colors">
                Open the template pack
                <span className="transition-transform group-hover:translate-x-1">→</span>
              </a>
              <a href="ELEMENTOR-MIGRATION.md" target="_blank" rel="noopener" className="inline-flex items-center gap-2 border border-line2 hover:border-white/40 text-white/85 hover:text-white px-7 py-4 rounded-full backdrop-blur-sm bg-white/[0.02] transition-colors">
                View the raw migration doc
              </a>
            </div>

            <div className="mt-9 flex flex-wrap gap-x-8 gap-y-3" data-reveal data-reveal-delay="4">
              {[['9', 'page templates'], ['12', 'free plugins'], ['1', 'site-wide CSS file'], ['2', 'JS snippets']].map(([n, l]) => (
                <div key={l} className="flex items-baseline gap-2">
                  <span className="font-bold text-2xl tracking-tight tabular-nums">{n}</span>
                  <span className="font-mono text-[10px] tracking-[0.2em] text-white/45 uppercase">{l}</span>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — template grid */}
          <div data-reveal data-reveal-delay="2"
               style={{ transform: `translateY(${(0.5 - p) * 36}px)` }}>
            <div className="grid grid-cols-3 gap-2.5">
              {templates.map(tp => (
                <a key={tp.n} href="elementor-templates.html" data-tilt="9" data-tilt-glow
                   className="group relative rounded-xl border border-white/[0.09] bg-white/[0.02] hover:bg-white/[0.045] hover:border-flame/40 p-3.5 transition-colors overflow-hidden">
                  <div className="font-mono text-[9px] tracking-[0.22em] text-flame/80 uppercase">{tp.n}</div>
                  <div className="mt-2 text-white font-semibold text-[13.5px] tracking-tight leading-tight">{tp.t}</div>
                  <div className="mt-0.5 text-white/45 text-[10.5px] leading-snug">{tp.d}</div>
                  <span className="absolute right-3 bottom-3 text-white/25 group-hover:text-flame transition-all group-hover:translate-x-0.5">→</span>
                </a>
              ))}
            </div>
            <div className="mt-2.5 rounded-xl border border-white/[0.09] bg-white/[0.015] px-3.5 py-3 flex items-center justify-between">
              <span className="font-mono text-[9.5px] tracking-[0.2em] text-white/50 uppercase">Header + Footer theme kit</span>
              <span className="font-mono text-[9.5px] tracking-[0.2em] text-emerald-400/90 uppercase">Included</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Handoff = Handoff;