function Partners() {
  const { SectionEyebrow } = window;
  const slots = ["Institutions", "Collectivités locales", "ONG", "Programmes régionaux", "Incubateurs", "Partenaires techniques"];

  return (
    <section id="partenaires" data-screen-label="Partenaires" style={{ padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto" }}>
        <SectionEyebrow>Écosystème</SectionEyebrow>
        <h2 style={{ fontSize: "var(--text-display-3)", maxWidth: 640, marginBottom: 12 }}>Un projet construit avec son écosystème</h2>
        <p style={{ fontSize: 14.5, color: "var(--text-secondary)", maxWidth: 560, marginBottom: 40 }}>
          Emplacements réservés aux partenaires du pilote — logos à intégrer au fil des
          engagements confirmés.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
          {slots.map((s) => (
            <div key={s} style={{
              aspectRatio: "16 / 10", border: "1.5px dashed var(--border-default)", borderRadius: "var(--radius-md)",
              display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center",
              fontSize: 11.5, color: "var(--text-tertiary)", padding: 10, lineHeight: 1.35,
            }}>
              {s}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Partners = Partners;