// === Instagram embed section ===

function Instagram() {
  // Curated grid of posts — links to live Instagram. Replace src with real CDN URLs as you collect them.
  const posts = [
    { caption: "Lamborghini Aventador S · Satin White full body", image: "images/aventador-white.jpg" },
    { caption: "Audi R8 V10 · LFC tribute wrap", image: "images/r8-front.jpg", position: "center 30%" },
    { caption: "Lotus Evora · Solar Yellow color change", image: "images/lotus-yellow.jpg" },
    { caption: "Toyota GR Supra · Full-front PPF", image: "images/supra-white.jpg" },
    { caption: "Corvette C8 · Torch Red ceramic + correction", image: "images/corvette-red.jpg" },
    { caption: "Audi R8 V10 · Custom door decal + tint", image: "images/r8-side.jpg", position: "center 25%" },
    { caption: "BMW M4 Competition · Matte Stealth PPF", image: "images/m4-matte-black.jpg" },
    { caption: "Holden Commodore SS · Spitfire Orange", image: "images/holden-orange.jpg" },
  ];
  return (
    <section className="section ig-section" id="instagram">
      <div className="container">
        <Reveal>
          <div className="ig-head">
            <div className="ig-head-left">
              <span className="eyebrow">— @wrapstationsocal</span>
              <h2 className="h-1">Follow the daily<br/>build feed.</h2>
              <p className="lede" style={{ marginTop: 16 }}>
                Drop-offs, in-progress shots, and delivery walk-arounds — posted from the bay,
                every day we're open.
              </p>
            </div>
            <a href="https://www.instagram.com/wrapstationsocal/" target="_blank" rel="noopener" className="btn btn-primary ig-follow">
              <Icon.Instagram/>
              Follow on Instagram
              <Icon.ArrowUp/>
            </a>
          </div>
        </Reveal>

        <Reveal>
          <div className="ig-grid">
            {posts.map((p, i) => (
              <a
                key={i}
                href="https://www.instagram.com/wrapstationsocal/"
                target="_blank"
                rel="noopener"
                className="ig-tile"
              >
                {p.image
                  ? <img src={p.image} alt={p.caption} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: p.position || "center", display: "block" }}/>
                  : <Placeholder label={p.label} />}
                <div className="ig-overlay">
                  <div className="ig-overlay-icon"><Icon.Instagram/></div>
                  <div className="ig-overlay-cap">{p.caption}</div>
                </div>
              </a>
            ))}
          </div>
        </Reveal>

        <Reveal>
          <div className="ig-handle-row">
            <div className="ig-handle-icon"><Icon.Instagram/></div>
            <a href="https://www.instagram.com/wrapstationsocal/" target="_blank" rel="noopener" className="ig-handle">
              @wrapstationsocal
            </a>
            <span className="ig-handle-meta">San Diego · 8736 Production Ave</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Instagram });