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

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' },
];

interface LocalHeroProps {
  title: string;
  subtitle: string;
  primaryCTA: { label: string; href: string };
  secondaryCTA: { label: string; href: string };
  image?: { src: string; alt: string };
}

const LocalHero = ({ title, subtitle, primaryCTA, secondaryCTA, image }: LocalHeroProps) => (
  <section className="relative min-h-dvh flex flex-col overflow-hidden">
    {/* Background */}
    <div className="absolute inset-0">
      <WpImage
        image={{
          sourceUrl: image?.src ?? heroImage.src,
          altText: image?.alt ?? 'Toiture industrielle avec revêtement Cool Roof blanc réfléchissant',
          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 */}
    <div className="relative flex-1 flex items-center container mx-auto px-4 lg:px-8 pt-28 pb-8 lg:pt-32 lg:pb-10">
      <div className="w-full grid grid-cols-1 lg:grid-cols-[55fr_45fr] gap-8 lg:gap-16 items-center">
        <div className="max-w-3xl">
        <h1
          className="font-satoshi text-[clamp(2rem,3.4vw,3.5rem)] font-black text-white !leading-[1.05] mb-6"
        >
          {title}
        </h1>

        <p className="text-base lg:text-lg max-w-[480px] mb-8 font-body leading-relaxed text-white/70">
          {subtitle}
        </p>

        <div className="flex flex-col sm:flex-row items-start gap-4">
          {/* Primary CTA */}
          <a
            href={primaryCTA.href}
            className="group inline-flex items-center gap-3 cta-gradient text-white font-semibold pl-7 pr-2 py-2 rounded-full"
          >
            <span className="text-[15px]">{primaryCTA.label}</span>
            <span className="flex items-center justify-center w-9 h-9 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
              <ArrowRight className="w-4 h-4" />
            </span>
          </a>

          {/* Secondary CTA */}
          <a
            href={secondaryCTA.href}
            className="group inline-flex items-center gap-3 border border-white/30 text-white font-semibold pl-7 pr-2 py-2 rounded-full transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:bg-white/10 hover:border-white/50"
          >
            <span className="text-[15px]">{secondaryCTA.label}</span>
            <span className="flex items-center justify-center w-9 h-9 rounded-full bg-white/10 group-hover:bg-white/20 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
              <ArrowRight className="w-4 h-4" />
            </span>
          </a>
        </div>
        </div>
        {/* Right : déclencheur "demande de devis" (modal plein écran), desktop only */}
        <BudgetQuoteModal />
      </div>
    </div>

    {/* Logo bar : marquee */}
    <div className="relative">
      <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-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 LocalHero;