const IG_POSTS = [
  { src: 'assets/ig-1.webp', title: 'Want to work with a North American actually on the ground in Vietnam?', tag: 'About Paul' },
  { src: 'assets/ig-2.webp', title: 'Vest or bag? How to pick the right product for your brand.', tag: 'Strategy' },
  { src: 'assets/ig-3.webp', title: 'Find a factory that actually shows up. Green flags vs red flags.', tag: 'Sourcing' },
  { src: 'assets/ig-4.webp', title: 'OEM vs ODM: which model is right for your bag or vest brand?', tag: 'Education' },
  { src: 'assets/ig-5.webp', title: 'What $5k, $10k, and $25k actually get you in Vietnam.', tag: 'Budget' }
];

const Instagram = () => (
  <section id="instagram" className="ig">
    <Container>
      <div className="ig__head">
        <div>
          <span className="eyebrow">From the feed</span>
          <h2 style={{ marginTop: 18 }}>Field notes on soft goods, factories, and what it actually costs.</h2>
        </div>
        <a href="https://www.instagram.com/xlovation/" target="_blank" rel="noopener noreferrer" className="btn btn--ghost ig__follow">
          @xlovation on Instagram <Arrow />
        </a>
      </div>

      <div className="ig__grid">
        {IG_POSTS.map((p, i) => (
          <a key={i} href="https://www.instagram.com/xlovation/" target="_blank" rel="noopener noreferrer" className="ig__card">
            <div className="ig__img">
              <img src={p.src} alt={p.title} loading="lazy" />
            </div>
            <div className="ig__meta">
              <span className="ig__tag">{p.tag}</span>
              <span className="ig__arrow"><Arrow /></span>
            </div>
          </a>
        ))}
      </div>
    </Container>
  </section>
);

window.Instagram = Instagram;