// Laad — Torah scroll case workshop. Premium luxury redesign.
const { useState, useMemo, useEffect } = React;
const LaadSite = ({ device = "desktop", lang = "he", theme = "light", accent = "gold", density = "comfortable" }) => {
const c = window.SITE_CONTENT[lang];
const isMobile = device === "mobile";
const [activeFilter, setActiveFilter] = useState(c.filters[0]);
const [navOpen, setNavOpen] = useState(false);
// Reset filter when language changes so the localized "All" stays selected.
useEffect(() => {
setActiveFilter(c.filters[0]);
}, [lang]);
const filteredProducts = useMemo(() => {
if (activeFilter === c.filters[0]) return c.products;
return c.products.filter(p => p.family === activeFilter);
}, [activeFilter, c]);
// Premium accent palette — black/white/gold/silver/rose-gold
const accentMap = {
gold: { ink: "#a78232", soft: "#e6cf95", deep: "#8c6a23" },
silver: { ink: "#7a7e85", soft: "#d8dcdf", deep: "#5a5e65" },
rose: { ink: "#a87968", soft: "#e8c8b4", deep: "#7e5546" },
black: { ink: "#0a0a0a", soft: "#3a3a3a", deep: "#000000" },
green: { ink: "#1f5d3a", soft: "#7fae8e", deep: "#0e3a22" }, // legacy
};
const a = 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)",
"--rule-soft": "var(--laad-rule-soft)",
"--accent": a.ink,
"--accent-soft":a.soft,
"--accent-deep":a.deep,
"--accent-ink": "#fff",
direction: c.dir,
fontFamily: lang === "he"
? "'Heebo', 'Frank Ruhl Libre', Georgia, serif"
: "'Inter', 'Cormorant Garamond', Georgia, serif",
background: "var(--laad-ivory)",
color: "var(--laad-ink)",
width: "100%",
minHeight: "100%",
WebkitFontSmoothing: "antialiased",
};
return (
{isMobile && navOpen && setNavOpen(false)} />}
);
};
// ─── TOP BAR ─────────────────────────────────────────────────
const TopBar = ({ c, lang, isMobile, navOpen, setNavOpen, alwaysSolid = false }) => {
const isHe = lang === "he";
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 32);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const isSolid = alwaysSolid || scrolled;
const padV = isMobile ? (isSolid ? 10 : 14) : (isSolid ? 14 : 22);
const padH = isMobile ? 16 : 36;
const logoH = isMobile ? (isSolid ? 51 : 58) : (isSolid ? 58 : 74);
const navItems = [
{ href: "#products", label: isHe ? "הקולקציה" : "Collection" },
{ href: "#story", label: isHe ? "הסיפור" : "Story" },
{ href: "#custom", label: isHe ? "תהליך ההזמנה" : "Process" },
{ href: "#contact", label: isHe ? "צור קשר" : "Contact" },
];
return (
{/* RIGHT in RTL: menu (mobile) or nav (desktop) */}
{isMobile ? (
) : (
)}
{/* LEFT in RTL: contact */}
);
};
const MobileMenu = ({ c, lang, onClose }) => {
const isHe = lang === "he";
const items = [
{ href: "#products", label: isHe ? "הקולקציה" : "Collection" },
{ href: "#story", label: isHe ? "הסיפור" : "Story" },
{ href: "#custom", label: isHe ? "תהליך ההזמנה" : "Process" },
{ href: "#contact", label: isHe ? "צור קשר" : "Contact" },
];
return (
);
};
window.LaadSite = LaadSite;
window.LaadSite_TopBar = TopBar;
window.LaadSite_MobileMenu = MobileMenu;