/**
 * LogistiqueProblem — Section "Pourquoi agir ?" pour la page Logistique.
 *
 * Pattern éditorial avec header texte sans photo redondante et 4 cartes photo.
 */

import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';

export type LogistiqueProblemFriction = {
  image: string;
  imageAlt: string;
  kicker: string;
  title: string;
  desc: string;
};

type Friction = LogistiqueProblemFriction;

export const defaultFrictions: Friction[] = [
  {
    image: '/images/logistique/card-equipes.webp',
    imageAlt: "Allée d'entrepôt logistique exposée à une forte chaleur estivale",
    kicker: 'Confort équipes',
    title: 'Équipes dans la fournaise',
    desc: 'Plus de 35°C en zone de préparation : la cadence baisse et les pauses liées à la chaleur se multiplient.',
  },
  {
    image: '/images/logistique/card-marchandises.webp',
    imageAlt: 'Palettes et marchandises stockées dans un entrepôt logistique',
    kicker: 'Stock sensible',
    title: 'Marchandises dégradées',
    desc: 'Cosmétiques, vins, pharma : les pics de température créent des pertes, des retours et des litiges clients.',
  },
  {
    image: '/images/logistique/card-groupes-froids.webp',
    imageAlt: "Groupes froids et compresseurs installés à l'extérieur d'un entrepôt frigorifique",
    kicker: 'Froid industriel',
    title: 'Groupes froids saturés',
    desc: 'Les compresseurs tournent plus longtemps, la facture grimpe et la chaîne du froid devient plus fragile.',
  },
  {
    image: '/images/logistique/card-decret.webp',
    imageAlt: "Façade et toiture d'un bâtiment logistique moderne soumis au soleil",
    kicker: 'Décret tertiaire',
    title: 'Décret tertiaire serré',
    desc: 'Au-delà de 1000 m², la réduction des consommations devient un sujet de trajectoire, pas seulement de confort.',
  },
];

const defaultTitre = (
  <>
    La chaleur pèse sur
    <br />
    <span className="text-foreground/40">vos équipes et vos marchandises.</span>
  </>
);

const defaultIntro = (
  <>
    Une toiture d'entrepôt en bac acier peut dépasser{' '}
    <strong className="font-semibold text-foreground">80°C en plein été</strong>. La chaleur traverse le bâtiment, met vos équipes à l'épreuve, menace vos marchandises et fait saturer vos groupes froids.
  </>
);

type LogistiqueProblemProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  frictions?: Friction[];
};

const LogistiqueProblem = ({
  badge = 'Pourquoi agir ?',
  titre = defaultTitre,
  intro = defaultIntro,
  frictions = defaultFrictions,
}: LogistiqueProblemProps = {}) => (
  <section className="relative overflow-hidden bg-cream py-20 lg:py-32">
    <div
      aria-hidden="true"
      className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent"
    />
    <div className="container mx-auto px-4 lg:px-8">
      {/* Header */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-20 items-end mb-8 lg:mb-20">
        <div className="space-y-6 lg:space-y-9">
          <ScrollReveal>
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-terracotta/70" aria-hidden="true" />
              <span className="text-terracotta-dark text-[11px] font-bold font-body uppercase tracking-[0.22em]">
                {badge}
              </span>
            </div>
          </ScrollReveal>

          <ScrollReveal>
            <h2
              className="font-satoshi font-bold text-foreground !leading-[1.05]"
              style={{ fontSize: 'clamp(1.875rem, 3.6vw, 2.875rem)', letterSpacing: '-0.025em' }}
            >
              {titre}
            </h2>
          </ScrollReveal>
        </div>

        <ScrollReveal>
          <div className="max-w-[560px] lg:ml-auto">
            <p className="text-foreground/65 text-base lg:text-[17px] font-body leading-relaxed">
              {intro}
            </p>
          </div>
        </ScrollReveal>
      </div>

      {/* Photo cards */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 xl:gap-6">
          {frictions.map((f, i) => (
            <article
              key={i}
              className="
                group relative overflow-hidden rounded-2xl bg-white
                ring-1 ring-foreground/[0.05]
                shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)]
                transition-all duration-500 ease-out
                hover:-translate-y-1 hover:shadow-[0_28px_60px_-32px_hsl(var(--navy)/0.32)]
              "
            >
              <div className="relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                <img
                  src={f.image}
                  alt={f.imageAlt}
                  className="size-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.035]"
                  loading="lazy"
                  decoding="async"
                />
                <div
                  aria-hidden="true"
                  className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-navy/45 to-transparent"
                />
                <span className="absolute left-4 top-4 rounded-full bg-cream/90 px-3 py-1 text-[10px] font-body font-bold uppercase tracking-[0.16em] text-terracotta-dark shadow-sm backdrop-blur-sm">
                  {f.kicker}
                </span>
              </div>

              <div className="px-6 py-7 lg:px-6 lg:py-8">
                <h3
                  className="font-satoshi font-bold text-foreground text-[18px] lg:text-[19px] !leading-tight mb-3"
                  style={{ letterSpacing: '-0.015em' }}
                >
                  {f.title}
                </h3>
                <p className="text-foreground/62 text-[14px] lg:text-[14.5px] font-body leading-relaxed">
                  {f.desc}
                </p>
              </div>
            </article>
          ))}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default LogistiqueProblem;