// hero.jsx

function Hero({ t, lang }) {
  return (
    <section className="section hero" data-screen-label="01 Hero">
      <div>
        <div className="hero-eyebrow">
          <span>{t.hero.kicker}</span>
        </div>
        <h1 className="hero-headline" key={lang}>
          <span className="reveal"><span style={{ animationDelay: "0.05s" }}>{t.hero.h1a}</span></span>
          <br/>
          <span className="reveal"><span style={{ animationDelay: "0.15s" }}>{t.hero.h1b}&nbsp;</span></span>
          <span className="reveal"><span style={{ animationDelay: "0.25s" }}><em>{t.hero.h1c}</em>{t.hero.h1d}</span></span>
        </h1>
        <p className="section-sub" style={{ marginTop: "32px", marginBottom: 0, maxWidth: "52ch" }}>
          {t.hero.sub}
        </p>
        <div className="hero-tags">
          {t.hero.tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
        </div>
        <dl className="hero-meta">
          {t.hero.meta.map(m => (
            <div key={m.k}>
              <dt>{m.k}</dt>
              <dd>{m.v}</dd>
            </div>
          ))}
        </dl>
      </div>
      <div className="hero-portrait">
        <span className="corner tl"></span>
        <span className="corner tr"></span>
        <span className="corner bl"></span>
        <span className="corner br"></span>
        <img src="https://media.licdn.com/dms/image/v2/C5603AQHdo0OsJcQ5xQ/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1517630994908?e=1779321600&v=beta&t=cSme3jcl2g2ZJdZCGhXk3_-XMcjRXmSmsVOZBzfZ4Z4"
             alt="Bruno Margula"
             referrerPolicy="no-referrer"
             onError={(e) => {
               e.target.onerror = null;
               e.target.src = "https://1.gravatar.com/avatar/71801623375398152780405d046569411b331a480adb59bb07fe351cf4f64779?size=512&d=initials";
             }} />
        <div className="frame-label">
          <span>{t.hero.portrait.id}</span>
          <span>{t.hero.portrait.role}</span>
        </div>
      </div>
      <div className="hero-scroll-hint">
        <span className="line"></span>
        <span>{t.hero.scroll}</span>
      </div>
    </section>
  );
}

window.Hero = Hero;