// Shared components for Next Moon website const { useState, useEffect, useRef } = React; /* ============================================ ICONS ============================================ */ const Icon = { Arrow: () => ( ), ArrowLeft: () => ( ), Phone: () => ( ), Mail: () => ( ), Location: () => ( ), Whatsapp: () => ( ), Instagram: () => ( ), Facebook: () => ( ), Tiktok: () => ( ), Menu: () => ( ), Close: () => ( ), }; /* Service icons */ const ServiceIcon = { Home: () => ( ), Bath: () => ( ), Kitchen: () => ( ), Paint: () => ( ), Building: () => ( ), Tools: () => ( ), Roof: () => ( ), Water: () => ( ), }; /* ============================================ NAV ============================================ */ function Nav({ current, setPage }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); onScroll(); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const pages = [ { id: 'home', label: 'Inicio' }, { id: 'servicios', label: 'Servicios' }, { id: 'comunidades', label: 'Comunidades' }, { id: 'nosotros', label: 'Nosotros' }, { id: 'contacto', label: 'Contacto' }, ]; const go = (id) => { setPage(id); setOpen(false); window.scrollTo({ top: 0, behavior: 'instant' }); }; return ( ); } /* ============================================ FOOTER ============================================ */ function Footer({ setPage }) { const go = (id) => { setPage(id); window.scrollTo({ top: 0, behavior: 'instant' }); }; return ( ); } /* ============================================ WHATSAPP FLOAT ============================================ */ function WhatsappFloat() { return ( ¿Hablamos por WhatsApp? ); } /* ============================================ PLACEHOLDER IMAGE ============================================ */ function PhImage({ label, num, tone = 'navy', className = '' }) { const bg = tone === 'navy' ? { background: 'linear-gradient(135deg, rgba(201,168,76,0.18), transparent 40%), repeating-linear-gradient(45deg, #2a3648 0px, #2a3648 2px, #1f2a3c 2px, #1f2a3c 16px)' } : { background: 'linear-gradient(135deg, rgba(201,168,76,0.12), transparent 40%), repeating-linear-gradient(45deg, var(--gray-100) 0px, var(--gray-100) 2px, var(--paper) 2px, var(--paper) 14px)' }; const labelColor = tone === 'navy' ? 'rgba(250,247,242,0.6)' : 'var(--gray-500)'; const numColor = tone === 'navy' ? 'var(--gold)' : 'var(--gold)'; return (

{num &&

{num}

}

{label}

); } Object.assign(window, { Icon, ServiceIcon, Nav, Footer, WhatsappFloat, PhImage, useState, useEffect, useRef });