/* Shared icons + small components + ContactModal */ const Icon = { Diamond: ({s=16})=>(), Arrow: ({s=14})=>(), Check: ({s=16})=>(), Star: ({s=14})=>(), Clock: ({s=22})=>(), Shield: ({s=22})=>(), Chat: ({s=22})=>(), Browser: ({s=24})=>(), Bolt: ({s=24})=>(), Search: ({s=24})=>(), Analyze: ({s=22})=>(), Build: ({s=22})=>(), Scale: ({s=22})=>(), Time: ({s=20})=>(), Money: ({s=20})=>(), Cog: ({s=20})=>(), Smile: ({s=20})=>(), Layers: ({s=20})=>(), Lock: ({s=20})=>(), Pin: ({s=14})=>(), Linkedin: ({s=18})=>(), Instagram: ({s=18})=>(), Plus: ({s=14})=>(), Mail: ({s=14})=>(), Sparkle: ({s=14})=>(), X: ({s=16})=>(), SpinLoader: ({s=16})=>(), ChevDown: ({s=14})=>(), }; function useReveal() { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(()=>{ if (!ref.current) return; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) { setSeen(true); return; } let done = false; const io = new IntersectionObserver((es)=>{ es.forEach(e=>{ if(e.isIntersecting && !done){ done=true; setSeen(true); io.disconnect(); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); io.observe(ref.current); const t = setTimeout(()=>{ if(!done){ done=true; setSeen(true); io.disconnect(); } }, 800); return ()=>{ io.disconnect(); clearTimeout(t); }; },[]); return [ref, seen]; } function Reveal({ children, delay=0, className="", as="div" }) { const [ref, seen] = useReveal(); const Tag = as; const dCls = delay ? ` d${delay}` : ""; return {children}; } function Counter({ to, suffix="", duration=1400, prefix="" }) { const ref = React.useRef(null); const [val, setVal] = React.useState(0); React.useEffect(()=>{ if (!ref.current) return; let started = false; const start = ()=>{ if (started) return; started = true; const t0 = performance.now(); const tick = (t)=>{ const p = Math.min(1, (t-t0)/duration); const eased = 1 - Math.pow(1-p, 3); setVal(Math.round(to * eased)); if (p<1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) { start(); return; } const io = new IntersectionObserver((es)=>{ es.forEach(e=>{ if (e.isIntersecting) { start(); io.disconnect(); } }); },{threshold:0.3}); io.observe(ref.current); const tm = setTimeout(()=>{ start(); io.disconnect(); }, 800); return ()=>{ io.disconnect(); clearTimeout(tm); }; },[to,duration]); return {prefix}{val.toLocaleString('es-ES')}{suffix}; } /* ===== CONTACT MODAL ===== */ function ContactModal({ open, onClose }) { const EMPTY = { nombre:'', empresa:'', telefono:'', email:'', servicio:'', mensaje:'' }; const [form, setForm] = React.useState(EMPTY); const [errors, setErrors] = React.useState({}); const [status, setStatus] = React.useState('idle'); React.useEffect(()=>{ document.body.style.overflow = open ? 'hidden' : ''; return ()=>{ document.body.style.overflow = ''; }; },[open]); React.useEffect(()=>{ if (!open) { const t = setTimeout(()=>{ setStatus('idle'); setErrors({}); setForm(EMPTY); },350); return ()=>clearTimeout(t); } },[open]); const set = (k,v)=>{ setForm(f=>({...f,[k]:v})); if(errors[k]) setErrors(e=>({...e,[k]:null})); }; const validate = ()=>{ const e={}; if (!form.nombre.trim()) e.nombre='Campo obligatorio'; if (!form.empresa.trim()) e.empresa='Campo obligatorio'; if (!form.telefono.trim() || form.telefono.replace(/\D/g,'').length<9) e.telefono='Mínimo 9 dígitos'; if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email='Email válido requerido'; if (!form.servicio) e.servicio='Selecciona un servicio'; return e; }; const submit = (e)=>{ e.preventDefault(); const errs = validate(); if (Object.keys(errs).length){ setErrors(errs); return; } setStatus('sending'); setTimeout(()=>{ try { const now = new Date().toLocaleString('es-ES'); const subject = `Nuevo contacto desde la web — ${form.nombre}`; const body = [ 'Nuevo cliente potencial contactó desde la web:','', `Nombre: ${form.nombre}`,`Empresa: ${form.empresa}`, `Teléfono: ${form.telefono}`,`Email: ${form.email}`, `Servicio de interés: ${form.servicio}`, `Mensaje: ${form.mensaje||'No especificado'}`,'', `Fecha: ${now}`, ].join('\n'); const a = document.createElement('a'); a.href = `mailto:digitalpower2121@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; document.body.appendChild(a); a.click(); document.body.removeChild(a); setStatus('success'); setTimeout(()=>{ onClose(); },3000); } catch(err){ setStatus('error'); } },1000); }; const Field = ({id,label,error,children})=>(
{children} {error && {error}}
); if (!open && status !== 'sending') return (
); return (
{ if(e.target===e.currentTarget) onClose(); }}>
{status==='success' ? (
✅

¡Solicitud enviada!

Te contactaremos en menos de 24h para agendar tu consulta gratuita.

) : ( <>
Cuéntanos sobre tu proyecto
Te contactaremos en menos de 24h para agendar tu consulta gratuita.
set('nombre',e.target.value)}/> set('empresa',e.target.value)}/>
set('telefono',e.target.value)}/> set('email',e.target.value)}/>