// app.jsx — Nav + App shell. Hero is now in hero-section.jsx
const { useState, useEffect, useRef } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"accent": "#60A5FA",
"displayFont": "General Sans",
"heroImage": "hero-truck-corridor"
}/*EDITMODE-END*/;
// ── Echo Logo SVG ─────────────────────────────────────────────────
// Teal dot + three concentric arcs sweeping right. Tight 24×28 viewBox
// (no trailing whitespace) so the wordmark sits closer to the symbol.
// Radii arithmetic 5 → 8 → 11; chord length always equals 2r so each
// arc is a clean semicircle, giving an even radio-wave silhouette.
function LogoMark({ size = 26, light = false }) {
const stroke = light ? '#F4F0E8' : 'var(--ink)';
const w = size * (24 / 28);
return (
);
}
// ── Nav ───────────────────────────────────────────────────────────
function Nav({ theme, setTheme, scrolled }) {
const links = [
{ label: 'Agents', href: '#agents' },
{ label: 'Why Echo', href: '#why-echo' },
{ label: 'How It Works', href: '#how-it-works' },
];
// Top of page (over photo) — light text. After scroll — paper bg.
const onPhoto = !scrolled;
return (
);
}
// ── Tweaks ────────────────────────────────────────────────────────
function EchoTweaks({ tweaks, setTweak }) {
return (
setTweak('theme', v)} />
setTweak('accent', v)} />
setTweak('heroImage', v)}
/>
setTweak('displayFont', v)}
/>
);
}
// ── App ───────────────────────────────────────────────────────────
function App() {
const [tweaks, setTweakState] = useState(TWEAK_DEFAULTS);
const [scrolled, setScrolled] = useState(false);
const [tweaksOpen, setTweaksOpen] = useState(false);
const setTweak = (key, val) => {
setTweakState(prev => {
const next = typeof key === 'object' ? { ...prev, ...key } : { ...prev, [key]: val };
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
return next;
});
};
useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme); }, [tweaks.theme]);
useEffect(() => {
document.documentElement.style.setProperty('--accent', tweaks.accent);
document.documentElement.style.setProperty('--accent-dim', tweaks.accent + '1a');
document.documentElement.style.setProperty('--accent-glow', tweaks.accent + '38');
}, [tweaks.accent]);
useEffect(() => {
document.documentElement.style.setProperty('--ff-display', `'${tweaks.displayFont}', 'Geist', system-ui, sans-serif`);
}, [tweaks.displayFont]);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 80);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
const handler = e => {
if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
};
window.addEventListener('message', handler);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', handler);
}, []);
useEffect(() => {
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
}, { threshold: 0.07 });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
// Tag plates with .in-view as they enter the viewport (drives both the
// accent halo on dark mode plates AND the scroll-fade-up reveal).
// Set-once: stays revealed after first crossing the threshold.
const plateObs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in-view');
plateObs.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('.glass-plate').forEach(el => plateObs.observe(el));
// Hero video parallax — gentle scale + translate as the page scrolls
const video = document.querySelector('.site-video-bg video');
let ticking = false;
const onScroll = () => {
if (!video || ticking) return;
ticking = true;
requestAnimationFrame(() => {
const y = Math.min(window.scrollY, 800);
video.style.transform = `translateY(${y * 0.18}px) scale(${1 + y * 0.00015})`;
ticking = false;
});
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => { obs.disconnect(); plateObs.disconnect(); window.removeEventListener('scroll', onScroll); };
}, []);
return (
<>