// page_pdp.jsx — product detail

function PagePDP() {
  const { params, go } = useRouter();
  const lang = useLang();
  const id = params.id;
  const product = PRODUCTS.find(p => p.id === id) || PRODUCTS[0];
  const [autoRotate, setAutoRotate] = React.useState(true);

  const mode = product.categoryEn.toLowerCase().includes("ring") ? "ring"
    : product.categoryEn.toLowerCase().includes("earring") ? "earring"
    : "necklace";

  const dark = hexDarkness(product.heroColor) > 0.5;
  const pearlDarkness = dark ? 0.92 : 0.04;

  return (
    <main style={{ background: "var(--off-white)" }}>
      {/* Breadcrumb */}
      <div style={{ padding: "24px 40px", fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "#8A8378" }}>
        <button onClick={() => go("top")}>HOSHI</button> / <button onClick={() => go("collection")}>Collection</button> / <span>{product.id}</span>
      </div>

      {/* Main layout: 360 left, info right */}
      <section style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 0, minHeight: "calc(100vh - 200px)" }}>
        {/* 360° canvas */}
        <div style={{
          background: product.heroColor,
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{ position: "absolute", inset: 0 }}>
            <Pearl360 mode={mode} darkness={pearlDarkness} hueShift={product.collection === "yoru" ? 0.3 : -0.1} autoRotate={autoRotate} />
          </div>
          {/* 360 indicator */}
          <div style={{
            position: "absolute", bottom: 40, left: 40,
            fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
            color: dark ? "rgba(244,238,227,0.7)" : "rgba(12,12,12,0.55)",
            display: "flex", alignItems: "center", gap: 16,
          }}>
            <span style={{ width: 18, height: 18, borderRadius: "50%", border: `1px solid currentColor`, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>↻</span>
            360° {lang === "ja" ? "ドラッグで回転" : "Drag to rotate"}
          </div>
          <button onClick={() => setAutoRotate(r => !r)} style={{
            position: "absolute", bottom: 40, right: 40,
            fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
            color: dark ? "rgba(244,238,227,0.7)" : "rgba(12,12,12,0.55)",
            borderBottom: "1px solid currentColor", paddingBottom: 4,
          }}>
            {autoRotate ? (lang === "ja" ? "停止" : "Pause") : (lang === "ja" ? "再生" : "Play")}
          </button>

          {/* Thumbnails - 4 static angles */}
          <div style={{ position: "absolute", top: 40, right: 40, display: "flex", flexDirection: "column", gap: 14 }}>
            {[0, 1, 2, 3].map(i => (
              <div key={i} style={{
                width: 64, height: 64,
                background: dark ? "rgba(20,18,15,0.7)" : "rgba(255,255,255,0.7)",
                border: i === 0 ? `1px solid ${dark ? "#F4EEE3" : "#0C0C0C"}` : "1px solid transparent",
                display: "grid", placeItems: "center",
                cursor: "pointer",
              }}>
                <PearlCanvas size={44} darkness={pearlDarkness} hueShift={0} />
              </div>
            ))}
          </div>
        </div>

        {/* Info panel */}
        <div style={{ padding: "80px 60px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="hoshi-eyebrow">
            {COLLECTIONS.find(c => c.id === product.collection)?.[lang === "ja" ? "nameJa" : "nameEn"]} · {product.id}
          </div>
          <h1 style={{
            fontFamily: "var(--serif-jp)",
            fontWeight: 300,
            fontSize: 44,
            letterSpacing: "0.02em",
            lineHeight: 1.2,
            margin: "16px 0 8px",
          }}>
            {lang === "ja" ? product.nameJa : product.nameEn}
          </h1>
          <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 20, color: "#5E5851" }}>
            {lang === "ja" ? product.nameEn : product.nameJa}
          </div>

          <div style={{
            marginTop: 32,
            fontFamily: "var(--serif-display)",
            fontSize: 32,
            letterSpacing: "0.02em",
          }}>
            {formatPrice(product, lang)}
          </div>
          <div className="hoshi-eyebrow" style={{ marginTop: 6 }}>
            {lang === "ja" ? "税込／納期 8週間" : "Incl. tax · 8 weeks lead time"}
          </div>

          <div className="hoshi-kinsugi" style={{ margin: "40px 0" }} />

          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, color: "#2A2623", fontWeight: 300 }}>
            {lang === "ja" ? product.descJa : product.descEn}
          </p>

          {/* Spec table */}
          <dl style={{ marginTop: 40, display: "grid", gridTemplateColumns: "140px 1fr", rowGap: 14, columnGap: 20, fontSize: 13 }}>
            <dt className="hoshi-eyebrow">{lang === "ja" ? "真珠" : "Pearl"}</dt>
            <dd style={{ margin: 0, fontFamily: "var(--serif-jp)" }}>{lang === "ja" ? product.pearl : product.pearlEn}</dd>
            <dt className="hoshi-eyebrow">{lang === "ja" ? "素材" : "Setting"}</dt>
            <dd style={{ margin: 0, fontFamily: "var(--serif-jp)" }}>{lang === "ja" ? product.materialJa : product.materialEn}</dd>
            {product.lengthJa && <>
              <dt className="hoshi-eyebrow">{lang === "ja" ? "長さ" : "Length"}</dt>
              <dd style={{ margin: 0, fontFamily: "var(--serif-jp)" }}>{product.lengthJa}</dd>
            </>}
            <dt className="hoshi-eyebrow">{lang === "ja" ? "在庫" : "Availability"}</dt>
            <dd style={{ margin: 0, fontFamily: "var(--serif-jp)" }}>
              {product.stock === 1 ? (lang === "ja" ? "一点もの" : "One of one") : `${product.stock} ${lang === "ja" ? "点" : "available"}`}
            </dd>
          </dl>

          <div style={{ marginTop: 48, display: "flex", gap: 20, flexWrap: "wrap" }}>
            <SolidButton onClick={() => alert(lang === "ja" ? "ご予約リクエストを受け付けました。" : "Request received.")}>
              {lang === "ja" ? "来店予約" : "Reserve in Boutique"}
            </SolidButton>
            {!product.priceLabel && (
              <SolidButton onClick={() => alert(lang === "ja" ? "カートに追加しました。" : "Added to cart.")} style={{ background: "#9C7E3A" }}>
                {lang === "ja" ? "カートに入れる" : "Add to Cart"}
              </SolidButton>
            )}
            <GhostLink onClick={() => go("bespoke")}>
              {lang === "ja" ? "類似のビスポーク相談" : "Bespoke similar"}
            </GhostLink>
          </div>

          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, fontSize: 11, lineHeight: 1.6, color: "#5E5851" }}>
            <div>
              <div className="hoshi-eyebrow">FedEx</div>
              <div style={{ marginTop: 6 }}>{lang === "ja" ? "世界発送" : "Worldwide"}</div>
            </div>
            <div>
              <div className="hoshi-eyebrow">100 yrs</div>
              <div style={{ marginTop: 6 }}>{lang === "ja" ? "百年保証" : "Warranty"}</div>
            </div>
            <div>
              <div className="hoshi-eyebrow">Made in</div>
              <div style={{ marginTop: 6 }}>Ginza, Tokyo</div>
            </div>
          </div>
        </div>
      </section>

      {/* Atelier block */}
      <section style={{ padding: "140px 40px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="hoshi-eyebrow">{lang === "ja" ? "この一点について" : "On This Piece"}</div>
            <h2 style={{ fontFamily: "var(--serif-display)", fontSize: 44, fontWeight: 400, lineHeight: 1.2, margin: "20px 0", letterSpacing: "-0.01em" }}>
              {lang === "ja" ? "選別から、三十六手。" : <><em style={{ fontStyle: "italic" }}>Thirty-six</em> hands.</>}
            </h2>
            <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, color: "#2A2623", fontWeight: 300 }}>
              {lang === "ja"
                ? "このネックレスは、山崎みどりによる真珠選別から始まりました。一粒ごとに干渉色、巻き、形を確認し、36粒を選び出すのに三日間。石留めは小川達郎、仕上げ磨きは市川洋平が担当しました。"
                : "This strand began with Midori Yamazaki selecting the pearls. Three days to confirm orient, nacre, and shape for 36 pearls. Setting by Tatsurō Ogawa; final polishing by Yōhei Ichikawa."}
            </p>
            <div style={{ marginTop: 40 }}>
              <GhostLink onClick={() => go("artisans")}>
                {lang === "ja" ? "職人たちを知る" : "Meet the artisans"}
              </GhostLink>
            </div>
          </div>
          <div style={{ aspectRatio: "1/1", background: "#E8DED0", position: "relative" }}>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
              <PearlCanvas size={360} darkness={0.02} hueShift={-0.2} />
            </div>
            <div style={{ position: "absolute", bottom: 24, left: 24, right: 24, fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 13, color: "#5E5851" }}>
              {lang === "ja" ? "銀座本店工房にて" : "At the Ginza atelier"}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PagePDP = PagePDP;