/* eslint-disable */
function Hero({ onShop }) {
  return (
    <section className="hero">
      <div className="hero-img" style={{backgroundImage: "url('assets/hero-main.jpg')"}}></div>
      <div className="hero-text">
        <div className="eyebrow light">THE LAYER DROP — SPRING '26</div>
        <h1 className="hero-title">Stack it.<br/><em>Live in it.</em></h1>
        <div className="hero-cta">
          <a className="btn-primary inverse" href="collection.html?handle=new-arrivals">SHOP NEW</a>
          <a className="btn-secondary inverse" href="collection.html?handle=bundles">SHOP BUNDLES</a>
        </div>
      </div>
      <div className="hero-marq">
        <div className="hero-marq-track">
          {Array(2).fill(0).flatMap((_, k) => ([
            <span key={k+"a"}>WATERPROOF</span>, <span key={k+"b"}>·</span>,
            <span key={k+"c"}>HYPOALLERGENIC</span>, <span key={k+"d"}>·</span>,
            <span key={k+"e"}>TARNISH-FREE</span>, <span key={k+"f"}>·</span>,
            <span key={k+"i"}>FREE SHIPPING $75+</span>, <span key={k+"j"}>·</span>,
          ]))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function CategoryGrid() {
  const cats = [
    { label: "Necklaces", count: 84, img: "assets/hero-necklaces.jpg" },
    { label: "Bracelets", count: 47, img: "assets/hero-main.jpg" },
    { label: "Rings", count: 36, img: "assets/product-amelia-ring.jpg" },
    { label: "Bundles", count: 22, img: "assets/banner-bundles.jpg" },
  ];
  return (
    <section className="cats">
      <div className="cats-head">
        <div>
          <div className="eyebrow">SHOP BY CATEGORY</div>
          <h2 style={{fontFamily:"var(--font-display)", fontWeight:300, fontSize:"clamp(32px, 4vw, 48px)", letterSpacing:"-.015em", margin:"8px 0 0", lineHeight:1}}>The collections.</h2>
        </div>
        <a className="btn-link">Shop all →</a>
      </div>
      <div className="cat-grid">
        {cats.map(c => (
          <a key={c.label} className="cat-card">
            <div className="cat-img" style={{backgroundImage:`url(${c.img})`}}></div>
            <div className="cat-meta">
              <span className="cat-label">{c.label}</span>
              <span className="cat-count">{c.count}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.CategoryGrid = CategoryGrid;

function TrustStrip() {
  return (
    <section className="trust">
      <div className="t"><span className="th">Waterproof</span><span className="ts">Wear it everywhere</span></div>
      <div className="t"><span className="th">Hypoallergenic</span><span className="ts">Sensitive-skin safe</span></div>
      <div className="t"><span className="th">Tarnish-free</span><span className="ts">Engineered to last</span></div>
      <div className="t"><span className="th">★ 4.9 / 5</span><span className="ts">50,000+ reviews</span></div>
    </section>
  );
}
window.TrustStrip = TrustStrip;