// Block `etapes` — design repris de ProcessSection.tsx : titre sticky à
// gauche, timeline verticale numérotée à droite. La vidéo est un lien Play
// (pas de Dialog pour rester Server Component) ; les images d'étape, si
// présentes, s'affichent sous le texte de l'étape.

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

const Etapes = (props: EtapesBlock & { position?: number }) => {
  const etapes = arr(props.etapes).filter((e) => e.titre || e.texte);
  if (!etapes.length) return null;

  return (
    <section className="py-16 lg:py-32 bg-white">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-start">
          {/* Left : titre sticky */}
          <div className="lg:w-[40%] lg:sticky lg:top-[120px]">
            <ScrollReveal>
              {props.entete?.badge && (
                <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                  {props.entete.badge}
                </p>
              )}
              {props.entete?.titre && (
                <h2
                  className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-6"
                  style={{ letterSpacing: "-0.03em" }}
                >
                  <AccentTitle titre={props.entete.titre} />
                </h2>
              )}
              {props.entete?.intro && (
                <p className="text-muted-foreground text-base lg:text-lg leading-relaxed mb-8">
                  {props.entete.intro}
                </p>
              )}

              {props.videoUrl && (
                <a
                  href={props.videoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex items-center gap-3 text-primary transition-colors"
                >
                  <span className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                    <Play className="w-5 h-5" />
                  </span>
                  <span className="font-semibold text-sm">Voir la vidéo</span>
                </a>
              )}
            </ScrollReveal>
          </div>

          {/* Right : timeline */}
          <div className="lg:w-[60%] relative">
            <div className="absolute left-5 lg:left-6 top-4 bottom-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent" />

            <div className="flex flex-col gap-0">
              {etapes.map((etape, i) => {
                const image = mapImage(etape.image);
                return (
                  <ScrollReveal key={i}>
                    <div className="relative flex items-start gap-5 lg:gap-7 py-8 lg:py-10 group">
                      <div className="relative z-10 flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors duration-500">
                        <span className="font-satoshi text-sm font-black text-primary">
                          {String(i + 1).padStart(2, "0")}
                        </span>
                      </div>
                      <div className="pt-1 flex-1">
                        <span className="text-xs font-bold text-primary/50 uppercase tracking-widest mb-2 block font-body">
                          Étape {String(i + 1).padStart(2, "0")}
                        </span>
                        {etape.titre && (
                          <h3 className="text-xl lg:text-2xl text-foreground mb-2">{etape.titre}</h3>
                        )}
                        {etape.texte && (
                          <p className="text-muted-foreground text-sm lg:text-base leading-relaxed max-w-md">
                            {etape.texte}
                          </p>
                        )}
                        {image && (
                          <div className="mt-4 max-w-md rounded-xl overflow-hidden">
                            <WpImage
                              image={image}
                              alt={image.altText || etape.titre || ""}
                              className="w-full object-cover"
                            />
                          </div>
                        )}
                      </div>
                    </div>
                    {i < etapes.length - 1 && <div className="ml-5 lg:ml-6 h-px bg-border" />}
                  </ScrollReveal>
                );
              })}
            </div>

            {props.reassurance && (
              <ScrollReveal>
                <div className="ml-16 lg:ml-20 mt-4">
                  <p className="text-muted-foreground/50 text-xs font-medium">{props.reassurance}</p>
                </div>
              </ScrollReveal>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Etapes;