// Block `timeline` — design repris de la frise chronologique de
// src/views/QuiSommesNous.tsx : ligne verticale centrale, cards alternées
// (image + badge année + numéro d'étape), chiffre watermark côté opposé.

import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { TimelineBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const Timeline = (props: TimelineBlock & { position?: number }) => {
  const jalons = arr(props.jalons).filter((j) => j.titre || j.annee);
  if (!jalons.length) return null;

  return (
    <section className="bg-cream py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} className="max-w-4xl" />
        </ScrollReveal>

        <div className="relative mx-auto max-w-5xl">
          <div className="absolute left-8 top-8 bottom-8 w-px bg-gradient-to-b from-primary/30 via-primary/15 to-transparent lg:left-1/2 lg:-translate-x-1/2" />
          <div className="space-y-7 lg:space-y-10">
            {jalons.map((jalon, index) => {
              const image = mapImage(jalon.image);
              return (
                <ScrollReveal key={index}>
                  <article className="relative grid gap-5 pl-20 lg:grid-cols-2 lg:gap-14 lg:pl-0">
                    <span className="absolute left-3 top-8 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-primary/25 bg-white shadow-sm lg:left-1/2 lg:-translate-x-1/2">
                      <span className="h-3 w-3 rounded-full bg-primary" />
                    </span>
                    <div
                      className={`group overflow-hidden rounded-lg border border-border bg-white p-2 shadow-sm transition-shadow duration-300 hover:shadow-[0_18px_60px_rgba(25,42,58,0.10)] ${
                        index % 2 === 1 ? "lg:col-start-2" : ""
                      }`}
                    >
                      <div
                        className={`grid overflow-hidden rounded-md bg-cream ${
                          image ? "sm:grid-cols-[148px_1fr]" : ""
                        }`}
                      >
                        {image && (
                          <div className="flex min-h-36 items-center justify-center bg-gradient-to-br from-teal-light to-white p-5">
                            <WpImage
                              image={image}
                              alt={image.altText || jalon.titre || ""}
                              className="max-h-28 max-w-28 object-contain transition-transform duration-500 group-hover:scale-105"
                            />
                          </div>
                        )}
                        <div className="p-5 lg:p-6">
                          <div className="mb-3 flex items-center gap-3">
                            {jalon.annee && (
                              <span className="rounded-full bg-primary/10 px-3 py-1 font-body text-[11px] font-black text-primary">
                                {jalon.annee}
                              </span>
                            )}
                            <span className="font-body text-[10px] font-bold uppercase tracking-[0.18em] text-foreground/30">
                              Étape {index + 1}
                            </span>
                          </div>
                          {jalon.titre && (
                            <h3 className="mb-2 font-satoshi text-xl font-bold leading-tight text-foreground">
                              {jalon.titre}
                            </h3>
                          )}
                          {jalon.texte && (
                            <p className="font-body text-sm leading-relaxed text-foreground/64">
                              {jalon.texte}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                    <div className="hidden lg:block" aria-hidden="true">
                      <div
                        className={`flex h-full items-center ${
                          index % 2 === 1 ? "justify-end pr-8" : "justify-start pl-8"
                        }`}
                      >
                        <span className="font-satoshi text-7xl font-black leading-none text-primary/[0.07]">
                          {index + 1}
                        </span>
                      </div>
                    </div>
                  </article>
                </ScrollReveal>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Timeline;