import type { ReactNode } from 'react';
import { BadgeEuro, Snowflake, TrendingDown, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import SectorReferenceHighlights from '@/components/SectorReferenceHighlights';

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

export const defaultFigures: DistributionProofFigure[] = [
  { icon: TrendingDown, value: '-7,5°C', label: 'sur la température de surface' },
  { icon: Snowflake, value: '-38 %', label: 'sur les besoins de climatisation' },
  { icon: BadgeEuro, value: 'Prime CEE', label: 'déduite du coût des travaux' },
];

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

export const defaultProofLogos: DistributionProofLogo[] = [
  { name: 'E.Leclerc', url: '/logos/logo-leclerc.svg' },
  { name: 'Carrefour Market', url: '/logos/logo-carrefour-market.svg' },
  { name: 'Cora', url: '/logos/logo-cora.svg' },
  { name: 'Super U', url: '/logos/logo-super-u.svg' },
];

const defaultTitre = (
  <>
    Des résultats mesurés
    <br />
    <span className="text-teal-vivid">sur le terrain.</span>
  </>
);

type DistributionProofProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  figures?: DistributionProofFigure[];
  refTitle?: string;
  logosTitle?: string;
  logos?: DistributionProofLogo[];
  transition?: string;
};

const DistributionProof = ({
  badge = 'Des résultats concrets',
  titre = defaultTitre,
  intro = 'Des chiffres terrain et des références distribution déjà équipées par Covalba.',
  figures = defaultFigures,
  refTitle = 'Des références distribution déjà documentées.',
  logosTitle = 'Références distribution Covalba',
  logos = defaultProofLogos,
  transition = 'Avant de lancer votre projet, voici les questions qui reviennent le plus souvent.',
}: DistributionProofProps = {}) => (
  <section id="preuves-distribution" className="relative overflow-hidden bg-[#192A3A] py-24 lg:py-36">
    <div className="relative container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mb-9 flex items-center gap-3 lg:mb-12">
          <span className="h-px w-12 bg-teal-vivid/70" aria-hidden="true" />
          <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
            {badge}
          </span>
        </div>
        <div className="mb-14 grid grid-cols-1 items-start gap-8 lg:mb-20 lg:grid-cols-[3fr_2fr] lg:gap-16">
          <h2
            className="font-satoshi font-bold text-white !leading-[1.05]"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>
          <p className="max-w-[430px] font-body text-base leading-relaxed text-white/65 lg:mt-2 lg:text-[16px]">
            {intro}
          </p>
        </div>
      </ScrollReveal>

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

      <ScrollReveal>
        <SectorReferenceHighlights
          sector="distribution"
          referenceFilter="Distribution"
          title={refTitle}
          variant="dark"
        />
      </ScrollReveal>

      <ScrollReveal>
        <div className="border-t border-white/10 pt-10 lg:pt-14">
          <p className="mb-8 text-center font-body text-[10.5px] font-bold uppercase tracking-[0.22em] text-white/45 lg:mb-10">
            {logosTitle}
          </p>
          <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14">
            {logos.map((logo) => (
                <img
                  key={logo.name}
                  src={logo.url}
                  alt={logo.name}
                  className="h-7 w-auto opacity-45 transition-opacity duration-300 hover:opacity-80 lg:h-8"
                  style={{ filter: 'brightness(0) invert(1)' }}
                  loading="lazy"
                  decoding="async"
                />
            ))}
          </div>
          <p className="mx-auto mt-9 max-w-2xl text-center font-body text-sm leading-relaxed text-white/70">
            {transition}
          </p>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionProof;