const Hero = () => {
  return (
    <section className="section hero">
      <div className="hero-portrait">
        <span className="sparkle s1">✦</span>
        <span className="sparkle s2">✧</span>
        <span className="stamp">CERTIFIED SIMP</span>
        <img src={(window.__resources && window.__resources.heroImg) || "simp-hero.png"} alt="Solana Simp" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}}/>
      </div>

      <div className="hero-copy">
        <div className="hero-titlebox">
          <h1>SOLANA SIMP</h1>
        </div>
        <div className="hero-sub">
          The only token for those who never stopped believing.
        </div>
        <div className="hero-body">
          I have bought the dip. I have defended the chain. I have explained gas
          fees to people who didn't ask. I have watched the chart at 3am.
          I have said "we're early" — and meant it.
        </div>
        <div className="hero-punch">
          <span className="line1">I am a Solana Simp.</span>
          <span className="line2">And I would do it all again.</span>
        </div>

        <div className="hero-socials">
          <a className="social-icon" href="https://pump.fun" target="_blank" rel="noopener noreferrer" title="Pump.fun">
            <img src="pumpfun.png" alt="Pump.fun" style={{width:"22px", height:"22px", objectFit:"contain"}} />
          </a>
          <a className="social-icon" href="https://x.com/i/communities/2035471924709503124" target="_blank" rel="noopener noreferrer" title="X Community">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
            </svg>
          </a>
        </div>

        <div className="chain-badges">
          <span className="pill">◎ runs on Solana</span>
          <span className="pill">no utility</span>
          <span className="pill">only vibes</span>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;