// Block `temoignages_video` — design repris de Testimonials.tsx : fond navy
// avec blob, grille de cards vidéo YouTube (thumbnail + bottom bar + quote au
// hover desktop, contenu sous la card en mobile).

import { Play } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr } from "@/lib/wp/mappers";
import type { TemoignagesVideoBlock } from "@/lib/wp/types";
import { SectionHeading, getYoutubeId } from "./shared";

const TemoignagesVideo = (props: TemoignagesVideoBlock & { position?: number }) => {
  const temoignages = arr(props.temoignages).filter((t) => t.videoUrl || t.citation);
  if (!temoignages.length) return null;

  return (
    <section className="relative py-16 lg:py-32 bg-[#192A3A] overflow-hidden">
      <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">
        <ScrollReveal>
          <SectionHeading entete={props.entete} dark />
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {temoignages.map((t, idx) => {
              const videoId = getYoutubeId(t.videoUrl);
              const sub = [t.role, t.entreprise].filter(Boolean).join(" · ");
              return (
                <article key={idx} className="flex flex-col">
                  <a
                    href={t.videoUrl ?? "#"}
                    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 bg-foreground"
                    aria-label={`Voir le témoignage de ${t.nom ?? "client"}`}
                  >
                    {videoId && (
                      <WpImage
                        image={{
                          sourceUrl: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,
                          altText: `Témoignage ${t.nom ?? ""}${t.entreprise ? ` - ${t.entreprise}` : ""}`,
                          width: null,
                          height: null,
                        }}
                        alt={`Témoignage ${t.nom ?? ""}${t.entreprise ? ` - ${t.entreprise}` : ""}`}
                        fill
                        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]"
                      />
                    )}

                    {/* 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">
                        <div className="min-w-0 flex-1">
                          {t.nom && (
                            <p className="font-satoshi font-bold text-white text-base lg:text-lg !leading-tight truncate">
                              {t.nom}
                            </p>
                          )}
                          {sub && (
                            <p className="text-white/70 text-xs font-body mt-0.5 truncate">{sub}</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)] 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 */}
                    {t.citation && (
                      <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)]">
                        <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.citation}
                        </blockquote>
                        <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">
                            {t.nom && (
                              <p className="font-satoshi font-bold text-white text-base !leading-tight truncate">
                                {t.nom}
                              </p>
                            )}
                            {sub && (
                              <p className="text-white/65 text-xs font-body mt-0.5 truncate">{sub}</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 */}
                  {t.citation && (
                    <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.citation}
                      </blockquote>
                      {t.nom && (
                        <p className="text-sm text-white/70 font-body leading-snug">
                          <span className="text-white/40">— </span>
                          <span className="font-semibold text-white">{t.nom}</span>
                          {t.entreprise && <span>, {t.entreprise}</span>}
                        </p>
                      )}
                      {(t.role || t.contexte) && (
                        <p className="text-[11px] text-white/45 font-body mt-1">
                          {[t.role, t.contexte].filter(Boolean).join(" · ")}
                        </p>
                      )}
                    </div>
                  )}
                </article>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default TemoignagesVideo;