"use client";

import type { ReactNode } from 'react';
import { ArrowRight, Play } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import { useLocale } from '@/components/blocks/localeContext';

// Libellés codés en dur (jamais fournis par WP).
const WATCH_TESTIMONIAL: Record<string, string> = {
  fr: 'Voir le témoignage de',
  en: 'Watch the testimonial from',
  es: 'Ver el testimonio de',
};
const SECTOR_RESULTS_CTA: Record<string, string> = {
  fr: 'Voir les résultats dans votre secteur',
  en: 'See the results in your sector',
  es: 'Ver los resultados en su sector',
};

const defaultTestimonials = [
  {
    videoId: 'QV1vaKstW1U',
    quote: "Sur la partie réserve non climatisée, on a perdu aux alentours de 5 degrés. Un vrai confort de travail pour les équipes.",
    name: 'Olivier Fontaine',
    role: 'Adhérent',
    company: "Intermarché d'Illiers-Combray",
    context: 'Grande distribution · 2 500 m² rénovés',
  },
  {
    videoId: 'OE0rdwaKxoI',
    quote: "Sur les quais de départ, nous sommes passés de 15 à 8-10 degrés. La marchandise prend moins de chocs thermiques.",
    name: 'Président de Pa.Sa.Ge International',
    role: 'Président',
    company: 'Pa.Sa.Ge International',
    context: 'Entrepôt logistique · 3 000 à 3 500 m²',
  },
  {
    videoId: 'YMuMQ37HXL8',
    quote: "Nous avons gagné 13 degrés dans le magasin. Pour nos collaborateurs, la vie était nettement plus agréable pendant l'été.",
    name: 'Marine Calas',
    role: 'Responsable showroom',
    company: 'Roche Bobois Versailles',
    context: 'Showroom · Verrière et toiture traitées',
  },
];

interface TestimonialsProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  testimonials?: { videoId: string; quote: string; name: string; role: string; company: string; context: string }[];
}

const Testimonials = ({
  badge = 'Résultats clients',
  titre,
  intro = 'Sur les 2 millions de m² déjà traités, les résultats tombent dès le premier été. Trois retours directs de responsables de sites industriels et logistiques.',
  testimonials = defaultTestimonials,
}: TestimonialsProps = {}) => {
  const locale = useLocale();
  return (
  <section className="relative py-16 lg:py-32 bg-[#192A3A] overflow-hidden">
    {/* Blob décoratif teal — seulement en bas-gauche pour éviter le raccord visuel avec RSESection */}
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
      style={{
        maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
      }}
    />

    <div className="relative container mx-auto px-4 lg:px-8">
      {/* Header éditorial centré */}
      <ScrollReveal>
        <div className="text-center max-w-2xl mx-auto mb-14 lg:mb-20">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-teal-vivid font-body mb-6">
            {badge}
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-white !leading-[1.05] mb-4"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>Le cool roof, <span className="text-teal-vivid">en chiffres sur le terrain</span></>)}
          </h2>
          <p className="text-white/60 text-base font-body">
            {intro}
          </p>
        </div>
      </ScrollReveal>

      {/* Grille 3 cards */}
      <ScrollReveal stagger>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {testimonials.map((t) => (
            <article key={t.name} className="flex flex-col">
              {/* Video card — style Pinterest : nom stacké à gauche + player à droite */}
              <a
                href={`https://www.youtube.com/watch?v=${t.videoId}`}
                target="_blank"
                rel="noopener noreferrer"
                className="group relative block aspect-[16/11] sm:aspect-[4/5] rounded-2xl overflow-hidden shadow-[0_2px_12px_-4px_rgba(0,0,0,0.08)] hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.25)] transition-shadow duration-500"
                aria-label={`${WATCH_TESTIMONIAL[locale]} ${t.name}`}
              >
                <img
                  src={`https://img.youtube.com/vi/${t.videoId}/hqdefault.jpg`}
                  alt={`Témoignage ${t.name} - ${t.company}`}
                  className="w-full h-full object-cover transition-transform duration-[900ms] ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:scale-[1.05]"
                  loading="lazy"
                />

                {/* Bottom bar : nom stacké + player circulaire */}
                <div className="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-foreground/85 via-foreground/40 to-transparent lg:transition-opacity lg:duration-300 lg:group-hover:opacity-0">
                  <div className="flex items-end justify-between gap-3">
                    {/* Nom + rôle (stacké) */}
                    <div className="min-w-0 flex-1">
                      <p className="font-satoshi font-bold text-white text-base lg:text-lg !leading-tight truncate">
                        {t.name}
                      </p>
                      <p className="text-white/70 text-xs font-body mt-0.5 truncate">
                        {t.role} · {t.company}
                      </p>
                    </div>

                    {/* Player circulaire */}
                    <div className="w-11 h-11 rounded-full bg-white/95 backdrop-blur-sm flex items-center justify-center flex-shrink-0 shadow-[0_4px_16px_rgba(0,0,0,0.2)] transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:scale-110 group-hover:bg-white">
                      <Play className="w-3.5 h-3.5 text-foreground fill-foreground ml-0.5" strokeWidth={0} />
                    </div>
                  </div>
                </div>

                {/* Hover overlay desktop — quote qui apparaît */}
                <div className="hidden lg:flex absolute inset-0 min-h-0 flex-col justify-end p-5 bg-gradient-to-t from-foreground/95 via-foreground/75 to-foreground/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]">
                  {/* Guillemet */}
                  <div
                    className="font-satoshi text-white/30 !leading-none mb-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-75 ease-[cubic-bezier(0.32,0.72,0,1)]"
                    style={{ fontSize: '2.25rem' }}
                    aria-hidden="true"
                  >
                    “
                  </div>
                  <blockquote
                    className="font-satoshi text-white text-sm !leading-[1.45] mb-4 line-clamp-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-100 ease-[cubic-bezier(0.32,0.72,0,1)]"
                  >
                    {t.quote}
                  </blockquote>
                  {/* Bottom bar in hover state : nom + player restent positionnés pareil */}
                  <div className="flex items-end justify-between gap-3 pt-4 border-t border-white/15 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-150 ease-[cubic-bezier(0.32,0.72,0,1)]">
                    <div className="min-w-0 flex-1">
                      <p className="font-satoshi font-bold text-white text-base !leading-tight truncate">
                        {t.name}
                      </p>
                      <p className="text-white/65 text-xs font-body mt-0.5 truncate">
                        {t.role} · {t.company}
                      </p>
                    </div>
                    <div className="w-11 h-11 rounded-full bg-white/95 backdrop-blur-sm flex items-center justify-center flex-shrink-0 shadow-[0_4px_16px_rgba(0,0,0,0.2)]">
                      <Play className="w-3.5 h-3.5 text-foreground fill-foreground ml-0.5" strokeWidth={0} />
                    </div>
                  </div>
                </div>
              </a>

              {/* Mobile : contenu sous la card */}
              <div className="lg:hidden mt-5">
                <div
                  className="font-satoshi text-teal-vivid/40 !leading-none mb-2"
                    style={{ fontSize: '2.5rem' }}
                  aria-hidden="true"
                >
                  “
                </div>
                <blockquote
                  className="font-satoshi text-white/90 text-[15px] !leading-[1.5] mb-4"
                >
                  {t.quote}
                </blockquote>
                <p className="text-sm text-white/70 font-body leading-snug">
                  <span className="text-white/40">— </span>
                  <span className="font-semibold text-white">{t.name}</span>
                  <span>, {t.company}</span>
                </p>
                <p className="text-[11px] text-white/45 font-body mt-1">
                  {t.role} · {t.context}
                </p>
              </div>
            </article>
          ))}
        </div>
      </ScrollReveal>

      {/* CTA */}
      <ScrollReveal>
        <div className="mt-12 lg:mt-16 text-center">
          <a
            href="#secteurs"
            className="inline-flex items-center gap-2 text-teal-vivid font-semibold hover:gap-3 transition-all text-sm"
          >
            {SECTOR_RESULTS_CTA[locale]} <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </ScrollReveal>
    </div>
  </section>
  );
};

export default Testimonials;