"use client";

import type { ReactNode } from 'react';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import WpImage from './ui/WpImage';
import { type Locale, localizedUri } from '@/config/i18nRoutes';
import { useLocale } from '@/components/blocks/localeContext';

// Source unique : image + URI FR canonique partagées, libellés par langue.
// L'href réel est résolu via `localizedUri(locale, frHref)` (les pages secteurs
// sont traduites dans I18N_ROUTES). Évite la fuite de français en EN/ES.
const SECTOR_BASE: {
  frHref: string;
  img: string;
  name: Record<Locale, string>;
  line: Record<Locale, string>;
}[] = [
  {
    frHref: '/tertiaire',
    img: '/images/secteur-tertiaire.jpg',
    name: { fr: 'Tertiaire', en: 'Commercial', es: 'Sector terciario' },
    line: {
      fr: 'Améliorez le confort des personnes',
      en: 'Improve occupant comfort',
      es: 'Mejore el confort de las personas',
    },
  },
  {
    frHref: '/distribution',
    img: '/images/secteur-distribution.jpg',
    name: { fr: 'Distribution', en: 'Retail', es: 'Distribución' },
    line: {
      fr: 'Réduisez vos dépenses de froid',
      en: 'Cut your refrigeration costs',
      es: 'Reduzca sus gastos de refrigeración',
    },
  },
  {
    frHref: '/industrie',
    img: '/images/secteur-industrie.jpg',
    name: { fr: 'Industrie', en: 'Industry', es: 'Industria' },
    line: {
      fr: "Maîtrisez vos coûts d'énergie",
      en: 'Control your energy costs',
      es: 'Controle sus costes de energía',
    },
  },
  {
    frHref: '/logistique',
    img: '/images/secteur-logistique.jpg',
    name: { fr: 'Logistique', en: 'Logistics', es: 'Logística' },
    line: {
      fr: 'Réduisez vos dépenses de froid',
      en: 'Cut your refrigeration costs',
      es: 'Reduzca sus gastos de refrigeración',
    },
  },
  {
    frHref: '/collectivité',
    img: '/images/secteur-collectivite.jpg',
    name: { fr: 'Collectivités', en: 'Public sector', es: 'Sector público' },
    line: {
      fr: 'Améliorez le confort intérieur en été',
      en: 'Improve indoor comfort in summer',
      es: 'Mejore el confort interior en verano',
    },
  },
  {
    frHref: '/industries/agricole',
    img: '/images/secteur-agricole.png',
    name: { fr: 'Agricole', en: 'Agriculture', es: 'Sector agrícola' },
    line: {
      fr: 'Protégez animaux et récoltes de la chaleur',
      en: 'Protect livestock and crops from heat',
      es: 'Proteja animales y cosechas del calor',
    },
  },
  {
    frHref: '/industries/erp',
    img: '/images/secteur-erp.png',
    name: { fr: 'ERP', en: 'Public venues', es: 'Pública concurrencia' },
    line: {
      fr: 'Accueillez votre public au frais',
      en: 'Welcome your visitors in the cool',
      es: 'Reciba a su público al fresco',
    },
  },
];

// Carte applicateur (B2B) + en-têtes de section, par langue.
const I18N: Record<
  Locale,
  {
    badge: string;
    titre: ReactNode;
    intro: string;
    applicateur: { name: string; line: string; cta: string };
  }
> = {
  fr: {
    badge: "Secteurs d'activité",
    titre: (
      <>
        Le cool roof adapté
        <br />
        <span className="text-foreground/30">à chaque filière professionnelle</span>
      </>
    ),
    intro:
      "Chaque filière a ses propres contraintes : process industriel qui n'accepte pas l'arrêt, chaîne du froid en logistique, exigences HACCP en agroalimentaire, normes BPF en pharma, confort des équipes en tertiaire. Nos solutions s'adaptent au contexte réel de votre bâtiment, pas l'inverse.",
    applicateur: {
      name: 'Applicateur',
      line: 'Rejoignez le réseau Covalba',
      cta: 'Rejoindre le réseau',
    },
  },
  en: {
    badge: 'Business sectors',
    titre: (
      <>
        Cool roof tailored
        <br />
        <span className="text-foreground/30">to every professional sector</span>
      </>
    ),
    intro:
      'Every sector comes with its own constraints: industrial processes that can’t shut down, the cold chain in logistics, HACCP rules in food & beverage, GMP standards in pharma, team comfort in commercial buildings. Our coatings fit the real context of your building, not the other way around.',
    applicateur: {
      name: 'Applicator',
      line: 'Join the Covalba network',
      cta: 'Join the network',
    },
  },
  es: {
    badge: 'Sectores de actividad',
    titre: (
      <>
        Cool roof adaptado
        <br />
        <span className="text-foreground/30">a cada sector profesional</span>
      </>
    ),
    intro:
      'Cada sector tiene sus propias limitaciones: procesos industriales que no pueden detenerse, la cadena de frío en logística, normas HACCP en agroalimentación, normas GMP en farmacia, confort de los equipos en el terciario. Nuestras soluciones se adaptan al contexto real de su edificio, y no al revés.',
    applicateur: {
      name: 'Aplicador',
      line: 'Únase a la red Covalba',
      cta: 'Unirse a la red',
    },
  },
};

interface SectorsGridProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
}

const SectorsGrid = ({ badge, titre, intro }: SectorsGridProps = {}) => {
  const locale = useLocale();
  const t = I18N[locale];
  const resolvedBadge = badge ?? t.badge;
  const resolvedTitre = titre ?? t.titre;
  const resolvedIntro = intro ?? t.intro;

  return (
    <section id="secteurs" className="py-20 lg:py-28 bg-cream">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="text-center mb-14">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
              {resolvedBadge}
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              {resolvedTitre}
            </h2>
            <p className="max-w-2xl mx-auto text-foreground/60 text-base mt-5 font-body leading-relaxed">
              {resolvedIntro}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
            {/* 7 cartes secteurs (clients) */}
            {SECTOR_BASE.map((s) => {
              const name = s.name[locale];
              const line = s.line[locale];
              return (
                <a
                  key={s.frHref}
                  href={localizedUri(locale, s.frHref)}
                  className="group relative aspect-[4/3] rounded-2xl overflow-hidden shadow-[0_4px_24px_-8px_hsl(var(--navy)/0.15)] hover:shadow-[0_20px_60px_-15px_hsl(var(--navy)/0.35)] transition-shadow duration-500"
                >
                  {/* Image de fond */}
                  <WpImage
                    image={{ sourceUrl: s.img, altText: name, width: null, height: null }}
                    fill
                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                  />

                  {/* Dégradé navy pour lisibilité */}
                  <div className="absolute inset-0 bg-gradient-to-t from-navy/90 via-navy/30 to-transparent" />

                  {/* Flèche en haut à droite */}
                  <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-white group-hover:scale-110">
                    <ArrowRight className="w-4 h-4 text-white transition-colors duration-300 group-hover:text-navy" strokeWidth={2.2} />
                  </div>

                  {/* Texte en overlay bas */}
                  <div className="absolute bottom-0 left-0 right-0 p-6 lg:p-7">
                    <h3
                      className="font-satoshi font-black text-white text-2xl lg:text-[1.7rem] !leading-[1.05] mb-2"
                      style={{ letterSpacing: '-0.02em' }}
                    >
                      {name}
                    </h3>
                    <p className="text-white/80 text-sm font-body leading-snug">
                      {line}
                    </p>
                  </div>
                </a>
              );
            })}

            {/* 8ème carte : Applicateur (design distinct — B2B partenaire) */}
            <a
              href="/devenir-applicateur"
              className="group relative aspect-[4/3] rounded-2xl overflow-hidden bg-[#192A3A] border border-white/5 shadow-[0_4px_24px_-8px_hsl(var(--navy)/0.15)] hover:shadow-[0_20px_60px_-15px_hsl(var(--teal-vivid)/0.4)] transition-all duration-500"
            >
              {/* Composition de blobs organiques teal */}
              <img
                src="/images/applicateur-blobs.svg"
                alt=""
                aria-hidden="true"
                className="absolute inset-0 w-full h-full object-cover opacity-25 pointer-events-none transition-transform duration-700 ease-out group-hover:scale-110"
              />

              {/* Voile navy pour lisibilité du texte */}
              <div className="absolute inset-0 bg-gradient-to-t from-navy/85 via-navy/40 to-navy/20 pointer-events-none" />

              {/* Contenu */}
              <div className="relative h-full flex flex-col justify-end p-6 lg:p-7">
                {/* Titre + accroche */}
                <div>
                  <h3
                    className="font-satoshi font-black text-white text-2xl lg:text-[1.7rem] !leading-[1.05] mb-2"
                    style={{ letterSpacing: '-0.02em' }}
                  >
                    {t.applicateur.name}
                  </h3>
                  <p className="text-white/60 text-sm font-body leading-snug mb-5">
                    {t.applicateur.line}
                  </p>

                  {/* CTA toujours visible */}
                  <div className="inline-flex items-center gap-2 text-teal-vivid font-satoshi font-bold text-sm transition-transform duration-300 group-hover:translate-x-1">
                    <span>{t.applicateur.cta}</span>
                    <ArrowRight className="w-4 h-4" strokeWidth={2.5} />
                  </div>
                </div>
              </div>
            </a>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default SectorsGrid;