// Product Detail Page — redesigned as a conventional luxury product page.
// Layout:
//   1) Breadcrumb + prev/next strip
//   2) Two-column main: vertical thumbnail rail + large image  |  sticky info panel
//   3) Editorial story section (heroTitle as oversized kicker + longDesc paragraphs)
//   4) Highlight strip (top specs as icon cards)
//   5) Full specs table (single column, clean rows)
//   6) Related products carousel ("המשך לחקור")
//   7) Bottom CTA panel

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

const ProductPage = ({ device = "desktop", lang = "he", accent = "green", productId = 0 }) => {
  const c = window.SITE_CONTENT[lang];
  const isMobile = device === "mobile";
  const isHe = lang === "he";

  const products = c.products;
  const idx = Math.max(0, Math.min(productId, products.length - 1));
  const product = products[idx];
  const prevIdx = (idx - 1 + products.length) % products.length;
  const nextIdx = (idx + 1) % products.length;

  const accentMap = { green: "#1f5d3a", gold: "#a78232", rose: "#a87968", silver: "#7a7e85" };
  const accentColor = accentMap[accent] || accentMap.gold;

  const wrapperStyle = {
    "--bg":   "var(--laad-ivory)",
    "--bg-2": "var(--laad-pearl)",
    "--bg-3": "var(--laad-mist)",
    "--ink":  "var(--laad-ink)",
    "--ink-2":"var(--laad-ink-2)",
    "--ink-3":"var(--laad-ink-3)",
    "--rule": "var(--laad-rule)",
    "--accent": accentColor,
    direction: c.dir,
    fontFamily: "'Heebo','Frank Ruhl Libre',Georgia,serif",
    background: "#fff",
    color: "var(--ink)",
    width: "100%",
    minHeight: "100%",
    overflowX: "hidden",
    WebkitFontSmoothing: "antialiased",
  };

  const gallery = useMemoP(() => [
    product.img,
    product.extraImg || "https://res.cloudinary.com/dzney3ngo/image/upload/q_auto/f_auto/v1776525862/%D7%A4%D7%A0%D7%99%D7%9D_%D7%AA%D7%99%D7%A7_%D7%9B%D7%97%D7%95%D7%9C_%D7%A8%D7%90%D7%A9_%D7%9E%D7%A8%D7%95%D7%91%D7%A2_sqmncg.png",
  ], [product.img, product.extraImg]);

  const [navOpen, setNavOpen] = useStateP(false);
  const [activeImg, setActiveImg] = useStateP(0);

  useEffectP(() => { setActiveImg(0); }, [idx]);
  useEffectP(() => { window.scrollTo(0, 0); }, [idx]);

  const goTo = (i) => {
    if (typeof window !== "undefined") window.location.hash = `#/product/${i}`;
  };

  const specEntries = Object.entries(product.specs || {});
  const highlightSpecs = specEntries.slice(0, 4);

  // Related: same family if available, else next 3 in catalogue.
  const related = useMemoP(() => {
    const sameFamily = products.filter((p, i) => i !== idx && p.family === product.family);
    const pool = sameFamily.length >= 3 ? sameFamily : products.filter((_, i) => i !== idx);
    return pool.slice(0, isMobile ? 3 : 4);
  }, [idx, products, product.family, isMobile]);

  const longParagraphs = (product.longDesc || product.desc || "").split(/\n\s*\n/);

  const startEdge = isHe ? "right" : "left";
  const endEdge   = isHe ? "left"  : "right";

  return (
    <div className={`laad-pdp laad-${device}`} style={wrapperStyle} dir={c.dir} lang={c.lang}>
      <window.LaadSite_TopBar c={c} lang={lang} isMobile={isMobile}
                              navOpen={navOpen} setNavOpen={setNavOpen} alwaysSolid={true} />
      <div aria-hidden="true" style={{ height: isMobile ? 64 : 76 }} />
      {isMobile && navOpen && (
        <window.LaadSite_MobileMenu c={c} lang={lang} onClose={() => setNavOpen(false)} />
      )}

      {/* ── 1) BREADCRUMB + PREV/NEXT STRIP ────────────────── */}
      <section style={{
        background: "var(--bg-2)",
        borderBottom: "1px solid var(--rule)",
        padding: isMobile ? "14px 20px" : "18px 56px",
      }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16,
          fontFamily: "'Heebo',sans-serif", fontSize: 13,
        }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-3)", flexWrap: "wrap" }}>
            <a href="#/" style={{ color: "var(--ink-3)", textDecoration: "none" }}>{isHe ? "בית" : "Home"}</a>
            <span aria-hidden style={{ opacity: 0.5 }}>{isHe ? "‹" : "›"}</span>
            <a href="#/#collection" style={{ color: "var(--ink-3)", textDecoration: "none" }}>{isHe ? "הקולקציה" : "Collection"}</a>
            {product.family && <>
              <span aria-hidden style={{ opacity: 0.5 }}>{isHe ? "‹" : "›"}</span>
              <span style={{ color: "var(--ink-3)" }}>{product.family}</span>
            </>}
            <span aria-hidden style={{ opacity: 0.5 }}>{isHe ? "‹" : "›"}</span>
            <span style={{ color: "var(--ink)", fontWeight: 500 }}>{product.name}</span>
          </nav>

          {!isMobile && (
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <button onClick={() => goTo(prevIdx)} style={navBtnStyle}>
                <Chevron dir={isHe ? "left" : "right"} />
                <span style={{ fontFamily: "'Heebo',sans-serif", fontSize: 13 }}>
                  {isHe ? "הקודם" : "Previous"}
                </span>
              </button>
              <span aria-hidden style={{ width: 1, height: 18, background: "var(--rule)" }} />
              <button onClick={() => goTo(nextIdx)} style={navBtnStyle}>
                <span style={{ fontFamily: "'Heebo',sans-serif", fontSize: 13 }}>
                  {isHe ? "הבא" : "Next"}
                </span>
                <Chevron dir={isHe ? "right" : "left"} />
              </button>
            </div>
          )}
        </div>
      </section>

      {/* ── 2) MAIN PRODUCT AREA ───────────────────────────── */}
      <section style={{
        background: "var(--bg-2)",
        padding: isMobile ? "24px 20px 40px" : "48px 56px 80px",
      }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.25fr 1fr",
          gap: isMobile ? 32 : 64,
          alignItems: "start",
        }}>
          {/* GALLERY */}
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "72px 1fr",
            gap: 16,
            direction: c.dir,
          }}>
            {/* Vertical thumbnail rail (desktop) / horizontal (mobile) */}
            <div style={{
              display: "flex",
              flexDirection: isMobile ? "row" : "column",
              gap: 10,
              order: isMobile ? 2 : 1,
              flexWrap: isMobile ? "wrap" : "nowrap",
            }}>
              {gallery.map((src, i) => (
                <button key={i} onClick={() => setActiveImg(i)}
                        aria-label={`${isHe ? "תמונה" : "Image"} ${i + 1}`}
                        style={{
                          width: isMobile ? 64 : 72,
                          height: isMobile ? 64 : 72,
                          padding: 0, borderRadius: 8,
                          background: "linear-gradient(135deg, #e5dfd2 0%, #f5f0e6 100%)",
                          border: i === activeImg
                            ? `2px solid var(--accent)`
                            : "1px solid var(--rule)",
                          cursor: "pointer",
                          overflow: "hidden",
                          display: "flex", alignItems: "center", justifyContent: "center",
                          transition: "border-color .2s ease, transform .2s ease",
                          transform: i === activeImg ? "scale(1)" : "scale(0.97)",
                        }}>
                  <img src={src} alt=""
                       style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </button>
              ))}
            </div>

            {/* Main image */}
            <div style={{
              order: isMobile ? 1 : 2,
              position: "relative",
              aspectRatio: isMobile ? "1/1" : "4/5",
              borderRadius: 16,
              overflow: "hidden",
              background: "linear-gradient(160deg, #efe8d8 0%, #f7f1e3 50%, #fbf8f1 100%)",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 18px 40px -18px rgba(26,24,20,0.18)",
            }}>
              {product.tag && (
                <span style={{
                  position: "absolute", top: 16, [startEdge]: 16,
                  background: "var(--accent)", color: "#fff",
                  padding: "6px 14px", borderRadius: 999,
                  fontFamily: "'Heebo',sans-serif", fontSize: 12, fontWeight: 500,
                  letterSpacing: "0.04em",
                }}>{product.tag}</span>
              )}

              <img src={gallery[activeImg]} alt={product.name} key={gallery[activeImg]}
                   style={{
                     width: "100%", height: "100%",
                     objectFit: "cover",
                     filter: "drop-shadow(0 28px 40px rgba(26,24,20,0.22))",
                     animation: "laadFadeIn .35s ease",
                   }} />

              {/* small image counter */}
              <div style={{
                position: "absolute", bottom: 16, [endEdge]: 16,
                background: "rgba(26,24,20,0.55)", color: "#fff",
                padding: "5px 12px", borderRadius: 999,
                fontFamily: "'Heebo',sans-serif", fontSize: 12,
                letterSpacing: "0.04em",
                backdropFilter: "blur(6px)",
              }}>{activeImg + 1} / {gallery.length}</div>
            </div>
          </div>

          {/* INFO PANEL (sticky on desktop) */}
          <aside style={{
            position: isMobile ? "static" : "sticky",
            top: 104,
            display: "flex", flexDirection: "column",
            gap: 22,
          }}>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              fontFamily: "'Heebo',sans-serif", fontSize: 12,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--ink-3)",
            }}>
              {product.family && <span>{product.family}</span>}
              {product.year && <>
                <span aria-hidden style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--ink-3)" }} />
                <span style={{ fontVariantNumeric: "tabular-nums" }}>{product.year}</span>
              </>}
            </div>

            <h1 style={{
              fontFamily: "'Heebo','Frank Ruhl Libre',sans-serif",
              fontSize: isMobile ? "clamp(30px, 8vw, 38px)" : "clamp(36px, 3.6vw, 56px)",
              fontWeight: 700, lineHeight: 1.08, letterSpacing: "-0.02em",
              margin: 0, color: "var(--ink)",
            }}>{product.name}</h1>

            {product.heroTitle && (
              <div style={{
                fontFamily: "'Frank Ruhl Libre','Heebo',serif",
                fontSize: isMobile ? 18 : 20,
                fontStyle: "italic",
                color: "var(--accent)",
                lineHeight: 1.4,
              }}>{product.heroTitle}</div>
            )}

            <p style={{
              fontFamily: "'Heebo',sans-serif",
              fontSize: isMobile ? 15 : 16,
              lineHeight: 1.75,
              color: "var(--ink-2)",
              margin: 0,
              fontWeight: 300,
            }}>{product.desc}</p>

            {/* Highlight specs as quick-look chips */}
            {highlightSpecs.length > 0 && (
              <div style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 0,
                border: "1px solid var(--rule)",
                borderRadius: 12,
                background: "var(--bg)",
                overflow: "hidden",
                marginTop: 4,
              }}>
                {highlightSpecs.map(([label, value], i) => (
                  <div key={i} style={{
                    padding: "14px 16px",
                    borderBottom: i < highlightSpecs.length - 2 ? "1px solid var(--rule)" : "none",
                    [isHe ? "borderLeft" : "borderRight"]: i % 2 === 0 ? "1px solid var(--rule)" : "none",
                  }}>
                    <div style={{
                      fontFamily: "'Heebo',sans-serif", fontSize: 11,
                      letterSpacing: "0.12em", textTransform: "uppercase",
                      color: "var(--ink-3)",
                      marginBottom: 6,
                    }}>{label}</div>
                    <div style={{
                      fontFamily: "'Heebo',sans-serif", fontSize: 14,
                      fontWeight: 500, color: "var(--ink)",
                      lineHeight: 1.35,
                    }}>{value}</div>
                  </div>
                ))}
              </div>
            )}

            {/* CTA row */}
            <div style={{
              display: "flex", flexDirection: isMobile ? "column" : "row",
              gap: 10, marginTop: 8,
            }}>
              <a href="https://wa.me/972546267683" target="_blank" rel="noopener"
                 style={{
                   flex: 1,
                   background: "var(--accent)", color: "#fff",
                   padding: "16px 24px",
                   borderRadius: 999,
                   fontFamily: "'Heebo',sans-serif", fontSize: 15, fontWeight: 500,
                   textDecoration: "none", textAlign: "center",
                   display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                   boxShadow: "0 8px 24px -8px rgba(31,93,58,0.4)",
                 }}>
                <WhatsAppIcon />
                {isHe ? "דברו איתנו בוואטסאפ" : "Chat on WhatsApp"}
              </a>
              <a href={`tel:${(c.contact && c.contact.whatsappNum) || "0546267683"}`}
                 style={{
                   flex: isMobile ? "0 0 auto" : "0 0 auto",
                   background: "transparent", color: "var(--ink)",
                   padding: "15px 24px",
                   borderRadius: 999,
                   border: "1px solid rgba(26,24,20,0.22)",
                   fontFamily: "'Heebo',sans-serif", fontSize: 15,
                   textDecoration: "none", textAlign: "center",
                   display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                 }}>
                {isHe ? "תיאום שיחה" : "Schedule a call"}
              </a>
            </div>

            {/* trust line */}
            <div style={{
              display: "flex", flexWrap: "wrap", gap: 18, paddingTop: 6,
              fontFamily: "'Heebo',sans-serif", fontSize: 12.5,
              color: "var(--ink-3)",
            }}>
              <TrustItem label={isHe ? "עבודת יד" : "Handcrafted"} />
              <TrustItem label={isHe ? "התאמה אישית" : "Made to order"} />
              <TrustItem label={isHe ? "אחריות מלאה" : "Full warranty"} />
            </div>
          </aside>
        </div>
      </section>

      {/* ── 3) EDITORIAL STORY ─────────────────────────────── */}
      {(product.heroTitle || longParagraphs.length > 0) && (
        <section style={{
          background: "var(--bg)",
          padding: isMobile ? "60px 20px" : "120px 56px",
        }}>
          <div style={{
            maxWidth: 980, margin: "0 auto",
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr",
            gap: isMobile ? 28 : 64,
            alignItems: "start",
          }}>
            <div>
              <div style={{
                fontFamily: "'Heebo',sans-serif", fontSize: 12,
                letterSpacing: "0.22em", textTransform: "uppercase",
                color: "var(--accent)",
                marginBottom: 18,
              }}>{isHe ? "הסיפור" : "The story"}</div>
              <h2 style={{
                fontFamily: "'Frank Ruhl Libre','Heebo',serif",
                fontSize: isMobile ? "clamp(28px, 7vw, 36px)" : "clamp(36px, 3.4vw, 52px)",
                fontWeight: 700, letterSpacing: "-0.01em",
                lineHeight: 1.12,
                margin: 0, color: "var(--ink)",
              }}>{product.heroTitle || product.name}</h2>
            </div>

            <div>
              {longParagraphs.map((p, i) => (
                <p key={i} style={{
                  fontFamily: "'Heebo',sans-serif",
                  fontSize: isMobile ? 15.5 : 17,
                  lineHeight: 1.85,
                  color: "var(--ink-2)",
                  margin: i === 0 ? "0 0 18px" : "0 0 18px",
                  fontWeight: 300,
                }}>{p}</p>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── 4) FULL SPECS TABLE ────────────────────────────── */}
      <section style={{
        background: "var(--bg-2)",
        padding: isMobile ? "60px 20px" : "100px 56px",
        borderTop: "1px solid var(--rule)",
      }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <div style={{
            display: "flex", alignItems: "baseline",
            justifyContent: "space-between", flexWrap: "wrap", gap: 12,
            marginBottom: 36,
          }}>
            <h2 style={{
              fontFamily: "'Heebo','Frank Ruhl Libre',sans-serif",
              fontSize: isMobile ? 26 : 34,
              fontWeight: 700, letterSpacing: "-0.01em",
              margin: 0,
            }}>{isHe ? "מפרט מלא" : "Full specifications"}</h2>
            <div style={{
              fontFamily: "'Heebo',sans-serif", fontSize: 13,
              color: "var(--ink-3)",
            }}>{specEntries.length} {isHe ? "פרטים" : "details"}</div>
          </div>

          <dl style={{
            margin: 0,
            border: "1px solid var(--rule)",
            borderRadius: 12,
            overflow: "hidden",
            background: "var(--bg-2)",
          }}>
            {specEntries.map(([label, value], i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: isMobile ? "1fr" : "minmax(180px, 1fr) 2fr",
                gap: isMobile ? 4 : 24,
                padding: isMobile ? "16px 20px" : "20px 28px",
                borderBottom: i < specEntries.length - 1 ? "1px solid var(--rule)" : "none",
                background: i % 2 === 0 ? "var(--bg-2)" : "var(--bg)",
                alignItems: "baseline",
              }}>
                <dt style={{
                  fontFamily: "'Heebo',sans-serif", fontSize: 13,
                  letterSpacing: "0.06em",
                  color: "var(--ink-3)",
                  textAlign: isHe ? "right" : "left",
                  margin: 0,
                }}>{label}</dt>
                <dd style={{
                  fontFamily: "'Heebo',sans-serif", fontSize: 15, fontWeight: 500,
                  color: "var(--ink)",
                  textAlign: isHe ? "right" : "left",
                  margin: 0, lineHeight: 1.5,
                }}>{value}</dd>
              </div>
            ))}
          </dl>
        </div>
      </section>

      {/* ── 5) RELATED PRODUCTS ────────────────────────────── */}
      {related.length > 0 && (
        <section style={{
          background: "var(--bg)",
          padding: isMobile ? "60px 0 60px 20px" : "100px 56px",
        }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <div style={{
              display: "flex", alignItems: "baseline", justifyContent: "space-between",
              flexWrap: "wrap", gap: 12, marginBottom: 32,
              paddingInlineEnd: isMobile ? 20 : 0,
            }}>
              <div>
                <div style={{
                  fontFamily: "'Heebo',sans-serif", fontSize: 12,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  color: "var(--accent)", marginBottom: 10,
                }}>{isHe ? "המשך לחקור" : "Keep exploring"}</div>
                <h2 style={{
                  fontFamily: "'Heebo','Frank Ruhl Libre',sans-serif",
                  fontSize: isMobile ? 26 : 34,
                  fontWeight: 700, margin: 0, letterSpacing: "-0.01em",
                }}>{isHe ? `עוד מ${product.family ? "סדרת " + product.family : "הקולקציה"}` : `More from ${product.family || "the collection"}`}</h2>
              </div>
              <a href="#/#collection" style={{
                fontFamily: "'Heebo',sans-serif", fontSize: 14,
                color: "var(--ink)", textDecoration: "none",
                borderBottom: "1px solid var(--ink)",
                paddingBottom: 2,
              }}>{isHe ? "כל הקולקציה" : "View collection"}</a>
            </div>

            <div style={{
              display: isMobile ? "flex" : "grid",
              gridTemplateColumns: isMobile ? undefined : `repeat(${related.length}, 1fr)`,
              gap: 16,
              overflowX: isMobile ? "auto" : "visible",
              paddingInlineEnd: isMobile ? 20 : 0,
              scrollSnapType: isMobile ? "x mandatory" : undefined,
            }}>
              {related.map((p) => {
                const i = products.indexOf(p);
                return (
                  <a key={i} href={`#/product/${i}`}
                     style={{
                       flex: isMobile ? "0 0 75%" : undefined,
                       scrollSnapAlign: isMobile ? "start" : undefined,
                       textDecoration: "none", color: "inherit",
                       display: "block",
                       background: "var(--bg-2)",
                       borderRadius: 14,
                       overflow: "hidden",
                       border: "1px solid var(--rule)",
                       transition: "transform .25s ease, box-shadow .25s ease",
                     }}
                     onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 18px 40px -18px rgba(26,24,20,0.2)"; }}
                     onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>
                    <div style={{
                      aspectRatio: "1/1",
                      background: "linear-gradient(160deg, #efe8d8 0%, #f7f1e3 100%)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <img src={p.img} alt=""
                           style={{
                             width: "100%", height: "100%",
                             objectFit: "cover",
                             filter: "drop-shadow(0 16px 28px rgba(26,24,20,0.18))",
                           }} />
                    </div>
                    <div style={{ padding: "18px 20px" }}>
                      <div style={{
                        fontFamily: "'Heebo',sans-serif", fontSize: 11,
                        letterSpacing: "0.18em", textTransform: "uppercase",
                        color: "var(--ink-3)", marginBottom: 8,
                      }}>{p.family || (isHe ? "דגם" : "Model")}</div>
                      <div style={{
                        fontFamily: "'Heebo',sans-serif", fontSize: 16,
                        fontWeight: 600, color: "var(--ink)",
                        marginBottom: 6, lineHeight: 1.3,
                      }}>{p.name}</div>
                      <div style={{
                        fontFamily: "'Heebo',sans-serif", fontSize: 13,
                        color: "var(--ink-3)", lineHeight: 1.5,
                      }}>{p.desc}</div>
                    </div>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      )}

      {/* ── 6) BOTTOM CTA PANEL ────────────────────────────── */}
      <section style={{
        background: "var(--bg-3)",
        padding: isMobile ? "60px 20px" : "100px 56px",
      }}>
        <div style={{
          maxWidth: 1100, margin: "0 auto",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 28 : 56,
          alignItems: "center",
          background: "var(--bg-2)",
          borderRadius: 18,
          padding: isMobile ? "32px" : "48px 56px",
          border: "1px solid var(--rule)",
          boxShadow: "0 30px 60px -30px rgba(26,24,20,0.18)",
        }}>
          <div style={{
            aspectRatio: "1/1",
            borderRadius: 14,
            background: "linear-gradient(160deg, #efe8d8 0%, #f7f1e3 100%)",
            display: "flex", alignItems: "center", justifyContent: "center",
            order: isMobile ? 1 : (isHe ? 2 : 1),
          }}>
            <img src={product.img} alt=""
                 style={{
                   width: "100%", height: "100%",
                   objectFit: "cover",
                   filter: "drop-shadow(0 18px 30px rgba(26,24,20,0.22))",
                 }} />
          </div>

          <div style={{
            order: isMobile ? 2 : (isHe ? 1 : 2),
            textAlign: isHe ? "right" : "left",
          }}>
            <div style={{
              fontFamily: "'Heebo',sans-serif", fontSize: 12,
              letterSpacing: "0.22em", textTransform: "uppercase",
              color: "var(--accent)", marginBottom: 14,
            }}>{isHe ? "התאמה אישית" : "Personal fitting"}</div>
            <h2 style={{
              fontFamily: "'Heebo','Frank Ruhl Libre',sans-serif",
              fontSize: isMobile ? "clamp(24px, 7vw, 30px)" : "clamp(28px, 2.8vw, 40px)",
              fontWeight: 700, letterSpacing: "-0.01em",
              margin: "0 0 16px", lineHeight: 1.2,
            }}>{isHe ? `מעוניינים ב${product.name}?` : `Interested in the ${product.name}?`}</h2>
            <p style={{
              fontFamily: "'Heebo',sans-serif",
              fontSize: isMobile ? 15 : 16,
              lineHeight: 1.7,
              color: "var(--ink-2)", fontWeight: 300,
              margin: "0 0 28px",
            }}>{isHe
                ? "כל תיק מותאם אישית למידות הקלף שלכם. נשמח לדבר על הדגם המתאים, על האפשרויות לשיבוץ ועל לוחות הזמנים."
                : "Every case is tailored to your scroll's exact dimensions. We'd love to talk through the right model, customization options, and timing."}</p>

            <div style={{
              display: "flex", flexDirection: isMobile ? "column" : "row",
              gap: 12, alignItems: isMobile ? "stretch" : "center",
            }}>
              <a href="https://wa.me/972546267683" target="_blank" rel="noopener"
                 style={{
                   background: "var(--accent)", color: "#fff",
                   padding: "15px 28px", borderRadius: 999,
                   fontFamily: "'Heebo',sans-serif", fontSize: 15, fontWeight: 500,
                   textDecoration: "none", textAlign: "center",
                   display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                 }}>
                <WhatsAppIcon />
                {isHe ? "דברו איתנו בוואטסאפ" : "Chat on WhatsApp"}
              </a>
              <a href="#/"
                 style={{
                   color: "var(--ink)",
                   padding: "15px 28px", borderRadius: 999,
                   border: "1px solid rgba(26,24,20,0.2)",
                   fontFamily: "'Heebo',sans-serif", fontSize: 15,
                   textDecoration: "none", textAlign: "center",
                 }}>{isHe ? "חזרה לקולקציה" : "Back to collection"}</a>
            </div>
          </div>
        </div>
      </section>

      <window.Laad_Footer c={c} isMobile={isMobile} lang={lang} />
    </div>
  );
};

const TrustItem = ({ label }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
         style={{ color: "var(--accent)" }}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
    {label}
  </span>
);

const WhatsAppIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.077 4.487.71.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.04 21.785a9.806 9.806 0 0 1-5.001-1.368l-.358-.213-3.714.974.991-3.62-.233-.371a9.79 9.79 0 0 1-1.501-5.231c.003-5.418 4.412-9.825 9.832-9.825 2.625.001 5.092 1.025 6.948 2.882a9.755 9.755 0 0 1 2.876 6.948c-.003 5.418-4.413 9.824-9.84 9.824zm8.367-18.19A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.158 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.407 3.595z"/>
  </svg>
);

const navBtnStyle = {
  display: "inline-flex", alignItems: "center", gap: 6,
  padding: "8px 12px", borderRadius: 8,
  background: "transparent", border: "none",
  color: "var(--ink-2)", cursor: "pointer",
};

const Chevron = ({ dir }) => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {dir === "right"
      ? <polyline points="9 6 15 12 9 18" />
      : <polyline points="15 6 9 12 15 18" />}
  </svg>
);

window.LaadProductPage = ProductPage;