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

type BenefitCard = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

const benefits: BenefitCard[] = [
  {
    icon: Store,
    title: 'Customers who stay and who buy',
    desc: 'A cool store keeps customers shopping longer during hot periods.',
  },
  {
    icon: Snowflake,
    title: 'A lower cooling load',
    desc: 'Less heat to compensate for during summer peaks.',
  },
  {
    icon: PackageCheck,
    title: 'Better-protected refrigerated sections',
    desc: 'Refrigerated cabinets work in a more stable environment.',
  },
  {
    icon: UsersRound,
    title: 'Relief for your teams',
    desc: 'More bearable conditions at checkouts, reception and aisles.',
  },
  {
    icon: Shield,
    title: 'Protected roof',
    desc: 'The coating limits UV, expansion and aging of the substrate.',
  },
];

const DistributionBenefitsEN = () => (
  <>
    <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="/images/distribution/benefits-hero.webp"
          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">
                Measurable benefits
              </span>
            </div>
            <h2
              className="mb-6 font-satoshi font-bold !leading-[1.04] text-foreground"
              style={{ fontSize: 'clamp(2.15rem, 3vw, 3rem)' }}
            >
              A cooler store,
              <br />
              immediate effects.
            </h2>
            <p className="max-w-[540px] font-body text-base leading-relaxed text-foreground/72 lg:text-[16px]">
              By treating the roof, the cool roof coating improves store comfort from the very first heat peaks.
            </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="/images/distribution/benefits-hero.webp"
                alt="Bright, cool commercial space during the summer"
                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">
                  From the very first summer
                </p>
              </div>
              <p className="font-body text-sm font-semibold leading-none text-foreground/72">Up to</p>
              <p className="mt-1 font-satoshi text-[3.35rem] font-bold leading-[0.88] text-primary">-8 to -10°C</p>
              <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">under your roof</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">
                  From the very first summer
                </p>
                <p className="font-body text-sm font-semibold leading-none text-foreground/72">Up to</p>
                <p className="mt-1 font-satoshi text-[3.35rem] font-bold leading-[0.88] text-primary">-8 to -10°C</p>
                <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">under your roof</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)' }}
            >
              What it actually changes in store.
            </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]">
              The gains vary depending on the area, but the lever stays the same: reduce the heat received by the roof.
            </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 DistributionBenefitsEN;