// Collection — cinematic premium scenes, animated filter, alternating layout.

const useRef = React.useRef;

const SWATCH_THEMES = {
  silver: {
    bg: "linear-gradient(135deg, #b9c1cb 0%, #e0e6ec 45%, #c5cdd6 100%)",
    light: false,
  },
  rose: {
    bg: "linear-gradient(135deg, #d8a896 0%, #f0c8b4 40%, #e0b09c 75%, #c89888 100%)",
    light: false,
  },
  gold: {
    bg: "linear-gradient(135deg, #b89058 0%, #e6cf95 45%, #c8a868 100%)",
    light: false,
  },
  white: {
    bg: "linear-gradient(135deg, #e8e4dc 0%, #f4f1ea 45%, #d8d2c4 100%)",
    light: false,
  },
  turquoise: {
    bg: "linear-gradient(135deg, #3e6b73 0%, #6fa3a8 45%, #4a838f 100%)",
    light: true,
  },
  carbon: {
    bg: "linear-gradient(135deg, #0e0e12 0%, #2a2a32 50%, #06060a 100%)",
    light: true,
  },
  green: {
    bg: "linear-gradient(135deg, #5a7860 0%, #88a08c 45%, #607c68 100%)",
    light: true,
  },
  blue: {
    bg: "linear-gradient(135deg, #4a5e74 0%, #7888a0 45%, #506478 100%)",
    light: true,
  },
  default: {
    bg: "linear-gradient(135deg, #c9d3dd 0%, #e8eef3 50%, #f4f7fa 100%)",
    light: false,
  },
};

const ProductScene = ({ product, masterIdx, totalLabel, indexLabel, isMobile, isHe, reverse }) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [hover, setHover] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node || typeof IntersectionObserver === "undefined") {
      setVisible(true);
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      });
    }, { threshold: 0.18 });
    obs.observe(node);
    return () => obs.disconnect();
  }, []);

  const href  = `#/product/${masterIdx}`;
  const theme = SWATCH_THEMES[product.swatch] || SWATCH_THEMES.default;

  const ink  = "var(--laad-ink)";
  const ink2 = "var(--laad-ink-2)";

  // Mobile is always single-column. Desktop alternates: even idx → text first; odd → image first.
  const textCol  = isMobile ? "auto" : (reverse ? "2 / 3" : "1 / 2");
  const imageCol = isMobile ? "auto" : (reverse ? "1 / 2" : "2 / 3");

  return (
    <article ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        background: "var(--bg-2)",
        direction: isHe ? "rtl" : "ltr",
        overflow: "hidden",
        color: ink,
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr",
        alignItems: "stretch",
        borderRadius: isMobile ? 18 : 28,
        margin: isMobile ? "0 12px 16px" : "0 40px 36px",
        boxShadow: hover
          ? "0 32px 80px rgba(10,10,10,0.16), 0 0 0 1px rgba(201,161,74,0.18)"
          : "0 12px 40px rgba(10,10,10,0.06), 0 0 0 1px rgba(10,10,10,0.04)",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: "transform 0.6s var(--laad-ease-out), box-shadow 0.6s var(--laad-ease-out)",
        minHeight: isMobile ? "auto" : "82vh",
      }}>

      {/* TEXT side */}
      <div style={{
        gridColumn: textCol,
        gridRow: isMobile ? "2" : "1",
        display: "flex", flexDirection: "column", justifyContent: "center",
        textAlign: isHe ? "right" : "left",
        padding: isMobile ? "56px 24px" : (reverse ? "80px 56px 80px 56px" : "80px 56px 80px 40px"),
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(32px)",
        transition: "opacity 0.9s var(--laad-ease-out) 0.15s, transform 0.9s var(--laad-ease-out) 0.15s",
      }}>
        {/* Big serif index "01" with gold rule and "/ 09" */}
        <div style={{
          display: "flex", alignItems: "center", gap: 18,
          alignSelf: "flex-start",
          marginBottom: 32,
          fontVariantNumeric: "tabular-nums",
        }}>
          <span aria-hidden style={{
            fontFamily: isHe ? "'Frank Ruhl Libre', serif" : "'Playfair Display', serif",
            fontSize: 36,
            fontWeight: 400,
            color: "var(--laad-gold-deep)",
            lineHeight: 1,
            direction: "ltr",
          }}>{indexLabel}</span>
          <span aria-hidden style={{
            display: "inline-block",
            width: 56, height: 1,
            background: "linear-gradient(90deg, var(--laad-gold), transparent)",
          }} />
          <span style={{
            fontFamily: "'Inter',sans-serif",
            fontSize: 11,
            letterSpacing: "0.28em",
            textTransform: "uppercase",
            color: ink2,
            direction: "ltr",
          }}>{indexLabel} / {totalLabel}</span>
        </div>

        {product.tag && (
          <div style={{
            alignSelf: "flex-start",
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "rgba(201,161,74,0.10)",
            color: "var(--laad-gold-deep)",
            padding: "6px 14px",
            borderRadius: 999,
            border: "1px solid rgba(201,161,74,0.28)",
            fontFamily: "'Heebo',sans-serif",
            fontSize: 12,
            fontWeight: 500,
            marginBottom: 20,
            letterSpacing: "0.08em",
          }}>
            <span aria-hidden style={{
              width: 6, height: 6, borderRadius: "50%",
              background: "var(--laad-gold)",
            }} />
            {product.tag}
          </div>
        )}

        <h2 style={{
          fontFamily: isHe ? "'Frank Ruhl Libre', serif" : "'Playfair Display', 'Cormorant Garamond', serif",
          fontSize: isMobile ? "clamp(36px, 10vw, 54px)" : "clamp(40px, 3.6vw, 64px)",
          lineHeight: 1.05,
          fontWeight: 500,
          letterSpacing: "-0.02em",
          margin: 0,
          color: ink,
        }}>
          <a href={href} style={{ color: "inherit", textDecoration: "none" }}>{product.name}</a>
        </h2>

        <p style={{
          fontFamily: "'Heebo','Inter',sans-serif",
          fontSize: isMobile ? 16 : 17,
          lineHeight: 1.7,
          color: ink2,
          fontWeight: 300,
          margin: "24px 0 40px",
          maxWidth: 440,
        }}>{product.desc}</p>

        <a href={href}
           className="laad-underline"
           style={{
             alignSelf: "flex-start",
             display: "inline-flex", alignItems: "center", gap: 14,
             fontFamily: "'Inter',sans-serif",
             fontSize: 12,
             color: ink,
             textDecoration: "none",
             letterSpacing: "0.28em",
             textTransform: "uppercase",
             fontWeight: 500,
           }}>
          <span>{isHe ? "גלה עוד" : "Discover"}</span>
          <span aria-hidden style={{
            display: "inline-block",
            transform: `${isHe ? "scaleX(-1)" : ""} translateX(${hover ? (isHe ? "-4px" : "4px") : "0"})`,
            transition: "transform 0.4s var(--laad-ease-out)",
            fontSize: 16, lineHeight: 1,
          }}>›</span>
        </a>
      </div>

      {/* IMAGE side */}
      <a href={href}
         aria-label={`${isHe ? "פרטי המוצר" : "View product"}: ${product.name}`}
         className="laad-imgwrap"
         style={{
           gridColumn: imageCol,
           gridRow: isMobile ? "1" : "1",
           position: "relative",
           background: theme.bg,
           height: isMobile ? "60vh" : "82vh",
           minHeight: isMobile ? 360 : 560,
           display: "flex", alignItems: "center", justifyContent: "center",
           overflow: "hidden",
           textDecoration: "none",
         }}>

        {/* Soft radial highlight */}
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: theme.light
            ? "radial-gradient(ellipse at 35% 40%, rgba(255,255,255,0.22) 0%, transparent 60%)"
            : "radial-gradient(ellipse at 35% 40%, rgba(255,255,255,0.40) 0%, transparent 60%)",
          pointerEvents: "none",
        }} />

        {/* Inner gold rim — appears on hover */}
        <div aria-hidden style={{
          position: "absolute", inset: 16,
          border: "1px solid rgba(230,207,149,0.0)",
          borderRadius: 12,
          opacity: hover ? 1 : 0,
          transform: hover ? "scale(1)" : "scale(1.02)",
          transition: "opacity 0.6s var(--laad-ease-out), transform 0.6s var(--laad-ease-out), border-color 0.6s var(--laad-ease-out)",
          borderColor: hover ? "rgba(230,207,149,0.45)" : "rgba(230,207,149,0)",
          pointerEvents: "none",
        }} />

        <div style={{
          position: "relative",
          width: "100%", height: "100%",
          display: "flex", alignItems: "center", justifyContent: "center",
          opacity: visible ? 1 : 0,
          transform: visible ? "translateY(0) scale(1)" : "translateY(60px) scale(0.96)",
          transition: "opacity 1.1s var(--laad-ease-out), transform 1.1s var(--laad-ease-out)",
        }}>
          {product.img ? (
            <img src={product.img} alt={product.name}
                 loading="lazy" decoding="async"
                 style={{
                   width: "100%", height: "100%",
                   objectFit: "cover", display: "block",
                   filter: theme.light
                     ? "drop-shadow(0 50px 70px rgba(0,0,0,0.45))"
                     : "drop-shadow(0 50px 70px rgba(0,0,0,0.32))",
                 }} />
          ) : (
            <window.ProductPlaceholder swatch={product.swatch} ratio="portrait" />
          )}
        </div>
      </a>
    </article>
  );
};

const Collection = ({ c, isMobile, lang, activeFilter, setActiveFilter, products }) => {
  const isHe = lang === "he";

  const masterIndexOf = (p) => {
    const i = c.products.indexOf(p);
    return i >= 0 ? i : 0;
  };

  const total      = products.length;
  const totalLabel = String(total).padStart(2, "0");

  return (
    <section id="products" style={{ background: "var(--bg)", paddingBottom: 24 }}>
      {/* Sticky filter bar — premium pill style */}
      <div style={{
        position: "sticky",
        top: isMobile ? 64 : 76,
        zIndex: 20,
        display: "flex",
        flexDirection: isHe ? "row-reverse" : "row",
        justifyContent: "space-between",
        alignItems: "center",
        padding: isMobile ? "12px 20px" : "16px 56px",
        background: "rgba(250,247,240,0.92)",
        backdropFilter: "blur(18px) saturate(160%)",
        WebkitBackdropFilter: "blur(18px) saturate(160%)",
        borderTop: "1px solid var(--rule-soft)",
        borderBottom: "1px solid var(--rule-soft)",
        gap: 16,
        direction: c.dir,
        marginBottom: isMobile ? 16 : 28,
      }}>
        <a href="#contact" className="laad-btn laad-btn--gold"
           style={{
             padding: isMobile ? "10px 20px" : "12px 24px",
             fontSize: isMobile ? 13 : 14,
             whiteSpace: "nowrap",
           }}>
          {isHe ? "צור קשר" : "Contact"}
        </a>

        <nav style={{
          display: "flex", gap: isMobile ? 8 : 12,
          alignItems: "center",
          overflowX: "auto",
          scrollbarWidth: "none",
          padding: 4,
        }}>
          {c.filters.map(f => {
            const isActive = activeFilter === f;
            return (
              <button key={f} onClick={() => setActiveFilter(f)}
                aria-pressed={isActive}
                style={{
                  fontFamily: "'Heebo','Inter',sans-serif",
                  fontSize: isMobile ? 13 : 14,
                  fontWeight: isActive ? 600 : 400,
                  color: isActive ? "#fff" : "var(--ink)",
                  background: isActive
                    ? "var(--laad-ink)"
                    : "transparent",
                  border: "1px solid",
                  borderColor: isActive ? "var(--laad-ink)" : "var(--rule)",
                  cursor: "pointer",
                  padding: isMobile ? "8px 16px" : "9px 20px",
                  borderRadius: 999,
                  whiteSpace: "nowrap",
                  letterSpacing: "0.04em",
                  transition: "all 0.32s var(--laad-ease)",
                }}
                onMouseEnter={e => {
                  if (!isActive) {
                    e.currentTarget.style.borderColor = "var(--laad-gold)";
                    e.currentTarget.style.color       = "var(--laad-gold-deep)";
                  }
                }}
                onMouseLeave={e => {
                  if (!isActive) {
                    e.currentTarget.style.borderColor = "var(--rule)";
                    e.currentTarget.style.color       = "var(--ink)";
                  }
                }}>
                {f}
              </button>
            );
          })}
        </nav>
      </div>

      {/* Cinematic full-screen scenes */}
      <div>
        {products.map((p, i) => (
          <ProductScene
            key={`${activeFilter}-${i}-${p.name}`}
            product={p}
            masterIdx={masterIndexOf(p)}
            indexLabel={String(i + 1).padStart(2, "0")}
            totalLabel={totalLabel}
            isMobile={isMobile}
            isHe={isHe}
            reverse={i % 2 === 1}
          />
        ))}
      </div>
    </section>
  );
};

// ─── FOOTER — premium dark with gold accents ────────────────
const Footer = ({ c, isMobile, lang }) => {
  const isHe = lang === "he";
  const legalItems = isHe
    ? [
        { label: "הצהרת נגישות", href: "legal/accessibility.html" },
        { label: "מדיניות פרטיות", href: "legal/privacy.html" },
        { label: "תקנון האתר",     href: "legal/terms.html" },
      ]
    : [
        { label: "Accessibility statement", href: "legal/accessibility.html" },
        { label: "Privacy policy",          href: "legal/privacy.html" },
        { label: "Terms of use",            href: "legal/terms.html" },
      ];

  const socials = [
    {
      label: "Instagram",
      href: "https://www.instagram.com/laad_judaica/",
      svg: (
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
        </svg>
      ),
    },
    {
      label: "Facebook",
      href: "https://www.facebook.com/profile.php?id=61589858061361",
      svg: (
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
          <path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.87.24-1.46 1.49-1.46H17V4.46c-.27-.04-1.2-.12-2.28-.12-2.26 0-3.8 1.38-3.8 3.9V10.5H8.3v3h2.62V21h2.58z" />
        </svg>
      ),
    },
    {
      label: "TikTok",
      href: "https://www.tiktok.com/@laad_judaica",
      svg: (
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
          <path d="M19.6 8.3c-1.5 0-2.9-.6-4-1.6v7.6c0 3.1-2.5 5.7-5.7 5.7s-5.7-2.5-5.7-5.7 2.5-5.7 5.7-5.7c.3 0 .6 0 .9.07v2.9a2.79 2.79 0 0 0-.9-.15A2.85 2.85 0 0 0 7 14.3a2.85 2.85 0 0 0 5.7 0V3h2.83c.06 1.66 1.07 3.07 2.5 3.7.5.22 1.05.35 1.6.37V8.3z" />
        </svg>
      ),
    },
    {
      label: "YouTube",
      href: "https://www.youtube.com/@Laad_Judaica",
      svg: (
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
          <path d="M21.6 7.2a2.5 2.5 0 0 0-1.77-1.77C18.24 5 12 5 12 5s-6.24 0-7.83.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.77 1.77C5.76 19 12 19 12 19s6.24 0 7.83-.43a2.5 2.5 0 0 0 1.77-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8zM10 15V9l5.2 3z" />
        </svg>
      ),
    },
  ];

  const linkStyle = {
    color: "rgba(255,255,255,0.62)",
    textDecoration: "none",
    fontFamily: "'Heebo','Inter',sans-serif",
    fontSize: 14,
    transition: "color 0.32s var(--laad-ease)",
  };

  const seoLinks = isHe
    ? [
        { label: "תיקים לספר תורה", href: "seo/pages/torah-cases.html" },
        { label: "בית לספר תורה מהודר", href: "seo/pages/bait-torah-mehudar.html" },
        { label: "כסף וזהב", href: "seo/pages/silver-gold-case.html" },
        { label: "תיק ספר תורה בבלי", href: "seo/pages/bavli-case.html" },
        { label: "בהתאמה אישית", href: "seo/pages/custom-torah-case.html" },
        { label: "מחיר תיק לספר תורה", href: "seo/pages/torah-case-price.html" },
        { label: "בלוג", href: "seo/blog/" },
      ]
    : [
        { label: "Torah Cases", href: "seo/pages/en/torah-cases.html" },
        { label: "Custom Torah Case (Israel)", href: "seo/pages/en/custom-torah-case-israel.html" },
        { label: "Blog", href: "seo/blog/" },
      ];

  return (
    <footer style={{
      background: "linear-gradient(180deg, #0a0a0a 0%, #1a1410 100%)",
      color: "rgba(255,255,255,0.62)",
      padding: isMobile ? "60px 20px 32px" : "96px 56px 48px",
      direction: c.dir,
      position: "relative",
    }}>
      {/* Top gold rule */}
      <div aria-hidden style={{
        position: "absolute", top: 0, left: 0, right: 0,
        height: 1,
        background: "linear-gradient(90deg, transparent, rgba(230,207,149,0.4), transparent)",
      }} />

      <div style={{
        maxWidth: "var(--laad-max)",
        margin: "0 auto",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr 1fr 1fr 1fr",
          gap: isMobile ? 40 : 48,
          marginBottom: 56,
        }}>
          <div>
            <img src="assets/laad-logo.png" alt="" style={{
              height: 85, width: "auto", display: "block", marginBottom: 24,
              filter: "brightness(1.05) sepia(0.35) saturate(1.4) hue-rotate(-10deg)",
            }} />
            <p style={{
              fontFamily: isHe ? "'Frank Ruhl Libre', serif" : "'Playfair Display', serif",
              fontSize: 18, lineHeight: 1.6, margin: "0 0 12px",
              maxWidth: 380, color: "rgba(255,255,255,0.85)",
              fontWeight: 400, letterSpacing: "-0.01em",
            }}>{isHe
              ? "מורשת של מתכת אצילית, מסורת של דיוק."
              : "A heritage of noble metal. A tradition of precision."
            }</p>
            <p style={{
              fontFamily: "'Heebo','Inter',sans-serif",
              fontSize: 13, lineHeight: 1.7, margin: 0,
              maxWidth: 380, color: "rgba(255,255,255,0.5)",
            }}>{isHe
              ? "מפעל בוטיק למוצרי יודאיקה בעבודת יד — תיקים לספר תורה בגימור מתכת אצילית, קרבון ושיבוץ אבני סברובסקי. מאז 1972."
              : "Handcraft workshop for fine Judaica — Torah scroll cases in noble metals, carbon fiber and Swarovski crystals. Since 1972."
            }</p>

            <div style={{
              display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap",
            }}>
              {socials.map((s, i) => (
                <a
                  key={i}
                  href={s.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={s.label}
                  title={s.label}
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 38, height: 38,
                    borderRadius: 999,
                    border: "1px solid rgba(230,207,149,0.28)",
                    color: "rgba(255,255,255,0.72)",
                    background: "rgba(255,255,255,0.03)",
                    textDecoration: "none",
                    transition: "color 0.32s var(--laad-ease), border-color 0.32s var(--laad-ease), background 0.32s var(--laad-ease), transform 0.32s var(--laad-ease)",
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.color = "var(--laad-gold-soft)";
                    e.currentTarget.style.borderColor = "rgba(230,207,149,0.7)";
                    e.currentTarget.style.background = "rgba(230,207,149,0.08)";
                    e.currentTarget.style.transform = "translateY(-2px)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.color = "rgba(255,255,255,0.72)";
                    e.currentTarget.style.borderColor = "rgba(230,207,149,0.28)";
                    e.currentTarget.style.background = "rgba(255,255,255,0.03)";
                    e.currentTarget.style.transform = "translateY(0)";
                  }}
                >
                  {s.svg}
                </a>
              ))}
            </div>
          </div>

          <div>
            <h4 style={{
              fontFamily: "'Inter',sans-serif", fontSize: 11,
              color: "var(--laad-gold-soft)",
              letterSpacing: "0.28em", textTransform: "uppercase",
              margin: "0 0 20px", fontWeight: 500,
            }}>
              {isHe ? "קטגוריות" : "Categories"}
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {c.filters.map((f, i) => (
                <li key={i}>
                  <a href="#products"
                     style={linkStyle}
                     onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                     onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                    {f}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 style={{
              fontFamily: "'Inter',sans-serif", fontSize: 11,
              color: "var(--laad-gold-soft)",
              letterSpacing: "0.28em", textTransform: "uppercase",
              margin: "0 0 20px", fontWeight: 500,
            }}>
              {isHe ? "צור קשר" : "Contact"}
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              <li>
                <a href="tel:0535351629" style={{ ...linkStyle, direction: "ltr", fontVariantNumeric: "tabular-nums" }}
                   onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                   onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                  053-535-1629
                </a>
              </li>
              <li>
                <a href="https://wa.me/972546267683" style={linkStyle}
                   onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                   onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                  {isHe ? "WhatsApp — 054-626-7683" : "WhatsApp — 054-626-7683"}
                </a>
              </li>
              <li>
                <a href="#contact" style={linkStyle}
                   onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                   onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                  {isHe ? "טופס יצירת קשר" : "Contact form"}
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 style={{
              fontFamily: "'Inter',sans-serif", fontSize: 11,
              color: "var(--laad-gold-soft)",
              letterSpacing: "0.28em", textTransform: "uppercase",
              margin: "0 0 20px", fontWeight: 500,
            }}>
              {isHe ? "תיקים לספר תורה" : "Torah Cases"}
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {seoLinks.map((item, i) => (
                <li key={i}>
                  <a href={item.href} style={linkStyle}
                     onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                     onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 style={{
              fontFamily: "'Inter',sans-serif", fontSize: 11,
              color: "var(--laad-gold-soft)",
              letterSpacing: "0.28em", textTransform: "uppercase",
              margin: "0 0 20px", fontWeight: 500,
            }}>
              {isHe ? "מידע משפטי" : "Legal"}
            </h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {legalItems.map((item, i) => (
                <li key={i}>
                  <a href={item.href} style={linkStyle}
                     onMouseEnter={e => e.currentTarget.style.color = "var(--laad-gold-soft)"}
                     onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.62)"}>
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{
          borderTop: "1px solid rgba(255,255,255,0.08)",
          paddingTop: 28,
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          justifyContent: "space-between",
          alignItems: isMobile ? "flex-start" : "center",
          gap: 12,
          fontFamily: "'Inter',sans-serif",
          fontSize: 12, color: "rgba(255,255,255,0.4)",
          letterSpacing: "0.04em",
        }}>
          <span>© 2026 {isHe ? "לעד · Laad. כל הזכויות שמורות." : "Laad. All rights reserved."}</span>
          <span style={{
            fontFamily: isHe ? "'Frank Ruhl Libre', serif" : "'Playfair Display', serif",
            fontSize: 13,
            color: "var(--laad-gold-soft)",
            letterSpacing: "0.18em",
          }}>{isHe ? "מאז 1972" : "Since 1972"}</span>
        </div>
      </div>
    </footer>
  );
};

window.Laad_Collection = Collection;
window.Laad_Footer     = Footer;
window.Laad_Custom     = window.Laad_Custom  || (() => null);
window.Laad_Stones     = () => null;
window.Laad_Contact    = window.Laad_Contact || (() => null);