// Block `tableau_situations` — design repris des SituationCards de
// src/components/roof/RoofPageTemplate.tsx : cards 2 colonnes situation /
// recommandation (primary) / justification.

import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { TableauSituationsBlock } from "@/lib/wp/types";
import { BlockCta, SectionHeading } from "./shared";

const TableauSituations = (props: TableauSituationsBlock & { position?: number }) => {
  // GraphQL expose `lignesSituations` (cf. SCHEMA.md, piège WPGraphQL ACF) ;
  // fallback `lignes` tant que types.ts n'est pas resynchronisé.
  const lignes = arr(
    props.lignesSituations
  ).filter((l) => l.situation);
  if (!lignes.length) return null;

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

        <ScrollReveal stagger>
          <div className="grid gap-4 md:grid-cols-2 max-w-5xl mx-auto">
            {lignes.map((row, i) => (
              <article
                key={i}
                className="rounded-2xl bg-white p-5 lg:p-6 ring-1 ring-foreground/[0.06]"
              >
                <p className="font-satoshi text-lg font-bold leading-tight text-foreground">
                  {row.situation}
                </p>
                {row.recommandation && (
                  <p className="mt-2 font-body text-sm font-bold text-primary">
                    {row.recommandation}
                  </p>
                )}
                {row.justification && (
                  <p className="mt-2 font-body text-sm leading-relaxed text-foreground/58">
                    {row.justification}
                  </p>
                )}
              </article>
            ))}
          </div>
        </ScrollReveal>

        {props.cta?.label && (
          <ScrollReveal>
            <div className="text-center mt-12">
              <BlockCta cta={props.cta} />
            </div>
          </ScrollReveal>
        )}
      </div>
    </section>
  );
};

export default TableauSituations;