// shared.jsx — Nav, Footer, WhatsApp, utils — exports to window // Load with const { useState, useEffect, useRef } = React; // ── Hooks ───────────────────────────────────────────────────────────────────── function useInView(threshold = 0.12) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, inView]; } function useCounter(target, active, duration = 1800) { const [val, setVal] = useState(0); useEffect(() => { if (!active) return; let start = null; const step = ts => { if (!start) start = ts; const p = Math.min((ts - start) / duration, 1); setVal(Math.round(p * target)); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }, [active, target]); return val; } // ── AI Neural Background ─────────────────────────────────────────────────────── function AIGrid({ opacity = 0.25 }) { const nodes = Array.from({ length: 20 }, (_, i) => ({ x: (i % 5) * 25 + 12.5 + (Math.sin(i * 2.3) * 6), y: Math.floor(i / 5) * 25 + 12.5 + (Math.cos(i * 1.7) * 6), })); const lines = []; nodes.forEach((a, i) => { nodes.forEach((b, j) => { if (j > i) { const d = Math.hypot(a.x - b.x, a.y - b.y); if (d < 32) lines.push({ x1: a.x, y1: a.y, x2: b.x, y2: b.y, d }); } }); }); return ( {lines.map((l, i) => ( ))} {nodes.map((n, i) => ( ))} ); } // ── Circuit Texture ──────────────────────────────────────────────────────────── function CircuitBg({ opacity = 0.04 }) { return (
); } // ── Icon Set ────────────────────────────────────────────────────────────────── const ICONS = { web: ( ), content: ( ), ads: ( ), seo: ( ), auto: ( ), campaign: ( ), ai: ( ), check: ( ), arrow: ( ), wa: ( ), }; const SERVICES_DATA = [ { id:'web', icon: ICONS.web, title:'Diseño Web', sub:'Páginas que Convierten', href:'servicios/diseno-web.html', tags:['Landing Pages','E-commerce','Corporativo'], desc:'Creamos sitios web modernos, rápidos y orientados a conversión que reflejan la esencia de tu marca.' }, { id:'content', icon: ICONS.content, title:'Gestión de Contenido', sub:'Tu Voz en Digital', href:'servicios/contenido.html', tags:['Redes Sociales','Blog','Video'], desc:'Creamos contenidos estratégicos para conectar con tu audiencia y fortalecer tu marca.' }, { id:'ads', icon: ICONS.ads, title:'Publicidad Digital', sub:'Pauta que Genera ROI', href:'servicios/publicidad-digital.html', tags:['Meta Ads','Google Ads','TikTok'], desc:'Campañas publicitarias para atraer clientes potenciales y maximizar el retorno de inversión.' }, { id:'seo', icon: ICONS.seo, title:'Posicionamiento SEO', sub:'Aparece en Google', href:'servicios/seo.html', tags:['SEO Técnico','Analytics','Link Building'], desc:'Optimizamos tu sitio para los primeros lugares de Google con tráfico orgánico constante.' }, { id:'auto', icon: ICONS.auto, title:'Automatizaciones con IA', sub:'Ventas 24/7', href:'servicios/automatizaciones-ia.html', tags:['CRM','Chatbots','IA'], desc:'Flujos inteligentes que automatizan tu marketing y ventas con inteligencia artificial.' }, { id:'campaign', icon: ICONS.campaign, title:'Campañas 360°', sub:'Estrategia Integral', href:'servicios/campanas-360.html', tags:['Estrategia','Omnicanal','Performance'], desc:'Estrategias integrales que conectan todos tus canales digitales y tradicionales.' }, ]; // ── Nav ─────────────────────────────────────────────────────────────────────── function KonceptNav({ current = 'inicio' }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); const isRoot = !window.location.pathname.includes('/servicios/'); const base = isRoot ? '' : '../'; const links = [ { label: 'Inicio', href: `${base}index.html#inicio` }, { label: 'Servicios', href: `${base}index.html#servicios` }, { label: 'Paquetes', href: `${base}index.html#paquetes` }, { label: 'Contacto', href: `${base}contacto.html` }, ]; return ( ); } // ── Footer ───────────────────────────────────────────────────────────────────── function KonceptFooter() { const isRoot = !window.location.pathname.includes('/servicios/'); const base = isRoot ? '' : '../'; return ( ); } // ── WhatsApp ────────────────────────────────────────────────────────────────── function KonceptWA() { const [hov, setHov] = useState(false); return ( setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: 'fixed', bottom: 28, right: 28, zIndex: 9999, display: 'flex', alignItems: 'center', gap: 10, background: 'linear-gradient(135deg, #25D366, #128C7E)', color: '#fff', textDecoration: 'none', padding: hov ? '13px 20px 13px 16px' : '16px', borderRadius: 100, boxShadow: '0 8px 28px rgba(37,211,102,0.4)', transition: 'all 0.35s cubic-bezier(0.34,1.56,0.64,1)', maxWidth: hov ? 220 : 54, overflow: 'hidden', whiteSpace: 'nowrap', }}> {ICONS.wa} {hov && Chatea con nosotros} ); } // ── Contact Form (reusable) ─────────────────────────────────────────────────── function KonceptContactForm({ preselect = '' }) { const [sent, setSent] = useState(false); const [form, setForm] = useState({ nombre: '', empresa: '', email: '', telefono: '', servicio: preselect, mensaje: '' }); const [loading, setLoading] = useState(false); const handleSubmit = async e => { e.preventDefault(); setLoading(true); try { const data = new FormData(); Object.entries(form).forEach(([k, v]) => data.append(k, v)); data.append('_subject', `Nueva solicitud de ${form.nombre} — ${form.empresa}`); data.append('_captcha', 'false'); await fetch('https://formsubmit.co/comercial@konceptpublicidad.com', { method: 'POST', body: data, headers: { Accept: 'application/json' } }); setSent(true); } catch { setSent(true); } setLoading(false); }; const inp = { width: '100%', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, padding: '13px 15px', color: '#f0f0f8', fontSize: 14, fontFamily: 'Poppins, sans-serif', outline: 'none', transition: 'border-color 0.2s', }; const lbl = { fontSize: 11, fontWeight: 600, color: 'rgba(240,240,248,0.5)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6, display: 'block', fontFamily: 'Montserrat, sans-serif' }; if (sent) return (
{ICONS.check}

¡Mensaje Enviado!

Nuestro equipo comercial se comunicará contigo muy pronto.

); return (
setForm(p => ({ ...p, nombre: e.target.value }))} placeholder="Tu nombre" style={inp} onFocus={e => e.target.style.borderColor = '#00bd6b'} onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'} />
setForm(p => ({ ...p, empresa: e.target.value }))} placeholder="Nombre de tu empresa" style={inp} onFocus={e => e.target.style.borderColor = '#00bd6b'} onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'} />
setForm(p => ({ ...p, email: e.target.value }))} placeholder="correo@empresa.com" style={inp} onFocus={e => e.target.style.borderColor = '#00bd6b'} onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'} />
setForm(p => ({ ...p, telefono: e.target.value }))} placeholder="+57 300 000 0000" style={inp} onFocus={e => e.target.style.borderColor = '#00bd6b'} onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.1)'} />