import type { ReactNode } from 'react';
import { TrendingDown, Snowflake, Wallet, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import SectorReferenceHighlights from '@/components/SectorReferenceHighlights';
import type { ReferenceSector, ReferenceSectorSlug } from '@/data/references';

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

export const defaultFigures: IndustrieProofFigure[] = [
  {
    icon: TrendingDown,
    value: '-7 à -10°C',
    label: 'sur la température de surface en toiture',
  },
  {
    icon: Snowflake,
    value: "jusqu'à -20 %",
    label: 'sur les besoins de climatisation',
  },
  {
    icon: Wallet,
    value: 'Solution passive',
    label: "sans consommation d'énergie, posée depuis l'extérieur",
  },
];

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

export const defaultIndustrialLogos: IndustrieProofLogo[] = [
  { name: 'Continental', url: '/logos/logo-continental.svg' },
  { name: 'Thales', url: '/logos/logo-thales.svg' },
  { name: 'Nestlé', url: '/logos/logo-nestle.svg' },
  { name: 'Servier', url: '/logos/logo-servier.svg' },
  { name: 'Somfy', url: '/logos/logo-somfy.svg' },
  { name: 'Valneva', url: '/logos/logo-valneva.svg' },
];

const referenceFilterBySector: Partial<Record<ReferenceSectorSlug, ReferenceSector>> = {
  industrie: 'Industrie',
  logistique: 'Logistique',
  collectivites: 'Collectivites',
  tertiaire: 'Tertiaire',
  distribution: 'Distribution',
  agricole: 'Agricole',
  erp: 'ERP',
};

const defaultTitre = (
  <>
    Ils nous font
    <br />
    <span className="text-teal-vivid">confiance.</span>
  </>
);

type IndustrieProofProps = {
  sector?: ReferenceSectorSlug;
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  figures?: IndustrieProofFigure[];
  refTitle?: string;
  refIntro?: string;
  logosTitle?: string;
  industrialLogos?: IndustrieProofLogo[];
};

const IndustrieProof = ({
  sector = 'industrie',
  badge = 'Des résultats concrets',
  titre = defaultTitre,
  intro = "Nos chantiers parlent pour nous : relevés de température de surface, sites industriels équipés et retours d'exploitants. La preuve par la toiture, pas par le discours.",
  figures = defaultFigures,
  refTitle = 'Des références concrètes à rapprocher de votre site.',
  refIntro = 'Les cas déjà publiés structurent les preuves sectorielles ; les pages projet détaillées resteront une phase séparée.',
  logosTitle = 'Ils nous font également confiance',
  industrialLogos = defaultIndustrialLogos,
}: IndustrieProofProps = {}) => (
  <section id="preuves" className="relative bg-[#192A3A] py-28 lg:py-40 overflow-hidden">
    {/* Decorative teal blob */}
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
      style={{
        maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
      }}
    />

    <div className="relative container mx-auto px-4 lg:px-8">
      {/* Header — label on top, H2 left + intro right (horizontally aligned) */}
      <ScrollReveal>
        <div className="mb-9 lg:mb-12 flex items-center gap-3">
          <span className="h-px w-12 bg-teal-vivid/70" aria-hidden="true" />
          <span className="text-teal-vivid text-[11px] font-bold font-body uppercase tracking-[0.22em]">
            {badge}
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-10 lg:gap-16 items-start mb-16 lg:mb-24">
          <h2
            className="font-satoshi font-black text-white !leading-[1.05]"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>

          <p className="text-white/65 text-base lg:text-[17px] font-body leading-relaxed max-w-[460px] lg:mt-2">
            {intro}
          </p>
        </div>
      </ScrollReveal>

      {/* Key figures — 3 horizontal stats */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-5 mb-16 lg:mb-20">
          {figures.map((f, i) => {
            const Icon = f.icon;
            return (
              <div
                key={i}
                className="
                  relative rounded-2xl bg-white/[0.04] border border-white/10
                  p-8 lg:p-9 flex flex-col items-start
                "
              >
                <div className="w-11 h-11 rounded-full bg-teal-vivid/[0.12] flex items-center justify-center mb-6">
                  <Icon className="w-5 h-5 text-teal-vivid" strokeWidth={1.6} />
                </div>
                <p
                  className="font-satoshi font-black text-white !leading-none mb-3"
                  style={{
                    fontSize: 'clamp(2.5rem, 4.5vw, 3.25rem)',
                    letterSpacing: '-0.04em',
                  }}
                >
                  {f.value}
                </p>
                <p className="text-white/60 text-sm lg:text-[14.5px] font-body leading-relaxed">
                  {f.label}
                </p>
              </div>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <SectorReferenceHighlights
          sector={sector}
          referenceFilter={referenceFilterBySector[sector] ?? 'Industrie'}
          title={refTitle}
          intro={refIntro}
          variant="dark"
        />
      </ScrollReveal>

      {/* Logo band */}
      <ScrollReveal>
        <div className="border-t border-white/10 pt-10 lg:pt-14">
          <p className="text-center text-white/45 text-[10.5px] uppercase tracking-[0.22em] font-bold font-body mb-8 lg:mb-10">
            {logosTitle}
          </p>
          <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14">
            {industrialLogos.map((logo) => (
              <span key={logo.name} className="flex h-8 w-28 items-center justify-center">
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-80"
                  style={{ filter: 'brightness(0) invert(1)' }}
                  loading="lazy"
                />
              </span>
            ))}
          </div>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieProof;