function About() {
  return (
    <section id="about" className="section" style={{
      background: "var(--sand)",
      borderTop: "1px solid var(--sand-line)",
      borderBottom: "1px solid var(--sand-line)",
    }}>
      <div className="shell">
        <div className="about-head-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr",
          gap: 32,
          paddingTop: 24,
          borderTop: "1px solid var(--ink-15)",
          marginBottom: 64,
        }}>
          <div className="mono" style={{ fontSize: 12, letterSpacing: ".1em", color: "var(--ink-60)", paddingTop: 10 }}>
            (06)
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Who I am</div>
            <h2 className="h-section" style={{ maxWidth: 800 }}>
              A small, human-centred operations practice — run from France for the UK and EU.
            </h2>
          </div>
        </div>

        <div className="about-body-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 280px 1fr",
          gap: 48,
          alignItems: "start",
        }}>
          <div className="indent-collapse-mobile"></div>

          {/* Portrait */}
          <div>
            <EditorialPlaceholder label="Sophie Kazandjian" tone="cream" aspect="4/5" src="assets/sophie-portrait-v3.png" className="warm-tone"/>
            <div style={{
              marginTop: 16,
              fontFamily: "var(--mono)",
              fontSize: 11,
              letterSpacing: ".1em",
              color: "var(--ink-60)",
              textTransform: "uppercase",
            }}>
              Sophie · Saint Quentin La Poterie
            </div>
          </div>

          {/* Bio */}
          <div>
            <p className="lede" style={{ marginTop: 0, marginBottom: 24 }}>
              I'm Sophie. I run a small, human-centred digital operations practice from
              France for clients in the UK and Europe.
            </p>
            <p className="body-lg" style={{ marginBottom: 36, color: "var(--ink-60)" }}>
              With 20+ years' experience, I bring calm structure, clear design and dependable support
              so your day-to-day work flows more easily.
            </p>

            {/* Working style */}
            <div style={{
              padding: "32px 0",
              borderTop: "1px solid var(--ink-15)",
              borderBottom: "1px solid var(--ink-15)",
            }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>My working style</div>
              <div style={{
                display: "flex",
                flexWrap: "wrap",
                gap: 14,
                marginBottom: 24,
              }}>
                {["Grounded", "Thoughtful", "Precise", "Creative", "Discreet"].map((w, i) => (
                  <span key={w} style={{
                    fontFamily: "var(--serif)",
                    fontStyle: "italic",
                    fontSize: 24,
                    color: i === 2 ? "var(--gold)" : "var(--charcoal)",
                  }}>
                    {w}{i < 4 && <span style={{ color: "var(--ink-40)", margin: "0 4px" }}>·</span>}
                  </span>
                ))}
              </div>
              <p className="body" style={{ margin: 0, color: "var(--ink-60)" }}>
                I'm a strategic partner who cares deeply about the emotional tone of what's put
                into the world, and I believe that great support is both precise and personal.
                I bring together systems thinking, creative flair, and deep empathy for the people
                behind the business. My gift is creating order out of chaos — without ever making
                you feel overwhelmed.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;