// Founder.jsx — small horizontal band placed under Stats (Méthode & Équipe)
const Founder = () => {
  const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';
  return (
    <section id="founder" style={{
      background: "#0A0A0A", color: "#fff",
      padding: "80px 56px",
      fontFamily,
      borderTop: "1px solid rgba(255,255,255,.10)",
    }}>
      <div style={{
        maxWidth: 1500, margin: "0 auto",
        display: "grid", gridTemplateColumns: "200px 1fr auto",
        gap: 56, alignItems: "center",
      }}>

        {/* Portrait — small */}
        <div style={{ width: 200, aspectRatio: "4/5", overflow: "hidden", background: "#000" }}>
          <img src="assets/photo-jeanne.jpg" alt="Jeanne Mejean" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>

        {/* Text */}
        <div>
          <div style={{ fontSize: 11, letterSpacing: ".24em", textTransform: "uppercase", opacity: .55, fontWeight: 700, marginBottom: 14 }}>
            Founder &amp; Creative Director
          </div>
          <div style={{ fontSize: 22, lineHeight: 1.45, fontWeight: 400, maxWidth: 760, fontStyle: "italic", marginBottom: 14 }}>
            « L'intuition culturelle ne s'apprend pas en école de commerce.
            Elle se forme à <i>écouter ce que les marques ne disent pas.</i> »
          </div>
          <div style={{ fontSize: 13, letterSpacing: ".18em", textTransform: "uppercase", opacity: .7, fontWeight: 700 }}>
            Jeanne Mejean — Paris · est. 2023
          </div>
        </div>

        {/* CTA */}
        <a href="#contact" style={{
          color: "#fff", textDecoration: "none",
          fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700,
          borderBottom: "1px solid rgba(255,255,255,.6)", paddingBottom: 5,
          whiteSpace: "nowrap",
        }}>
          À propos →
        </a>
      </div>
    </section>
  );
};
window.Founder = Founder;