/* global React, Icon, Photo, PhotoEdit, Stars, Stepper, PRODUCT, PRODUCT_SHOTS, PROBLEM_SHOTS */
const { useState: useStatePDP } = React;

function useAdminPdp(key, defaults) {
  const [text, setText] = useStatePDP(() => {
    const stored = (window.PDP_CONTENT || {})[key] || {};
    return Object.assign({}, defaults, stored);
  });
  const [editing, setEditing] = useStatePDP(false);
  const [draft, setDraft] = useStatePDP({});
  const [saving, setSaving] = useStatePDP(false);
  const startEdit = () => { setEditing(true); setDraft({ ...text }); };
  const cancelEdit = () => { setEditing(false); setDraft({}); };
  const setField = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  const handleSave = async () => {
    setSaving(true);
    try {
      if (window.kDb) await window.kDb.collection("content").doc("pdp").set({ [key]: draft }, { merge: true });
      if (window.PDP_CONTENT) {
        if (!window.PDP_CONTENT[key]) window.PDP_CONTENT[key] = {};
        Object.assign(window.PDP_CONTENT[key], draft);
      }
      if (key === "blurb")  { if (draft.blurbKh) PRODUCT.blurbKh = draft.blurbKh; if (draft.blurb) PRODUCT.blurb = draft.blurb; }
      if (key === "header") { ["badge","tagline","nameKh","name","subname"].forEach(f => { if (draft[f] !== undefined) PRODUCT[f] = draft[f]; }); }
      if (key === "pack")   { if (draft.items) PRODUCT.pack = draft.items.split("\n").filter(Boolean); }
      setText({ ...draft });
      setEditing(false); setDraft({});
    } catch(e) { alert("Save failed: " + e.message); }
    setSaving(false);
  };
  return { text, editing, draft, saving, startEdit, cancelEdit, setField, handleSave };
}


const PDP_TA = {
  width: "100%", fontFamily: "inherit", fontSize: 13, lineHeight: 1.55,
  padding: "10px 12px", border: "1px solid var(--line-strong)", borderRadius: 6,
  background: "var(--bg)", color: "var(--fg)", resize: "vertical",
};
const PDP_LABEL = { fontSize: "var(--text-2xs)", fontFamily: "var(--font-mono)", letterSpacing: "0.1em", color: "var(--fg-muted)" };

function PdpEditBtn({ onClick, label }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 5, padding: "6px 14px", borderRadius: 999,
      border: "1.5px solid var(--accent)", background: "var(--bg-2)", cursor: "pointer",
      color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
      boxShadow: "0 2px 8px rgba(0,0,0,0.25)", zIndex: 10, position: "relative"
    }}>
      <Icon name="pencil" size={12} /> {label}
    </button>
  );
}

function PdpEditPanel({ label, saving, onSave, onCancel, children }) {
  return (
    <div style={{ border: "2px solid var(--accent)", borderRadius: 10, padding: "20px 24px", marginBottom: 24, background: "var(--bg)" }}>
      <div className="col gap-12">
        <div className="row justify-between items-center">
          <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>{label}</span>
          <button onClick={onCancel} style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-muted)", fontSize: 20, lineHeight: 1 }}>×</button>
        </div>
        {children}
        <div className="row gap-8 items-center">
          <button className="btn btn-primary" onClick={onSave} disabled={saving} style={{ fontSize: "var(--text-xs)" }}>{saving ? "Saving…" : "Save"}</button>
          <button className="btn" onClick={onCancel} style={{ fontSize: "var(--text-xs)" }}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

function PDP({ initialSize, onBack, onAddToCart, isAdmin }) {
  const initId = initialSize && PRODUCT.sizes.some(s => s.id === initialSize)
    ? initialSize
    : (PRODUCT.sizes.find(s => s.popular)?.id || PRODUCT.sizes[0].id);
  const [sizeId, setSizeId] = useStatePDP(initId);
  const [qty, setQty] = useStatePDP(1);
  const [heroIdx, setHeroIdx] = useStatePDP(0);
  const [tab, setTab] = useStatePDP("how");
  const [shots, setShots] = useStatePDP(() => [...PRODUCT_SHOTS]);
  const [addingPhoto, setAddingPhoto] = useStatePDP(false);

  const saveGallery = async (newShots) => {
    PRODUCT_SHOTS.splice(0, PRODUCT_SHOTS.length, ...newShots);
    setShots([...newShots]);
    if (window.kDb) {
      await window.kDb.collection("content").doc("photos").set(
        { gallery: newShots.map(s => s.src) }, { merge: true }
      );
    }
  };

  const handleAddPhoto = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setAddingPhoto(true);
    const ext = file.name.split(".").pop().toLowerCase();
    const ref = window.kStorage.ref(`product-images/pdpShot-${Date.now()}.${ext}`);
    const task = ref.put(file);
    task.on("state_changed", null,
      (err) => { alert("Upload failed: " + err.message); setAddingPhoto(false); e.target.value = ""; },
      async () => {
        try {
          const url = await ref.getDownloadURL();
          const newShots = [...shots, { src: url, c: `PRODUCT · IMAGE ${shots.length + 1}` }];
          await saveGallery(newShots);
          setHeroIdx(newShots.length - 1);
        } catch(err) { alert("Save failed: " + err.message); }
        finally { setAddingPhoto(false); e.target.value = ""; }
      }
    );
  };

  const handleDeletePhoto = async (idx) => {
    if (shots.length <= 1) { alert("Cannot delete the last photo."); return; }
    if (!window.confirm(`Delete photo ${idx + 1}?`)) return;
    const newShots = shots.filter((_, i) => i !== idx);
    const newIdx = heroIdx >= newShots.length ? newShots.length - 1 : heroIdx;
    setHeroIdx(newIdx);
    await saveGallery(newShots);
  };
  const swipeStartX = React.useRef(null);
  const swipeStartY = React.useRef(null);
  const handleSwipeStart = (e) => {
    swipeStartX.current = e.touches[0].clientX;
    swipeStartY.current = e.touches[0].clientY;
  };
  const handleSwipeEnd = (e) => {
    if (swipeStartX.current === null) return;
    const dx = e.changedTouches[0].clientX - swipeStartX.current;
    const dy = e.changedTouches[0].clientY - swipeStartY.current;
    swipeStartX.current = null;
    if (Math.abs(dx) < Math.abs(dy) || Math.abs(dx) < 40) return;
    if (dx < 0) setHeroIdx(i => Math.min(i + 1, PRODUCT_SHOTS.length - 1));
    else setHeroIdx(i => Math.max(i - 1, 0));
  };

  const header   = useAdminPdp("header",   { badge: PRODUCT.badge, tagline: PRODUCT.tagline, nameKh: PRODUCT.nameKh, name: PRODUCT.name, subname: PRODUCT.subname });
  const blurb    = useAdminPdp("blurb",    { blurbKh: PRODUCT.blurbKh, blurb: PRODUCT.blurb });
  const trust    = useAdminPdp("trust",    window.PDP_CONTENT.trust);
  const overview = useAdminPdp("overview", window.PDP_CONTENT.overview);
  const steps    = useAdminPdp("steps",    window.PDP_CONTENT.steps);
  const safety   = useAdminPdp("safety",   window.PDP_CONTENT.safety);
  const spec     = useAdminPdp("spec",    window.PDP_CONTENT.spec);

  const size = PRODUCT.sizes.find(s => s.id === sizeId);
  const getStock = id => {
    const v = (window.INVENTORY || {})[id];
    return typeof v === "number" ? v : null; // null = unlimited
  };
  const selectedStock  = getStock(sizeId);
  const isOutOfStock   = selectedStock === 0;
  const total = size.price * qty;

  return (
    <div className="pdp-outer">
      <div className="wrap">
        {/* Breadcrumb */}
        <div className="row gap-8 items-center mono" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em", color: "var(--fg-muted)", marginBottom: 24 }}>
          <button onClick={onBack} style={{ background: "transparent", border: 0, font: "inherit", cursor: "pointer", color: "inherit", textTransform: "uppercase" }}>
            ← <span className="km-sans" style={{ fontSize: "var(--text-xs)" }}>ហាង</span> SHOP
          </button>
          <span>/</span>
          <span>{PRODUCT.sku}</span>
          <span>/</span>
          <span style={{ color: "var(--fg)" }}>{PRODUCT.name.toUpperCase()}</span>
        </div>

        <div className="split-product" style={{ gap: 56 }}>
          {/* Gallery */}
          <div className="col gap-12">
            <div
              onTouchStart={handleSwipeStart}
              onTouchEnd={handleSwipeEnd}
              style={{ touchAction: "pan-y", userSelect: "none" }}
            >
              <div key={heroIdx} style={{ animation: "ks-fade-in 220ms ease" }}>
                <PhotoEdit
                  src={shots[heroIdx]?.src}
                  aspect="4 / 5"
                  bg="#f5f1ea"
                  isAdmin={isAdmin}
                  firestoreField={`pdpShot${heroIdx}`}
                  onUploaded={(url) => {
                    const s = shots.map((sh, i) => i === heroIdx ? { ...sh, src: url } : sh);
                    saveGallery(s);
                  }}
                />
              </div>
            </div>
            <div className="pdp-thumbs" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
              {shots.map((s, i) => (
                <div key={i} style={{ position: "relative" }}>
                  <button
                    onClick={() => setHeroIdx(i)}
                    style={{
                      display: "block", width: "100%",
                      padding: 0, background: "transparent", border: 0, cursor: "pointer",
                      borderRadius: 6, overflow: "hidden",
                      boxShadow: heroIdx === i
                        ? "0 0 0 2.5px var(--accent)"
                        : "0 0 0 1px var(--line)",
                      opacity: heroIdx === i ? 1 : 0.72,
                      transition: "box-shadow 140ms ease, opacity 140ms ease",
                    }}
                    aria-label={`View photo ${i + 1}`}
                  >
                    <div style={{ position: "relative", aspectRatio: "4 / 5", background: "#f5f1ea" }}>
                      <img src={s.src} alt={`Product photo ${i + 1}`}
                        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                    </div>
                  </button>
                  {isAdmin && (
                    <button
                      onClick={() => handleDeletePhoto(i)}
                      title="Delete photo"
                      style={{
                        position: "absolute", top: 3, right: 3,
                        width: 20, height: 20, borderRadius: "50%",
                        background: "rgba(0,0,0,0.72)", border: "1.5px solid rgba(255,255,255,0.5)",
                        color: "#fff", cursor: "pointer",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 12, lineHeight: 1, padding: 0, zIndex: 5,
                      }}
                    >×</button>
                  )}
                </div>
              ))}
              {isAdmin && (
                <label style={{
                  display: "flex", alignItems: "center", justifyContent: "center",
                  aspectRatio: "4 / 5", borderRadius: 6, cursor: addingPhoto ? "default" : "pointer",
                  border: "1.5px dashed var(--line-strong)",
                  background: "var(--bg-2)", color: "var(--fg-muted)",
                  flexDirection: "column", gap: 4,
                }}>
                  <input type="file" accept="image/*" onChange={handleAddPhoto} disabled={addingPhoto} style={{ display: "none" }} />
                  {addingPhoto
                    ? <span className="mono" style={{ fontSize: 9, letterSpacing: "0.08em" }}>UPLOADING…</span>
                    : (<>
                        <span style={{ fontSize: 20, lineHeight: 1 }}>+</span>
                        <span className="mono" style={{ fontSize: 8, letterSpacing: "0.08em" }}>ADD</span>
                      </>)
                  }
                </label>
              )}
            </div>
          </div>

          {/* Buy card */}
          <div className="col gap-20 pdp-buy-card" style={{ position: "sticky", top: 88, alignSelf: "start" }}>
            <div className="col gap-8">
              {isAdmin && header.editing && (
                <PdpEditPanel label="EDIT PRODUCT HEADER" saving={header.saving} onSave={header.handleSave} onCancel={header.cancelEdit}>
                  <span style={PDP_LABEL}>BADGE</span>
                  <textarea aria-label="Badge text" style={PDP_TA} rows={1} value={header.draft.badge || ""} onChange={e => header.setField("badge", e.target.value)} />
                  <span style={PDP_LABEL}>NAME — KHMER</span>
                  <textarea aria-label="Product name Khmer" style={PDP_TA} rows={1} value={header.draft.nameKh || ""} onChange={e => header.setField("nameKh", e.target.value)} />
                  <span style={PDP_LABEL}>NAME — ENGLISH</span>
                  <textarea aria-label="Product name English" style={PDP_TA} rows={1} value={header.draft.name || ""} onChange={e => header.setField("name", e.target.value)} />
                </PdpEditPanel>
              )}
              {header.text.badge && <span className="chip chip-accent mono" style={{ alignSelf: "flex-start" }}>{header.text.badge}</span>}
              <h1 className="display-lg km" style={{ marginTop: 4 }}>{header.text.nameKh}</h1>
              <span className="serif" style={{ fontSize: 22, color: "var(--fg-muted)", lineHeight: 1.1 }}>
                <em>{header.text.name}</em>
              </span>
              {isAdmin && !header.editing && <div style={{ marginTop: 4 }}><PdpEditBtn onClick={header.startEdit} label="EDIT HEADER" /></div>}
              {isAdmin && blurb.editing && (
                <PdpEditPanel label="EDIT DESCRIPTION" saving={blurb.saving} onSave={blurb.handleSave} onCancel={blurb.cancelEdit}>
                  <span style={PDP_LABEL}>KHMER</span>
                  <RichEditor isKh value={blurb.draft.blurbKh || ""} onChange={v => blurb.setField("blurbKh", v)} />
                  <span style={PDP_LABEL}>ENGLISH</span>
                  <RichEditor value={blurb.draft.blurb || ""} onChange={v => blurb.setField("blurb", v)} />
                </PdpEditPanel>
              )}
              <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.55 }}>
                <div className="km-sans pdp-rich" style={{ color: "var(--fg)", marginBottom: 6 }} dangerouslySetInnerHTML={renderRich(blurb.text.blurbKh)} />
                <div className="pdp-rich" style={{ color: "var(--fg-muted)" }} dangerouslySetInnerHTML={renderRich(blurb.text.blurb)} />
              </p>
              {isAdmin && !blurb.editing && <div style={{ marginTop: 8 }}><PdpEditBtn onClick={blurb.startEdit} label="EDIT DESCRIPTION" /></div>}
            </div>

            <div className="row gap-16 items-center">
              <Stars n={5} size={14} />
              <span className="mono" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.08em", color: "var(--fg-muted)" }}>
                4.9 · 1,284 REVIEWS
              </span>
            </div>

            <hr className="hr" />

            {/* Size selector */}
            <div className="col gap-12">
              <div className="row justify-between items-center">
                <span className="mono" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                  <span className="km-sans" style={{ fontSize: "var(--text-xs)", letterSpacing: 0, textTransform: "none" }}>ទំហំឈុត</span> · Pack size
                </span>
                <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)" }}>{PRODUCT.sizes.length} OPTIONS</span>
              </div>
              <div className="col gap-8">
                {PRODUCT.sizes.map(s => {
                  const stock = getStock(s.id);
                  const oos   = stock === 0;
                  const low   = stock !== null && stock > 0 && stock <= 5;
                  return (
                    <button
                      key={s.id}
                      className={"swatch" + (sizeId === s.id ? " is-on" : "") + (oos ? " is-disabled" : "")}
                      onClick={() => !oos && setSizeId(s.id)}
                      disabled={oos}
                      style={{ opacity: oos ? 0.5 : 1, cursor: oos ? "not-allowed" : "pointer" }}
                    >
                      <div className="row justify-between items-center gap-16">
                        <div className="col gap-6" style={{ minWidth: 0 }}>
                          <div className="col gap-1">
                            {s.labelKh && <span className="km-sans" style={{ fontSize: 14, lineHeight: 1.3, color: "var(--fg-muted)" }}>{s.labelKh}</span>}
                            <span className="serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{s.label}</span>
                          </div>
                          <div className="col gap-0">
                            {s.descKh && <span className="km-sans text-muted" style={{ fontSize: 12 }}>{s.descKh}</span>}
                            <span className="text-muted" style={{ fontSize: 13 }}>{s.desc}</span>
                          </div>
                          <div className="row gap-6 items-center flex-wrap" style={{ marginTop: 2 }}>
                            {s.popular && !oos && <span className="chip mono" style={{ fontSize: "var(--text-2xs)", padding: "3px 8px" }}>POPULAR</span>}
                            {s.save    && !oos && <span className="chip mono" style={{ fontSize: "var(--text-2xs)", padding: "3px 8px", color: "var(--accent)", borderColor: "var(--accent)" }}>{s.save.toUpperCase()}</span>}
                            {oos && <span className="chip mono" style={{ fontSize: "var(--text-2xs)", padding: "3px 8px", color: "var(--fg-muted)", borderColor: "var(--line-strong)" }}>OUT OF STOCK</span>}
                            {low && <span className="chip mono" style={{ fontSize: "var(--text-2xs)", padding: "3px 8px", color: "#d97706", borderColor: "#d97706" }}>ONLY {stock} LEFT</span>}
                          </div>
                        </div>
                        <span className="serif" style={{ fontSize: 24, flexShrink: 0 }}>${s.price}</span>
                      </div>
                    </button>
                  );
                })}

                {/* Qty + add — inside gap-8 so it matches card spacing */}
                <div className="row gap-12 items-center flex-wrap">
              <Stepper
                value={qty}
                onChange={setQty}
                max={selectedStock !== null ? Math.max(1, selectedStock) : 99}
              />
              <button
                type="button"
                className="btn btn-primary btn-lg flex-1"
                style={{ minWidth: 220 }}
                onClick={() => !isOutOfStock && onAddToCart({ productId: PRODUCT.id, sizeId, qty })}
                disabled={isOutOfStock}
              >
                {isOutOfStock
                  ? <><span className="km-sans">អស់ស្តុក</span> · Out of stock</>
                  : <><span className="km-sans">បន្ថែមទៅកន្ត្រក</span> · Add to cart · ${total}<Icon name="arrow-right" size={16} /></>
                }
              </button>
                </div>
              </div>
            </div>
            {selectedStock !== null && selectedStock > 0 && selectedStock <= 10 && (
              <span className="mono" style={{ fontSize: "var(--text-2xs)", color: "#d97706", letterSpacing: "0.06em" }}>
                <span aria-hidden="true">⚠ </span>មានតែ {selectedStock} ដបទៀត · Only {selectedStock} left in stock
              </span>
            )}

            {/* Trust strip */}
            {isAdmin && trust.editing && (
              <PdpEditPanel label="EDIT TRUST STRIP" saving={trust.saving} onSave={trust.handleSave} onCancel={trust.cancelEdit}>
                <span style={PDP_LABEL}>SHIPPING — KHMER</span>
                <textarea aria-label="Shipping Khmer" style={PDP_TA} rows={2} value={trust.draft.item0kh || ""} onChange={e => trust.setField("item0kh", e.target.value)} />
                <span style={PDP_LABEL}>SHIPPING — ENGLISH</span>
                <textarea aria-label="Shipping English" style={PDP_TA} rows={1} value={trust.draft.item0t || ""} onChange={e => trust.setField("item0t", e.target.value)} />
              </PdpEditPanel>
            )}
            <div className="row gap-12 flex-wrap" style={{ marginTop: 4 }}>
              {[
                { i: "truck",  kh: trust.text.item0kh, t: trust.text.item0t },
              ].filter(x => x.kh || x.t).map((x, i) => (
                <div key={i} className="row gap-8 items-center" style={{ color: "var(--fg-muted)", fontSize: 13 }}>
                  <Icon name={x.i} size={15} />
                  <span><span className="km-sans" style={{ color: "var(--fg)", marginRight: 4 }}>{x.kh}</span>{x.t}</span>
                </div>
              ))}
            </div>
            {isAdmin && !trust.editing && <PdpEditBtn onClick={trust.startEdit} label="EDIT TRUST" />}

          </div>
        </div>

        {/* Deep content tabs */}
        <div className="pdp-tabs-wrap">
          <div role="tablist" aria-label="Product information" className="row gap-8" style={{ borderBottom: "1px solid var(--line)", overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
            {[
              ["how",      "វិធីប្រើ",            "How to apply"],
              ["safety",   "សុវត្ថិភាព",           "Safety & storage"],
              ["spec",     "លក្ខណៈបច្ចេកទេស",     "Spec sheet"],
              ["overview", "អ្វីដែលមាននៅក្នុង", "What's in the box"],
            ].map(([k, kh, l]) => (
              <button
                key={k}
                role="tab"
                aria-selected={tab === k}
                aria-controls={"pdp-tabpanel-" + k}
                onClick={() => setTab(k)}
                style={{
                  position: "relative",
                  background: "transparent", border: 0, cursor: "pointer", font: "inherit",
                  padding: "14px 18px", color: tab === k ? "var(--fg)" : "var(--fg-muted)",
                  fontSize: "var(--text-sm)", display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
                  flexShrink: 0, whiteSpace: "nowrap"
                }}
              >
                <span className="km-sans" style={{ fontSize: "var(--text-xs)" }}>{kh}</span>
                <span style={{ fontSize: "var(--text-2xs)", fontFamily: "var(--font-mono)", letterSpacing: "0.05em", opacity: 0.7 }}>{l}</span>
                <span style={{
                  position: "absolute", bottom: 0, left: 0, right: 0, height: 2,
                  background: tab === k ? "var(--accent)" : "transparent"
                }} />
              </button>
            ))}
          </div>
          <div key={tab} id={"pdp-tabpanel-" + tab} role="tabpanel" style={{ padding: "32px 0", maxWidth: 720, animation: "ks-fade-in 180ms ease" }}>
            {tab === "overview" && (
              <div className="col gap-12">
                {isAdmin && overview.editing && (
                  <PdpEditPanel label="EDIT — WHAT'S IN THE BOX" saving={overview.saving} onSave={overview.handleSave} onCancel={overview.cancelEdit}>
                    {Array.from({ length: overview.draft.count || 0 }, (_, i) => String(i + 1)).map(n => (
                      <React.Fragment key={n}>
                        <span style={PDP_LABEL}>ITEM {n} — KHMER</span>
                        <RichEditor isKh value={overview.draft[`s${n}kh`] || ""} onChange={v => overview.setField(`s${n}kh`, v)} />
                        <span style={PDP_LABEL}>ITEM {n} — ENGLISH</span>
                        <RichEditor value={overview.draft[`s${n}t`] || ""} onChange={v => overview.setField(`s${n}t`, v)} />
                      </React.Fragment>
                    ))}
                    <div className="row gap-8" style={{ marginTop: 4 }}>
                      <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }}
                        onClick={() => overview.setField("count", (overview.draft.count || 0) + 1)}>
                        + Add item
                      </button>
                      {(overview.draft.count || 0) > 0 && (
                        <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px", color: "var(--fg-muted)" }}
                          onClick={() => overview.setField("count", (overview.draft.count || 0) - 1)}>
                          Remove last
                        </button>
                      )}
                    </div>
                  </PdpEditPanel>
                )}
                {Array.from({ length: overview.text.count || 0 }, (_, i) => i + 1).map(idx => {
                  const n = String(idx).padStart(2, "0");
                  return (
                    <div key={n} className="row gap-16 items-start" style={{ padding: "14px 0", borderBottom: "1px solid var(--line)" }}>
                      <span className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{n}</span>
                      <div className="col gap-4">
                        <div className="km-sans pdp-rich" style={{ color: "var(--fg)" }} dangerouslySetInnerHTML={renderRich(overview.text[`s${idx}kh`])} />
                        <div className="pdp-rich text-muted" dangerouslySetInnerHTML={renderRich(overview.text[`s${idx}t`])} />
                      </div>
                    </div>
                  );
                })}
                {isAdmin && !overview.editing && <PdpEditBtn onClick={overview.startEdit} label="EDIT WHAT'S IN THE BOX" />}
              </div>
            )}
            {tab === "how" && (
              <div className="col gap-12">
                {isAdmin && steps.editing && (
                  <PdpEditPanel label="EDIT HOW TO APPLY" saving={steps.saving} onSave={steps.handleSave} onCancel={steps.cancelEdit}>
                    {Array.from({ length: steps.draft.count || 4 }, (_, i) => String(i + 1)).map(n => (
                      <React.Fragment key={n}>
                        <span style={PDP_LABEL}>STEP {n} — KHMER</span>
                        <RichEditor isKh value={steps.draft[`s${n}kh`] || ""} onChange={v => steps.setField(`s${n}kh`, v)} />
                        <span style={PDP_LABEL}>STEP {n} — ENGLISH</span>
                        <RichEditor value={steps.draft[`s${n}t`] || ""} onChange={v => steps.setField(`s${n}t`, v)} />
                      </React.Fragment>
                    ))}
                    <div className="row gap-8" style={{ marginTop: 4 }}>
                      <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }}
                        onClick={() => steps.setField("count", (steps.draft.count || 4) + 1)}>
                        + Add step
                      </button>
                      {(steps.draft.count || 4) > 1 && (
                        <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px", color: "var(--fg-muted)" }}
                          onClick={() => steps.setField("count", (steps.draft.count || 4) - 1)}>
                          Remove last
                        </button>
                      )}
                    </div>
                  </PdpEditPanel>
                )}
                {Array.from({ length: steps.text.count || 4 }, (_, i) => i + 1).map(idx => {
                  const n = String(idx).padStart(2, "0");
                  return (
                    <div key={n} className="row gap-16 items-start" style={{ padding: "14px 0", borderBottom: "1px solid var(--line)" }}>
                      <span className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{n}</span>
                      <div className="col gap-4">
                        <div className="km-sans pdp-rich" style={{ color: "var(--fg)" }} dangerouslySetInnerHTML={renderRich(steps.text[`s${idx}kh`])} />
                        <div className="pdp-rich text-muted" dangerouslySetInnerHTML={renderRich(steps.text[`s${idx}t`])} />
                      </div>
                    </div>
                  );
                })}
                {isAdmin && !steps.editing && <PdpEditBtn onClick={steps.startEdit} label="EDIT STEPS" />}
              </div>
            )}
            {tab === "safety" && (
              <div className="col gap-12">
                {isAdmin && safety.editing && (
                  <PdpEditPanel label="EDIT — SAFETY & STORAGE" saving={safety.saving} onSave={safety.handleSave} onCancel={safety.cancelEdit}>
                    {Array.from({ length: safety.draft.count || 2 }, (_, i) => String(i + 1)).map(n => (
                      <React.Fragment key={n}>
                        <span style={PDP_LABEL}>ITEM {n} — KHMER</span>
                        <RichEditor isKh value={safety.draft[`s${n}kh`] || ""} onChange={v => safety.setField(`s${n}kh`, v)} />
                        <span style={PDP_LABEL}>ITEM {n} — ENGLISH</span>
                        <RichEditor value={safety.draft[`s${n}t`] || ""} onChange={v => safety.setField(`s${n}t`, v)} />
                      </React.Fragment>
                    ))}
                    <div className="row gap-8" style={{ marginTop: 4 }}>
                      <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }}
                        onClick={() => safety.setField("count", (safety.draft.count || 2) + 1)}>
                        + Add item
                      </button>
                      {(safety.draft.count || 2) > 1 && (
                        <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px", color: "var(--fg-muted)" }}
                          onClick={() => safety.setField("count", (safety.draft.count || 2) - 1)}>
                          Remove last
                        </button>
                      )}
                    </div>
                  </PdpEditPanel>
                )}
                {Array.from({ length: safety.text.count || 2 }, (_, i) => i + 1).map(idx => {
                  const n = String(idx).padStart(2, "0");
                  return (
                    <div key={n} className="row gap-16 items-start" style={{ padding: "14px 0", borderBottom: "1px solid var(--line)" }}>
                      <span className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{n}</span>
                      <div className="col gap-4">
                        <div className="km-sans pdp-rich" style={{ color: "var(--fg)" }} dangerouslySetInnerHTML={renderRich(safety.text[`s${idx}kh`])} />
                        <div className="pdp-rich text-muted" dangerouslySetInnerHTML={renderRich(safety.text[`s${idx}t`])} />
                      </div>
                    </div>
                  );
                })}
                {isAdmin && !safety.editing && <PdpEditBtn onClick={safety.startEdit} label="EDIT SAFETY" />}
              </div>
            )}
            {tab === "spec" && (
              <div className="col gap-12">
                {isAdmin && spec.editing && (
                  <PdpEditPanel label="EDIT — SPEC SHEET" saving={spec.saving} onSave={spec.handleSave} onCancel={spec.cancelEdit}>
                    {Array.from({ length: spec.draft.count || 0 }, (_, i) => String(i + 1)).map(n => (
                      <React.Fragment key={n}>
                        <span style={PDP_LABEL}>ITEM {n} — KHMER</span>
                        <RichEditor isKh value={spec.draft[`s${n}kh`] || ""} onChange={v => spec.setField(`s${n}kh`, v)} />
                        <span style={PDP_LABEL}>ITEM {n} — ENGLISH</span>
                        <RichEditor value={spec.draft[`s${n}t`] || ""} onChange={v => spec.setField(`s${n}t`, v)} />
                      </React.Fragment>
                    ))}
                    <div className="row gap-8" style={{ marginTop: 4 }}>
                      <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }}
                        onClick={() => spec.setField("count", (spec.draft.count || 0) + 1)}>
                        + Add item
                      </button>
                      {(spec.draft.count || 0) > 0 && (
                        <button type="button" className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px", color: "var(--fg-muted)" }}
                          onClick={() => spec.setField("count", (spec.draft.count || 0) - 1)}>
                          Remove last
                        </button>
                      )}
                    </div>
                  </PdpEditPanel>
                )}
                {Array.from({ length: spec.text.count || 0 }, (_, i) => i + 1).map(idx => {
                  const n = String(idx).padStart(2, "0");
                  return (
                    <div key={n} className="row gap-16 items-start" style={{ padding: "14px 0", borderBottom: "1px solid var(--line)" }}>
                      <span className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{n}</span>
                      <div className="col gap-4">
                        <div className="km-sans pdp-rich" style={{ color: "var(--fg)" }} dangerouslySetInnerHTML={renderRich(spec.text[`s${idx}kh`])} />
                        <div className="pdp-rich text-muted" dangerouslySetInnerHTML={renderRich(spec.text[`s${idx}t`])} />
                      </div>
                    </div>
                  );
                })}
                {isAdmin && !spec.editing && <PdpEditBtn onClick={spec.startEdit} label="EDIT SPEC SHEET" />}
              </div>
            )}
          </div>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { PDP });