// PRODUCT DETAIL
function ProductPage({ id }) {
  const { navigate } = useRouter();
  const p = PRODUCTS.find((x) => x.id === id) || PRODUCTS[0];
  const c = COLLECTIONS.find((x) => x.id === p.collection);
  const related = PRODUCTS.filter((x) => x.collection === p.collection && x.id !== p.id).slice(0, 4);
  const [size, setSize] = useState(null);
  const [zoom, setZoom] = useState(false);

  const isRing = p.type === 'Ring';
  const sizes = isRing ? ['46','48','50','52','54','56'] : ['One size'];

  return (
    <div className="page-enter">
      <style>{`
        .pd { padding: 140px 0 80px; }
        .pd__grid {
          display: grid; grid-template-columns: 1.3fr 1fr;
          gap: clamp(40px, 5vw, 80px);
          align-items: start;
        }
        @media (max-width: 880px) { .pd__grid { grid-template-columns: 1fr; } }
        .pd__crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; display: flex; gap: 12px; }
        .pd__crumb a { cursor: pointer; }
        .pd__crumb a:hover { color: var(--accent); }
        .pd__media {
          background: var(--surface);
          aspect-ratio: 1/1;
          position: relative;
          overflow: hidden;
          cursor: zoom-in;
        }
        .pd__media img {
          width: 100%; height: 100%; object-fit: contain;
          padding: 12%;
          transition: transform 0.6s ease;
        }
        .pd__media.is-zoom img { transform: scale(1.6); cursor: zoom-out; padding: 6%; }
        .pd__media-tag {
          position: absolute; top: 20px; left: 20px;
          font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
          color: var(--accent);
        }
        .pd__thumbs {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
          margin-top: 8px;
        }
        .pd__thumb { aspect-ratio: 1/1; background: var(--surface); cursor: pointer; border: 1px solid var(--rule); }
        .pd__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 16%; }
        .pd__thumb.is-on { border-color: var(--accent); }

        .pd__info { position: sticky; top: 110px; }
        .pd__kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
        .pd__title { font-family: var(--display, var(--serif)); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; margin: 14px 0 24px; }
        .pd__price { font-family: var(--display, var(--serif)); font-size: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); font-feature-settings: "tnum"; }
        .pd__row { padding: 22px 0; border-bottom: 1px solid var(--rule); }
        .pd__row__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 14px; }
        .pd__sizes { display: flex; gap: 8px; flex-wrap: wrap; }
        .pd__sizes button {
          min-width: 46px; padding: 12px 14px;
          border: 1px solid var(--rule-strong);
          font-size: 13px; letter-spacing: 0.05em;
          transition: all 0.2s;
          font-feature-settings: "tnum";
        }
        .pd__sizes button:hover { border-color: var(--accent); color: var(--accent); }
        .pd__sizes button.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
        .pd__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
        .pd__ctas .btn { width: 100%; padding: 18px; }
        .pd__notes { padding: 22px 0; }
        .pd__notes details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
        .pd__notes details summary {
          list-style: none; cursor: pointer;
          font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
          display: flex; justify-content: space-between; align-items: center;
        }
        .pd__notes details summary::-webkit-details-marker { display: none; }
        .pd__notes details[open] summary::after { content: "−"; }
        .pd__notes details summary::after { content: "+"; font-family: var(--display, var(--serif)); font-size: 22px; }
        .pd__notes p { color: var(--fg-mute); font-size: 14px; margin: 14px 0 0; line-height: 1.6; }

        /* Related */
        .pd-related { padding: 60px 0 120px; border-top: 1px solid var(--rule); }
        .pd-related h3 { font-family: var(--display, var(--serif)); font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 40px; }
        .pd-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        @media (max-width: 880px) { .pd-related__grid { grid-template-columns: repeat(2, 1fr); } }
      `}</style>

      <div className="container pd">
        <div className="pd__crumb">
          <a onClick={() => navigate('home')}>Gafla</a>
          <span>/</span>
          <a onClick={() => navigate('collections')}>Collections</a>
          <span>/</span>
          <a onClick={() => navigate('collection', { id: p.collection })}>{c?.name}</a>
          <span>/</span>
          <span style={{ color: 'var(--fg)' }}>{p.type}</span>
        </div>
        <div className="pd__grid">
          <div>
            <div className={`pd__media ${zoom ? 'is-zoom' : ''}`} onClick={() => setZoom(!zoom)}>
              <div className="pd__media-tag">{c?.name} · {p.type}</div>
              <img src={p.image} alt={p.name} />
            </div>
            <div className="pd__thumbs">
              <div className="pd__thumb is-on"><img src={p.image} alt="" /></div>
              {related.slice(0, 3).map((r) => (
                <div key={r.id} className="pd__thumb" onClick={() => navigate('product', { id: r.id })}>
                  <img src={r.image} alt={r.name} />
                </div>
              ))}
            </div>
          </div>

          <div className="pd__info">
            <div className="pd__kicker">{c?.name} · {c?.motif}</div>
            <h1 className="pd__title">{p.name}</h1>
            <div className="pd__price">{aed(p.price)}</div>

            <div className="pd__row">
              <div className="pd__row__label">{isRing ? 'Ring size (EU)' : 'Size'}</div>
              <div className="pd__sizes">
                {sizes.map((s) => (
                  <button key={s} className={size === s ? 'is-on' : ''} onClick={() => setSize(s)}>{s}</button>
                ))}
              </div>
            </div>

            <div className="pd__ctas">
              <button className="btn btn--primary" onClick={() => navigate('contact', { tab: 'majlis', product: p.id })}>
                Reserve at the Majlis
              </button>
              <button className="btn btn--ghost arrow" onClick={() => navigate('contact')}>
                <span>Enquire by WhatsApp</span>
              </button>
            </div>

            <div className="pd__notes">
              <details open>
                <summary>About the piece</summary>
                <p>
                  Part of the Gafla {c?.name} line — {c?.story}
                </p>
              </details>
              <details>
                <summary>Material & specifications</summary>
                <p>Material details available on request. Each Gafla piece is hallmarked and accompanied by a certificate of authenticity. Gemstone, carat, and dimension details are confirmed at private viewing.</p>
              </details>
              <details>
                <summary>Delivery & private viewing</summary>
                <p>Pieces ship from Dubai with secure handling. For an unhurried, in‑person introduction to the piece, request a private viewing at the Gafla Majlis or via partner boutiques in Abu Dhabi.</p>
              </details>
              <details>
                <summary>Care & after‑sales</summary>
                <p>Lifetime cleaning and polishing through Gafla Concierge. Resizing and repair work available — please consult the Concierge before any service.</p>
              </details>
            </div>
          </div>
        </div>
      </div>

      <div className="container pd-related">
        <h3>More from {c?.name}</h3>
        <div className="pd-related__grid">
          {(related.length ? related : PRODUCTS.slice(0, 4)).slice(0, 4).map((r) => (
            <ProductCard key={r.id} product={r} onClick={() => navigate('product', { id: r.id })} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductPage });