"use client";

import { type ReactNode } from 'react';
import heroImage from '@/assets/hero-coolroof.webp';
import WpImage from '@/components/ui/WpImage';
import { BudgetQuoteModal } from '@/components/BudgetQuoteModal';

interface HeroProps {
  titre?: string;
  lead?: ReactNode;
  imageSrc?: string;
  imageAlt?: string;
}

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

const Hero = ({
  titre = 'Votre Expert du Cool Roof en France.',
  lead,
  imageSrc = heroImage.src,
  imageAlt = 'Toiture industrielle avec revêtement Cool Roof blanc réfléchissant',
}: HeroProps = {}) => {
  return (
    <section className="relative min-h-dvh flex flex-col overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <WpImage
          image={{ sourceUrl: imageSrc, altText: imageAlt, width: null, height: null }}
          fill
          priority
          className="w-full h-full object-cover scale-[1.02]"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0b1a2b]/80 via-[#0b1a2b]/45 to-[#0b1a2b]/15" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#0b1a2b]/50 via-transparent to-transparent" />
      </div>

      {/* Content : two columns */}
      <div className="relative flex-1 flex items-center container mx-auto px-4 lg:px-8 pt-20 pb-3 lg:pt-32 lg:pb-10">
        <div className="w-full grid grid-cols-1 lg:grid-cols-[55fr_45fr] gap-4 lg:gap-16 items-center">
          {/* Left : copy */}
          <div>
            <h1 className="animate-hero-2 font-satoshi text-[clamp(1.95rem,5.5vw,5rem)] font-black text-white !leading-[1.05] mb-3 lg:mb-6">
              {titre}
            </h1>

            <p className="animate-hero-3 text-[13px] lg:text-lg max-w-[480px] mb-4 lg:mb-8 font-body leading-relaxed text-white/70">
              {lead ?? (<>Covalba, <strong className="text-white font-semibold">leader des revêtements anti-chaleur</strong> pour bâtiments professionnels. <strong className="text-white font-semibold">Plus de 500 chantiers</strong> réalisés, sur tous types de toitures, <strong className="text-white font-semibold">partout en France.</strong></>)}
            </p>

            <div className="animate-hero-3 mb-2 grid grid-cols-3 gap-2 rounded-xl border border-white/10 bg-[#0b1a2b]/55 p-3 backdrop-blur-sm lg:hidden">
              {logos.slice(0, 6).map((logo) => (
                <span key={logo.name} className="flex h-7 items-center justify-center">
                  <img
                    src={logo.url}
                    alt={logo.name}
                    className="max-h-5 max-w-full object-contain brightness-0 invert opacity-52"
                    loading="lazy"
                  />
                </span>
              ))}
            </div>
          </div>

          {/* Right : déclencheur "demande de devis" (modal plein écran), mobile + desktop */}
          <BudgetQuoteModal className="animate-hero-stats" />
        </div>
      </div>

      {/* Logo bar : marquee */}
      <div className="relative hidden lg:block">
        <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
        <div className="bg-[#0b1a2b]/80 backdrop-blur-md py-3 lg:py-4 overflow-hidden">
          <div className="flex animate-marquee">
            {[...logos, ...logos].map((logo, i) => (
              <div key={i} className="flex-shrink-0 mx-6 lg:mx-10 flex items-center justify-center h-10 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>
  );
};

export default Hero;