import type { ReactNode } from 'react';
import { Snowflake, Store, ThermometerSun, UsersRound, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type DistributionProblemCard = {
  icon: LucideIcon;
  image: string;
  alt: string;
  title: string;
  desc: string;
};

type ProblemCard = DistributionProblemCard;

export const defaultProblems: ProblemCard[] = [
  {
    icon: Store,
    image: '/images/distribution/problem-clients.webp',
    alt: 'Clients dans les allées d’une grande surface pendant une journée chaude',
    title: 'Vos clients écourtent leurs visites',
    desc: "Un magasin trop chaud réduit le temps passé en rayon.",
  },
  {
    icon: ThermometerSun,
    image: '/images/distribution/problem-climatisation.webp',
    alt: 'Groupes de climatisation sur la toiture d’un magasin exposé au soleil',
    title: 'Votre climatisation tourne à plein régime',
    desc: "Les groupes compensent en continu et la facture grimpe.",
  },
  {
    icon: Snowflake,
    image: '/images/distribution/problem-rayons-frais.webp',
    alt: 'Rayons frais d’un supermarché avec meubles réfrigérés',
    title: 'Vos rayons frais souffrent',
    desc: "Les meubles réfrigérés travaillent plus fort pour tenir la chaîne du froid.",
  },
  {
    icon: UsersRound,
    image: '/images/distribution/problem-equipes.webp',
    alt: 'Équipe de magasin dans une surface commerciale en période estivale',
    title: 'Vos équipes en première ligne',
    desc: "Caisses, accueil et rayons subissent la chaleur face au public.",
  },
];

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

type DistributionProblemProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  problems?: ProblemCard[];
  transition?: string;
};

const DistributionProblem = ({
  badge = 'Pourquoi agir',
  titre = defaultTitre,
  intro = "L'été, une grande toiture commerciale absorbe le soleil et rayonne vers l'intérieur. Les clients restent moins longtemps, la climatisation force et les rayons frais peinent.",
  problems = defaultProblems,
  transition = 'La cause commune : une toiture qui absorbe la chaleur au lieu de la renvoyer.',
}: DistributionProblemProps = {}) => (
  <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">
      <div className="mb-10 grid grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-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="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-terracotta-dark">
                {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>
          <p className="max-w-[560px] font-body text-base leading-relaxed text-foreground/65 lg:ml-auto lg:text-[16px]">
            {intro}
          </p>
        </ScrollReveal>
      </div>

      <ScrollReveal stagger>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5 xl:gap-6">
          {problems.map((problem) => {
            const Icon = problem.icon;
            return (
              <article
                key={problem.title}
                className="group overflow-hidden rounded-2xl bg-white shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)] ring-1 ring-foreground/[0.05] transition-all duration-500 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={problem.image}
                    alt={problem.alt}
                    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 flex h-10 w-10 items-center justify-center rounded-full bg-cream/90 text-terracotta-dark shadow-sm backdrop-blur-sm">
                    <Icon className="h-5 w-5" strokeWidth={1.7} />
                  </span>
                </div>
                <div className="px-6 py-7 lg:px-6 lg:py-8">
                  <h3
                    className="mb-3 font-satoshi text-[18px] font-bold text-foreground !leading-tight lg:text-[19px]"
                    style={{ letterSpacing: '-0.015em' }}
                  >
                    {problem.title}
                  </h3>
                  <p className="font-body text-[14px] leading-relaxed text-foreground/62 lg:text-[14.5px]">
                    {problem.desc}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <p className="mx-auto mt-10 max-w-3xl border-t border-foreground/10 pt-6 text-center font-body text-sm leading-relaxed text-foreground/58 lg:mt-14 lg:text-base">
          {transition}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionProblem;