/* Idea.jsx — 8 character icons floating around manifesto text with highlights */
function Idea() {
  // 4 left, 4 right — using the real *icon.svg files
  const left = [
    { src: 'assets/pepexicon.svg',   top: '12%', x: 'calc(50% - 470px)',  f: 'f-a', size: 168 },
    { src: 'assets/jonesicon.svg',   top: '36%', x: 'calc(50% - 560px)',  f: 'f-b', size: 132 },
    { src: 'assets/reinaicon.svg',   top: '61%', x: 'calc(50% - 500px)', f: 'f-c', size: 190 },
    { src: 'assets/karenicon.svg',   top: '78%', x: 'calc(50% - 610px)',  f: 'f-a', size: 120 },
  ];
  const right = [
    { src: 'assets/elfafoicon.svg',  top: '10%', x: 'calc(50% - 520px)',  f: 'f-b', size: 200 },
    { src: 'assets/sgticon.svg',     top: '33%', x: 'calc(50% - 620px)', f: 'f-c', size: 148 },
    { src: 'assets/wallaceicon.svg', top: '53%', x: 'calc(50% - 500px)',  f: 'f-a', size: 178 },
    { src: 'assets/wagmiicon.svg',   top: '74%', x: 'calc(50% - 570px)',  f: 'f-b', size: 126 },
  ];

  return (
    <section className="idea-sec dotbg" id="idea">
      <div className="idea-chars">
        {left.map((c, i) => (
          <div key={'l'+i}
            className={`idea-char ${c.f}`}
            data-idea-char data-side="L"
            style={{ top: c.top, left: c.x, width: c.size }}>
            <img src={c.src} alt="" />
          </div>
        ))}
        {right.map((c, i) => (
          <div key={'r'+i}
            className={`idea-char ${c.f}`}
            data-idea-char data-side="R"
            style={{ top: c.top, right: c.x, width: c.size }}>
            <img src={c.src} alt="" />
          </div>
        ))}
      </div>

      <div className="copy">
        <h2>The Idea</h2>
        <div className="rule" />
        <p>
          Showing up means consistency over noise.<br />
          <span className="hl">Supporting artists</span> over chasing trends.<br />
          Choosing sustainability over scale.<br />
          Being present [online and offline] over time.
        </p>
        <p>
          <span className="hl">Culture isn't built all at once.</span><br />
          It's built by showing up,<br />again and again.
        </p>
        <p>
          <span className="hl">That's why Sgt Pepe exists:</span> a CC0 character born to represent freedom, creativity, and community in the wild world of memes. More than just a meme, he is a symbol of <span className="hl">decentralized culture.</span> As a fully open IP, anyone can use Sgt Pepe to create, remix, meme, adapt, and expand the universe without permission.
        </p>
        <p>
          This is the meme soldier <span className="hl">the internet deserves.</span>
        </p>
        <div className="ctas">
          <a href="pages/manifesto.html" className="btn">read the manifesto</a>
          <a href="https://opensea.io/item/ethereum/0x33fd426905f149f8376e227d0c9d3340aad17af1/37" className="btn" target="_blank" rel="noreferrer">own a sgt. pepe</a>
        </div>
      </div>
    </section>
  );
}
window.Idea = Idea;