/* global React */
const { useState, useEffect } = React;
// ─── Icons (Lucide-style, 1.5px stroke) ───
const Icon = ({ name, size = 20 }) => {
const paths = {
play: ,
mic: <>,
lock: <>,
shield: ,
calendar: <>,
heart: ,
users: <>,
check: ,
arrowRight: <>,
plus: <>,
bell: <>,
book: <>,
gift: <>,
mail: <>,
sparkle: ,
apple: ,
google: <>,
};
return (
);
};
// ─── Header ───
function Header({ page, navigate }) {
const [open, setOpen] = useState(false);
const navs = [
{ id: 'about', label: 'About', href: '/about/' },
{ id: 'features', label: 'Features', href: '/features/' },
{ id: 'pricing', label: 'Pricing', href: '/pricing/' },
{ id: 'support', label: 'Support', href: '/support/' },
];
const go = (id, e) => { if (e) e.preventDefault(); navigate(id); setOpen(false); };
return (
);
}
// ─── Footer ───
function Footer({ navigate }) {
const go = (id, e) => { if (e) e.preventDefault(); navigate(id); };
return (
);
}
// ─── CTA band (reused) ───
function CtaBand({ navigate, title, body, cta = 'Begin Yours', quiet = "Free for the first hour. No card needed." }) {
return (
{body}
{quiet}
);
}
// ─── Scroll effects: reveal + parallax ───
function ScrollFX() {
useEffect(() => {
// Reveal via IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach(e => e.isIntersecting && e.target.classList.add('is-visible'));
}, { threshold: 0.1, rootMargin: '0px 0px -48px 0px' });
document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
// Parallax via scroll + rAF
let ticking = false;
const update = () => {
document.querySelectorAll('[data-parallax]').forEach(el => {
const speed = parseFloat(el.dataset.parallax) || 0.25;
const rect = el.parentElement.getBoundingClientRect();
const center = (rect.top + rect.height * 0.5) - window.innerHeight * 0.5;
const offset = Math.max(-180, Math.min(180, center * speed));
el.style.transform = `translateY(${offset}px)`;
});
ticking = false;
};
const onScroll = () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } };
window.addEventListener('scroll', onScroll, { passive: true });
update();
return () => { io.disconnect(); window.removeEventListener('scroll', onScroll); };
}, []);
return null;
}
Object.assign(window, { Icon, Header, Footer, CtaBand, ScrollFX });
