"use client";

import { CalButton } from "@/components/cal-button";
import { trackEvent } from "@/lib/analytics";
import { IconBrandWhatsapp } from "@tabler/icons-react";

interface ArticleCTAProps {
  title?: string;
  subtitle?: string;
}

export default function ArticleCTA({
  title = "Besoin d'un avis d'expert ?",
  subtitle = "Nos ingénieurs analysent vos factures sans engagement. Résultat en 48h.",
}: ArticleCTAProps) {
  const whatsappNumber = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER;

  return (
    <div className="not-prose my-12">
      <div
        className="relative isolate overflow-hidden rounded-3xl px-6 py-16 text-center shadow-2xl ring-1 ring-white/10 sm:px-16"
        style={{
          background:
            "linear-gradient(160deg, #0f172a 0%, #1e1a16 55%, #2d1a0a 100%)",
        }}
      >
        {/* Ambient top-left bleed */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -top-24 -left-20 h-72 w-72 rounded-full opacity-25 blur-3xl"
          style={{ background: "#1e3a5f" }}
        />

        {/* Primary glow - orange, bottom-center */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -bottom-28 left-1/2 h-56 w-[24rem] -translate-x-1/2 rounded-full opacity-[0.12] blur-3xl"
          style={{ background: "#ea580c" }}
        />

        {/* SVG radial gradient - bottom-biased */}
        <svg
          viewBox="0 0 1024 1024"
          aria-hidden="true"
          className="absolute bottom-0 left-1/2 -z-10 w-[64rem] -translate-x-1/2 translate-y-1/3"
          style={{
            maskImage: "radial-gradient(closest-side, white, transparent)",
          }}
        >
          <circle
            r={512}
            cx={512}
            cy={512}
            fill="url(#article-cta-gradient)"
            fillOpacity="0.08"
          />
          <defs>
            <radialGradient id="article-cta-gradient">
              <stop stopColor="#ea580c" />
              <stop offset={0.6} stopColor="#c2410c" />
              <stop offset={1} stopColor="#7c2d12" stopOpacity="0" />
            </radialGradient>
          </defs>
        </svg>

        <h3 className="relative text-2xl font-semibold tracking-tight text-balance text-white sm:text-3xl">
          {title}
        </h3>
        <p className="relative mx-auto mt-4 max-w-xl text-base text-pretty text-gray-300">
          {subtitle}
        </p>

        <div className="relative mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row sm:gap-x-6">
          <CalButton
            location="article_inline"
            className="bg-gradient-to-br from-[#ea580c] to-[#ea580c] rounded-md px-5 py-3 text-base font-medium text-white shadow-lg ring-1 ring-orange-500/40 hover:brightness-110"
          >
            Demander un audit gratuit
          </CalButton>

          {whatsappNumber && (
            <a
              href={`https://wa.me/${whatsappNumber}`}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() =>
                trackEvent("cta_click", {
                  cta_type: "whatsapp",
                  cta_location: "article_inline",
                })
              }
              className="inline-flex items-center gap-2 text-base font-medium text-gray-200 no-underline transition hover:text-white"
            >
              <IconBrandWhatsapp size={18} className="text-[#25D366]" />
              Question rapide
              <span aria-hidden="true">→</span>
            </a>
          )}
        </div>
      </div>
    </div>
  );
}