// Block `cta` — design repris de CTASection.tsx : fond navy #192A3A avec
// blobs teal, titre centré, double CTA. Variante `banner` plus compacte ;
// `hubspot_form_id` monte le formulaire HubSpot sous les CTAs.

import { CheckCircle } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import HubSpotForm from "@/components/HubSpotForm";
import { arr } from "@/lib/wp/mappers";
import type { CtaBlock } from "@/lib/wp/types";
import { mapHubspotFormConfig } from "@/lib/wp/viewProps/hubspot";
import { AccentTitle, BlockCta } from "./shared";

const Cta = (props: CtaBlock & { position?: number }) => {
  const reassurances = arr(props.reassurances).filter((r) => r.texte);
  const isBanner = props.variante === "banner";
  const hubspotForm = mapHubspotFormConfig(props.formulaireHubspot, props.hubspotFormId);

  return (
    <section
      className={`relative bg-[#192A3A] overflow-hidden ${
        isBanner ? "py-12 lg:py-16" : "py-16 lg:py-32"
      }`}
    >
      {/* Blobs décoratifs teal — cf. CTASection */}
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -right-[15%] -top-[40%] w-[60%] opacity-20 pointer-events-none select-none"
        style={{
          maskImage: "radial-gradient(circle at center, black 35%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(circle at center, black 35%, transparent 75%)",
        }}
      />
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
        style={{
          maskImage: "radial-gradient(circle at center, black 35%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(circle at center, black 35%, transparent 75%)",
        }}
      />

      <div className="relative container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="flex flex-col items-center text-center">
            {props.titre && (
              <h2
                className={`font-satoshi font-black text-white !leading-[1.05] mb-4 ${
                  isBanner ? "text-2xl sm:text-3xl" : "text-3xl sm:text-4xl lg:text-[3rem]"
                }`}
                style={{ letterSpacing: "-0.03em" }}
              >
                <AccentTitle titre={props.titre} accentClass="text-teal-vivid" />
              </h2>
            )}
            {props.texte && (
              <p className="text-white/50 text-base lg:text-lg font-body leading-relaxed max-w-xl mb-10">
                {props.texte}
              </p>
            )}

            {(props.ctaPrimaire?.label || props.ctaSecondaire?.label) && (
              <div className="flex flex-col sm:flex-row items-center gap-4">
                <BlockCta cta={props.ctaPrimaire} />
                <BlockCta
                  cta={
                    props.ctaSecondaire
                      ? { ...props.ctaSecondaire, style: props.ctaSecondaire.style ?? "secondary" }
                      : null
                  }
                  dark
                />
              </div>
            )}

            {reassurances.length > 0 && (
              <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 mt-8">
                {reassurances.map((r, i) => (
                  <span key={i} className="inline-flex items-center gap-2 text-white/55 text-sm font-body">
                    <CheckCircle className="w-4 h-4 text-[#70bfc6]" />
                    {r.texte}
                  </span>
                ))}
              </div>
            )}

            {(hubspotForm?.formGuid || props.hubspotFormId) && (
              <div className="w-full max-w-2xl mt-10 rounded-2xl bg-white p-6 lg:p-8 text-left">
                <HubSpotForm
                  targetId={`hubspot-cta-block-${props.position ?? 0}`}
                  formId={props.hubspotFormId}
                  config={hubspotForm}
                />
              </div>
            )}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Cta;