/* CharCards.jsx — Sgt. Pepe card section + Pepe X card section (Comic Sans) */
function SgtPepeCard() {
  return (
    <section className="char-section char-sgt" id="sgtpepe-card">
      <div className="char-card-block">
        <div className="poster">
          <img src="assets/sgtpepecard.jpg" alt="Sgt. Pepe — Freedom to Transact card" />
        </div>
        <div className="text">
          <h2>Sgt. Pepe</h2>
          <p>
            While the internet burns, Sgt Pepe gives a thumbs up and keeps flying. Born from chaos, built on freedom, the CC0 meme soldier who actually shows up.
          </p>
          <p>He leads the rebellion so you don't have to do it alone.</p>
          <div className="cta">
            <a href="https://opensea.io/item/ethereum/0x33fd426905f149f8376e227d0c9d3340aad17af1/37" className="btn" target="_blank" rel="noreferrer">own a sgt. pepe</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function PepeXCard() {
  return (
    <section className="char-section char-pepex" id="pepex-card">
      <div className="char-card-block right">
        <div className="text">
          <h2>Pepe X</h2>
          <p>
            While Sgt Pepe steals the spotlight, Pepe X works behind the scenes, sabotaging, infiltrating, and pulling the real strings. Mysterious, unpredictable, and always one step ahead. Where Sgt Pepe leads, Pepe X disrupts.
          </p>
          <p>Together, they balance the chaos.</p>
          <div className="cta">
            <a href="https://opensea.io/item/ethereum/0x33fd426905f149f8376e227d0c9d3340aad17af1/343" className="btn on-purple" target="_blank" rel="noreferrer">own a pepe x</a>
          </div>
        </div>
        <div className="poster">
          <img src="assets/pepexcard.jpg" alt="Pepe X — Uncensorable card" />
        </div>
      </div>
    </section>
  );
}

window.SgtPepeCard = SgtPepeCard;
window.PepeXCard = PepeXCard;