/**
 * LogistiqueBenefitsEN — English variant of the Logistics benefits section.
 * Faithful copy with EN strings. Reuses the same image assets.
 */

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

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

const benefitCards: BenefitCard[] = [
  {
    icon: UsersRound,
    title: 'More comfortable teams',
    desc: 'Less fatigue during heat peaks.',
  },
  {
    icon: Package,
    title: 'Better-protected products',
    desc: 'More stable storage in sensitive areas.',
  },
  {
    icon: Snowflake,
    title: 'Less demand on cooling',
    desc: 'Cooling units relieved during hot periods.',
  },
  {
    icon: Shield,
    title: 'A protected roof',
    desc: 'Less UV and thermal stress.',
  },
];

const LogistiqueBenefitsEN = () => (
  <>
    <section className="relative overflow-hidden bg-cream pt-16 pb-12 lg:min-h-[640px] 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-[640px] w-[58vw] overflow-hidden lg:block">
        <img
          src="/images/logistique/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>
            <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 warehouse,
                <br />
                with immediate effects.
              </h2>

              <p className="max-w-[560px] font-body text-base leading-relaxed text-foreground/72 lg:text-[17px]">
                The cool roof works at roof level, but its effects are felt across the entire
                operation.
              </p>
            </div>
          </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/logistique/benefits-hero.webp"
                alt="Modern logistics warehouse with trucks at the loading docks"
                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>

              <div className="flex items-end justify-between gap-5">
                <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">
                    -10°C
                  </p>
                  <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">
                    indoors in summer*
                  </p>
                </div>
              </div>

              <p className="mt-5 border-t border-foreground/10 pt-4 font-body text-[11px] leading-relaxed text-foreground/46">
                *Depending on exposure, insulation and building configuration.
              </p>
            </div>
          </div>

          <div className="relative z-10 mt-7 hidden max-w-[500px] 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">
                  -10°C
                </p>
                <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">
                  indoors in summer*
                </p>
              </div>
            </div>

            <p className="mt-5 border-t border-foreground/10 pt-4 font-body text-xs leading-relaxed text-foreground/44">
              *Depending on exposure, insulation and building configuration.
            </p>
          </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 on site.
            </h2>
            <p className="max-w-[620px] border-l border-primary/35 pl-6 font-body text-sm leading-relaxed text-foreground/62 lg:text-base">
              Four clear impacts you can see in day-to-day operations: comfort, storage, cooling and durability.
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 lg:gap-4">
            {benefitCards.map((benefit, index) => {
              const Icon = benefit.icon;

              return (
                <article
                  key={benefit.title}
                  className="group flex min-h-[136px] items-start gap-4 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:min-h-[156px] lg:p-6"
                >
                  <div className="flex h-11 w-11 shrink-0 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>
                  <div className="min-w-0">
                    <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-xl">
                      {benefit.title}
                    </h3>
                    <p className="mt-2 font-body text-sm leading-snug text-foreground/62">
                      {benefit.desc}
                    </p>
                  </div>
                </article>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  </>
);

export default LogistiqueBenefitsEN;