/* ============================================================
 * 11. FINAL CTA
 * ============================================================ */

const SectionCTA = () => (
  <section className="section-pad cta-section" id="cta">
    <div className="cta-bg" aria-hidden="true" />
    <div className="container-narrow" style={{ position: "relative", textAlign: "center" }}>
      <Reveal>
        <div className="eyebrow" style={{ justifyContent: "center" }}>Book a demo</div>
      </Reveal>
      {/* The old headline was "See what one Brain can do for your group" —
          written when a Brain section sat directly above it. That section
          now lives on its own product page, so the line was paying off an
          argument the page no longer makes. This one closes on the whole
          proposition instead: a CRM that remembers, and turns remembering
          into the reason a guest books direct again. */}
      <Reveal delay={120}>
        <h2 className="h-display" style={{ marginTop: 32, fontSize: "clamp(44px, 6.5vw, 84px)" }}>
          The hotel that remembers <span className="italic-accent">is the one they come back to.</span>
        </h2>
      </Reveal>
      <Reveal delay={220}>
        <p className="lead" style={{ marginTop: 32, fontSize: 19, maxWidth: 660, marginLeft: "auto", marginRight: "auto" }}>
          We'll show you GuestMaker running on a group like yours, your channels, your stack, your languages, answering real guest questions with the booking, the history and the preferences already in hand. Thirty minutes is enough to see it.
        </p>
      </Reveal>
      <Reveal delay={320}>
        <div className="flex gap-3 wrap center" style={{ marginTop: 40, justifyContent: "center" }}>
          <a href={DEMO_URL} className="btn btn-primary">Book a demo <IconArrow size={14} className="arrow" /></a>
        </div>
      </Reveal>
      <Reveal delay={420}>
        <div className="cta-mark">
          <GMMark size={48} />
        </div>
      </Reveal>
    </div>

    <style>{`
      .cta-section {
        position: relative;
        padding-top: clamp(120px, 14vw, 200px);
        padding-bottom: clamp(120px, 14vw, 200px);
        overflow: hidden;
      }
      .cta-bg {
        position: absolute; inset: 0;
        background:
          radial-gradient(ellipse 800px 400px at 50% 50%, var(--accent-glow), transparent 60%),
          radial-gradient(ellipse 1200px 600px at 50% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
        /* The radial gradients are centered ON the box edges, so their
           densest point sits exactly at the boundary instead of fading
           into it — overflow:hidden then hard-clips full-strength color
           right where this section meets the next one. Force an actual
           fade at both edges regardless of section height. */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 82%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 82%, transparent 100%);
        pointer-events: none;
      }
      .cta-mark {
        margin-top: 80px;
        opacity: 0.4;
        display: flex; justify-content: center;
      }
    `}</style>
  </section>
);

window.SectionCTA = SectionCTA;