import type { ReactNode } from 'react';
import { CheckCircle2, Factory, PauseCircle, PlugZap, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import ArtDirectedImage from '@/components/ui/ArtDirectedImage';
import classicRoof from '@/assets/industrie/logistique-solution-classic.webp';
import classicRoofMobile from '@/assets/industrie/logistique-solution-classic-mobile.webp';
import coolRoof from '@/assets/industrie/logistique-solution-coolroof.webp';
import coolRoofMobile from '@/assets/industrie/logistique-solution-coolroof-mobile.webp';

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

export const defaultComparisons: LogistiqueSolutionComparison[] = [
  {
    title: 'Toiture classique',
    label: 'Absorption',
    image: classicRoof.src,
    mobileImage: classicRoofMobile.src,
    alt: 'Bâtiment logistique avec toiture sombre qui absorbe le rayonnement solaire',
    tone: 'warm',
    metric: "jusqu'à 80°C",
    metricLabel: 'en surface',
    points: ['Surface sombre', 'Absorbe la chaleur', 'Transmet les calories au bâtiment'],
  },
  {
    title: 'Toiture cool roof',
    label: 'Réflexion',
    image: coolRoof.src,
    mobileImage: coolRoofMobile.src,
    alt: 'Bâtiment logistique avec toiture cool roof claire 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', "Limite l'échauffement intérieur"],
  },
];

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

export const defaultKeyPoints: LogistiqueSolutionKeyPoint[] = [
  {
    icon: PlugZap,
    label: "Solution passive, sans consommation d'énergie",
  },
  {
    icon: PauseCircle,
    label: "Posée depuis l'extérieur, sans interruption d'activité",
  },
  {
    icon: Factory,
    label: 'Compatible bac acier, bitume et membrane',
  },
];

const defaultTitre = (
  <>
    Votre toiture renvoie
    <br />
    <span className="text-white/45">le soleil au lieu de l'absorber.</span>
  </>
);

const defaultIntro = (
  <>
    Climatiser un entrepôt de plusieurs milliers de mètres carrés est souvent{' '}
    <strong className="font-semibold text-white">impossible ou ruineux</strong>, quand ce
    n'est pas tout simplement absent. Plutôt que de refroidir l'air, le cool roof{' '}
    <strong className="font-semibold text-white">empêche la toiture de chauffer</strong>{' '}
    dès le départ. Une toiture sombre absorbe le rayonnement, une toiture réfléchissante le
    renvoie avant qu'il ne pénètre dans le bâtiment.
  </>
);

type LogistiqueSolutionProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  comparisons?: LogistiqueSolutionComparison[];
  keyPoints?: LogistiqueSolutionKeyPoint[];
};

const LogistiqueSolution = ({
  badge = 'La solution Covalba',
  titre = defaultTitre,
  intro = defaultIntro,
  comparisons = defaultComparisons,
  keyPoints = defaultKeyPoints,
}: LogistiqueSolutionProps = {}) => (
  <section 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]">
                  <ArtDirectedImage
                    mobile={{ sourceUrl: item.mobileImage, altText: item.alt, width: null, height: null }}
                    desktop={{ sourceUrl: item.image, altText: item.alt, width: null, height: null }}
                    alt={item.alt}
                    className="absolute inset-0"
                    imgClassName="size-full object-cover object-[center_58%] transition-transform duration-700 ease-out group-hover:scale-[1.025] md:object-center"
                  />
                  <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"
                        style={{ letterSpacing: '-0.04em' }}
                      >
                        {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-5xl lg:mt-14">
          <ul className="grid grid-cols-1 gap-3 md:grid-cols-3">
            {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>

        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default LogistiqueSolution;