"use client";

/**
 * LogistiqueHero — Hero "Industrie › Logistique" (Covalba refonte).
 *
 * Forgé via /paf-site-magic (mockup desktop v6 + mobile v1) :
 *   - Photo entrepôt full-bleed avec gradient navy progressif
 *   - Layout split 55/45 : texte gauche + lead form droite (pattern home Hero)
 *   - Eyebrow "COOL ROOF LOGISTIQUE" teal-vivid
 *   - H1 Satoshi Bold (700) blanc + "surchauffent" souligné teal-vivid 2px
 *   - Sub Satoshi Medium cream/65
 *   - 3 stats (icon + value + label)
 *   - Lead form identique à la home (Secteur / Surface / Email + estimation)
 *   - Marquee logos clients en bas avec transition gradient
 */

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

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

export const defaultTrustLogos: LogistiqueHeroLogo[] = [
  { name: 'E.Leclerc', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-leclerc.svg' },
  { name: 'Carrefour Market', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-carrefour-market.svg' },
  { name: 'Nestlé', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-nestle.svg' },
  { name: 'SNCF', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-sncf.svg' },
  { name: 'Continental', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-continental.svg' },
  { name: 'Cora', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-cora.svg' },
  { name: 'Super U', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-super-u.svg' },
  { name: 'Thales', url: '/logos/logo-thales.svg' },
  { name: 'Valneva', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-valneva.svg' },
  { name: 'Somfy', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-somfy.svg' },
  { name: 'Servier', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-servier.svg' },
  { name: "McDonald's", url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-mcdonalds.svg' },
];

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

export const defaultStats: LogistiqueHeroStat[] = [
  { icon: Thermometer, value: '−10°C', label: 'sous toiture' },
  { icon: RefreshCw, value: 'Aucune interruption', label: "de votre exploitation" },
  { icon: Layers, value: 'Bac acier · Bitume', label: 'Membrane compatible' },
];

type LogistiqueHeroProps = {
  eyebrow?: string;
  titre?: string;
  lead?: string;
  imageSrc?: string;
  imageAlt?: string;
  stats?: LogistiqueHeroStat[];
  trustLogos?: LogistiqueHeroLogo[];
  logosTitle?: string;
  formTitle?: string;
  formSubtitle?: string;
  ctaLabel?: string;
};

export default function LogistiqueHero({
  eyebrow = 'Cool roof logistique',
  titre = "Gardez vos entrepôts au frais tout l'été.",
  lead = "Des équipes dans de bonnes conditions, des marchandises préservées, sans climatisation ni interruption d'activité.",
  imageSrc = '/images/industrie-logistique-hero-desktop.jpg',
  imageAlt = "Vue aérienne d'un entrepôt logistique français avec toiture cool roof blanche réfléchissante",
  stats = defaultStats,
  trustLogos = defaultTrustLogos,
  logosTitle = 'Ils maîtrisent déjà la chaleur de leurs sites',
  formTitle = 'Estimez votre budget',
  formSubtitle = 'Réponse personnalisée sous 24h',
  ctaLabel = 'Estimer mon budget',
}: LogistiqueHeroProps = {}) {
  return (
    <section
      aria-labelledby="logistique-hero-title"
      className="relative isolate flex flex-col overflow-hidden bg-navy text-cream min-h-[100svh]"
    >
      {/* ── PHOTO BG full-bleed ── */}
      <ArtDirectedImage
        mobile={{ sourceUrl: '/images/industrie-logistique-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 object-cover scale-[1.02]"
      />

      {/* Desktop : heavy navy gauche → photo respire à droite */}
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 hidden lg:block bg-gradient-to-r from-navy/[0.92] via-navy/55 to-navy/25"
      />
      {/* Mobile : navy haut + bas, photo respire au milieu */}
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 lg:hidden bg-gradient-to-b from-navy/80 via-navy/15 to-navy/95"
      />
      {/* Transition douce vers le marquee */}
      <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"
      />

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

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

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

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

          {/* ── RIGHT — déclencheur "demande de devis" (modal plein écran), desktop only ── */}
          <BudgetQuoteModal className="animate-hero-stats" title={formTitle} subtitle={formSubtitle} ctaLabel={ctaLabel} />
        </div>
      </div>

      {/* ── MARQUEE LOGOS ── */}
      <div className="relative z-10 mt-auto">
        <div className="bg-navy/85 backdrop-blur-md py-5 overflow-hidden">
          <p className="hidden lg:block text-center text-white/35 text-[10px] font-body uppercase tracking-[0.2em] font-semibold mb-3">
            {logosTitle}
          </p>
          <div className="flex animate-marquee">
            {[...trustLogos, ...trustLogos].map((logo, i) => (
              <div
                key={i}
                className="flex-shrink-0 mx-6 lg:mx-10 flex items-center justify-center h-9 w-24 lg:w-28"
              >
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-7 lg:max-h-8 max-w-full w-auto object-contain brightness-0 invert opacity-40"
                  loading="lazy"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}