// SECTION 2 — INTRO / POSITIONERING
function IntroSection() {
  const usps = [
    ["01", "Persoonlijk haaradvies", "Een gesprek voor de schaar in de hand komt."],
    ["02", "Precisie in coupe en styling", "Lijn, vorm en val — afgestemd op jou."],
    ["03", "Verfijnde, natuurlijke resultaten", "Niet opvallen door techniek, wel door uitstraling."],
  ];
  return (
    <section id="intro" style={s.intro}>
      <RevealGroup baseDelay={0} stagger={140} threshold={0.2} style={s.introInner} data-intro-inner>
        <div style={s.introLeft}>
          <Reveal as="p" style={s.sectionLabel}>
            <span style={s.labelRule} />
            Introductie
          </Reveal>
          <Reveal as="h2" style={s.h2} duration={1200}>
            Een stijl die klopt bij <em style={s.italic}>wie je bent.</em>
          </Reveal>
          <Reveal as="p" style={s.body}>
            Bram Marcus combineert technisch vakmanschap met persoonlijk advies.
            Geen standaard kapsel, maar een look die past bij je gezicht,
            uitstraling en levensstijl.
          </Reveal>

          <Reveal style={s.uspList}>
            {usps.map(([n, t, d]) => (
              <div key={n} style={s.uspItem}>
                <div style={s.uspNum}>{n}</div>
                <div>
                  <div style={s.uspTitle}>{t}</div>
                  <div style={s.uspDesc}>{d}</div>
                </div>
              </div>
            ))}
          </Reveal>
        </div>

        <Reveal style={s.introRight} delay={280} distance={24} data-intro-right>
          <img
            src="site/assets/intro-portrait.jpg"
            alt="Long wavy chestnut hair, side profile, soft natural light"
            style={s.introImg}
          />
        </Reveal>
      </RevealGroup>
    </section>
  );
}
window.IntroSection = IntroSection;

Object.assign(s, {
  intro: { background: BM.c.paper, color: BM.c.ink, padding: "160px 80px", fontFamily: BM.f.sans },
  introInner: {
    maxWidth: 1480, margin: "0 auto",
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center",
  },
  introLeft: { maxWidth: 560 },
  sectionLabel: {
    display: "flex", alignItems: "center", gap: 14,
    margin: 0, marginBottom: 36,
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: BM.c.mute, fontWeight: 400,
  },
  labelRule: { width: 36, height: 1, background: BM.c.mute },
  h2: {
    margin: 0,
    fontFamily: BM.f.serif, fontWeight: 500,
    fontSize: "clamp(38px, 4.4vw, 60px)",
    lineHeight: 1.04, letterSpacing: "-0.012em",
    color: BM.c.ink,
  },
  italic: { fontStyle: "italic", fontWeight: 400, color: BM.c.navy },
  body: {
    margin: "32px 0 0", fontSize: 17, lineHeight: 1.65, color: BM.c.ink, maxWidth: 480,
    fontWeight: 300,
  },
  uspList: {
    marginTop: 56,
    display: "flex", flexDirection: "column", gap: 0,
    borderTop: `1px solid ${BM.c.rule}`,
  },
  uspItem: {
    display: "grid", gridTemplateColumns: "60px 1fr", gap: 24,
    padding: "24px 0",
    borderBottom: `1px solid ${BM.c.rule}`,
  },
  uspNum: {
    fontFamily: BM.f.serif, fontSize: 22, fontStyle: "italic",
    color: BM.c.navy, fontWeight: 400,
  },
  uspTitle: {
    fontFamily: BM.f.serif, fontSize: 22, fontWeight: 500, color: BM.c.ink, marginBottom: 4,
    letterSpacing: "-0.005em",
  },
  uspDesc: { fontSize: 14, lineHeight: 1.5, color: BM.c.mute, fontWeight: 300 },

  introRight: { position: "relative", aspectRatio: "4 / 5", width: "100%" },
  introImg: {
    position: "absolute", inset: 0,
    width: "100%", height: "100%",
    objectFit: "cover",
    objectPosition: "center",
    display: "block",
  },
  introCaption: {
    position: "absolute", left: 16, bottom: 16,
    display: "flex", alignItems: "center", gap: 12,
    padding: "8px 12px",
    background: "rgba(17,17,17,0.78)",
    color: BM.c.paper,
    fontFamily: BM.f.sans, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
  },
  captionDivider: { width: 1, height: 10, background: BM.c.paper, opacity: 0.4 },
});