// Hero — corner-bracket framed headline. Poster-faithful.
function Hero() {
  return (
    <section className="hero" id="hq">
      <div className="hero-frame">
        <span className="corner tl" /><span className="corner tr" />
        <span className="corner bl" /><span className="corner br" />
        <div class="section-label">// EvE Online's</div>
        <div className="hero-shell">
          <img src="/assets/logo-gold-shell.png" alt="" />
        </div>
        <h1 className="hero-title">BIG YOSHI</h1>
        <div className="hero-sub">ENERGY INC.</div>
        <p className="hero-lede">
          We live in <em>Amamake</em>.<br/>
          We fly <em>small</em>, we fight <em>dirty</em>, we don't pay <span className="red">rent</span>.
        </p>
        <div className="hero-cta-row">
          <a href="#join" className="btn-primary">
            JOIN THE KINGDOM <span className="arr">›</span>
          </a>
          {window.__BYCONFIG__?.discord_url && (
            <a href={window.__BYCONFIG__.discord_url} target="_blank" rel="noopener noreferrer" className="btn-discord">
              <span className="btn-discord-mark">#</span>
              <span>JOIN DISCORD</span>
              <span className="arr">›</span>
            </a>
          )}
          <a href="#doctrine" className="btn-secondary">READ THE TENETS</a>
        </div>
        <div className="hero-meta">
          <span className="meta-dot" /> AMAMAKE ·
          <span className="meta-val"> RECRUITMENT OPEN</span> ·
          <span className="meta-val"> NEWBRO FRIENDLY</span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;