// SECTION 4 — ABOUT BRAM (navy)
function AboutSection() {
  return (
    <section id="about" style={s.about}>
      <RevealGroup baseDelay={0} stagger={140} threshold={0.15} style={s.aboutInner} data-about-inner>
        <Reveal style={s.aboutLeft} delay={0} distance={24} data-about-left>
          <img
            src="site/assets/about-portrait.jpg"
            alt="Bram Marcus on the beach, holding hairspray, mid-spray motion"
            style={s.aboutImg}
          />
        </Reveal>

        <div style={s.aboutRight}>
          <Reveal as="p" style={{ ...s.sectionLabel, color: "rgba(250,248,244,0.6)" }}>
            <span style={{ ...s.labelRule, background: "rgba(250,248,244,0.6)" }} />
            About Bram
          </Reveal>
          <Reveal as="h2" style={{ ...s.h2, color: BM.c.paper }} duration={1200}>
            Great hair starts with <em style={{ ...s.italic, color: "rgba(250,248,244,0.86)" }}>listening.</em>
          </Reveal>
          <Reveal as="p" style={{ ...s.body, color: "rgba(250,248,244,0.78)", maxWidth: 520 }}>
            Voor Bram begint iedere behandeling met aandacht. Door goed te kijken
            naar vorm, textuur en persoonlijkheid ontstaat een kapsel dat niet
            alleen mooi is, maar natuurlijk aanvoelt.
          </Reveal>

          <Reveal style={s.quoteBlock}>
            <span style={s.quoteMark}>"</span>
            <p style={s.quoteText}>
              Refined hair. <span style={{ color: "rgba(250,248,244,0.9)" }}>Personal detail.</span> Timeless style.
            </p>
            <p style={s.quoteAttr}>— Bram Marcus</p>
          </Reveal>

          <Reveal style={s.aboutMeta} data-about-meta>
            <div style={s.metaCol}>
              <div style={s.metaKey}>Training</div>
              <div style={s.metaVal}>Vidal Sassoon · Schwarzkopf Master Colorist</div>
            </div>
            <div style={s.metaCol}>
              <div style={s.metaKey}>Specialism</div>
              <div style={s.metaVal}>Colour, balayage, editorial styling</div>
            </div>
            <div style={s.metaCol}>
              <div style={s.metaKey}>Practice</div>
              <div style={s.metaVal}>Amsterdam, by appointment</div>
            </div>
          </Reveal>
        </div>
      </RevealGroup>
    </section>
  );
}
window.AboutSection = AboutSection;

Object.assign(s, {
  about: { background: BM.c.navy, color: BM.c.paper, padding: "180px 80px", fontFamily: BM.f.sans },
  aboutInner: {
    maxWidth: 1480, margin: "0 auto",
    display: "grid", gridTemplateColumns: "5fr 6fr", gap: 96, alignItems: "center",
  },
  aboutLeft: { position: "relative", aspectRatio: "4 / 5", width: "100%" },
  aboutImg: {
    position: "absolute", inset: 0,
    width: "100%", height: "100%",
    objectFit: "cover",
    objectPosition: "center top",
    display: "block",
  },
  aboutImageStamp: {
    position: "absolute", left: 16, bottom: 16,
    display: "flex", alignItems: "center", gap: 12,
    padding: "8px 12px",
    background: "rgba(250,248,244,0.08)",
    border: "1px solid rgba(250,248,244,0.18)",
    color: BM.c.paper,
    fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
  },
  aboutRight: { maxWidth: 600 },
  quoteBlock: {
    marginTop: 56,
    paddingLeft: 32,
    borderLeft: "1px solid rgba(250,248,244,0.32)",
    position: "relative",
  },
  quoteMark: {
    position: "absolute", left: 12, top: -18,
    fontFamily: BM.f.serif, fontSize: 80, color: "rgba(250,248,244,0.18)", lineHeight: 1,
    fontStyle: "italic",
  },
  quoteText: {
    margin: 0,
    fontFamily: BM.f.serif, fontStyle: "italic", fontWeight: 400,
    fontSize: "clamp(26px, 2.6vw, 34px)",
    lineHeight: 1.3,
    color: "rgba(250,248,244,0.7)",
    letterSpacing: "-0.005em",
  },
  quoteAttr: {
    margin: "16px 0 0",
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.5)",
  },
  aboutMeta: {
    marginTop: 64,
    display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
    paddingTop: 32, borderTop: "1px solid rgba(250,248,244,0.14)",
  },
  metaCol: {},
  metaKey: {
    fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.55)", marginBottom: 8,
  },
  metaVal: {
    fontFamily: BM.f.serif, fontSize: 16, color: BM.c.paper, lineHeight: 1.4, fontWeight: 400,
  },
});