"use client";

import type { ReactNode } from 'react';
import { ArrowRight, Thermometer, Snowflake, ShieldCheck, Leaf, Award, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import heroImage from '@/assets/sector-industrie.jpg';
import { useLocale } from '@/components/blocks/localeContext';

const VIEW_TESTIMONIALS: Record<string, string> = {
  fr: 'Voir les témoignages',
  en: 'View testimonials',
  es: 'Ver testimonios',
};

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

export const defaultProofs: IndustrieHeroProof[] = [
  { icon: Thermometer, value: "Jusqu'à -8°C", label: 'Surface de toiture' },
  { icon: Snowflake, value: "Jusqu'à -40%", label: 'Climatisation' },
  { icon: ShieldCheck, value: '+10 ans', label: 'Durée étanchéité' },
  { icon: Leaf, value: 'Éligible', label: 'Certifications' },
];

const defaultTitre = (
  <>
    Réduisez la{' '}
    <span className="underline decoration-primary/40 decoration-[4px] underline-offset-[10px]">
      chaleur
    </span>
    ,
    <br />
    <span className="text-foreground/45">maîtrisez vos coûts.</span>
  </>
);

type IndustrieHeroProps = {
  eyebrow?: string;
  titre?: ReactNode;
  lead?: string;
  imageSrc?: string;
  imageAlt?: string;
  proofs?: IndustrieHeroProof[];
  badgeTitle?: string;
  ctaPrimaireLabel?: string;
  ctaPrimaireHref?: string;
  ctaSecondaireLabel?: string;
  ctaSecondaireHref?: string;
};

const IndustrieHero = ({
  eyebrow = 'Cool roof industriel',
  titre = defaultTitre,
  lead = 'La solution cool roof Covalba réduit la température des toitures, améliore le confort intérieur et limite les besoins en climatisation des bâtiments industriels.',
  imageSrc = heroImage.src,
  imageAlt = 'Bâtiment industriel avec toiture traitée cool roof Covalba',
  proofs = defaultProofs,
  badgeTitle = '2 millions de m² traités',
  ctaPrimaireLabel = 'Demander un devis',
  ctaPrimaireHref = '/diagnostic',
  ctaSecondaireLabel = 'Parler à un expert',
  ctaSecondaireHref = '#contact',
}: IndustrieHeroProps = {}) => {
  const locale = useLocale();
  return (
  <section className="relative bg-cream overflow-visible">
    <div className="grid grid-rows-[auto_1fr] lg:grid-rows-1 grid-cols-1 lg:grid-cols-[58fr_42fr] min-h-[100svh] lg:min-h-[92svh]">
      {/* LEFT — copy on cream */}
      <div className="relative bg-cream px-5 pt-16 pb-12 sm:px-8 sm:pt-20 lg:px-14 lg:py-24 flex flex-col justify-start lg:justify-center">
        <ScrollReveal>
          <nav className="flex items-center gap-2 text-xs text-foreground/55 font-body mb-6 lg:mb-9">
            <a href="/" className="hover:text-foreground/80 transition-colors">Accueil</a>
            <span className="text-foreground/35">/</span>
            <span className="text-foreground/80">{eyebrow}</span>
          </nav>

          <div className="mb-5 lg:mb-7 flex items-center gap-3">
            <span className="h-px w-12 bg-primary/70" aria-hidden="true" />
            <span className="text-primary text-[11px] font-bold font-body uppercase tracking-[0.22em]">
              {eyebrow}
            </span>
          </div>

          <h1
            className="font-satoshi font-black text-foreground leading-[0.95] mb-7 lg:mb-10"
            style={{ fontSize: 'clamp(2.25rem, 5.5vw, 4.25rem)', letterSpacing: '-0.035em' }}
          >
            {titre}
          </h1>

          <p className="text-foreground/70 text-base sm:text-lg font-body leading-relaxed mb-8 lg:mb-11 max-w-[560px]">
            {lead}
          </p>

          {/* CTAs */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4">
            <a
              href={ctaPrimaireHref}
              className="group inline-flex items-center justify-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2.5 rounded-full"
            >
              <span className="text-sm">{ctaPrimaireLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
            <a
              href={ctaSecondaireHref}
              className="group inline-flex items-center justify-center gap-2 border-2 border-foreground/25 text-foreground hover:bg-foreground/5 transition-colors font-semibold pl-6 pr-2 py-2 rounded-full"
            >
              <span className="text-sm">{ctaSecondaireLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-foreground/10 transition-transform duration-500 group-hover:translate-x-0.5">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </div>
        </ScrollReveal>
      </div>

      {/* RIGHT — navy + image */}
      <div className="relative bg-navy flex flex-col min-h-[44svh] lg:min-h-0">
        <div className="relative flex-1 min-h-0">
          <img
            src={imageSrc}
            alt={imageAlt}
            className="absolute inset-0 w-full h-full object-cover object-center"
            loading="eager"
            fetchPriority="high"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-navy/55" />
          <div className="absolute inset-0 bg-gradient-to-r from-navy/25 to-transparent hidden lg:block" />
        </div>
      </div>
    </div>

    {/* DESKTOP bottom-row — signature on the left + proof bar on the right, vertically aligned */}
    <div className="hidden lg:flex absolute inset-x-0 bottom-0 translate-y-[30%] z-20 items-center pointer-events-none">
      {/* Trust badge (left) — balances the bar visually */}
      <div className="pl-14 pointer-events-auto">
        <ScrollReveal>
          <div className="flex items-center gap-4">
            <div className="shrink-0 w-12 h-12 lg:w-[52px] lg:h-[52px] rounded-full bg-primary/[0.08] flex items-center justify-center">
              <Award className="w-[22px] h-[22px] lg:w-6 lg:h-6 text-primary" strokeWidth={1.5} />
            </div>
            <div className="leading-tight">
              <p
                className="font-satoshi font-bold text-foreground text-[15.5px] lg:text-[16px]"
                style={{ letterSpacing: '-0.015em' }}
              >
                {badgeTitle}
              </p>
              <a
                href="#preuves"
                className="group inline-flex items-center gap-1.5 mt-1.5 text-foreground/55 hover:text-foreground transition-colors text-[12.5px] font-body font-medium"
              >
                {VIEW_TESTIMONIALS[locale]}
                <ArrowRight className="w-3 h-3 transition-transform duration-300 group-hover:translate-x-0.5" />
              </a>
            </div>
          </div>
        </ScrollReveal>
      </div>

      {/* Proof bar (right) — pushed against the right edge */}
      <div className="ml-auto pr-8 xl:pr-12 pointer-events-auto">
        <ScrollReveal>
          <div
            className="
              relative bg-white rounded-2xl
              shadow-[0_18px_40px_-24px_hsl(var(--navy)/0.14),_0_4px_12px_-6px_hsl(var(--navy)/0.06)]
          "
        >
          <ul className="flex">
            {proofs.map((p, i) => {
              const Icon = p.icon;
              return (
                <li
                  key={i}
                  style={{ animationDelay: `${i * 90}ms` }}
                  className={`
                    animate-fade-in-up
                    relative flex items-center gap-4 px-8 py-9
                    hover:bg-cream/60 transition-colors duration-300
                    ${i !== 0 ? "before:content-[''] before:absolute before:left-0 before:top-5 before:bottom-5 before:w-px before:bg-foreground/[0.07]" : ''}
                    ${i === 0 ? 'rounded-l-2xl' : ''}
                    ${i === proofs.length - 1 ? 'rounded-r-2xl' : ''}
                  `}
                >
                  <Icon className="w-[18px] h-[18px] text-primary shrink-0" strokeWidth={1.75} />
                  <div className="leading-snug">
                    <p className="text-foreground/65 text-[13.5px] font-body whitespace-nowrap">
                      {p.label}
                    </p>
                    <p className="text-foreground text-[14.5px] font-body font-bold whitespace-nowrap mt-0.5">
                      {p.value}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </ScrollReveal>
      </div>
    </div>

    {/* MOBILE proof bar — below image, full width with side padding */}
    <div className="lg:hidden px-4 -mt-8 pb-6 relative z-20">
      <ScrollReveal>
        <div
          className="
            bg-white rounded-2xl
            shadow-[0_14px_30px_-18px_hsl(var(--navy)/0.15),_0_3px_8px_-4px_hsl(var(--navy)/0.06)]
          "
        >
          <ul className="grid grid-cols-2">
            {proofs.map((p, i) => {
              const Icon = p.icon;
              return (
                <li
                  key={i}
                  className={`
                    flex items-center gap-3 px-4 py-4
                    ${(i + 1) % 2 !== 0 ? 'border-r border-foreground/[0.06]' : ''}
                    ${i < 2 ? 'border-b border-foreground/[0.06]' : ''}
                  `}
                >
                  <Icon className="w-4 h-4 text-primary shrink-0" strokeWidth={1.75} />
                  <div className="leading-snug min-w-0">
                    <p className="text-foreground/65 text-[12px] font-body">
                      {p.label}
                    </p>
                    <p className="text-foreground text-[13px] font-body font-bold mt-0.5">
                      {p.value}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </ScrollReveal>
    </div>
  </section>
  );
};

export default IndustrieHero;