/**
 * ServiceCTA - Server Component
 *
 * Call-to-action section with gradient background.
 *
 * @example
 * ```tsx
 * <ServiceCTA
 *   title="Pret a reduire vos charges energie ?"
 *   description="Audit gratuit en 24h"
 *   primaryCta={{ text: "Demander un devis", href: "/contact" }}
 *   secondaryCta={{ text: "Nous appeler", href: "tel:+33123456789" }}
 * />
 * ```
 */

import Link from "next/link";
import type { ServiceCTAProps } from "./types";

export function ServiceCTA({
  title,
  description,
  primaryCta,
  secondaryCta,
  variant = "gradient",
}: ServiceCTAProps) {
  const bgClasses = {
    gradient: "bg-linear-to-br from-gray-900 via-gray-800 to-gray-900",
    dark: "bg-gray-900",
    light: "bg-gray-50",
  };

  const textClasses = {
    gradient: "text-white",
    dark: "text-white",
    light: "text-gray-900",
  };

  const descClasses = {
    gradient: "text-gray-300",
    dark: "text-gray-300",
    light: "text-gray-600",
  };

  return (
    <section className={`${bgClasses[variant]} py-16 md:py-24`}>
      <div className="mx-auto max-w-4xl px-4 text-center md:px-8">
        {/* Title */}
        <h2 className="text-2xl font-bold capitalize tracking-tight bg-linear-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent md:text-4xl lg:text-5xl">
          {title}
        </h2>

        {/* Description */}
        {description && (
          <p
            className={`mt-4 text-base font-semibold md:text-lg ${
              variant === "light" ? "text-gray-900" : "text-white"
            }`}
          >
            {description}
          </p>
        )}

        {/* CTAs */}
        <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Link
            href={primaryCta.href}
            target={primaryCta.external ? "_blank" : undefined}
            rel={primaryCta.external ? "noopener noreferrer" : undefined}
            className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] px-8 py-3 text-sm font-semibold uppercase tracking-wide text-white shadow-lg shadow-orange-500/25 transition-all duration-300 hover:shadow-xl hover:shadow-orange-500/30"
          >
            {primaryCta.text}
          </Link>

          {secondaryCta && (
            <Link
              href={secondaryCta.href}
              target={secondaryCta.external ? "_blank" : undefined}
              rel={secondaryCta.external ? "noopener noreferrer" : undefined}
              className={`inline-flex items-center justify-center rounded-full border px-8 py-3 text-sm font-semibold uppercase tracking-wide transition-all duration-300 ${
                variant === "light"
                  ? "border-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-100"
                  : "border-white/20 text-white hover:border-white/40 hover:bg-white/10"
              }`}
            >
              {secondaryCta.text}
            </Link>
          )}
        </div>
      </div>
    </section>
  );
}