// Shop, Pocket, and Product Detail pages
const { useState: useS, useMemo: useM } = React;

function ShopPage({ go, addToCart }) {
  const all = window.TF_PRODUCTS.signature;
  const [filter, setFilter] = useS("all");
  const families = ["all", ...Array.from(new Set(all.map(p => p.family)))];
  const filtered = filter === "all" ? all : all.filter(p => p.family === filter);
  return (
    <>
      <div className="container">
        <div className="pdp-breadcrumb"><a onClick={() => go("home")}>Home</a> &nbsp;/&nbsp; Signature Collection</div>
        <div className="shop-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Collection I · 50ml Extrait —</div>
            <h1>The <em>Signature</em> Collection.</h1>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-end" }}>
            <span className="shop-count">{filtered.length} compositions</span>
            <div className="shop-filters">
              {families.map(f => (
                <button key={f} className={"shop-filter " + (filter === f ? "active" : "")} onClick={() => setFilter(f)}>
                  {f === "all" ? "All" : f}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="container" style={{ paddingBottom: 120 }}>
        <div className="product-grid">
          {filtered.map((p, i) => (
            <div key={p.id} className="product-card" onClick={() => go("product", p.id)}>
              <div className="pc-num">№ {String(i + 1).padStart(2, "0")}</div>
              <div className="pc-image"><img src={p.image} alt={p.name} /></div>
              <div className="pc-meta">
                <div>
                  <div className="pc-name">{p.name}</div>
                  <div className="pc-family">{p.family} · {p.size}</div>
                </div>
                <div className="pc-price">{fmtPrice(p.price)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <Newsletter />
    </>
  );
}

function PocketPage({ go, addToCart }) {
  const pocket = window.TF_PRODUCTS.pocket;
  return (
    <>
      <div className="container">
        <div className="pdp-breadcrumb"><a onClick={() => go("home")}>Home</a> &nbsp;/&nbsp; Pocket Collection</div>
        <div className="shop-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Collection II · 10ml Atomiser —</div>
            <h1>The <em>Pocket</em> Collection.</h1>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-end" }}>
            <span className="shop-count">{pocket.length} atomisers</span>
            <span style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>From {fmtPrice(pocket[0].price)}</span>
          </div>
        </div>
      </div>
      <div className="container" style={{ paddingBottom: 64 }}>
        <p style={{ maxWidth: 640, color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.7, padding: "48px 0 64px" }}>
          Pocket sprays are the same juice as their signature counterpart, decanted into a slim 10ml glass. Meant to travel — in a jacket, a clutch, a carry-on. Colour, not a label, tells you which is which.
        </p>
      </div>
      <div className="container" style={{ paddingBottom: 120 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {pocket.map((p, i) => (
            <div key={p.id} className="pocket-listing-card" style={{
              padding: "56px 32px 32px", borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid var(--line)",
              borderBottom: "1px solid var(--line)", background: "var(--paper)", position: "relative", cursor: "pointer",
              transition: "background 0.3s",
            }}
              onMouseEnter={e => e.currentTarget.style.background = p.bg}
              onMouseLeave={e => e.currentTarget.style.background = "var(--paper)"}
            >
              <div style={{ position: "absolute", top: 24, left: 24, fontFamily: "Cormorant Garamond", fontStyle: "italic", color: "var(--muted)", fontSize: 14 }}>№ {String(i + 1).padStart(2, "0")}</div>
              <div style={{ position: "absolute", top: 24, right: 24, width: 14, height: 14, borderRadius: "50%", background: p.color, boxShadow: "0 0 0 1px rgba(0,0,0,0.06)" }} />
              <div style={{ aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 32 }}>
                <img src={p.image} alt={p.name} style={{ maxHeight: 300, maxWidth: "70%", objectFit: "contain", filter: "drop-shadow(0 16px 24px rgba(26,24,20,0.14))" }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                <div>
                  <div style={{ fontFamily: "Cormorant Garamond", fontSize: 26 }}>{p.name}</div>
                  <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginTop: 4 }}>10ml Pocket · {fmtPrice(p.price)}</div>
                </div>
                <button
                  onClick={(e) => { e.stopPropagation(); addToCart({ id: p.id, name: p.name, price: p.price, size: "10ml Pocket", image: p.image }); }}
                  style={{ padding: "12px 18px", background: "var(--ink)", color: "var(--paper)", border: "none", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", cursor: "pointer" }}
                >Add</button>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: "48px 0", textAlign: "center" }}>
          <div style={{ fontFamily: "Cormorant Garamond", fontStyle: "italic", fontSize: 28, color: "var(--ink)", marginBottom: 8 }}>Pack of 3.</div>
          <p style={{ color: "var(--ink-soft)", marginBottom: 24 }}>Any three pocket atomisers. Save Rs 51.</p>
          <button className="btn" onClick={() => addToCart({ id: "pocket-pack-3", name: "The Pocket Three — Your Pick", price: 999, size: "3 × 10ml Pack", image: "assets/pocket-trio.png" })}>Add pack of 3 — Rs 999</button>
        </div>
      </div>
    </>
  );
}

function ProductPage({ id, go, addToCart, openCart }) {
  const product = window.TF_PRODUCTS.signature.find(p => p.id === id);
  const pocket = window.TF_PRODUCTS.pocket.find(p => p.name.toLowerCase() === product?.name.toLowerCase());
  const [size, setSize] = useS("50ml");
  const [qty, setQty] = useS(1);

  if (!product) return <div className="container" style={{ padding: 80 }}>Not found.</div>;

  const price = size === "50ml" ? product.price : (pocket?.price || 650);
  const img = size === "50ml" ? product.image : (pocket?.image || product.image);

  const related = window.TF_PRODUCTS.signature.filter(p => p.id !== id).slice(0, 3);

  const handleAdd = () => {
    addToCart({
      id: size === "50ml" ? product.id : (pocket?.id || product.id + "-pocket"),
      name: product.name,
      price,
      size: size === "50ml" ? "50ml Extrait" : "10ml Pocket",
      image: img,
      qty,
    });
    openCart();
  };

  return (
    <>
      <div className="container">
        <div className="pdp-breadcrumb">
          <a onClick={() => go("home")}>Home</a> &nbsp;/&nbsp; <a onClick={() => go("shop")}>Signature</a> &nbsp;/&nbsp; {product.name}
        </div>
      </div>
      <div className="container-wide">
        <div className="pdp">
          <div className="pdp-gallery">
            <div className="pdp-watermark">{product.name.split(" ")[0]}</div>
            <img src={img} alt={product.name} key={size} style={{ animation: "fadeUp 0.5s ease both" }} />
          </div>
          <div className="pdp-info">
            <div className="pdp-family">{product.family} · Extrait de Parfum</div>
            <h1 className="pdp-name">{product.name}</h1>
            <div className="pdp-tagline">"{product.tagline}"</div>
            <p className="pdp-copy">{product.copy}</p>
            <div className="pdp-price">{fmtPrice(price)}</div>

            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>Size</div>
              <div className="size-picker">
                <button className={size === "50ml" ? "active" : ""} onClick={() => setSize("50ml")}>50ml Signature — {fmtPrice(product.price)}</button>
                {pocket && <button className={size === "10ml" ? "active" : ""} onClick={() => setSize("10ml")}>10ml Pocket — {fmtPrice(pocket.price)}</button>}
              </div>
            </div>

            <div className="pdp-notes">
              <h4>The Composition</h4>
              <div className="pdp-notes-grid">
                <div className="pdp-note">
                  <div className="note-label">Top.</div>
                  <div className="note-items">{product.notes.top.join(" · ")}</div>
                </div>
                <div className="pdp-note">
                  <div className="note-label">Heart.</div>
                  <div className="note-items">{product.notes.heart.join(" · ")}</div>
                </div>
                <div className="pdp-note">
                  <div className="note-label">Base.</div>
                  <div className="note-items">{product.notes.base.join(" · ")}</div>
                </div>
              </div>
            </div>

            <div className="pdp-actions">
              <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--ink)", padding: "0 8px" }}>
                <button onClick={() => setQty(q => Math.max(1, q - 1))} style={{ background: "none", border: "none", padding: "16px 10px", cursor: "pointer", fontSize: 14 }}>−</button>
                <span style={{ minWidth: 24, textAlign: "center", fontFamily: "Cormorant Garamond", fontStyle: "italic", fontSize: 18 }}>{qty}</span>
                <button onClick={() => setQty(q => q + 1)} style={{ background: "none", border: "none", padding: "16px 10px", cursor: "pointer", fontSize: 14 }}>+</button>
              </div>
              <button className="btn" style={{ flex: 1 }} onClick={handleAdd}>Add to Cart · {fmtPrice(price * qty)}</button>
            </div>

            <div style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.04em", lineHeight: 1.8, marginTop: 12 }}>
              Ships in 2–3 working days from Lahore. Cash on delivery: Lahore Rs 200, other cities Rs 400.<br />
              A 2ml discovery sample is included with every signature order.
            </div>
          </div>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div className="section-intro">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>— You may also consider —</div>
              <h2 className="section-title">The <em>adjacent</em> shelf.</h2>
            </div>
            <div></div>
          </div>
          <div className="product-grid">
            {related.map((p, i) => (
              <div key={p.id} className="product-card" onClick={() => { go("product", p.id); window.scrollTo({ top: 0 }); }}>
                <div className="pc-num">№ {String(i + 1).padStart(2, "0")}</div>
                <div className="pc-image"><img src={p.image} alt={p.name} /></div>
                <div className="pc-meta">
                  <div>
                    <div className="pc-name">{p.name}</div>
                    <div className="pc-family">{p.family} · {p.size}</div>
                  </div>
                  <div className="pc-price">{fmtPrice(p.price)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ShopPage, PocketPage, ProductPage });