// Final CTA — bold full-bleed

const Cta = () => {
  return (
    <section className="r-cta" style={{ background: "var(--ink)", color: "white", padding: "160px 0 140px", position: "relative", overflow: "hidden" }}>
      {/* Background ornament */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px)",
        backgroundSize: "32px 32px",
        opacity: 0.4,
        pointerEvents: "none",
      }}/>
      <div style={{
        position: "absolute", right: -80, top: "50%", transform: "translateY(-50%)",
        width: 640, height: 640,
        background: "radial-gradient(closest-side, rgba(26,165,245,0.5), transparent)",
        filter: "blur(60px)",
        pointerEvents: "none",
      }}/>

      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 60 }}>
          <SectionEyebrow index="(09)" label={copyText("home.cta.eyebrow")} color="var(--muted-on-dark)" />
          <div className="mono" style={{ color: "var(--muted-on-dark)" }}>{copyText("home.cta.meta")}</div>
        </div>

        <h2 className="display r-headline-cta" style={{
          fontSize: "clamp(48px, 7.4vw, 124px)",
          margin: 0,
          letterSpacing: "-0.04em",
          lineHeight: 0.9,
          maxWidth: "92%",
        }}>
          {copyText("home.cta.headline_l1")}<br/>
          {copyText("home.cta.headline_l2a")} <span style={{ fontStyle: "italic", color: "var(--blue)", fontWeight: 600, position: "relative", display: "inline-block" }}>
            {copyText("home.cta.headline_accent")}
            <SketchUnderline animate strokeWidth={3.5} color="#1AA5F5" style={{ position: "absolute", left: 0, bottom: "-0.18em", width: "100%", height: "0.18em", pointerEvents: "none" }} />
          </span> {copyText("home.cta.headline_l2b")}<br/>
          {copyText("home.cta.headline_l3")}
        </h2>

        <div className="r-cta-row" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
          <p style={{ fontSize: 18, lineHeight: 1.5, color: "var(--muted-on-dark)", margin: 0, maxWidth: 540 }}>
            {copyText("home.cta.subcopy")}
          </p>
          <div className="r-cta-buttons" style={{ display: "flex", gap: 12 }}>
            <PillButton as="a" href="Subpages.html#contact" variant="blue" size="lg">
              {copyText("home.cta.button")} <ArrowUpRight size={14} />
            </PillButton>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Cta = Cta;