// 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 }) {
// Brand mark — uses the canonical Echo logo image asset.
// The asset is the dark-bg version; on light backgrounds we keep it as-is
// because the logo container reads cleanly on both via subtle border-radius
// and the inherent dark canvas of the logo.
return (
);
}
// ── Solutions dropdown ────────────────────────────────────────────
function SolutionsDropdown({ onPhoto }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', close);
return () => document.removeEventListener('mousedown', close);
}, []);
const items = [
{ label: 'Oracle ERP', sub: 'Fusion · NetSuite · JD Edwards', href: '/erp' },
{ label: 'Freight & Logistics', sub: 'Carriers · Brokers · 3PLs', href: '/freight' },
{ label: 'Regenerative Health', sub: 'SUD · Behavioral · Clinics', href: '/health' },
];
const linkColor = onPhoto ? 'rgba(244,240,232,0.72)' : 'var(--muted)';
const linkHover = onPhoto ? '#F4F0E8' : 'var(--ink)';
return (
{open && (
)}
);
}
// ── 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(() => {
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => { setScrolled(window.scrollY > 80); ticking = false; });
};
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 removed — was causing scroll lag due to
// continuous transform on a 23MB video element. The fixed video
// background already creates depth without scroll-coupled motion.)
return () => { obs.disconnect(); plateObs.disconnect(); };
}, []);
return (
<>