"use client";

import type { HomeContent } from "@/lib/content";
import { trackEvent } from "@/components/Tracking";

export default function FinalCta({ content }: { content: HomeContent }) {
  const { finalCta } = content;
  return (
    <section style={{ padding: "0 0 120px" }}>
      <div className="container">
        <div
          style={{
            position: "relative",
            overflow: "hidden",
            background: "rgba(255,255,255,.55)",
            backdropFilter: "blur(18px)",
            WebkitBackdropFilter: "blur(18px)",
            border: "1px solid rgba(255,255,255,.75)",
            borderRadius: 32,
            padding: "84px 64px",
            textAlign: "center",
            boxShadow: "0 30px 70px rgba(2,47,49,.12)",
          }}
        >
          <div
            style={{
              position: "absolute",
              top: -120,
              left: -60,
              width: 360,
              height: 360,
              background: "radial-gradient(circle, rgba(19,163,166,.22), transparent 64%)",
              pointerEvents: "none",
            }}
          />
          <div
            style={{
              position: "absolute",
              bottom: -140,
              right: -50,
              width: 340,
              height: 340,
              background: "radial-gradient(circle, rgba(234,213,145,.4), transparent 64%)",
              pointerEvents: "none",
            }}
          />
          <div style={{ position: "relative" }}>
            <h2 style={{ fontWeight: 900, fontSize: 46, letterSpacing: "-.03em", margin: 0, color: "#182233" }}>
              {finalCta.titleLead}
              <span style={{ color: "#006568" }}>{finalCta.titleAccent}</span>
              {finalCta.titleTail}
            </h2>
            <p style={{ fontSize: 18, color: "#515a63", margin: "16px auto 0", maxWidth: 520 }}>{finalCta.body}</p>
            <a
              className="btn-teal"
              href={finalCta.ctaUrl}
              onClick={() => trackEvent("cta_click", { click_text: finalCta.cta, click_url: finalCta.ctaUrl })}
              style={{ marginTop: 30, fontSize: 16, padding: "17px 34px", boxShadow: "0 16px 34px rgba(0,101,104,.32)" }}
            >
              {finalCta.cta}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}