import type { ReactNode } from 'react';
import { CheckCircle2, Clock, Factory, PauseCircle, PlugZap, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import classicRoofImage from '@/assets/industrie/logistique-solution-classic.webp';
import coolRoofImage from '@/assets/industrie/logistique-solution-coolroof.webp';

export type DistributionSolutionComparison = {
  title: string;
  label: string;
  image: string;
  alt: string;
  tone: string;
  metric: string;
  metricLabel: string;
  points: string[];
};

export const defaultComparisons: DistributionSolutionComparison[] = [
  {
    title: 'Toiture classique',
    label: 'Absorption',
    image: classicRoofImage.src,
    alt: 'Toiture sombre de magasin qui absorbe le rayonnement solaire',
    tone: 'warm',
    metric: "jusqu'à 80°C",
    metricLabel: 'en surface',
    points: ['Surface sombre', 'Absorbe la chaleur', 'Alourdit la climatisation'],
  },
  {
    title: 'Toiture cool roof',
    label: 'Réflexion',
    image: coolRoofImage.src,
    alt: 'Toiture claire de grande surface qui réfléchit le rayonnement solaire',
    tone: 'cool',
    metric: "jusqu'à 90%",
    metricLabel: 'du rayonnement réfléchi',
    points: ['Surface claire', 'Reste proche de la température ambiante', 'Réduit la charge de froid'],
  },
];

export type DistributionSolutionKeyPoint = { icon: LucideIcon; label: string };

export const defaultKeyPoints: DistributionSolutionKeyPoint[] = [
  { icon: PlugZap, label: "Solution passive, sans consommation d'énergie" },
  { icon: PauseCircle, label: "Posée depuis l'extérieur, sans fermer le magasin" },
  { icon: Factory, label: 'Compatible bac acier, bitume et membrane' },
  { icon: Clock, label: 'Revêtement durable, 8 à 10 ans de tenue' },
];

const defaultTitre = (
  <>
    Votre toiture reflète
    <br />
    <span className="text-white/45">au lieu de chauffer.</span>
  </>
);

type DistributionSolutionProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  comparisons?: DistributionSolutionComparison[];
  keyPoints?: DistributionSolutionKeyPoint[];
  transition?: string;
};

const DistributionSolution = ({
  badge = 'La solution Covalba',
  titre = defaultTitre,
  intro = "Même principe que sur les sites logistiques : traiter la toiture pour réduire la chaleur transmise au bâtiment, sans toucher à l'exploitation.",
  comparisons = defaultComparisons,
  keyPoints = defaultKeyPoints,
  transition = 'Reste une question clé : combien coûte vraiment un revêtement si vous devez le refaire trop tôt ?',
}: DistributionSolutionProps = {}) => (
  <section id="solution-distribution" className="relative overflow-hidden bg-[#142333] py-20 text-white lg:py-32">
    <div
      aria-hidden="true"
      className="absolute inset-0 opacity-[0.55]"
      style={{
        backgroundImage: 'linear-gradient(115deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 120px)',
      }}
    />
    <div
      aria-hidden="true"
      className="absolute inset-x-0 top-0 h-[34rem] bg-[radial-gradient(ellipse_at_50%_0%,hsl(var(--teal-vivid)/0.16),transparent_68%)]"
    />

    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 grid max-w-6xl grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[0.88fr_1.12fr] lg:gap-16">
          <div>
            <div className="mb-6 inline-flex items-center gap-3">
              <span className="h-px w-8 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>
            <h2
              className="font-satoshi font-bold !leading-[1.04] text-white"
              style={{ fontSize: 'clamp(2rem, 3.4vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>
          </div>

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

      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:gap-6">
        {comparisons.map((item) => {
          const isCool = item.tone === 'cool';
          return (
            <article
              key={item.title}
              className="group overflow-hidden rounded-2xl border border-white/10 bg-white/[0.045] shadow-[0_30px_90px_-58px_rgba(0,0,0,0.9)] backdrop-blur-sm transition-all duration-500 hover:-translate-y-1 hover:border-white/16 hover:bg-white/[0.06]"
            >
              <div className="relative aspect-[1.05] overflow-hidden bg-[#0f1d2a] md:aspect-[1.18]">
                <img
                  src={item.image}
                  alt={item.alt}
                  className="size-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.025]"
                  loading="lazy"
                  decoding="async"
                />
                <div
                  aria-hidden="true"
                  className={`absolute inset-x-0 bottom-0 h-2/3 ${
                    isCool
                      ? 'bg-gradient-to-t from-[#142333] via-[#142333]/20 to-transparent'
                      : 'bg-gradient-to-t from-[#142333] via-terracotta/10 to-transparent'
                  }`}
                />
                <span
                  className={`absolute left-5 top-5 rounded-full border px-3 py-1 font-body text-[10px] font-bold uppercase tracking-[0.16em] backdrop-blur-md ${
                    isCool
                      ? 'border-teal-vivid/25 bg-teal-vivid/12 text-teal-vivid'
                      : 'border-terracotta/30 bg-terracotta/14 text-[#f0a084]'
                  }`}
                >
                  {item.label}
                </span>
              </div>

              <div className="p-5 lg:p-7">
                <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                  <h3
                    className="font-satoshi text-xl font-bold !leading-tight text-white lg:text-2xl"
                    style={{ letterSpacing: '-0.02em' }}
                  >
                    {item.title}
                  </h3>
                  <div
                    className={`shrink-0 rounded-xl border px-4 py-3 ${
                      isCool
                        ? 'border-teal-vivid/18 bg-teal-vivid/10 text-teal-vivid'
                        : 'border-terracotta/18 bg-terracotta/12 text-[#f0a084]'
                    }`}
                  >
                    <span className="block font-satoshi text-2xl font-bold leading-none lg:text-3xl">
                      {item.metric}
                    </span>
                    <span className="mt-1 block font-body text-[10px] font-bold uppercase tracking-[0.14em] opacity-75">
                      {item.metricLabel}
                    </span>
                  </div>
                </div>

                <ul className="grid gap-2.5">
                  {item.points.map((point) => (
                    <li key={point} className="flex items-start gap-2.5">
                      <CheckCircle2 className={`mt-0.5 h-4 w-4 shrink-0 ${isCool ? 'text-teal-vivid' : 'text-[#f0a084]'}`} strokeWidth={2} />
                      <span className="font-body text-sm leading-relaxed text-white/66">{point}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          );
        })}
      </div>

      <ScrollReveal>
        <div className="mx-auto mt-10 max-w-6xl lg:mt-14">
          <ul className="grid grid-cols-1 gap-3 md:grid-cols-4">
            {keyPoints.map((point) => {
              const Icon = point.icon;
              return (
                <li key={point.label} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.055] px-5 py-4 backdrop-blur-sm">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-teal-vivid/12">
                    <Icon className="h-4 w-4 text-teal-vivid" strokeWidth={1.8} />
                  </span>
                  <span className="font-body text-sm font-semibold leading-snug text-white/78">{point.label}</span>
                </li>
              );
            })}
          </ul>

          <p className="mx-auto mt-8 max-w-2xl text-center font-body text-sm leading-relaxed text-white/52">
            {transition}
          </p>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionSolution;