/* ──────────────────────────────────────────────────────────────── ui.jsx — atoms + chrome (Navbar, Modal, FloatingCTA, Button, Eyebrow, Reveal, IconArrow, ModalContext) ──────────────────────────────────────────────────────────────── */ const { useState, useEffect, useRef, useContext, createContext, useCallback } = React; /* ───── Modal context ───── */ const ModalCtx = createContext({ open: () => {}, close: () => {} }); function useModal() { return useContext(ModalCtx); } /* ───── Lang context ───── */ const LangCtx = createContext({ lang: "ca", setLang: () => {}, t: {} }); function useLang() { return useContext(LangCtx); } function LangProvider({ children }) { const [lang, setLangState] = useState(() => window.detectLang ? window.detectLang() : "ca"); const setLang = (l) => { setLangState(l); localStorage.setItem("dbd-lang", l); document.documentElement.lang = l; }; const t = (window.TRANSLATIONS && window.TRANSLATIONS[lang]) || {}; return ( {children} ); } /* ───── Icons ───── */ function IconArrow({ size = 11 }) { return ( ); } function IconClose({ size = 13 }) { return ( ); } function IconCheck({ size = 22 }) { return ( ); } /* ───── Button ───── */ function Button({ children, variant = "primary", size = "md", as: As = "button", onClick, className: extraCls, ...rest }) { const cls = ["btn", `btn--${variant}`, size === "lg" && "btn--lg", size === "xl" && "btn--xl", extraCls].filter(Boolean).join(" "); return ( {children} ); } function CTAButton({ label = "Demana pressupost", variant = "primary", size = "md" }) { const { open } = useModal(); return ; } /* ───── Eyebrow ───── */ function Eyebrow({ children, light, num }) { return ( {num && {num}} {children} ); } /* ───── Reveal-on-scroll ───── */ const CHILD_ANIMATED = "stats__item split__card service-grid__cell big-list__item".split(" "); function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("is-in"); CHILD_ANIMATED.forEach((cls) => { el.querySelectorAll("." + cls).forEach((child) => child.classList.add("is-in")); }); io.unobserve(el); } }); }, { threshold: 0.08, rootMargin: "0px 0px -30px 0px" }); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } /* ───── Lang selector ───── */ function LangSelector() { const { lang, setLang } = useLang(); const langs = ["ca", "es", "en"]; return (
{langs.map((l) => ( ))}
); } /* ───── Hamburger icon ───── */ function IconHamburger({ open }) { return ( ); } /* ───── Navbar ───── */ function Navbar() { const [scrolled, setScrolled] = useState(false); const [overHero, setOverHero] = useState(true); const [menuOpen, setMenuOpen] = useState(false); const { t, lang, setLang } = useLang(); const nav = t.nav || {}; useEffect(() => { const onScroll = () => { const y = window.scrollY; setScrolled(y > 40); const hero = document.querySelector(".hero"); if (hero) { const heroBottom = hero.offsetTop + hero.offsetHeight - 60; setOverHero(y < heroBottom); } }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Tanca el menú en fer scroll useEffect(() => { if (!menuOpen) return; const onScroll = () => setMenuOpen(false); window.addEventListener("scroll", onScroll, { passive: true, once: true }); return () => window.removeEventListener("scroll", onScroll); }, [menuOpen]); // Bloqueja scroll del body quan el menú és obert useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const closeMenu = () => setMenuOpen(false); const cls = ["nav", scrolled && "nav--scrolled", overHero && !scrolled && "nav--dark", menuOpen && "nav--menu-open"].filter(Boolean).join(" "); return (
{/* Desktop links */}
{/* Hamburger — només mòbil */}
{/* Mobile menu drawer */}
{["ca", "es", "en"].map((l) => ( ))}
); } /* ───── Floating sticky CTA ───── */ function FloatingCTA() { const [visible, setVisible] = useState(false); const { open } = useModal(); const { t } = useLang(); const label = (t.floatCta) || "Demana pressupost"; useEffect(() => { const onScroll = () => { const heroH = document.querySelector(".hero")?.offsetHeight || 600; const footer = document.querySelector(".footer"); const nearFooter = footer && (window.scrollY + window.innerHeight) > (footer.offsetTop + 40); setVisible(window.scrollY > heroH * 0.6 && !nearFooter); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ───── Contact Modal ───── */ const EMPTY_FORM = { name: "", phone: "", email: "", type: "", message: "" }; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const PHONE_RE = /^[0-9\s\+\-\(\)]{6,20}$/; function Field({ label, error, children }) { return ( ); } function validateForm(form, m = {}) { const errs = {}; if (!form.name.trim()) errs.name = m.errName || "El nom és obligatori"; if (!form.phone.trim()) errs.phone = m.errPhone || "El telèfon és obligatori"; else if (!PHONE_RE.test(form.phone.trim())) errs.phone = m.errPhoneFmt || "Format de telèfon no vàlid"; if (!form.email.trim()) errs.email = m.errEmail || "L'email és obligatori"; else if (!EMAIL_RE.test(form.email.trim())) errs.email = m.errEmailFmt || "Format d'email no vàlid"; return errs; } function ContactModal({ open, initialLabel, onClose }) { const [submitted, setSubmitted] = useState(false); const [form, setForm] = useState(EMPTY_FORM); const [errors, setErrors] = useState({}); const [isLoading, setIsLoading] = useState(false); const dialogRef = useRef(null); const firstInputRef = useRef(null); const { t } = useLang(); const m = t.modal || {}; useEffect(() => { if (open) { setSubmitted(false); setForm(EMPTY_FORM); setErrors({}); setIsLoading(false); setTimeout(() => firstInputRef.current?.focus(), 220); document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [open]); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") { onClose(); return; } if (e.key !== "Tab") return; const el = dialogRef.current; if (!el) return; const focusable = Array.from(el.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' )).filter((n) => !n.disabled); if (!focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const setField = (k) => (e) => { setForm((prev) => ({ ...prev, [k]: e.target.value })); if (errors[k]) setErrors((prev) => { const n = { ...prev }; delete n[k]; return n; }); }; const onSubmit = (e) => { e.preventDefault(); const errs = validateForm(form, m); if (Object.keys(errs).length) { setErrors(errs); return; } setIsLoading(true); emailjs.send("service_86amgo9", "template_8b0u0z7", { from_name: form.name, phone: form.phone, email: form.email, message: form.message || "—", label: initialLabel, }).then(() => { setIsLoading(false); setSubmitted(true); }).catch(() => { setIsLoading(false); setErrors({ submit: m.errSubmit || "Hi ha hagut un error. Truca'ns directament." }); }); }; return (
{ if (e.target === e.currentTarget) onClose(); }} role="dialog" aria-modal="true" aria-labelledby="modal-title" >
{submitted ? (

{m.successTitle || "Sol·licitud enviada."}

{(m.successSub || "Gràcies, {name}. Et trucarem al {phone} en menys de 24 hores laborables.") .replace("{name}", form.name.split(" ")[0] || "—") .replace("{phone}", form.phone)}

) : (
{initialLabel || m.formEyebrow || "Demana pressupost"}