// About + Stats strip

function About(){
  const ref = React.useRef(null);
  React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]);
  return (
    <section id="about" ref={ref} className="reveal" data-screen-label="02 About">
      <style>{`
        .about-grid{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:start}
        @media (max-width:820px){.about-grid{grid-template-columns:1fr;gap:20px}}
        .about-body{font-size:clamp(22px,2.6vw,34px);line-height:1.4;letter-spacing:-.01em;color:var(--fg);max-width:900px;text-wrap:pretty}
        .about-body .mute{color:var(--fg-mute)}
        .about-body .mark{color:var(--accent);font-weight:500}
        .about-body em{font-style:normal;border-bottom:1px solid var(--accent);padding-bottom:1px}
        .stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:72px}
        @media (max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}.stats > div:nth-child(n){border-right:1px solid var(--line)}}
        .stat{padding:28px 24px;border-right:1px solid var(--line);position:relative}
        .stat:last-child{border-right:0}
        .stat-v{font-family:var(--font-mono);font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.02em;color:var(--fg);display:flex;align-items:baseline;gap:4px}
        .stat-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);margin-top:8px}
        .stat-idx{position:absolute;top:12px;right:14px;font-family:var(--font-mono);font-size:10px;color:var(--fg-ghost);letter-spacing:.1em}
        .stat-zero .stat-v{color:var(--accent)}
      `}</style>
      <div className="wrap">
        <div className="about-grid">
          <div className="eyebrow">/ 01 · About</div>
          <div>
            <p className="about-body">
              I'm a student of <span className="mark">finance</span> first — currently pursuing a Master's in <span className="mark">Investment Management</span> at Middlesex, Dubai. I model options with Black-Scholes, run VAR on macro data, and stress-test strategies walk-forward. <span className="mute">Software, iOS and quant tooling came after — because the work demanded it. The CS degree never did.</span>
            </p>
          </div>
        </div>

        <div className="stats">
          {STATS.map((s,i) => (
            <div key={i} className={"stat" + (s.v === "0" ? " stat-zero" : "")}>
              <span className="stat-idx">0{i+1}</span>
              <div className="stat-v">{s.v}</div>
              <div className="stat-k">{s.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });