/* eslint-disable */
/* Brand Lines — Women / Men / Kids surfaced as oversized editorial blocks */
const LINES = [
  { key: "women", label: "Womens", count: "240+ pieces", img: "assets/hero-main.jpg", href: "collection.html?handle=womens",
    note: "The original drop. Layering chains, signet rings, vintage-inspired drops." },
  { key: "men",   label: "Mens",   count: "80+ pieces",  img: "assets/hero-mens.jpg", href: "collection.html?handle=mens",
    note: "Heavy silver, Cuban links, signet rings. Built for everyday wear." },
  { key: "kids",  label: "Kids",   count: "Apparel",      img: "https://cdn.shopify.com/s/files/1/0609/7784/0342/files/df37252627d44d98ab0dafdb49e90d01.png?v=1777064557", href: "collection.html?handle=kids-apparel",
    note: "Essential tees, fleece hoodies, sweatpants. Made for everyday." },
];

function BrandLines() {
  return (
    <section className="lines">
      <div className="lines-head">
        <span className="eyebrow">Shop by line</span>
        <h2 className="display-2">Three lines, <em>one family.</em></h2>
      </div>
      <div className="lines-grid">
        {LINES.map(l => (
          <a key={l.key} className="line-card" href={l.href}>
            <div className="line-img" style={{ backgroundImage: `url(${l.img})` }}></div>
            <div className="line-meta">
              <div className="line-top">
                <h3 className="line-title">{l.label}</h3>
                <span className="line-count">{l.count}</span>
              </div>
              <p className="line-note">{l.note}</p>
              <span className="line-cta">Shop {l.label.toLowerCase()} →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.BrandLines = BrandLines;