// Education section

function Education(){
  const ref = React.useRef(null);
  React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]);
  return (
    <section id="education" ref={ref} className="reveal" data-screen-label="06 Education">
      <style>{`
        .ed-head{display:grid;grid-template-columns:180px 1fr;gap:48px;margin-bottom:40px}
        @media (max-width:820px){.ed-head{grid-template-columns:1fr;gap:16px}}
        .ed-title{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
        .ed-list{border-top:1px solid var(--line)}
        .ed-row{display:grid;grid-template-columns:180px 1fr auto;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
        @media (max-width:720px){.ed-row{grid-template-columns:1fr;gap:8px}}
        .ed-year{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent)}
        .ed-school{color:var(--fg-mute);font-size:14px;margin-top:4px}
        .ed-deg{font-size:22px;font-weight:500;letter-spacing:-.01em}
        .ed-course{font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);margin-top:6px}
        .ed-status{font-family:var(--font-mono);font-size:11px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg-dim);white-space:nowrap}
        .ed-status.current{border-color:var(--accent);color:var(--accent)}
      `}</style>
      <div className="wrap">
        <div className="ed-head">
          <div className="eyebrow">/ 05 · Education</div>
          <div>
            <h2 className="ed-title">Academic grounding.</h2>
          </div>
        </div>
        <div className="ed-list">
          <div className="ed-row">
            <div>
              <div className="ed-year">2025 — 2026</div>
              <div className="ed-school">Middlesex University, Dubai</div>
            </div>
            <div>
              <div className="ed-deg">Master of Investment Management</div>
              <div className="ed-course">Coursework · Advanced Econometrics · Securities &amp; Derivatives · Alternative Investments</div>
            </div>
            <span className="ed-status current">IN PROGRESS · AUG '26</span>
          </div>
          <div className="ed-row">
            <div>
              <div className="ed-year">2021 — 2024</div>
              <div className="ed-school">Jain University, Bangalore</div>
            </div>
            <div>
              <div className="ed-deg">Bachelor of Management Studies</div>
              <div className="ed-course">International Business</div>
            </div>
            <span className="ed-status">COMPLETED</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Education });