/* eslint-disable */
/* Editorial lookbook strip + UGC grid — modern Gen-Z energy */
function Lookbook() {
  return (
    <section className="look">
      <div className="look-text">
        <div className="eyebrow">THE EDIT — VOL. 04</div>
        <h2 className="look-h"><em>Layered.</em><br/>Lived in.</h2>
        <p className="look-sub">Six pieces. Endless ways to wear them. The only stack you'll need this season.</p>
        <a className="btn-primary" href="collection.html?handle=the-edit">SHOP THE EDIT</a>
      </div>
      <div className="look-grid">
        <div className="look-img big" style={{backgroundImage:"url('assets/hero-necklaces.jpg')"}}></div>
        <div className="look-img" style={{backgroundImage:"url('assets/hero-main.jpg')"}}></div>
        <div className="look-img" style={{backgroundImage:"url('assets/banner-bundles.jpg')"}}></div>
      </div>
    </section>
  );
}
window.Lookbook = Lookbook;

function UGCStrip() {
  const tiles = [
    "assets/hero-main.jpg",
    "assets/hero-necklaces.jpg",
    "assets/banner-bundles.jpg",
    "assets/hero-mens.jpg",
    "assets/banner-apparel.jpg",
    "assets/product-amelia-ring.jpg",
  ];
  return (
    <section className="ugc">
      <div className="ugc-head">
        <div>
          <div className="eyebrow">@DROPJEWELRY</div>
          <h2 className="ugc-h">Tag us. Get reposted.</h2>
        </div>
        <a className="btn-link">Shop Instagram →</a>
      </div>
      <div className="ugc-grid">
        {tiles.map((t, i) => (
          <a key={i} className="ugc-tile" style={{backgroundImage:`url(${t})`}}>
            <span className="ugc-shop">SHOP</span>
          </a>
        ))}
      </div>
    </section>
  );
}
window.UGCStrip = UGCStrip;