const Hero = () => (
  <section className="hero">
    <img src="../../assets/monogram.svg" className="hero-monogram" alt="" />
    <div className="container">
      <div className="hero-eyebrow eyebrow"><span className="dot"></span>ML Systems · CS @ KCL</div>
      <h1 className="hero-name">Mohamed<br/>Ahmed Issa.</h1>
      <p className="hero-title">
        Incoming Computer Science student at King's College London. I work on the systems side of ML: data pipelines, inference tooling, and the infrastructure that takes models from research into production.
      </p>
      <div className="hero-meta">
        <span><Icon name="map-pin" size={14}/> London, United Kingdom</span>
        <span><Icon name="graduation-cap" size={14}/> CS · KCL · incoming 2026</span>
        <a className="hero-cv" href="../../assets/Mohamed-Ahmed-Issa-CV.pdf" download>
          download CV ↓
        </a>
      </div>
    </div>
  </section>
);

window.Hero = Hero;