function IntroCue({ dot, label, children }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "baseline", gap: 8, minWidth: 0 }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: dot, display: "inline-block", flex: "0 0 auto", transform: "translateY(-1px)" }} />
      <Micro size={10}>{label}</Micro>
      <span style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.35, color: "var(--ink-2)" }}>{children}</span>
    </span>
  );
}

function IntroPortrait() {
  return (
    <figure style={{ margin: 0 }}>
      <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", borderRadius: 2,
        background: "linear-gradient(150deg,#a9683a,#5e3413)" }}>
        <span className="grain-field" />
        <img src="assets/headshot.png" alt="Mulla — self portrait"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top" }} />
        <span style={{ position: "absolute", top: 16, left: 18, fontFamily: "var(--font-annotation)",
          fontSize: 26, lineHeight: 1, color: "var(--paper-on-ink)", transform: "rotate(-4deg)",
          textShadow: "0 1px 6px rgba(20,18,15,0.5)" }}>this is me →</span>
      </div>
      <figcaption style={{ marginTop: 10, display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "4px 12px" }}>
        <Micro size={9} color="var(--ink-3)"><span style={{ color: "var(--vermilion)" }}>Fig. 1</span> — me, Minneapolis, 2025</Micro>
        <Micro size={9} color="var(--ink-4)">44.97°N 93.26°W</Micro>
      </figcaption>
    </figure>
  );
}

function Intro({ onNav }) {
  return (
    <section id="hello" className="section" style={{ background: "var(--paper)" }}>
      <div className="cols cols--intro">
        <div>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "8px 28px" }}>
            <IntroCue dot="var(--vermilion)" label="Recently">
              first place at the 0→1 Hackathon, Sep 29
            </IntroCue>
            <IntroCue dot="var(--ink-4)" label="Currently">
              software intern at Westinghouse Nuclear
            </IntroCue>
          </div>

          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(2.6rem,5.4vw,5rem)", lineHeight: 0.98, letterSpacing: "-0.04em",
            color: "var(--ink)", maxWidth: "16ch", margin: "22px 0 0" }}>
            I'm Abdullahi — <span style={{ color: "var(--vermilion)" }}>Mulla</span> to most.
            <br />
            I build things for the people software tends to forget.
          </h2>

          <p style={{ fontFamily: "var(--font-body)", fontSize: "1.15rem", lineHeight: 1.55,
            color: "var(--ink-2)", maxWidth: "52ch", margin: "26px 0 0" }}>
            Lately that's meant SpeakEz, anonymous voice notes you can only hear where they were left; BLACKBOX, which checks on high-risk households when a storm hits; and Promise, an app for keeping your word whose AI never leaves your device. Off the clock it's 412 films logged, too much Mk.gee, and margin notes in Shavian.
          </p>

          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "16px clamp(22px,3vw,38px)", marginTop: 36 }}>
            <ArrowLink onClick={() => onNav("work")}>Start with the work</ArrowLink>
            <ArrowLink onClick={() => onNav("resume")}>or skip to the one-page version</ArrowLink>
          </div>
        </div>

        <Reveal><IntroPortrait /></Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Intro });