// Instagram posts — 2 rows × 5 cols, 4:5 ratio
const Instagram = () => {
  const all = window.ABACO.instagramPosts;
  // ensure we have 10 posts
  const posts = [];
  for (let i = 0; i < 10; i++) posts.push(all[i % all.length]);
  const handle = window.ABACO.instagram;

  // tones for visual variety
  const tones = ['cyan', 'navy', 'rose', 'warm', 'default', 'green', 'purple', 'cyan', 'navy', 'warm'];

  return (
    <section className="ig">
      <div className="container ig-head">
        <div>
          <div className="eyebrow">@{handle}</div>
          <h2>Acompanhe o Ábaco<br/>por dentro.</h2>
        </div>
        <a className="btn btn-primary" href={`https://instagram.com/${handle}`} target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="3" y="3" width="18" height="18" rx="5"/>
            <circle cx="12" cy="12" r="4"/>
            <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
          </svg>
          seguir no instagram
        </a>
      </div>

      <div className="container">
        <div className="ig-grid">
          {posts.map((p, i) => (
            <a key={i} className={"ig-post ph " + tones[i]} href="#">
              <span>{p.caption}</span>
              <div className="ig-overlay">
                <div className="ig-likes">
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="white">
                    <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/>
                  </svg>
                  {p.likes}
                </div>
                <span className="ig-caption">{p.caption}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Instagram = Instagram;