// Block `video` — design repris de VideoSection.tsx (iframe arrondi centré) ;
// les points clés s'affichent en cards sous la vidéo (pattern videoTakeaways
// de ReferenceDetail).

import { CheckCircle2 } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { VideoBlock } from "@/lib/wp/types";
import { SectionHeading, getEmbedUrl } from "./shared";

const Video = (props: VideoBlock & { position?: number }) => {
  if (!props.videoUrl) return null;
  const pointsCles = arr(props.pointsCles).filter((p) => p.label || p.texte);

  return (
    <section className="py-20 lg:py-28 bg-offwhite">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} />
          <div className="rounded-xl overflow-hidden shadow-xl aspect-video max-w-5xl mx-auto">
            <iframe
              src={getEmbedUrl(props.videoUrl)}
              className="w-full h-full"
              allow="encrypted-media"
              allowFullScreen
              title={props.entete?.titre ?? "Vidéo Covalba"}
              loading="lazy"
            />
          </div>
        </ScrollReveal>

        {pointsCles.length > 0 && (
          <ScrollReveal stagger>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto mt-8">
              {pointsCles.map((p, i) => (
                <div key={i} className="rounded-lg border border-border bg-white p-4">
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary" />
                    <div>
                      {p.label && (
                        <p className="font-body text-sm font-bold text-foreground">{p.label}</p>
                      )}
                      {p.texte && (
                        <p className="mt-1.5 font-body text-sm leading-relaxed text-foreground/65">
                          {p.texte}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </ScrollReveal>
        )}
      </div>
    </section>
  );
};

export default Video;