// Spine.jsx — "Le fil rouge : Penser, puis Faire" (dark section)
function Spine() {
  const days = [
    {
      day: "Jour 1 · Penser",
      title: "Executive AI Playbook",
      desc: "Vous formalisez une doctrine personnelle sur l'impact de l'IA dans votre fonction — un positionnement ancré dans votre réalité de terrain.",
      points: [
        "Mon métier face à l'IA : 5 à 7 moments de vérité",
        "Mes convictions : 2 à 3 prises de position",
        "Ma vision et mon plan : 90 jours, 1 an, 3-5 ans",
        "Impacts transverses : management, gouvernance, éthique",
      ],
      deliv: "Playbook IA Métier (~20 p.) + Synthèse Exécutive (1 p.)",
    },
    {
      day: "Jour 2 · Faire",
      title: "Executive AI Accelerator",
      desc: "Vous configurez, prototypez et gouvernez un système de travail IA personnel, transférable à votre équipe.",
      points: [
        "Fondations : sécurité des données, Shadow AI, cadrage",
        "Prototypage : 1 à 2 cas d'usage métier réels",
        "Passage à l'échelle : les 8 dimensions du système",
        "Gouvernance personnelle : charte, freins, engagements",
      ],
      deliv: "1 à 2 Cas d'Usage prototypés + Environnement Configuré",
    },
  ];
  return (
    <section className="section spine" id="spine">
      <div className="wrap">
        <p className="eyebrow reveal">Le fil rouge</p>
        <h2 className="reveal">Penser, puis Faire.</h2>
        <p className="reveal" style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, color: "var(--on-night-muted)", maxWidth: "52ch", lineHeight: 1.5, margin: "4px 0 0" }}>
          « Faire AVEC l'IA, le moins possible faire À VOTRE PLACE. Vous décidez, l'IA exécute. »
        </p>
        <div className="spine-cols">
          {days.map((d) => (
            <div className="spine-col reveal" key={d.day}>
              <div className="sc-day">{d.day}</div>
              <h3>{d.title}</h3>
              <p className="sc-desc">{d.desc}</p>
              <ul>{d.points.map((p) => <li key={p}>{p}</li>)}</ul>
              <div className="sc-deliv">
                <div className="sd-k">Livrables</div>
                <div className="sd-v">{d.deliv}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Spine });