// Story (process steps), Custom (process), Contact — premium luxury sections. // ─── STORY ─────────────────────────────────────────────────── const Story = ({ c, isMobile, lang }) => { const isHe = lang === "he"; return (
{/* Decorative gold blob */}
{c.story.kicker}

{c.story.title}

{c.story.body}

); }; // ─── CUSTOM / PROCESS — interactive configurator ───────────── const SWATCH_TEX = { carbon: "repeating-linear-gradient(45deg, #1c1c1c 0 4px, #0a0a0a 4px 8px)", metal: "linear-gradient(135deg, #d9d9d9 0%, #f4f4f4 45%, #9a9a9a 100%)", mix: "linear-gradient(135deg, #f0f0f0 0%, #f0f0f0 49%, #1c1c1c 51%, #1c1c1c 100%)", }; const Swatch = ({ opt, active, size = 44 }) => { const ring = active ? "0 0 0 2px rgba(230,207,149,0.85)" : "0 0 0 1px rgba(255,255,255,0.14)"; const base = { width: size, height: size, borderRadius: "50%", boxShadow: ring, transition: "box-shadow 0.32s var(--laad-ease), transform 0.32s var(--laad-ease)", transform: active ? "scale(1.04)" : "scale(1)", flexShrink: 0, }; if (opt.kind === "color") { return ; } if (opt.kind === "tex") { return ; } return ( {opt.glyph} ); }; const Custom = ({ c, isMobile, lang }) => { const isHe = lang === "he"; const steps = c.custom.steps; const [active, setActive] = React.useState(0); const [userTouched, setUserTouched] = React.useState(false); const sectionRef = React.useRef(null); React.useEffect(() => { if (userTouched) return; if (typeof IntersectionObserver === "undefined") return; let timer = null; const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !timer) { timer = setInterval(() => setActive(a => (a + 1) % steps.length), 4500); } else if (!e.isIntersecting && timer) { clearInterval(timer); timer = null; } }); }, { threshold: 0.35 }); if (sectionRef.current) obs.observe(sectionRef.current); return () => { if (timer) clearInterval(timer); obs.disconnect(); }; }, [steps.length, userTouched]); const pick = (i) => { setUserTouched(true); setActive(i); }; const step = steps[active]; return (
{c.custom.kicker}

{c.custom.title}

{c.custom.body}

{/* Step rail */}
    {steps.map((s, i) => { const on = i === active; return (
    2. ); })}
{/* Preview panel */}
{step.num}

{step.title}

{step.body}

{c.custom.optionsLabel}
{step.options.map((opt, i) => (
{opt.label}
))}
); }; // ─── CONTACT ───────────────────────────────────────────────── const Contact = ({ c, isMobile, lang }) => { const isHe = lang === "he"; const [focusKey, setFocusKey] = React.useState(null); const inputBase = { width: "100%", padding: "16px 18px", background: "var(--bg-2)", border: "1px solid var(--rule)", borderRadius: 10, fontFamily: "'Heebo','Inter',sans-serif", fontSize: 15, color: "var(--ink)", outline: "none", direction: c.dir, transition: "border-color 0.32s var(--laad-ease), box-shadow 0.32s var(--laad-ease), background 0.32s var(--laad-ease)", }; const focusStyle = (key) => focusKey === key ? { borderColor: "var(--laad-gold)", boxShadow: "0 0 0 4px rgba(201,161,74,0.12)", background: "#fff", } : {}; return (
{c.contact.kicker}

{c.contact.title}

{c.contact.body}

{ e.preventDefault(); alert(isHe ? "תודה! נחזור אליכם בקרוב." : "Thanks! We'll be in touch."); }} style={{ background: "var(--bg-2)", border: "1px solid var(--rule)", borderRadius: 18, padding: isMobile ? 24 : 40, display: "flex", flexDirection: "column", gap: 16, boxShadow: "0 24px 60px rgba(10,10,10,0.06)", position: "relative", }}> {/* Top gold rule */}
{isHe ? "השאירו פרטים" : "Send a message"}
setFocusKey("n")} onBlur={() => setFocusKey(null)} style={{ ...inputBase, ...focusStyle("n") }} /> setFocusKey("p")} onBlur={() => setFocusKey(null)} style={{ ...inputBase, ...focusStyle("p") }} />
setFocusKey("e")} onBlur={() => setFocusKey(null)} style={{ ...inputBase, ...focusStyle("e") }} />