/* global React, PROFILE, Stamp, Cursor, Label, NameTitle */

function Hero() {
  return (
    <section id="identity" className="hero no-rule">
      <div className="meta">
        <span>01 — Identity</span>
        <span>{PROFILE.location}</span>
        <span>Build · 2026</span>
      </div>

      <NameTitle />

      <div className="hero-grid">
        <div>
          <Label as="h3" style={{ marginBottom: 16 }}>Role / discipline</Label>
          <div className="role">
            Computer engineering — embedded systems,<br/>
            FPGA &amp; RTL, signal processing.
          </div>
          <p>{PROFILE.bio}</p>
        </div>

        <div>
          <Label as="h3" style={{ marginBottom: 16 }}>Status</Label>
          <Stamp dot>{PROFILE.status}</Stamp>

          <Label as="h3" style={{ margin: "28px 0 16px" }}>Links</Label>
          <div className="links">
            <a href={`mailto:${PROFILE.email}`}><span className="arrow">→</span>email</a><br/>
            <a href={`https://${PROFILE.github}`}><span className="arrow">→</span>github</a><br/>
            <a href={`https://${PROFILE.linkedin}`}><span className="arrow">→</span>linkedin</a><br/>
            {/* <a href={PROFILE.resume} target="_blank" rel="noopener noreferrer"><span className="arrow">→</span>resume.pdf</a> */}
          </div>
        </div>

        <div className="col-photo">
          <div className="portrait">
            {PROFILE.portrait &&
              <img src={PROFILE.portrait} alt={PROFILE.name[0]} className="portrait-img" />
            }
          </div>
        </div>
      </div>

      <div className="hero-foot">
        <span>{PROFILE.school.toUpperCase()}</span>
        {/* <span>{(PROFILE.cert ?? "").toUpperCase()}<Cursor /></span> */}
      </div>
    </section>
  );
}

Object.assign(window, { Hero });