/* global React */

function Hero({ onNav }) {
  return (
    <section className="lp-hero" id="top">
      <div className="lp-hero__coords" aria-hidden="true">
        <div><span className="lp-hero__coords-tick" /> N 51°55′28″ · E 4°28′40″</div>
        <div>SIG · 442.MHz · RX <span className="lp-hero__coords-tick" /></div>
      </div>

      <div className="lp-hero__inner">
        <div className="lp-hero__eyebrow">
          <span className="lp-hero__eyebrow-num">// 01</span>
          <span className="lp-hero__eyebrow-dot" />
          <span className="lp-hero__eyebrow-text">Online from Rotterdam, NL</span>
        </div>

        <h1 className="lp-hero__title">
          <span className="lp-hero__title-line">Engineer. Leader.</span>
          <span className="lp-hero__title-line"><em>Builder.</em><span className="lp-hero__title-cursor"></span></span>
        </h1>

        <p className="lp-hero__lead">
          <strong>Alexander van der Plas</strong> — TU Delft logistics engineer with eight years at DSV across the full commercial and operational width. P&L owner, contract architect, and product builder. Founder of Podfy and JustFit. Reserve Officer, Ministry of Defence.
        </p>

        <div className="lp-hero__actions">
          <button className="btn btn--primary" onClick={() => onNav("career")}>
            View career →
          </button>
          <button className="btn btn--ghost" onClick={() => onNav("contact")}>
            Get in touch
          </button>
        </div>

        <dl className="lp-hero__facts">
          <div>
            <dt>Education</dt>
            <dd>TU Delft · Engineering</dd>
          </div>
          <div>
            <dt>Current role</dt>
            <dd>FOM · DSV + Reserve Officer</dd>
          </div>
          <div>
            <dt>Products built</dt>
            <dd><span className="lp-hero__fact-tick" />3 shipped &amp; operated</dd>
          </div>
          <div>
            <dt>Languages</dt>
            <dd>NL · EN · DE</dd>
          </div>
        </dl>
      </div>

      <div className="lp-hero__ticker" aria-hidden="true">
        <span>DSV tenure · 8 yrs 4 mos</span>
        <span className="lp-hero__ticker-arrow">→</span>
        <span>Products live · Podfy · JustFit</span>
        <span className="lp-hero__ticker-arrow">→</span>
        <span>Reserve Officer · Active</span>
        <span className="lp-hero__ticker-arrow">→</span>
        <span>Available for selected engagements</span>
      </div>
    </section>
  );
}

window.Hero = Hero;