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

export type DistributionBenefitCard = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

type BenefitCard = DistributionBenefitCard;

export const defaultBenefits: BenefitCard[] = [
  {
    icon: Store,
    title: 'Une clientèle qui reste et qui achète',
    desc: 'Un magasin frais retient mieux les clients en période chaude.',
  },
  {
    icon: Snowflake,
    title: 'Climatisation soulagée',
    desc: "Moins de chaleur à compenser pendant les pics d'été.",
  },
  {
    icon: PackageCheck,
    title: 'Rayons frais mieux préservés',
    desc: 'Les meubles réfrigérés travaillent dans une ambiance plus stable.',
  },
  {
    icon: UsersRound,
    title: 'Confort des équipes restauré',
    desc: 'Des conditions plus supportables en caisse, accueil et rayons.',
  },
  {
    icon: Shield,
    title: 'Toiture protégée',
    desc: "Le revêtement limite UV, dilatation et vieillissement du support.",
  },
];

const defaultTitre = (
  <>
    Un magasin plus frais,
    <br />
    des effets immédiats.
  </>
);

type DistributionBenefitsProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  imageSrc?: string;
  imageAlt?: string;
  kicker?: string;
  sublabel?: string;
  metric?: string;
  metricLabel?: string;
  cardsTitle?: string;
  cardsIntro?: string;
  benefits?: BenefitCard[];
};

const DistributionBenefits = ({
  badge = 'Bénéfices mesurables',
  titre = defaultTitre,
  intro = 'En traitant la toiture, le cool roof améliore le confort du point de vente dès les premiers pics de chaleur.',
  imageSrc = '/images/distribution/benefits-hero.webp',
  imageAlt = "Surface commerciale lumineuse et fraîche pendant l'été",
  kicker = 'Dès le premier été',
  sublabel = "Jusqu'à",
  metric = '-8 à -10°C',
  metricLabel = 'sous votre toiture',
  cardsTitle = 'Ce que ça change concrètement dans le point de vente.',
  cardsIntro = 'Les gains varient selon la surface, mais le levier reste le même : réduire la chaleur reçue par la toiture.',
  benefits = defaultBenefits,
}: DistributionBenefitsProps = {}) => (
  <>
    <section className="relative overflow-hidden bg-cream pt-16 pb-12 lg:min-h-[660px] lg:pt-20 lg:pb-8">
      <div
        aria-hidden="true"
        className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent"
      />

      <figure className="absolute right-0 top-0 hidden h-full min-h-[660px] w-[58vw] overflow-hidden lg:block">
        <img
          src={imageSrc}
          alt=""
          className="size-full object-cover object-[58%_50%]"
          loading="lazy"
          decoding="async"
        />
        <div aria-hidden="true" className="absolute inset-y-0 left-0 w-[56%] bg-gradient-to-r from-cream via-cream/88 to-transparent" />
        <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-cream via-cream/72 to-transparent" />
      </figure>

      <div className="container relative z-10 mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="max-w-[760px]">
            <div className="mb-5 flex items-center gap-3 lg:mb-7">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                {badge}
              </span>
            </div>
            <h2
              className="mb-6 font-satoshi font-bold !leading-[1.04] text-foreground"
              style={{ fontSize: 'clamp(2.15rem, 3vw, 3rem)' }}
            >
              {titre}
            </h2>
            <p className="max-w-[540px] font-body text-base leading-relaxed text-foreground/72 lg:text-[16px]">
              {intro}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal>
          <div className="relative z-10 mx-auto mt-8 overflow-hidden rounded-2xl bg-white shadow-[0_22px_58px_-40px_hsl(var(--navy)/0.35)] ring-1 ring-foreground/[0.06] lg:hidden">
            <div className="relative aspect-[16/10] overflow-hidden bg-foreground/[0.04]">
              <img
                src={imageSrc}
                alt={imageAlt}
                className="size-full object-cover object-[58%_50%]"
                loading="lazy"
                decoding="async"
              />
              <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white to-transparent" />
            </div>
            <div className="relative px-6 pb-6 pt-3">
              <div className="mb-4 flex items-center gap-3">
                <Thermometer className="h-8 w-8 shrink-0 text-primary" strokeWidth={1.55} />
                <p className="font-body text-[11px] font-bold uppercase tracking-[0.2em] text-primary">
                  {kicker}
                </p>
              </div>
              <p className="font-body text-sm font-semibold leading-none text-foreground/72">{sublabel}</p>
              <p className="mt-1 font-satoshi text-[3.35rem] font-bold leading-[0.88] text-primary">{metric}</p>
              <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">{metricLabel}</p>
            </div>
          </div>

          <div className="relative z-10 mt-7 hidden max-w-[540px] rounded-2xl bg-white/96 p-6 shadow-[0_22px_70px_-45px_hsl(var(--navy)/0.35)] ring-1 ring-foreground/[0.05] backdrop-blur-sm lg:block">
            <div className="grid grid-cols-[48px_minmax(0,1fr)] items-center gap-5">
              <Thermometer className="h-12 w-12 text-primary" strokeWidth={1.55} />
              <div>
                <p className="mb-3 font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                  {kicker}
                </p>
                <p className="font-body text-sm font-semibold leading-none text-foreground/72">{sublabel}</p>
                <p className="mt-1 font-satoshi text-[3.35rem] font-bold leading-[0.88] text-primary">{metric}</p>
                <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">{metricLabel}</p>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>

    <section className="relative overflow-hidden bg-white py-14 lg:py-18">
      <div className="container relative mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="mb-8 grid grid-cols-1 gap-5 lg:mb-9 lg:grid-cols-[0.78fr_1.22fr] lg:items-end lg:gap-14">
            <h2
              className="font-satoshi font-bold !leading-[1.05] text-foreground"
              style={{ fontSize: 'clamp(1.75rem, 2.35vw, 2.25rem)' }}
            >
              {cardsTitle}
            </h2>
            <p className="max-w-[600px] border-l border-primary/35 pl-6 font-body text-sm leading-relaxed text-foreground/62 lg:text-[15px]">
              {cardsIntro}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5 lg:gap-4">
            {benefits.map((benefit, index) => {
              const Icon = benefit.icon;
              return (
                <article
                  key={benefit.title}
                  className="group min-h-[184px] rounded-2xl bg-cream/65 p-5 ring-1 ring-foreground/[0.05] transition-all duration-500 hover:bg-cream hover:ring-primary/15 lg:p-6"
                >
                  <div className="mb-7 flex h-11 w-11 items-center justify-center rounded-xl bg-white text-primary shadow-[0_12px_30px_-24px_hsl(var(--navy)/0.35)] ring-1 ring-foreground/[0.04]">
                    <Icon className="h-5 w-5" strokeWidth={1.55} />
                  </div>
                  <span className="mb-3 block font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary/70">
                    0{index + 1}
                  </span>
                  <h3 className="font-satoshi text-lg font-bold leading-tight text-foreground lg:text-[19px]">
                    {benefit.title}
                  </h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/62">{benefit.desc}</p>
                </article>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  </>
);

export default DistributionBenefits;