// ─── ReviewsSection ───────────────────────────────────────────
function ReviewsSection({ productId }) {
  const REVIEWS_KEY = "n9_reviews_" + productId;
  const [reviews, setReviews] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(REVIEWS_KEY) || "[]"); } catch(e) { return []; }
  });
  const [name, setName] = React.useState("");
  const [text, setText] = React.useState("");
  const [imgPreview, setImgPreview] = React.useState(null);
  const [expanded, setExpanded] = React.useState(null);

  const handleImg = e => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      const dataUrl = ev.target.result;
      const canvas = document.createElement("canvas");
      const img = document.createElement("img");
      img.onload = () => {
        const max = 900;
        let w = img.naturalWidth, h = img.naturalHeight;
        if (w > max || h > max) {
          if (w > h) { h = Math.round(h * max / w); w = max; }
          else { w = Math.round(w * max / h); h = max; }
        }
        canvas.width = w; canvas.height = h;
        canvas.getContext("2d").drawImage(img, 0, 0, w, h);
        setImgPreview(canvas.toDataURL("image/jpeg", 0.82));
      };
      img.src = dataUrl;
    };
    reader.readAsDataURL(file);
  };

  const submit = () => {
    if (!name.trim() || !text.trim()) return;
    const review = {
      id: Date.now().toString(36),
      name: name.trim(),
      text: text.trim(),
      img: imgPreview,
      date: new Date().toLocaleDateString("mn-MN"),
    };
    const next = [review, ...reviews];
    setReviews(next);
    try { localStorage.setItem(REVIEWS_KEY, JSON.stringify(next)); } catch(e) {}
    setName(""); setText(""); setImgPreview(null);
  };

  return (
    <div style={{ marginTop: 80, paddingTop: 64, borderTop: "1px solid #F2F1F3" }}>
      <div style={{ marginBottom: 32 }}>
        <span style={prStyles.cat}>/ СЭТГЭГДЭЛ /</span>
        <h2 style={{ margin: "8px 0 0", fontFamily: "Inter, sans-serif", fontWeight: 900, fontSize: 42, lineHeight: 0.95, letterSpacing: "-0.035em", textTransform: "uppercase", color: "#0E0D11" }}>
          ХЭРЭГЛЭГЧДИЙН<br/>СЭТГЭГДЭЛ
        </h2>
        {reviews.length > 0 && (
          <div style={{ marginTop: 12, fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.15em", color: "#8A8990" }}>
            {reviews.length} СЭТГЭГДЭЛ
          </div>
        )}
      </div>

      {/* Write a review */}
      <div style={{ background: "#FAFAFB", border: "1px solid #E8E7E9", borderRadius: 20, padding: "28px 28px 24px", marginBottom: 36 }}>
        <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#8A8990", marginBottom: 20 }}>
          Сэтгэгдэл бичих
        </div>
        <input
          value={name}
          onChange={e => setName(e.target.value)}
          placeholder="Таны нэр"
          style={{ width: "100%", border: "1px solid #E8E7E9", borderRadius: 12, padding: "12px 14px", fontFamily: "Inter, sans-serif", fontSize: 14, background: "#fff", outline: "none", color: "#0E0D11", boxSizing: "border-box", marginBottom: 12 }}
        />
        <textarea
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder="Барааны талаар сэтгэгдэлээ бичнэ үү..."
          rows={3}
          style={{ width: "100%", border: "1px solid #E8E7E9", borderRadius: 12, padding: "12px 14px", fontFamily: "Inter, sans-serif", fontSize: 14, background: "#fff", outline: "none", color: "#0E0D11", resize: "vertical", boxSizing: "border-box", lineHeight: 1.6 }}
        />
        <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <label style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "#fff", border: "1px solid #E8E7E9", borderRadius: 10, padding: "9px 14px", cursor: "pointer", fontFamily: "Inter, sans-serif", fontSize: 13, color: "#4A4852", flexShrink: 0 }}>
            <span style={{ fontSize: 15 }}>◎</span> Зураг нэмэх
            <input type="file" accept="image/*" style={{ display: "none" }} onChange={handleImg} />
          </label>
          {imgPreview && (
            <div style={{ position: "relative", flexShrink: 0 }}>
              <img src={imgPreview} style={{ width: 64, height: 64, borderRadius: 10, objectFit: "cover", border: "1px solid #E8E7E9", display: "block" }} />
              <button onClick={() => setImgPreview(null)} style={{ position: "absolute", top: -6, right: -6, width: 18, height: 18, borderRadius: 999, background: "#0E0D11", color: "#fff", border: "none", cursor: "pointer", fontSize: 10, lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
            </div>
          )}
          <button onClick={submit} style={{ marginLeft: "auto", background: "#1F1D23", color: "#fff", border: "none", borderRadius: 12, padding: "11px 28px", fontFamily: "Inter, sans-serif", fontWeight: 600, fontSize: 14, cursor: "pointer" }}>
            Илгээх
          </button>
        </div>
      </div>

      {/* Reviews list */}
      {reviews.length === 0 ? (
        <div style={{ textAlign: "center", padding: "48px 24px", background: "#FAFAFB", borderRadius: 20, border: "1px solid #F2F1F3" }}>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 28, color: "#E8E7E9", marginBottom: 14 }}>◎</div>
          <div style={{ fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 16, color: "#0E0D11", marginBottom: 6 }}>Одоохондоо сэтгэгдэл байхгүй</div>
          <div style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: "#8A8990" }}>Та эхлэгч болж сэтгэгдэл үлдээгээрэй.</div>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {reviews.map(r => (
            <div key={r.id} style={{ background: "#fff", border: "1px solid #E8E7E9", borderRadius: 16, padding: "20px 22px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 999, background: "#0E0D11", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 13, color: "#fff", flexShrink: 0 }}>
                    {r.name[0].toUpperCase()}
                  </div>
                  <span style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, fontSize: 15, color: "#0E0D11" }}>{r.name}</span>
                </div>
                <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.1em", color: "#C9C8CE" }}>{r.date}</span>
              </div>
              <p style={{ margin: "0 0 0", fontFamily: "Inter, sans-serif", fontSize: 14, color: "#4A4852", lineHeight: 1.65 }}>{r.text}</p>
              {r.img && (
                <div style={{ marginTop: 14 }}>
                  <img
                    src={r.img}
                    onClick={() => setExpanded(expanded === r.id ? null : r.id)}
                    style={{ maxWidth: expanded === r.id ? "100%" : 200, borderRadius: 12, display: "block", border: "1px solid #E8E7E9", cursor: "pointer", transition: "max-width 0.2s" }}
                    loading="lazy" decoding="async"
                  />
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Product detail — gallery, variants, add to cart
function Product({ p, onBack, onAdd, related, onOpen }) {
  const [color, setColor] = React.useState(p.colors[0]);
  const [qty, setQty] = React.useState(1);
  const imgs = (p.imgs && p.imgs.length) ? p.imgs : (p.img ? [p.img] : []);
  const [imgIdx, setImgIdx] = React.useState(0);
  const activeImg = imgs[imgIdx] || null;

  return (
    <section style={prStyles.wrap}>
      <div style={prStyles.crumb}>
        <a onClick={onBack} style={prStyles.crumbLink}>← Shop</a>
        <span style={prStyles.crumbSep}>/</span>
        <span>{p.cat}</span>
        <span style={prStyles.crumbSep}>/</span>
        <span style={{ color:"#0E0D11"}}>{p.name}</span>
      </div>

      <div style={prStyles.row} className="pr-row">
        <div style={prStyles.gallery}>
          <div style={{...prStyles.hero, background: activeImg ? "#FAFAFB" : p.palette[0]}}>
            {p.sale && <span style={prStyles.sale}>−{p.sale}%</span>}
            {p.badge && <span style={prStyles.badge}>{p.badge}</span>}
            {activeImg
              ? <img src={activeImg} style={{ width: "80%", height: "80%", objectFit: "contain" }} decoding="async" width="560" height="560" />
              : <img src={p.id.startsWith("ipn") || p.id.startsWith("ips") ? "assets/icon-ipod.svg" : "assets/chrome-orb.svg"} style={prStyles.heroImg} decoding="async" width="280" height="280" />
            }
            {imgs.length > 1 && (
              <>
                <button onClick={() => setImgIdx(i => (i - 1 + imgs.length) % imgs.length)} style={{ position:"absolute", left:12, top:"50%", transform:"translateY(-50%)", width:36, height:36, borderRadius:999, background:"rgba(255,255,255,0.9)", border:"none", cursor:"pointer", fontSize:16, display:"flex", alignItems:"center", justifyContent:"center" }}>‹</button>
                <button onClick={() => setImgIdx(i => (i + 1) % imgs.length)} style={{ position:"absolute", right:12, top:"50%", transform:"translateY(-50%)", width:36, height:36, borderRadius:999, background:"rgba(255,255,255,0.9)", border:"none", cursor:"pointer", fontSize:16, display:"flex", alignItems:"center", justifyContent:"center" }}>›</button>
              </>
            )}
          </div>
          {imgs.length > 1 && (
            <div style={{ display:"flex", gap:8, marginTop:10, overflowX:"auto", paddingBottom:4 }}>
              {imgs.map((src, i) => (
                <div key={i} onClick={() => setImgIdx(i)} style={{ width:72, height:72, flexShrink:0, borderRadius:10, border: i === imgIdx ? "2px solid #0E0D11" : "1px solid #E8E7E9", overflow:"hidden", cursor:"pointer", background:"#FAFAFB" }}>
                  <img src={src} style={{ width:"100%", height:"100%", objectFit:"cover" }} loading="lazy" decoding="async" width="72" height="72" />
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={prStyles.col}>
          <span style={prStyles.cat}>{p.cat.toUpperCase()} · {p.id.toUpperCase()}</span>
          <h1 style={prStyles.name} className="pr-name">{p.name}</h1>
          <p style={prStyles.tagline}>{p.tagline}</p>

          <div style={{ display:"flex", gap:4, marginTop:20 }}>
            {[1,2,3,4,5].map(i => (
              <svg key={i} width="22" height="22" viewBox="0 0 24 24" fill="#FFEC42">
                <path d="M12 2l2.582 5.232L21 8.236l-4.5 4.385 1.062 6.191L12 15.9l-5.562 2.912 1.062-6.191L3 8.236l6.418-.004z"/>
              </svg>
            ))}
          </div>
          <div style={prStyles.priceRow}>
            <span style={prStyles.price}>₮ {p.price.toLocaleString()}</span>
            {p.was && <span style={prStyles.was}>₮ {p.was.toLocaleString()}</span>}
          </div>

          {p.desc && (
            <div style={prStyles.desc}>
              {p.desc}
            </div>
          )}

          <div style={prStyles.sect}>
            <span style={prStyles.lbl}>Color · {color}</span>
            <div style={prStyles.swRow}>
              {p.colors.map((c,i) => (
                <button key={c} onClick={() => setColor(c)}
                  style={{...prStyles.sw, background: p.palette[i], outline: c===color ? "2px solid #0E0D11" : "1px solid rgba(0,0,0,0.08)", outlineOffset: c===color ? 2 : 0 }}>
                </button>
              ))}
            </div>
          </div>

          <div style={prStyles.sect}>
            <span style={prStyles.lbl}>ШИРХЭГ</span>
            <div style={prStyles.qty}>
              <button onClick={() => setQty(Math.max(1,qty-1))} style={prStyles.qtyBtn}>−</button>
              <span style={prStyles.qtyVal}>{qty}</span>
              <button onClick={() => setQty(qty+1)} style={prStyles.qtyBtn}>+</button>
              <span style={prStyles.stockTag}>13Ш ҮЛДСЭН</span>
            </div>
          </div>

          {/* Delivery type */}
          <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid #F2F1F3" }}>
            <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#8A8990" }}>
              Хүргэлтийн төрөл
            </span>
            <div style={{ marginTop: 12, display: "flex", alignItems: "flex-start", gap: 14, background: "#F7F7F9", border: "2px solid #0E0D11", borderRadius: 14, padding: "16px 18px" }}>
              <div style={{ width: 22, height: 22, borderRadius: 999, border: "2px solid #0E0D11", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}>
                <div style={{ width: 11, height: 11, borderRadius: 999, background: "#0E0D11" }} />
              </div>
              <div>
                <div style={{ fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 14, color: "#0E0D11", letterSpacing: "-0.01em" }}>Хүргэлтээр авах</div>
                <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "#4A4852", marginTop: 3, lineHeight: 1.45 }}>Таны хаяг руу хүргэнэ</div>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 10, background: "#FFEC42", color: "#0E0D11", fontFamily: "JetBrains Mono, monospace", fontSize: 9, letterSpacing: "0.14em", padding: "5px 11px", borderRadius: 999, fontWeight: 700 }}>
                  ✦ ҮНЭГҮЙ ХҮРГЭЛТ
                </span>
              </div>
            </div>
          </div>

          <div style={prStyles.ctaRow}>
            <button onClick={() => onAdd(p, color, qty)} style={prStyles.cta}>
              ЗАХИАЛАХ <Ic.Arrow size={14}/>
            </button>
            <button style={prStyles.wishBtn}><Ic.Heart/></button>
          </div>

        </div>
      </div>

      <div style={prStyles.relSect}>
        <div style={prStyles.relHead}>
          <span style={prStyles.cat}>ТАНД ТААЛАГДАЖ МАГАДГҮЙ</span>
          <h2 style={prStyles.relTitle}>ДУУСАХААС НЬ ӨМНӨ АВ.</h2>
        </div>
        <div style={prStyles.relGrid} className="rel-grid">
          {related.slice(0,4).map(r => <ProductCard key={r.id} p={r} onOpen={onOpen}/>)}
        </div>
      </div>

      <ReviewsSection productId={p.id} />
    </section>
  );
}

const prStyles = {
  wrap: { maxWidth:1280, margin:"0 auto", padding:"24px 24px 80px" },
  crumb: { display:"flex", gap:8, alignItems:"center", fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"#8A8990", marginBottom:24 },
  crumbLink: { color:"#0E0D11", cursor:"pointer", textDecoration:"none" },
  crumbSep: { opacity:0.4 },
  row: { display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:48 },
  gallery: { display:"flex", flexDirection:"column", gap:12 },
  hero: { position:"relative", aspectRatio:"1/1", borderRadius:18, display:"flex", alignItems:"center", justifyContent:"center", overflow:"hidden" },
  heroImg: { width:"55%", height:"55%", objectFit:"contain" },
  sale: { position:"absolute", top:16, left:16, background:"#FF6A30", color:"#fff", padding:"6px 12px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.15em", fontWeight:700 },
  badge: { position:"absolute", top:16, left:16, background:"#0E0D11", color:"#fff", padding:"6px 12px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.15em", fontWeight:700 },
  thumbs: { display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:10 },
  thumb: { aspectRatio:"1/1", borderRadius:10, border:"1px solid #E8E7E9" },
  col: { display:"flex", flexDirection:"column" },
  cat: { fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"#8A8990" },
  name: { margin:"8px 0 12px", fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:56, lineHeight:0.95, letterSpacing:"-0.035em", textTransform:"uppercase", color:"#0E0D11" },
  tagline: { margin:0, fontFamily:"Inter, sans-serif", fontSize:18, color:"#4A4852", lineHeight:1.45 },
  desc: { marginTop:18, padding:"18px 20px", background:"#FAFAFB", border:"1px solid #F2F1F3", borderRadius:14, fontFamily:"Inter, sans-serif", fontSize:14, color:"#4A4852", lineHeight:1.7 },
  priceRow: { display:"flex", gap:10, alignItems:"baseline", marginTop:20 },
  price: { fontFamily:"Inter, sans-serif", fontWeight:800, fontSize:32, color:"#0E0D11", letterSpacing:"-0.02em" },
  was: { fontFamily:"Inter, sans-serif", fontSize:18, color:"#8A8990", textDecoration:"line-through" },
  sect: { marginTop:24, paddingTop:20, borderTop:"1px solid #F2F1F3" },
  lbl: { fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"#0E0D11" },
  swRow: { display:"flex", gap:10, marginTop:12 },
  sw: { width:36, height:36, borderRadius:999, border:"none", cursor:"pointer", padding:0 },
  qty: { display:"flex", alignItems:"center", gap:0, marginTop:12, border:"1px solid #E8E7E9", borderRadius:12, width:"max-content" },
  qtyBtn: { width:44, height:44, background:"transparent", border:"none", fontSize:18, color:"#0E0D11", cursor:"pointer" },
  qtyVal: { width:44, textAlign:"center", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:15, color:"#0E0D11" },
  stockTag: { marginLeft:14, background:"#FFEC42", color:"#0E0D11", padding:"6px 10px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", fontWeight:700 },
  ctaRow: { display:"flex", gap:10, marginTop:24 },
  cta: { flex:1, background:"#1F1D23", color:"#fff", border:"none", padding:"18px 22px", borderRadius:14, fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:15, display:"inline-flex", alignItems:"center", justifyContent:"center", gap:10, cursor:"pointer" },
  wishBtn: { width:58, height:58, border:"1px solid #E8E7E9", borderRadius:14, background:"#fff", color:"#0E0D11", display:"inline-flex", alignItems:"center", justifyContent:"center", cursor:"pointer" },
  notes: { marginTop:24, paddingTop:20, borderTop:"1px solid #F2F1F3", display:"flex", flexDirection:"column", gap:10 },
  note: { display:"flex", alignItems:"center", gap:10, fontFamily:"Inter, sans-serif", fontSize:14, color:"#4A4852" },
  relSect: { marginTop:80 },
  relHead: { marginBottom:18 },
  relTitle: { margin:"6px 0 0", fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:48, lineHeight:0.95, letterSpacing:"-0.035em", textTransform:"uppercase", color:"#0E0D11" },
  relGrid: { display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:18 },
};

window.Product = Product;