/* CTA + Footer */
const CTA = () => {
  const ref = React.useRef(null);
  const p = useScrollProgress(ref);
  return (
    <section ref={ref} id="cta" className="relative py-40 overflow-hidden">
      <div
        className="absolute inset-x-0 mx-auto max-w-[1400px] rounded-[36px] bg-flame text-black p-12 md:p-20 overflow-hidden"
        style={{
          transform: `translateY(${(0.5 - p) * 40}px)`,
          boxShadow: '0 40px 120px -30px rgba(255,87,54,0.5), inset 0 1px 0 rgba(255,255,255,0.25)',
        }}
      >
        {/* on-brand concentric signal motif, very subtle */}
        <span aria-hidden data-px="22" className="pointer-events-none absolute -top-40 -right-40 w-[560px] h-[560px]">
          {[0, 1, 2, 3].map(i => (
            <span key={i} className="absolute rounded-full border border-black/[0.07]"
                  style={{ inset: `${i * 70}px` }}/>
          ))}
        </span>
        {/* registration corner marks */}
        {[['top-6 left-6', 'border-t-2 border-l-2'], ['top-6 right-6', 'border-t-2 border-r-2'], ['bottom-6 left-6', 'border-b-2 border-l-2'], ['bottom-6 right-6', 'border-b-2 border-r-2']].map(([pos, b]) => (
          <span key={pos} aria-hidden className={`pointer-events-none absolute ${pos} w-5 h-5 ${b} border-black/25 rounded-[3px]`}/>
        ))}

        <div className="relative">
          <div className="flex items-center gap-3 font-mono text-xs tracking-[0.3em] text-black/60 mb-6">
            <span className="relative flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-black/70 animate-ping opacity-50"></span><span className="relative w-1.5 h-1.5 rounded-full bg-black/80"></span></span>
            READY WHEN YOU ARE
          </div>
          <h2 className="word-rev text-[clamp(48px,8vw,140px)] leading-[0.92] tracking-[-0.04em] font-bold max-w-[14ch]">
            {splitWords("Let's get your")} <span className="serif">{splitWords("phone ringing.")}</span>
          </h2>
          <div className="mt-12 flex items-end justify-between flex-wrap gap-8">
            <div className="flex gap-3 flex-wrap">
              <a href="contact.html" className="group inline-flex items-center gap-2 bg-black text-flame font-semibold px-7 py-4 rounded-full hover:bg-ink/90 transition-colors shadow-[0_12px_30px_-8px_rgba(0,0,0,0.45)]">
                Book a 20-min demo <span className="transition-transform group-hover:translate-x-1">→</span>
              </a>
              <a href="mailto:info@grippycode.com" className="inline-flex items-center gap-2 border-2 border-black/80 hover:bg-black hover:text-flame font-semibold px-7 py-4 rounded-full transition-colors">
                info@grippycode.com
              </a>
            </div>
            <div className="flex flex-wrap gap-2">
              {['No contracts', '30-day money back', 'Live in 7 days'].map(t => (
                <span key={t} className="inline-flex items-center gap-2 bg-black/[0.06] border border-black/15 rounded-full px-3.5 py-2 font-mono text-[10px] tracking-[0.18em] text-black/70 uppercase">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {t}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="h-[640px]"></div>
    </section>
  );
};
window.CTA = CTA;