/* Hero.jsx — home hero / bio block (mono display, sharp frame, no glow) */

function Hero({ onResume }) {
  return (
    <header className="site-hero" id="top" style={{ borderBottom: "1px solid var(--border)" }}>
      <Section style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "stretch" }}>
          {/* Left: text */}
          <div className="hero-copy">
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 28 }}>
              <LiveDot />
              <Kicker>Executive Producer — InFocus News</Kicker>
            </div>
            <h1 className="display" style={{ margin: 0 }}>Neel<br />Satyavolu</h1>
            <p className="lead" style={{ maxWidth: 470, marginTop: 30 }}>
              Neel Satyavolu is a junior at Palo Alto High and is in his third year of InFocus. As an Executive Producer, he leads the class as well as managing personnel, operations, and more. He has won many prizes including 7th place for broadcast feature nationally, 2nd place in the 2025 JEANC Feature Video, 2nd place for Short Film and 3rd place in Silent Film during the STN 2023 Convention, and many more.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <Button variant="primary" icon="arrow-down-to-line" onClick={onResume}>Download resume</Button>
            </div>
          </div>
          {/* Right: portrait, grayscale, sharp frame + terminal caption */}
          <div className="portrait-card" style={{ border: "1px solid var(--border)", background: "var(--surface-1)", display: "flex", flexDirection: "column", minHeight: "100%" }}>
            <div className="portrait-media" style={{ overflow: "hidden", borderBottom: "1px solid var(--border)", flex: 1, minHeight: 0 }}>
              <img src="/assets/neel-portrait.jpg" alt="Neel Satyavolu"
                style={{ width: "100%", height: "100%", display: "block", objectFit: "cover", objectPosition: "50% 24%" }} />
            </div>
            <div className="portrait-meta" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px" }}>
              <span className="label" style={{ color: "var(--fg-2)" }}>NEEL_SATYAVOLU</span>
              <span className="timecode">PALO ALTO · 2025</span>
            </div>
          </div>
        </div>
      </Section>
    </header>
  );
}

Object.assign(window, { Hero });