/* Industrial Union UI Kit — Product Detail (PDP) */
const { Label: LP, Bracket: BP, BracketRow: BRP, ArrowLink: ALP, Figure: FP, Money: MP, useState: uSP } = window;

function SpecRow({ k, v }) {
  return (
    <div className="sk-spec-row">
      <span className="iu-label iu-label--soft">{k}</span>
      <span className="iu-label">{v}</span>
    </div>
  );
}

function ProductView({ product, onBack, onOpen }) {
  const [active, setActive] = uSP(0);
  if (!product) return null;
  const p = product;

  const related = window.PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4);

  const inquireHref = () => {
    const subject = "Inquiry — " + p.name;
    const body = "Hi Industrial Union,\n\nI'd like to ask about the " + p.name +
      " (" + p.colorway + ", $" + p.price + ").\n\n";
    return "mailto:contact@industrialunion.com?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
  };

  return (
    <main className="sk-main sk-pdp">
      <div className="sk-pdp-back">
        <ALP kind="down" onClick={onBack}>BACK TO SHOP</ALP>
      </div>
      <BRP cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BP /><BP /></BRP>

      <div className="sk-pdp-grid">
        {/* gallery */}
        <div className="sk-gallery">
          <FP tag={p.slots[active]} src={window.prodImg(p, p.slots[active])} ratio="4 / 5" />
          <div className="sk-thumbs">
            {p.slots.map((s, i) => (
              <button key={s} className={"sk-thumb sk-linkbtn" + (i === active ? " is-active" : "")}
                      onClick={() => setActive(i)}>
                <FP tag={s} src={window.prodImg(p, s)} ratio="1 / 1" />
              </button>
            ))}
          </div>
        </div>

        {/* info */}
        <div className="sk-pdp-info">
          <div className="sk-pdp-head">
            <LP soft>{window.catLabel(p.cat)}</LP>
            <h1 className="iu-h1 sk-pdp-name">{p.name}</h1>
            <div className="sk-pdp-priceline">
              <span className="sk-pdp-price"><MP value={p.price} /></span>
              <LP soft>{p.colorway}</LP>
            </div>
          </div>

          <p className="iu-body sk-pdp-blurb">{p.blurb}</p>

          <a className="sk-btn sk-btn--block sk-pdp-add" href={inquireHref()}>
            <span className="sk-arrow">↘</span>
            <span>INQUIRE — <MP value={p.price} /></span>
          </a>

          <div className="sk-spec">
            <SpecRow k="FABRIC" v={p.fabric} />
            <SpecRow k="WEIGHT" v={p.weight} />
            <SpecRow k="CONSTRUCTION" v={p.construction} />
            <SpecRow k="MADE IN" v={p.madeIn} />
          </div>

          <div className="sk-pdp-care">
            <LP soft style={{ display: "block", marginBottom: 8 }}>CARE</LP>
            <p className="iu-body iu-body--soft">{p.care}</p>
          </div>
        </div>
      </div>

      {/* related */}
      <section className="sk-section">
        <BRP cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BP /><BP /></BRP>
        <BRP cols="minmax(150px,1fr) 3fr" className="sk-section-head">
          <LP>MORE FROM THE LINE</LP>
          <div className="sk-grid">
            {related.map((r) => (
              <article key={r.id} className="sk-card" onClick={() => onOpen(r.id)}>
                <FP tag={r.slots[0]} src={window.prodImg(r, r.slots[0])} ratio="4 / 5" />
                <div className="sk-card-meta">
                  <div className="sk-card-line">
                    <LP>{r.name}</LP>
                    <span className="sk-card-price"><MP value={r.price} /></span>
                  </div>
                  <span className="iu-label iu-label--soft">{r.colorway}</span>
                </div>
              </article>
            ))}
          </div>
        </BRP>
      </section>
    </main>
  );
}

Object.assign(window, { ProductView });