/* ============================================================
   LUMFELL — product detail page
   ============================================================ */
const Ip = window.LumIcons;

function ProductPage({ product, all, onOpen, onAdd, onHome, onShop }) {
  const [qty, setQty] = useState(1);
  const [active, setActive] = useState(0);
  const [openSpec, setOpenSpec] = useState(true);
  const p = product;

  useEffect(() => { setQty(1); setActive(0); window.scrollTo(0, 0); }, [p.id]);

  const thumbs = [
    { tag: p.tag, tone: p.tone },
    { tag: "Detail — saddle-stitch close-up", tone: ["#2c2016", "#150e08"] },
    { tag: "Detail — brass hardware", tone: ["#3d2e1f", "#1a120b"] },
    { tag: "In use — lifestyle shot", tone: ["#282017", "#120d07"] },
  ];

  const related = all.filter((x) => x.id !== p.id && x.cat === p.cat)
    .concat(all.filter((x) => x.id !== p.id && x.cat !== p.cat))
    .slice(0, 3);

  return (
    <div className="pdp">
      <div className="u-wrap">
        <nav className="pdp__crumb">
          <a href="#" onClick={(e) => { e.preventDefault(); onHome(); }}>Home</a>
          <span>/</span>
          <a href="#" onClick={(e) => { e.preventDefault(); onShop(); }}>Shop</a>
          <span>/</span>
          <span className="pdp__crumb-cur">{p.name}</span>
        </nav>

        <div className="pdp__main">
          {/* gallery */}
          <div className="pdp__gallery">
            <div className="pdp__hero">
              <Placeholder tag={thumbs[active].tag} tone={thumbs[active].tone} className="pdp__hero-ph" />
              {p.badge && <span className="pcard__badge">{p.badge}</span>}
            </div>
            <div className="pdp__thumbs">
              {thumbs.map((t, i) => (
                <button key={i} className={`pdp__thumb ${i === active ? "is-on" : ""}`} onClick={() => setActive(i)}>
                  <Placeholder tag="" tone={t.tone} />
                </button>
              ))}
            </div>
          </div>

          {/* info */}
          <div className="pdp__info">
            <span className="u-eyebrow" style={{ color: "var(--cognac-2)" }}>{p.leather}</span>
            <h1 className="pdp__name">{p.name}</h1>
            <div className="pdp__price-row">
              <span className="pdp__price">{money(p.price)}</span>
              <span className="pdp__rating">★★★★★ <em>· 4.9 (128)</em></span>
            </div>
            <p className="pdp__blurb">{p.blurb}</p>

            <div className="pdp__swatches">
              <span className="pdp__swatch-l">Colour — <strong>{p.color}</strong></span>
              <div className="pdp__swatch-row">
                {[["#7a4a28","Cognac"],["#3a2a1d","Espresso"],["#5a4128","Chestnut"]].map(([c, n]) => (
                  <span key={n} className={`swatch ${n === p.color ? "is-on" : ""}`} style={{ background: c }} title={n} />
                ))}
              </div>
            </div>

            <div className="pdp__buy">
              <div className="qty qty--lg">
                <button onClick={() => setQty((q) => Math.max(1, q - 1))} aria-label="Decrease"><Ip.IcoMinus size={15} /></button>
                <span>{qty}</span>
                <button onClick={() => setQty((q) => q + 1)} aria-label="Increase"><Ip.IcoPlus size={15} /></button>
              </div>
              <button className="btn pdp__add" onClick={() => onAdd(p, qty)}>
                <span>Add to Bag — {money(p.price * qty)}</span>
              </button>
            </div>

            <ul className="pdp__assure">
              <li><Ip.IcoTruck size={18} /> Free worldwide shipping</li>
              <li><Ip.IcoReturn size={18} /> 30-day returns</li>
              <li><Ip.IcoBadge size={18} /> 1-year maker's warranty</li>
            </ul>

            <div className="pdp__accord">
              <button className="pdp__acc-head" onClick={() => setOpenSpec((s) => !s)}>
                <span className="u-eyebrow">Specification</span>
                <span className="pdp__acc-sign">{openSpec ? <Ip.IcoMinus size={16} /> : <Ip.IcoPlus size={16} />}</span>
              </button>
              <div className={`pdp__acc-body ${openSpec ? "is-open" : ""}`}>
                <ul>{p.spec.map((s) => <li key={s}>{s}</li>)}</ul>
              </div>
            </div>
          </div>
        </div>

        {/* maker's note band */}
        <div className="pdp__band">
          <div className="pdp__band-text">
            <span className="u-eyebrow" style={{ color: "var(--cognac-2)" }}>The Maker's Note</span>
            <p className="u-serif pdp__band-q">“This piece will look better in a decade than it does today. That is the whole point of it.”</p>
          </div>
          <Placeholder tag="Workshop portrait — maker at the bench" tone={["#332618", "#160f08"]} className="pdp__band-ph" />
        </div>

        {/* related */}
        <div className="pdp__related">
          <div className="sec-head" style={{ marginBottom: 36 }}>
            <span className="u-eyebrow" style={{ color: "var(--cognac-2)" }}>You May Also Like</span>
            <h2 className="sec-head__t">Complete the Collection</h2>
          </div>
          <div className="pdp__related-grid">
            {related.map((r, i) => (
              <ProductCard key={r.id} p={r} index={i} onOpen={onOpen} onAdd={(pr) => onAdd(pr, 1)} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProductPage = ProductPage;