"use client";

import { ArrowRight } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import covaThermImg from '@/assets/produits/Covalba-CovaTherm1-Produit.webp';
import covaSealImg from '@/assets/produits/Covalba-CovaSeal1-Produit.webp';
import covaMetalImg from '@/assets/produits/Covalba-CovaMeta1-Produit.webp';
import laqueSolaireImg from '@/assets/produits/Covalba-CovaTherm-Light-Produit.webp';
import { I18N_NAV } from '@/config/i18nNav';
import { localizedUri } from '@/config/i18nRoutes';
import { useLocale } from '@/components/blocks/localeContext';

// Libellé statique de carte (jamais fourni par WP).
const DISCOVER_LABEL: Record<string, string> = { fr: 'Découvrir', en: 'Discover', es: 'Descubrir' };

export interface RelatedProductItem {
  name: string;
  tag: string;
  need: string;
  href: string;
  img: string;
}

export const allProducts: RelatedProductItem[] = [
  {
    name: 'CovaTherm',
    tag: 'Peinture cool roof',
    need: 'Votre toiture est en bon état et vous voulez réduire la chaleur et la facture énergétique.',
    href: '/peinture-reflective-covatherm',
    img: covaThermImg.src,
  },
  {
    name: 'CovaSeal 20',
    tag: 'Toiture fissurée ou poreuse',
    need: 'Votre toiture présente des microfissures ou des infiltrations. Cool roof + étanchéité en une seule application.',
    href: '/covaseal',
    img: covaSealImg.src,
  },
  {
    name: 'CovaMetal 20',
    tag: 'Bac acier / toiture métallique',
    need: 'Votre toiture est en métal, elle rouille ou se déforme. 3 en 1 : cool roof, anticorrosion et étanchéité.',
    href: '/covametal',
    img: covaMetalImg.src,
  },
  {
    name: 'CovaTherm Light',
    tag: 'Lanterneaux translucides',
    need: 'Vous avez des surfaces en polycarbonate ou polyester. Bloque la chaleur tout en conservant la lumière naturelle.',
    href: '/laque-solaire-covatherm-light',
    img: laqueSolaireImg.src,
  },
];

interface RelatedProductsProps {
  currentProduct: string;
  badge?: string;
  titre?: string;
  products?: RelatedProductItem[];
}

const RelatedProducts = ({
  currentProduct,
  badge = 'Autres solutions',
  titre = 'Découvrez également',
  products = allProducts,
}: RelatedProductsProps) => {
  const locale = useLocale();
  const navProducts = I18N_NAV[locale].products;
  // Les noms de produits sont identiques dans les 3 langues → on récupère
  // tag/need/href traduits depuis le dictionnaire nav (déjà localisé).
  const localize = (p: RelatedProductItem) => navProducts.find((np) => np.name === p.name);
  const allSolutionsHref = locale === 'fr' ? '/nos-solutions-cool-roof' : localizedUri(locale, '/');
  const related = products.filter((p) => p.name !== currentProduct).slice(0, 3);

  return (
    <section className="py-16 lg:py-24 bg-white">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-10">
            <div>
              <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
                {badge}
              </p>
              <h2
                className="font-satoshi text-2xl sm:text-3xl font-black text-foreground"
                style={{ letterSpacing: '-0.02em' }}
              >
                {titre}
              </h2>
            </div>
            <a
              href={allSolutionsHref}
              className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:gap-2.5 transition-all flex-shrink-0"
            >
              {I18N_NAV[locale].ui.allSolutions} <ArrowRight className="w-3.5 h-3.5" />
            </a>
          </div>
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {related.map((p) => {
              const nav = localize(p);
              return (
              <a
                key={p.name}
                href={nav?.href ?? localizedUri(locale, p.href)}
                className="group flex flex-col rounded-2xl border border-border hover:border-primary/25 bg-cream hover:shadow-[0_4px_30px_rgba(26,42,58,0.08)] transition-all duration-300 overflow-hidden"
              >
                {/* Image */}
                <div className="h-36 bg-gradient-to-b from-muted/40 to-muted/10 flex items-center justify-center px-4 pt-4">
                  <img
                    src={p.img}
                    alt={p.name}
                    className="h-28 w-36 object-contain object-bottom drop-shadow-md transition-transform duration-300 group-hover:scale-105"
                    loading="lazy"
                  />
                </div>
                {/* Info */}
                <div className="p-5 flex flex-col gap-2 flex-1">
                  <span className="inline-block text-[10px] font-bold text-primary bg-primary/10 px-2 py-0.5 rounded-full font-body w-fit tracking-wide">
                    {nav?.tag ?? p.tag}
                  </span>
                  <p className="font-satoshi font-black text-lg text-foreground group-hover:text-primary transition-colors">
                    {p.name}
                  </p>
                  <p className="text-sm text-foreground/65 font-body leading-relaxed flex-1">{nav?.need ?? p.need}</p>
                  <span className="flex items-center gap-1 text-xs font-semibold text-primary mt-2 group-hover:gap-1.5 transition-all">
                    {DISCOVER_LABEL[locale]} <ArrowRight className="w-3 h-3" />
                  </span>
                </div>
              </a>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default RelatedProducts;