import { Building2, Map, ShoppingBasket, Store, Wrench, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

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

type SurfaceType = DistributionSurfaceType;

export const defaultSurfaces: SurfaceType[] = [
  {
    icon: ShoppingBasket,
    label: 'Alimentaire',
    title: 'Supermarchés et hypermarchés',
    desc: 'Grandes toitures, forte fréquentation, rayons frais.',
    image: '/images/distribution/site-supermarche.webp',
  },
  {
    icon: Building2,
    label: 'Galeries',
    title: 'Centres commerciaux et galeries marchandes',
    desc: 'Volumes ouverts où le confort prolonge la visite.',
    image: '/images/distribution/site-centre-commercial.webp',
  },
  {
    icon: Wrench,
    label: 'Spécialisé',
    title: 'Grandes surfaces spécialisées',
    desc: 'Bricolage, sport, jardinerie ou ameublement.',
    image: '/images/distribution/site-grande-surface.webp',
  },
  {
    icon: Store,
    label: 'Proximité',
    title: 'Commerces et moyennes surfaces',
    desc: 'Intervention extérieure sans fermeture du magasin.',
    image: '/images/distribution/site-commerce-proximite.webp',
  },
  {
    icon: Map,
    label: 'Parcs',
    title: 'Retail parks et zones commerciales',
    desc: "Un traitement cohérent à l'échelle d'un parc.",
    image: '/images/distribution/site-retail-park.webp',
  },
];

type DistributionApplicationsProps = {
  badge?: string;
  titre?: string;
  intro?: string;
  surfaces?: SurfaceType[];
  ctaLabel?: string;
  transition?: string;
};

const DistributionApplications = ({
  badge = 'Vos surfaces',
  titre = 'Une solution pour chaque surface commerciale.',
  intro = 'Covalba intervient sur les bâtiments commerciaux où la chaleur pèse sur la fréquentation, la facture ou la conservation des produits.',
  surfaces = defaultSurfaces,
  ctaLabel = 'Voir nos réalisations',
  transition = "La question suivante : comment intervenir sans perturber l'activité ?",
}: DistributionApplicationsProps = {}) => (
  <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-[16px]">
            {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">
          {surfaces.map((surface, index) => {
            const Icon = surface.icon;
            return (
              <article
                key={surface.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={surface.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} />
                      {surface.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">{surface.title}</h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/60">{surface.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="mt-10 flex flex-col items-center gap-5 text-center lg:mt-12">
          <a href="#preuves-distribution" className="font-body text-sm font-semibold text-primary transition-colors hover:text-primary/80">
            {ctaLabel}
          </a>
          <p className="max-w-2xl font-body text-sm leading-relaxed text-foreground/54">
            {transition}
          </p>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionApplications;