import { Boxes, Factory, PackageSearch, Snowflake, Truck, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type LogistiqueWarehouseType = {
  icon: LucideIcon;
  label: string;
  title: string;
  desc: string;
  image: string;
};

type WarehouseType = LogistiqueWarehouseType;

export const defaultWarehouseTypes: WarehouseType[] = [
  {
    icon: Boxes,
    label: 'Stockage',
    title: 'Entrepôts secs',
    desc: 'Grands volumes, chaleur en hauteur, produits mieux protégés.',
    image: '/images/logistique/site-stockage.webp',
  },
  {
    icon: PackageSearch,
    label: 'Préparation',
    title: 'Fulfillment e-commerce',
    desc: 'Préparateurs plus confortables pendant les pics d’activité.',
    image: '/images/logistique/site-fulfillment.webp',
  },
  {
    icon: Truck,
    label: 'Flux tendus',
    title: 'Cross-docking',
    desc: 'Quais et zones de tri moins exposés à la surchauffe.',
    image: '/images/logistique/site-cross-docking.webp',
  },
  {
    icon: Snowflake,
    label: 'Zones froides',
    title: 'Entrepôts frigorifiques',
    desc: 'Groupes froids moins sollicités, ROI plus rapide.',
    image: '/images/logistique/site-frigorifique.webp',
  },
  {
    icon: Factory,
    label: 'Technique',
    title: 'Hangars et entrepôts techniques',
    desc: 'Équipements sensibles protégés, toiture moins sollicitée.',
    image: '/images/logistique/site-technique.webp',
  },
];

type LogistiqueApplicationsProps = {
  badge?: string;
  titre?: string;
  intro?: string;
  warehouseTypes?: WarehouseType[];
};

const LogistiqueApplications = ({
  badge = 'Vos sites',
  titre = 'Une solution pour chaque entrepôt.',
  intro = 'Covalba intervient sur les bâtiments logistiques où la chaleur impacte les équipes, les produits ou les coûts.',
  warehouseTypes = defaultWarehouseTypes,
}: LogistiqueApplicationsProps = {}) => (
    <section className="relative overflow-hidden bg-cream py-16 lg:py-24">
      <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 relative mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 gap-6 lg:mb-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-end lg:gap-16">
            <div>
              <div className="mb-5 flex items-center gap-3">
                <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="font-satoshi font-bold !leading-[1.05] text-foreground"
                style={{ fontSize: 'clamp(2rem, 3vw, 3rem)' }}
              >
                {titre}
              </h2>
            </div>

            <p className="max-w-[540px] border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/68 lg:text-[17px]">
              {intro}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-5 lg:gap-5">
            <div className="hidden lg:contents">
              {warehouseTypes.map((site, index) => {
                const Icon = site.icon;

                return (
                  <article
                    key={site.title}
                    className="group overflow-hidden rounded-2xl bg-white shadow-[0_16px_46px_-38px_hsl(var(--navy)/0.34)] ring-1 ring-foreground/[0.06] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_24px_58px_-42px_hsl(var(--navy)/0.44)]"
                  >
                    <div className="aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                      <img
                        src={site.image}
                        alt=""
                        className="size-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.035]"
                        loading="lazy"
                        decoding="async"
                      />
                    </div>

                    <div className="p-5">
                      <div className="mb-4 flex items-center justify-between gap-3">
                        <span className="inline-flex items-center gap-2 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary">
                          <Icon className="h-5 w-5" strokeWidth={1.55} />
                          {site.label}
                        </span>
                        <span className="font-body text-xs font-bold text-foreground/22">
                          0{index + 1}
                        </span>
                      </div>
                      <h3 className="font-satoshi text-xl font-bold leading-tight text-foreground">
                        {site.title}
                      </h3>
                      <p className="mt-2 font-body text-sm leading-snug text-foreground/60">
                        {site.desc}
                      </p>
                    </div>
                  </article>
                );
              })}
            </div>

            <div className="grid gap-4 lg:hidden">
              {warehouseTypes.map((site, index) => {
                const Icon = site.icon;

                return (
                  <article
                    key={site.title}
                    className="grid min-h-[154px] grid-cols-[1fr_34%] overflow-hidden rounded-2xl bg-white shadow-[0_16px_42px_-34px_hsl(var(--navy)/0.42)] ring-1 ring-foreground/[0.06]"
                  >
                    <div className="flex min-w-0 flex-col justify-center p-5">
                      <div className="mb-3 flex items-center justify-between gap-3">
                        <span className="inline-flex min-w-0 items-center gap-2 font-body text-[10px] font-bold uppercase tracking-[0.16em] text-primary">
                          <Icon className="h-4 w-4 shrink-0" strokeWidth={1.55} />
                          {site.label}
                        </span>
                        <span className="font-body text-xs font-bold text-foreground/24">
                          0{index + 1}
                        </span>
                      </div>
                      <h3 className="font-satoshi text-lg font-bold leading-tight text-foreground">
                        {site.title}
                      </h3>
                      <p className="mt-2 font-body text-[13px] leading-snug text-foreground/62">
                        {site.desc}
                      </p>
                    </div>
                    <img
                      src={site.image}
                      alt=""
                      className="h-full min-h-[154px] w-full object-cover"
                      loading="lazy"
                      decoding="async"
                    />
                  </article>
                );
              })}
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
);

export default LogistiqueApplications;