"use client";

import { BadgePercent, Snowflake, Thermometer, type LucideIcon } from 'lucide-react';
import ArtDirectedImage from '@/components/ui/ArtDirectedImage';
import { BudgetQuoteModal } from '@/components/BudgetQuoteModal';

export type DistributionHeroLogo = { name: string; url: string };

export const defaultLogos: DistributionHeroLogo[] = [
  { name: 'E.Leclerc', url: '/logos/logo-leclerc.svg' },
  { name: 'Carrefour Market', url: '/logos/logo-carrefour-market.svg' },
  { name: 'Cora', url: '/logos/logo-cora.svg' },
  { name: 'Super U', url: '/logos/logo-super-u.svg' },
];

export type DistributionHeroStat = { icon: LucideIcon; value: string; label: string };

export const defaultStats: DistributionHeroStat[] = [
  { icon: Thermometer, value: '-8 à -10°C', label: 'sous toiture' },
  { icon: Snowflake, value: '-40 %', label: 'besoins de froid' },
  { icon: BadgePercent, value: 'Prime CEE', label: "estimée à l'étude" },
];

type DistributionHeroProps = {
  eyebrow?: string;
  titre?: string;
  lead?: string;
  imageSrc?: string;
  imageAlt?: string;
  stats?: DistributionHeroStat[];
  logos?: DistributionHeroLogo[];
  logosTitle?: string;
  formTitle?: string;
  formSubtitle?: string;
  ctaLabel?: string;
};

const DistributionHero = ({
  eyebrow = 'Cool roof distribution',
  titre = "Gardez vos magasins au frais tout l'été.",
  lead = "Clients plus à l'aise, climatisation soulagée, rayons frais mieux préservés.",
  imageSrc = '/images/distribution/hero-desktop.jpg',
  imageAlt = 'Grande surface commerciale avec toiture claire réfléchissante en été',
  stats = defaultStats,
  logos = defaultLogos,
  logosTitle = 'Références distribution Covalba',
  formTitle = 'Estimez votre budget',
  formSubtitle = 'Réponse personnalisée sous 24h',
  ctaLabel = 'Estimer mon budget',
}: DistributionHeroProps = {}) => {
  return (
    <section
      aria-labelledby="distribution-hero-title"
      className="relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream"
    >
      <ArtDirectedImage
        mobile={{ sourceUrl: '/images/distribution/hero-mobile.jpg', altText: imageAlt, width: null, height: null }}
        desktop={{ sourceUrl: imageSrc, altText: imageAlt, width: null, height: null }}
        alt={imageAlt}
        priority
        className="absolute inset-0 -z-10"
        imgClassName="size-full scale-[1.02] object-cover"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.92] via-navy/55 to-navy/25 lg:block"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 bg-gradient-to-b from-navy/80 via-navy/22 to-navy/95 lg:hidden"
      />
      <div
        aria-hidden="true"
        className="absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent"
      />

      <div className="container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28">
        <div className="grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12">
          <div className="max-w-2xl space-y-6 lg:space-y-8">
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-teal-vivid" aria-hidden="true" />
              <span className="font-body text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-vivid">
                {eyebrow}
              </span>
            </div>

            <h1
              id="distribution-hero-title"
              className="font-satoshi font-bold leading-[1.02] text-white"
              style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}
            >
              {titre}
            </h1>

            <p
              className="max-w-xl font-satoshi font-medium leading-[1.3] text-cream/65"
              style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}
            >
              {lead}
            </p>

            <ul className="hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6" aria-label="Bénéfices clés">
              {stats.map((stat, index) => {
                const Icon = stat.icon;
                return (
                  <li
                    key={stat.label}
                    className={`flex items-start gap-3 ${
                      index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''
                    }`}
                  >
                    <Icon className="mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid" strokeWidth={1.5} />
                    <div className="leading-tight">
                      <p className="font-satoshi text-[15px] font-bold text-white lg:text-base">{stat.value}</p>
                      <p className="mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]">{stat.label}</p>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          <BudgetQuoteModal className="animate-hero-stats" title={formTitle} subtitle={formSubtitle} ctaLabel={ctaLabel} />
        </div>
      </div>

      <div className="relative z-10 mt-auto hidden lg:block">
        <div className="border-t border-white/10 bg-navy/78 py-5 backdrop-blur-md">
          <p className="mb-3 text-center font-body text-[10px] font-semibold uppercase tracking-[0.2em] text-white/35">
            {logosTitle}
          </p>
          <div className="mx-auto grid max-w-3xl grid-cols-4 items-center gap-x-12 px-8">
            {logos.map((logo) => (
              <div key={logo.name} className="flex h-9 items-center justify-center">
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-8 w-auto opacity-45 transition-opacity duration-300 hover:opacity-75"
                  style={{ filter: 'brightness(0) invert(1)' }}
                  loading="lazy"
                  decoding="async"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default DistributionHero;