// Meme tiles using actual images from uploads/

const MEMES = [
  { src: "telegram-cloud-photo-size-2-5420608452997879267-x.jpg", cap: "just two more weeks" },
  { src: "telegram-cloud-photo-size-2-5420608452997879268-y.jpg", cap: "till death do us part" },
  { src: "telegram-cloud-photo-size-2-5420608452997879269-x.jpg", cap: "we're early. we're EARLY." },
  { src: "telegram-cloud-photo-size-2-5420608452997879270-x.jpg", cap: "sold at $8. rebought at $240." },
  { src: "telegram-cloud-photo-size-2-5420608452997879271-x.jpg", cap: "anatoly pls" },
  { src: "telegram-cloud-photo-size-2-5420608452997879272-y.jpg", cap: "pov: explaining gas fees" },
  { src: "telegram-cloud-photo-size-2-5420608452997879273-x.jpg", cap: "checking the chart (again)" },
  { src: "telegram-cloud-photo-size-2-5420608452997879274-y.jpg", cap: "heard this one before" },
  { src: "telegram-cloud-photo-size-2-5420608452997879275-y.jpg", cap: "bag heavy. faith heavier." },
  { src: "telegram-cloud-photo-size-2-5420608452997879276-y.jpg", cap: "cope level: maximum" },
];

const Memes = () => (
  <section id="memes" className="section memes">
    <div className="memes-head">
      <h2>MEMES.<br/>NOTHING BUT<br/>MEMES.</h2>
      <div className="sub">
        (drop your own in the contract replies — best ones get pinned)
      </div>
    </div>
    <div className="memes-grid">
      {MEMES.map((m, i) => (
        <div className="meme" key={i}>
          <div className="meme-img">
            <img
              src={m.src}
              alt={m.cap}
              style={{
                width: "100%",
                height: "auto",
                display: "block",
                borderRadius: "4px",
              }}
            />
          </div>
        </div>
      ))}
    </div>
  </section>
);

window.Memes = Memes;