const CTA = ({ onContact }) => {
  // Scroll-linked gradient parallax. Instead of an on/off class that
  // snaps the gradients in when the section reaches a threshold and snaps
  // them out when it leaves, we track the section's overlap with the
  // viewport on every scroll frame and feed that into a CSS custom
  // property. The embers rise/drop continuously in both directions —
  // scrolling into the section pulls them in, scrolling past pushes them
  // back out, at the same rate and with no visible snap point.
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const update = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      // Overlap between section rect and viewport, normalized to [0, 1]
      // against whichever is smaller. Gives a bell-shaped progress:
      // 0 as the section just enters from the bottom, up to 1 when
      // fully overlapping, back to 0 as it exits the top.
      const visibleTop = Math.max(0, -r.top);
      const visibleBottom = Math.min(r.height, vh - r.top);
      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
      const denom = Math.min(vh, r.height) || 1;
      const progress = Math.max(0, Math.min(1, visibleHeight / denom));
      el.style.setProperty('--cta-progress', progress.toFixed(4));
    };
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(update);
    };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
  return (
  <section ref={ref} className="orx-cta" style={{
    position: 'relative',
    padding: '160px 48px',
    background: '#0A0705',
    textAlign: 'center',
    overflow: 'hidden',
  }}>
    {/* The two top-corner embers drop in from above; the bottom wash rises
        from below. Both layers are transform-linked directly to the
        `--cta-progress` custom property updated by the scroll listener —
        no transitions, no timing curves, so scroll-in and scroll-out
        are perfectly symmetric. */}
    <style>{`
      .orx-cta::before, .orx-cta::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: var(--cta-progress, 0);
      }
      .orx-cta::before {
        background:
          radial-gradient(55% 45% at 100% -8%, rgba(255, 106, 10, 0.42) 0%, transparent 62%),
          radial-gradient(55% 45% at 0% -8%,   rgba(255, 106, 10, 0.42) 0%, transparent 62%);
        transform: translateY(calc((1 - var(--cta-progress, 0)) * -34%));
      }
      .orx-cta::after {
        background: radial-gradient(90% 70% at 50% 120%, rgba(138, 42, 0, 0.55) 0%, transparent 70%);
        transform: translateY(calc((1 - var(--cta-progress, 0)) * 34%));
      }
      .orx-cta > * { position: relative; z-index: 1; }
    `}</style>
    <div className="orx-reveal" style={{maxWidth: 1400, margin: '0 auto'}}>
      <h2 className="orx-cta-h2" style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 'clamp(40px, 6vw, 96px)',
        fontWeight: 400, lineHeight: 1.0, letterSpacing: '-0.04em',
        color: '#FFFAF5', margin: 0, whiteSpace: 'nowrap',
      }}>
        Automate. <span style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic'}}>Scale.</span> Dominate.
      </h2>
      <p className="orx-cta-lede" style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 20, lineHeight: 1.5, color: 'rgba(230,220,204,0.82)',
        margin: '40px auto 0', maxWidth: 900, whiteSpace: 'nowrap',
      }}>
        A 10-minute conversation is all it takes to see if you qualify.
      </p>
      <style>{`
        @media (max-width: 720px) {
          /* Keep the three-word headline on a single line and bump the
             size slightly so it carries. */
          .orx-cta-h2 {
            white-space: nowrap !important;
            font-size: clamp(22px, 7.2vw, 36px) !important;
          }
          /* Also keep the 10-min conversation line on one beat. Small
             font + tight letter-spacing gets the full sentence under
             the viewport width. */
          .orx-cta-lede {
            white-space: nowrap !important;
            font-size: 11px !important;
            letter-spacing: -0.005em !important;
            margin-top: 12px !important;
          }
          /* Tighten the gap between the lede and the Contact button. */
          .orx-cta button {
            margin-top: 20px !important;
          }
        }
      `}</style>
      <button
        onClick={onContact}
        className="orx-btn orx-btn--primary orx-btn-aura orx-btn-aura--primary"
        style={{
          marginTop: 48,
          background: 'linear-gradient(180deg, #FFFFFF 0%, #F5EEE4 100%)',
          color: '#0A0705', border: 'none',
          padding: '14px 22px', borderRadius: 12,
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 15, fontWeight: 500,
          cursor: 'pointer',
          height: 48, width: 148, boxSizing: 'border-box',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          /* Exact hero Contact boxShadow — same inset border alpha, same
             drop. Arrow removed per the final request: the CTA button now
             reads identically to the hero button. */
          boxShadow: 'inset 0 0 0 1px rgba(255,250,245,0.22), 0 14px 48px rgba(0,0,0,0.5)',
        }}><span className="orx-btn-label">Contact</span></button>
    </div>
  </section>
  );
};

window.CTA = CTA;