/**
 * ServiceHero - Server Component
 *
 * Reusable hero section for service pages.
 * Features:
 * - Optimized background image with next/image
 * - Gradient overlay for text contrast
 * - Orange gradient highlighted text (brand colors)
 * - Responsive typography
 * - Accessible markup
 *
 * @example
 * ```tsx
 * <ServiceHero
 *   title="Courtage en"
 *   highlightedText="Énergie Pro"
 *   subtitle="Optimisation de vos Contrats Électricité & Gaz"
 *   description="Réduisez vos factures grâce à notre expertise."
 *   primaryCta={{ text: "Demander un audit", href: "/contact" }}
 *   backgroundImage="/images/services/courtage-hero.jpg"
 * />
 * ```
 */

import Image from "next/image";
import Link from "next/link";
import type { ServiceHeroProps } from "./types";

const heightClasses = {
  sm: "min-h-[50vh]",
  md: "min-h-[65vh]",
  lg: "min-h-[80vh]",
  full: "min-h-screen",
} as const;

export function ServiceHero({
  title,
  highlightedText,
  subtitle,
  description,
  primaryCta,
  customPrimaryCta,
  secondaryCta,
  backgroundImage,
  backgroundAlt = "Image de fond",
  minHeight = "md",
}: ServiceHeroProps) {
  return (
    <section
      className={`relative flex ${heightClasses[minHeight]} items-center justify-center overflow-hidden`}
    >
      {/* Background Image - Optimized with next/image */}
      {backgroundImage ? (
        <Image
          src={backgroundImage}
          alt={backgroundAlt}
          fill
          sizes="100vw"
          priority
          quality={85}
          className="object-cover -z-10"
        />
      ) : (
        /* Fallback gradient background */
        <div
          className="absolute inset-0 bg-linear-to-br from-gray-900 via-gray-800 to-gray-900 -z-10"
          aria-hidden="true"
        />
      )}

      {/* Gradient overlay for text contrast */}
      <div
        className="absolute inset-0 bg-linear-to-b from-gray-900/60 via-gray-900/50 to-gray-900/70 z-0"
        aria-hidden="true"
      />

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
        {/* Main Heading */}
        <h1 className="mx-auto max-w-5xl text-3xl font-bold tracking-tight leading-tight sm:text-5xl lg:text-6xl">
          <span className="text-white">{title}</span>
          {highlightedText && (
            <>
              {" "}
              <span className="bg-linear-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent">
                {highlightedText}
              </span>
            </>
          )}
        </h1>

        {/* Subtitle */}
        <p className="mx-auto mt-6 max-w-7xl text-lg font-medium tracking-tight text-white sm:text-xl lg:text-2xl">
          {subtitle}
        </p>

        {/* Description */}
        {description && (
          <p className="mx-auto mt-4 max-w-5xl text-base tracking-tight text-gray-100 sm:text-lg">
            {description}
          </p>
        )}

        {/* CTA Buttons */}
        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
          {/* Primary CTA - Custom element or Link */}
          {customPrimaryCta ? (
            customPrimaryCta
          ) : primaryCta ? (
            <Link
              href={primaryCta.href}
              {...(primaryCta.external && {
                target: "_blank",
                rel: "noopener noreferrer",
              })}
              className="uppercase inline-flex items-center justify-center px-8 py-4 text-base font-semibold text-white bg-linear-to-r from-orange-500 to-orange-600 rounded-full shadow-lg transition-all duration-200 hover:from-orange-600 hover:to-orange-800 hover:shadow-xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-900 sm:text-lg"
            >
              {primaryCta.text}
            </Link>
          ) : null}

          {/* Secondary CTA */}
          {secondaryCta && (
            <Link
              href={secondaryCta.href}
              {...(secondaryCta.external && {
                target: "_blank",
                rel: "noopener noreferrer",
              })}
              className="uppercase inline-flex items-center justify-center px-8 py-4 text-base font-semibold text-white bg-white/10 backdrop-blur-sm border border-white/20 rounded-full transition-all duration-200 hover:bg-white/20 hover:border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-gray-900 sm:text-lg"
            >
              {secondaryCta.text}
            </Link>
          )}
        </div>
      </div>
    </section>
  );
}