// EonaLabs Unified — Directions A + B fused with a light/dark theme toggle. // Structure & layout from B (orbital hero, interactive services rail, dark band, paper contact). // Light theme uses A's palette (paper #fafaf8, ink #0a0a0b, electric blue accent). // Theme persisted in localStorage as eona_theme. function DirectionUnified() { const [lang, setLang] = useLang(); const [theme, setThemeState] = React.useState(() => { if (typeof window === 'undefined') return 'dark'; return localStorage.getItem('eona_theme') || 'dark'; }); const setTheme = (t) => { setThemeState(t); try { localStorage.setItem('eona_theme', t); } catch (e) {} }; const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const [errorMsg, setErrorMsg] = React.useState(''); const [active, setActive] = React.useState(0); const rootRef = React.useRef(null); useReveal(); const handleAnchor = (e, id) => { e.preventDefault(); const root = rootRef.current; if (!root) return; const target = root.querySelector('#' + id); if (!target) return; let container = root.parentElement; while (container) { const cs = getComputedStyle(container); if (/(auto|scroll)/.test(cs.overflowY) && container.scrollHeight > container.clientHeight + 2) break; container = container.parentElement; } if (!container) return; let top = 0; let el = target; while (el && el !== container) { top += el.offsetTop; el = el.offsetParent; } container.scrollTo({ top: Math.max(0, top - 80), behavior: 'smooth' }); }; const t = { nav: COPY.nav[lang], hero: COPY.hero[lang], marquee: COPY.marquee[lang], svcIntro: COPY.servicesIntro[lang], services: COPY.services[lang], process: COPY.process[lang], stats: COPY.stats[lang], contact: COPY.contact[lang], footer: COPY.footer[lang], }; const renderTitleAccent = (str) => { const words = str.split(' '); return words.map((w, i) => ( i === words.length - 1 ? {i > 0 ? ' ' : ''}{w} : {i > 0 ? ' ' : ''}{w} )); }; const isDark = theme === 'dark'; const logoSrc = isDark ? 'eona/assets/eona-logo.png' : 'eona/assets/eona-logo-light.png'; return (
{/* NAV */} {/* HERO */}
{t.hero.eyebrow}

{t.hero.titleB[0]}
{t.hero.titleB[1]}
{t.hero.titleB[2]}

{/* TICKER */}
{[...t.marquee, ...t.marquee, ...t.marquee].map((m, i) => ( {m} ))}
{/* SERVICES */}
{t.svcIntro.eyebrow}

{renderTitleAccent(t.svcIntro.title)}

{t.svcIntro.sub}
{t.services.map((s, i) => ( ))}
{t.services[active].tag} · {t.services[active].n}

{t.services[active].title}

{t.services[active].desc}
{t.services[active].items.map((it, j) => (
{it}
))}
EONA / SVC-{t.services[active].n} {lang === 'es' ? 'Disponible ahora' : 'Available now'}
{/* PROCESS BAND */}
{t.stats.map((s, i) => (
{s.n}
{s.l}
))}
{t.process.eyebrow}

{renderTitleAccent(t.process.title)}

{t.process.steps.map((s, i) => (
{s.n}STEP
{s.t}
{s.d}
))}
{/* CONTACT */}
{t.contact.eyebrow}

{t.contact.title[0]}
{t.contact.title[1]}

{t.contact.sub}
{t.contact.or} hola@eonalabs.io
{ e.preventDefault(); if (sending || sent) return; const form = e.currentTarget; // Honeypot — if filled, silently "succeed" if (form.elements.website && form.elements.website.value) { setSent(true); return; } setSending(true); setErrorMsg(''); try { const data = new FormData(form); data.append('_subject', `Nuevo lead EonaLabs · ${data.get('name') || ''}`); const res = await fetch('https://formspree.io/f/mbdwgbbj', { method: 'POST', body: data, headers: { Accept: 'application/json' }, }); if (res.ok) { setSent(true); form.reset(); } else { const j = await res.json().catch(() => ({})); setErrorMsg((j && j.errors && j.errors[0] && j.errors[0].message) || (lang === 'es' ? 'No se pudo enviar. Intenta de nuevo o escríbenos a hola@eonalabs.io' : 'Could not send. Try again or email hola@eonalabs.io')); } } catch (err) { setErrorMsg(lang === 'es' ? 'Error de conexión. Revisa tu internet o escríbenos a hola@eonalabs.io' : 'Connection error. Check your internet or email hola@eonalabs.io'); } finally { setSending(false); } }}>
{/* honeypot */}