// Intervenants.jsx — the two practitioners
function Intervenants() {
  const people = [
    {
      initial: "DH",
      name: "David Horvat",
      role: "Ex-DSI Allianz · Principal Data Architect Groupe · AI Trust Lead.",
      email: "david.horvat@quodlibet.pro",
      tel: "+33 6 07 36 16 87",
    },
    {
      initial: "JF",
      name: "Jérôme Fenyo",
      role: "Ex-VP Capgemini · Directeur Data & IA · Directeur Solutions & Ventes de Services Applicatifs.",
      email: "jerome.fenyo@goyave-consulting.com",
      tel: "+33 6 85 71 43 40",
    },
  ];
  return (
    <section className="section" id="intervenants">
      <div className="wrap">
        <p className="eyebrow reveal">Les intervenants</p>
        <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(26px,3vw,36px)", letterSpacing: "-.01em", color: "var(--ink)", margin: 0, maxWidth: "24ch" }}>
          Deux praticiens, pas des conférenciers.
        </h2>
        <div className="intv-grid">
          {people.map((p) => (
            <div className="intv-card reveal" key={p.name}>
              <div className="intv-mono">{p.initial}</div>
              <div>
                <h3>{p.name}</h3>
                <p className="iv-role">{p.role}</p>
                <div className="iv-contact">
                  <a href={"mailto:" + p.email}>{p.email}</a>
                  <span>{p.tel}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p className="reveal" style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, color: "var(--ink-muted)", marginTop: 28 }}>
          Un format conçu pour des dirigeants par des dirigeants.
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { Intervenants });