import {
  Warehouse,
  ShoppingCart,
  Landmark,
  Building2,
  Wheat,
  ArrowRight,
} from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

interface PrestationSecteursSectionProps {
  departementNom: string;
}

const SECTEURS = [
  { key: 'logistique', label: 'Logistique', slug: 'cool-roof-logistique' },
  { key: 'distribution', label: 'Distribution', slug: 'cool-roof-distribution' },
  { key: 'collectivites', label: 'Collectivités', slug: 'cool-roof-collectivites' },
  { key: 'tertiaire', label: 'Tertiaire', slug: 'cool-roof-tertiaire' },
  { key: 'agriculture', label: 'Agriculture', slug: 'cool-roof-agriculture' },
];

const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  logistique: Warehouse,
  distribution: ShoppingCart,
  collectivites: Landmark,
  tertiaire: Building2,
  agriculture: Wheat,
};

const PrestationSecteursSection = ({
  departementNom,
}: PrestationSecteursSectionProps) => {
  return (
    <section className="py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
            Nos prestations par secteur
          </p>
          <h2 className="font-satoshi text-3xl lg:text-4xl font-bold text-foreground">
            Prestations cool roof dans le {departementNom}
          </h2>
          <p className="text-muted-foreground font-body text-base mt-3">
            Découvrez notre expertise adaptée à votre activité
          </p>
        </ScrollReveal>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
          {SECTEURS.map((secteur) => {
            const Icon = ICONS[secteur.key];
            return (
              <ScrollReveal key={secteur.key}>
                <a
                  href={'/' + secteur.slug}
                  className="block rounded-xl border border-foreground/[0.08] p-6 hover:border-primary/30 hover:shadow-sm transition h-full"
                >
                  <Icon className="w-6 h-6 text-primary mb-4" />
                  <p className="font-satoshi font-bold text-foreground">
                    {secteur.label}
                  </p>
                  <p className="text-sm text-muted-foreground font-body mt-1">
                    Cool roof pour {secteur.label.toLowerCase()} dans le{' '}
                    {departementNom}
                  </p>
                  <span className="text-primary text-sm font-semibold mt-4 inline-flex items-center gap-1">
                    Découvrir
                    <ArrowRight className="w-4 h-4" />
                  </span>
                </a>
              </ScrollReveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default PrestationSecteursSection;