// Sections with i18n via window.t(key) and window.PAGE_LANG const IG_URL = "https://www.instagram.com/mgs.moradebre/"; const GOOGLE_URL = "https://share.google/VvNFIz33wXpdJLj3O"; const WA_URL = "https://wa.me/34650543538"; const waLink = () => `${WA_URL}?text=${encodeURIComponent(window.t("waMessage"))}`; const TEL = "+34650543538"; const TEL_DISPLAY = "650 54 35 38"; const EMAIL = "albafabregatsole@mgs.es"; // D33 footer + D37 RGPD: slugs legales por idioma. Cada index.html define // window.PAGE_LANG; el helper legalUrl("aviso"|"privacy"|"cookies"|"transparencia") // devuelve la ruta absoluta a la página legal correspondiente. const LEGAL_SLUGS = { es: { aviso: "/es/aviso-legal/", privacy: "/es/privacidad/", cookies: "/es/cookies/", transparencia: "/es/transparencia/" }, ca: { aviso: "/ca/avis-legal/", privacy: "/ca/privacitat/", cookies: "/ca/galetes/", transparencia: "/ca/transparencia/" }, en: { aviso: "/en/legal-notice/", privacy: "/en/privacy/", cookies: "/en/cookies/", transparencia: "/en/transparency/" }, nl: { aviso: "/nl/juridische-kennisgeving/", privacy: "/nl/privacy/", cookies: "/nl/cookies/", transparencia: "/nl/transparantie/" }, }; const THANKS_SLUGS = { es: "/es/gracias/", ca: "/ca/gracies/", en: "/en/thanks/", nl: "/nl/bedankt/", }; const legalUrl = (key) => { const lang = (typeof window !== "undefined" && window.PAGE_LANG) || "es"; return (LEGAL_SLUGS[lang] || LEGAL_SLUGS.es)[key] || "#"; }; // Language switcher function LangSwitcher({ compact, tokens }) { const cur = window.PAGE_LANG || "es"; const stored = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("alba_section") : ""; const hashOrSection = () => { // keep current hash when switching if (typeof window !== "undefined" && window.location.hash) return window.location.hash; return ""; }; return (

{window.LANGS.map(l => { const active = l.code === cur; return ( {l.label} ); })}

); } // ---------- NAV ---------- function Nav({ tokens }) { const [open, setOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 10); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const items = [ [window.t("navQuien"), "#quien-soy"], [window.t("navProductos"), "#productos"], [window.t("navPorQue"), "#por-que"], [window.t("navOficina"), "#oficina"], [window.t("navTestim"), "#testimonios"], [window.t("navContacto"), "#contacto"], [window.t("navFaq"), "#faq"], ]; return (

{TEL_DISPLAY} {EMAIL}

{window.t("navCTA")}

{open && ( )}

); } const topLink = { display: "inline-flex", alignItems: "center", gap: 6, color: "#fff", textDecoration: "none", minHeight: 44, padding: "10px 8px", }; const navLink = (t) => ({ textDecoration: "none", color: "#222", fontWeight: 600, fontSize: 15, paddingBottom: 4, borderBottom: "2px solid transparent", }); const socialPill = (t) => ({ width: 44, height: 44, borderRadius: 999, background: "#F4F4F4", color: t.primaryBlue, display: "inline-flex", alignItems: "center", justifyContent: "center", textDecoration: "none", }); // ---------- HERO ---------- function Hero({ tokens }) { return (

{tokens.showDecor && ( )}

{window.t("heroBadge")}

{window.t("heroTitle")}{" "} {window.t("heroTitleAccent")}

{window.t("heroLead")}

{window.t("heroCTA1")} {window.t("heroCTA2")}

{[ [window.t("heroStat1K"), window.t("heroStat1V")], [window.t("heroStat2K"), window.t("heroStat2V")], [window.t("heroStat3K"), window.t("heroStat3V")], [window.t("heroStat4K"), window.t("heroStat4V")], ].map(([k, v], i) => (

0 ? "1px solid rgba(255,255,255,.18)" : "none", }}>

{k}

{v}

))}

); } function hex(base, a) { const r = parseInt(base.slice(1,3), 16); const g = parseInt(base.slice(3,5), 16); const b = parseInt(base.slice(5,7), 16); return `rgba(${r},${g},${b},${Math.max(0, Math.min(1, a))})`; } const pillStyle = { display: "inline-flex", alignItems: "center", gap: 10, padding: "7px 14px", background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.25)", borderRadius: 99, fontSize: 13, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", }; const ctaPrimary = (t) => ({ display: "inline-flex", alignItems: "center", gap: 10, padding: "15px 24px", background: t.ctaOrange, color: "#fff", borderRadius: 4, textDecoration: "none", fontWeight: 700, fontSize: 16, boxShadow: "0 6px 22px rgba(255,133,0,.35)", transition: "transform .15s ease, box-shadow .15s ease", }); const ctaGhost = { display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 24px", background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.75)", borderRadius: 4, textDecoration: "none", fontWeight: 700, fontSize: 16, }; // ---------- QUIÉN SOY ---------- function QuienSoy({ tokens }) { const badge = window.t("quienBadge").split("|"); return (

Alba Fabregat

{badge[0]}
{badge[1]}
{badge[2]}

{window.t("quienEyebrow")}

{window.t("quienTitle")}
{window.t("quienTitleAccent")}

{window.t("quienP1")}

{window.t("quienP2")}

{[window.t("quienCheck1"), window.t("quienCheck2"), window.t("quienCheck3")].map((t, i) => (

{t}

))}

); } const eyebrow = (t) => ({ fontSize: 13, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: t.ctaOrange, marginBottom: 14, display: "inline-flex", alignItems: "center", gap: 10, }); const h2Style = (t) => ({ fontFamily: "Fraunces, 'Source Serif 4', Georgia, serif", fontWeight: 700, fontSize: "clamp(32px, 4.2vw, 48px)", lineHeight: 1.08, color: t.titleBlue, margin: "0 0 22px", letterSpacing: "-.015em", }); const pLead = { fontSize: 19, lineHeight: 1.55, color: "#222", margin: "0 0 14px" }; const pBody = { fontSize: 16.5, lineHeight: 1.65, color: "#444", margin: 0 }; // ---------- PRODUCTOS ---------- const PRODUCTS_PART_KEYS = [ ["p_accident", IconAccident], ["p_savings", IconSavings], ["p_auto", IconCar], ["p_travel", IconTravel], ["p_comm", IconBuilding], ["p_deceso", IconDeceso], ["p_home", IconHome], ["p_invest", IconInvest], ["p_pet", IconPet], ["p_mob", IconMobility], ["p_sports", IconSports], ["p_scoot", IconScooter], ["p_health", IconHealth], ["p_life", IconHeart], ]; const PRODUCTS_EMP_KEYS = [ ["e_accident", IconAccident], ["e_agri", IconAgri], ["e_auto", IconCar], ["e_shop", IconShop], ["e_const", IconConstruction], ["e_poll", IconPollution], ["e_horeca", IconRestaurant], ["e_office", IconOffice], ["e_pyme", IconPyme], ["e_rc", IconShield], ["e_tech", IconTech], ["e_life", IconHeart], ]; function Productos({ tokens }) { const [tab, setTab] = React.useState("part"); const [productsModal, setProductsModal] = React.useState(null); // null | "particular" | "empresa" const [familyModal, setFamilyModal] = React.useState(null); // null | familyKey const productsModalTriggerRef = React.useRef(null); const familyModalTriggerRef = React.useRef(null); const keys = tab === "part" ? PRODUCTS_PART_KEYS : PRODUCTS_EMP_KEYS; // D39 — cerrar modales si el viewport pasa a tablet/desktop (≥768) React.useEffect(() => { const mq = window.matchMedia("(min-width: 768px)"); const update = () => { if (mq.matches) { setProductsModal(null); setFamilyModal(null); } }; mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); // D39 — bloquear scroll del body + notificar a sticky bar mientras hay modal abierto React.useEffect(() => { const open = productsModal !== null; document.body.style.overflow = open ? "hidden" : ""; window.dispatchEvent(new CustomEvent("alba:productsModal", { detail: { open } })); return () => { document.body.style.overflow = ""; window.dispatchEvent(new CustomEvent("alba:productsModal", { detail: { open: false } })); }; }, [productsModal]); // D39 — Esc cierra el modal full-screen SOLO si el modal central no está abierto React.useEffect(() => { if (productsModal === null) return; const onKey = (e) => { if (e.key === "Escape" && familyModal === null) { closeProductsModal(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [productsModal, familyModal]); const openProductsModal = (group, e) => { productsModalTriggerRef.current = e.currentTarget; setProductsModal(group); }; const closeProductsModal = () => { setProductsModal(null); setTimeout(() => productsModalTriggerRef.current && productsModalTriggerRef.current.focus(), 0); }; const openFamilyModal = (familyKey, e) => { familyModalTriggerRef.current = e.currentTarget; setFamilyModal(familyKey); }; const closeFamilyModal = () => { setFamilyModal(null); setTimeout(() => familyModalTriggerRef.current && familyModalTriggerRef.current.focus(), 0); }; return (

{window.t("prodEyebrow")}

{window.t("prodTitle")}
{window.t("prodTitleAccent")}

{window.t("prodLead")}

{/* D39 — mobile <768: 2 botones grandes */}

{/* Tablet+desktop ≥768: tabs + cards (sin cambios respecto a Lote 5) */}

{[ ["part", window.t("prodTabPart"), PRODUCTS_PART_KEYS.length], ["emp", window.t("prodTabEmp"), PRODUCTS_EMP_KEYS.length], ].map(([id, label, count]) => { const active = tab === id; return ( ); })}

{keys.map(([k, Icon], i) => ( ))}

{/* CTA inline — D39: visible también en mobile bajo los 2 botones. id="cta-inline-products" lo usa StickyBottomBar (Lote 8, D24 ampliada) para ocultar la sticky bar mientras este bloque entra en viewport. */}

{window.t("prodCTATitle")}

{window.t("prodCTABtn")}

{productsModal && ( )} {familyModal && ( )}

); } const mobileBtnStyle = (t) => ({ display: "flex", alignItems: "center", gap: 16, padding: "20px 22px", background: "#fff", border: `1.5px solid ${t.primaryBlue}`, borderRadius: 4, cursor: "pointer", fontFamily: "inherit", textAlign: "left", width: "100%", minHeight: 88, boxShadow: "0 1px 0 #E9E9E9", }); // D39 — Modal full-screen Particulares / Empresas function FullScreenProductsModal({ group, onClose, onSelectFamily, tokens }) { const closeBtnRef = React.useRef(null); const titleId = "fs-modal-title"; React.useEffect(() => { closeBtnRef.current && closeBtnRef.current.focus(); }, []); const keys = group === "particular" ? PRODUCTS_PART_KEYS : PRODUCTS_EMP_KEYS; const titleText = group === "particular" ? `${window.t("prodTabPart")} (${keys.length})` : `${window.t("prodTabEmp")} (${keys.length})`; return ( ); } // D39 — Modal central productos individuales (capa 2) function FamilyProductsModal({ familyKey, group, onClose, tokens }) { const closeBtnRef = React.useRef(null); const titleId = "central-modal-title"; React.useEffect(() => { closeBtnRef.current && closeBtnRef.current.focus(); }, []); const items = (window.MGS_PRODUCTS[group] && window.MGS_PRODUCTS[group][familyKey]) || []; // NO se cierra con tap fuera ni Esc — decisión Sandra 28/04. Solo botón X. return ( ); } function ProductCard({ Icon, title, desc, ext, tokens }) { return (

{title}

{desc}

{ext}

); } // ---------- POR QUÉ ---------- function PorQue({ tokens }) { const items = [ [window.t("porque1K"), window.t("porque1V")], [window.t("porque2K"), window.t("porque2V")], [window.t("porque3K"), window.t("porque3V")], [window.t("porque4K"), window.t("porque4V")], ]; return (

{tokens.showDecor && ( )}

{window.t("porqueEyebrow")}

{window.t("porqueTitle")}
{window.t("porqueTitleAccent")}

{items.map(([k, v], i) => (

0{i+1}

{k}

{v}

))}

); } // ---------- OFICINA ---------- // D44 — bloqueo previo del iframe Google Maps. Hasta consentimiento de la categoría // "marketing" del banner cookies, se muestra placeholder con CTA "Cargar mapa". function Oficina({ tokens }) { const mapsEmbed = `https://www.google.com/maps?q=${encodeURIComponent("Carrer d'Antoni Asens 23, Móra d'Ebre")}&output=embed`; const [mapLoaded, setMapLoaded] = React.useState(false); React.useEffect(() => { const check = () => { try { if (window.CookieConsent && typeof window.CookieConsent.acceptedCategory === "function" && window.CookieConsent.acceptedCategory("marketing")) { setMapLoaded(true); } } catch (e) {} }; check(); const onConsent = () => check(); const onChange = () => check(); window.addEventListener("cc:onConsent", onConsent); window.addEventListener("cc:onChange", onChange); // Polling defensivo: CookieConsent.run se inicializa en window.load (async). // Si Oficina monta antes, los eventos pueden no haber sido registrados aún. let i = 0; const interval = setInterval(() => { check(); if (++i > 20) clearInterval(interval); }, 300); return () => { window.removeEventListener("cc:onConsent", onConsent); window.removeEventListener("cc:onChange", onChange); clearInterval(interval); }; }, []); return (

{mapLoaded ? (