"use client";

import { useState } from "react";
import { trackEvent } from "@/lib/analytics";
import { openCalModal } from "@/lib/cal";

interface ArticleBannerProps {
  text?: string;
  cta?: string;
}

export default function ArticleBanner({
  text = "Ces chiffres vous concernent ?",
  cta = "Obtenir mon diagnostic gratuit",
}: ArticleBannerProps) {
  const [isOpening, setIsOpening] = useState(false);

  // Ce bouton portait des attributs `data-cal-*` sans jamais charger l'embed :
  // il ne fonctionnait que si un <CalButton> ailleurs dans la page (la sidebar
  // sticky des articles) avait injecté le script. Couplage invisible et
  // fragile — désormais il ouvre la modale lui-même, comme CalButton.
  const handleClick = async () => {
    if (isOpening) return;
    trackEvent("cta_click", {
      cta_type: "cal_booking",
      cta_location: "article_banner",
    });
    setIsOpening(true);
    try {
      await openCalModal();
    } finally {
      setIsOpening(false);
    }
  };

  return (
    <div className="not-prose my-10">
      <div
        className="relative isolate overflow-hidden rounded-2xl px-6 py-6 text-center ring-1 ring-white/10 sm:px-8"
        style={{
          background:
            "linear-gradient(160deg, #0f172a 0%, #1e1a16 60%, #2d1a0a 100%)",
        }}
      >
        {/* Subtle orange glow bottom-right */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -bottom-10 right-0 h-32 w-48 rounded-full opacity-[0.10] blur-3xl"
          style={{ background: "#ea580c" }}
        />

        <p className="relative text-base font-medium text-white">{text}</p>

        <button
          type="button"
          onClick={handleClick}
          aria-busy={isOpening}
          className="relative mt-4 inline-flex items-center justify-center gap-2 cursor-pointer rounded-md bg-gradient-to-br from-[#ea580c] to-[#ea580c] px-5 py-2.5 text-sm font-medium uppercase tracking-wide text-white shadow-lg ring-1 ring-orange-500/40 transition hover:brightness-110"
        >
          {isOpening && (
            <span
              aria-hidden="true"
              className="h-3.5 w-3.5 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent"
            />
          )}
          {cta}
        </button>
      </div>
    </div>
  );
}