/* Industrial Union UI Kit — storefront views: Home + Shop grid */
const { Label: LS, Bracket: BS, BracketRow: BRS, ArrowLink: ALS, Figure: FS, Money: MS, useState: uSS } = window;

function ProductCard({ p, onOpen }) {
  return (
    <article className="sk-card" onClick={() => onOpen(p.id)}>
      <FS tag={p.slots[0]} src={window.prodImg(p, p.slots[0])} ratio="4 / 5" />
      <div className="sk-card-meta">
        <div className="sk-card-line">
          <LS>{p.name}</LS>
          <span className="sk-card-price"><MS value={p.price} /></span>
        </div>
        <span className="iu-label iu-label--soft">{p.colorway}</span>
      </div>
    </article>
  );
}

function ProductGrid({ products, onOpen }) {
  return (
    <div className="sk-grid">
      {products.map((p) => <ProductCard key={p.id} p={p} onOpen={onOpen} />)}
    </div>
  );
}

function Hero({ onShop }) {
  return (
    <section className="sk-hero">
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BS /><BS /></BRS>
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-hero-eyebrow">
        <span />
        <p className="iu-body sk-lead">
          <span className="sk-arrow">↘</span>
          Durable goods for the trades. Cut from raw material, built to last.
        </p>
      </BRS>
      <div className="sk-hero-main">
        <div className="sk-hero-left">
          <h1 className="iu-display sk-hero-title">One shop,<br/>One union</h1>
          <ALS kind="corner" onClick={onShop} style={{ marginTop: 28 }}>SHOP THE LINE</ALS>
        </div>
        <div className="sk-hero-media" onClick={onShop} title="Shop the line">
          <FS src="assets/hero-photo.jpg" tag="CAMPAIGN · 01" ratio="3 / 4" style={{ height: "100%" }} />
        </div>
      </div>
    </section>
  );
}

function Flagships({ onOpen }) {
  const flags = window.PRODUCTS.filter((p) => p.flagship);
  return (
    <section className="sk-section">
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BS /><BS /></BRS>
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-section-head">
        <LS>THE FLAGSHIPS</LS>
        <div>
          <div className="sk-stories-head">
            <LS>WORN-IN ICONS</LS>
            <LS soft>02</LS>
          </div>
          <div className="sk-flags">
            {flags.map((p, i) => (
              <article key={p.id} className="sk-flag" onClick={() => onOpen(p.id)}>
                <FS tag={p.slots[0]} src={window.prodImg(p, p.slots[0])} ratio="4 / 5" />
                <div className="sk-flag-meta">
                  <div>
                    <LS soft>{String(i + 1).padStart(2, "0")}&nbsp;&nbsp;{window.catShort(p.cat)}</LS>
                    <h3 className="iu-h2 sk-flag-name">{p.name}</h3>
                  </div>
                  <span className="sk-card-price"><MS value={p.price} /></span>
                </div>
                <p className="iu-body sk-flag-blurb"><span className="sk-arrow">↘</span>{p.blurb}</p>
              </article>
            ))}
          </div>
        </div>
      </BRS>
    </section>
  );
}

function CategoryRail({ onCategory }) {
  return (
    <section className="sk-section">
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BS /><BS /></BRS>
      <BRS cols="minmax(150px,1fr) 3fr" className="sk-section-head">
        <LS>THE LINE</LS>
        <div className="sk-catrail">
          {window.CATEGORIES.map((c, i) => (
            <button key={c.id} className="sk-catrail-row sk-linkbtn" onClick={() => onCategory(c.id)}>
              <LS soft>{String(i + 1).padStart(2, "0")}</LS>
              <span className="iu-h2 sk-catrail-label">{c.label}</span>
              <span className="sk-arrow sk-catrail-arrow">→</span>
            </button>
          ))}
        </div>
      </BRS>
    </section>
  );
}

function StoryBand({ onWorkshop }) {
  return (
    <section className="sk-statement">
      <BRS cols="minmax(150px,1fr) 3fr">
        <LS>EST. 2026 · L.A.</LS>
        <div>
          <h2 className="iu-h1 sk-statement-text">
            We make one thing well: clothing that earns its keep, then gets handed down.
          </h2>
          <ALS kind="corner" onClick={onWorkshop} style={{ marginTop: 28 }}>INSIDE THE WORKSHOP</ALS>
        </div>
      </BRS>
    </section>
  );
}

function Home({ onShop, onOpen, onCategory, onWorkshop }) {
  return (
    <main className="sk-main">
      <Hero onShop={onShop} />
      <Flagships onOpen={onOpen} />
      <CategoryRail onCategory={onCategory} />
      <StoryBand onWorkshop={onWorkshop} />
    </main>
  );
}

function Shop({ filter, onFilter, onOpen }) {
  const products = window.productsByCat(filter);
  return (
    <main className="sk-main">
      <section className="sk-section sk-shop">
        <BRS cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BS /><BS /></BRS>
        <BRS cols="minmax(150px,1fr) 3fr" className="sk-section-head">
          <LS>SHOP</LS>
          <div>
            <div className="sk-shop-head">
              <LS>THE LINE</LS>
              <LS soft>{String(products.length).padStart(2, "0")} STYLES</LS>
            </div>
            <div className="sk-filters">
              <button className={"sk-filter sk-linkbtn iu-label" + (filter === "all" ? " is-active" : "")}
                      onClick={() => onFilter("all")}>ALL</button>
              {window.CATEGORIES.map((c) => (
                <button key={c.id}
                        className={"sk-filter sk-linkbtn iu-label" + (filter === c.id ? " is-active" : "")}
                        onClick={() => onFilter(c.id)}>{c.short}</button>
              ))}
            </div>
            <ProductGrid products={products} onOpen={onOpen} />
          </div>
        </BRS>
      </section>
    </main>
  );
}

Object.assign(window, { ProductCard, ProductGrid, Home, Shop });