// Two distinct nav components.
//
// 1) HeroWordmark — the centered Amos wordmark that lives INSIDE the hero.
// Scrolls away naturally with the hero. No CTA, no background.
//
// 2) StickyBar — a separate sticky bar at the page level. Hidden until the
// hero's CTA scrolls past, then slides down from the top with Amos on the
// far left and "Join the waitlist" on the far right.
function HeroWordmark({ inverse = false }) {
const fg = inverse ? "var(--linen)" : "var(--cacao)";
return (
);
}
function StickyBar({ inverse = false, onOpen }) {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
let raf = 0;
let cancelled = false;
const tick = () => {
raf = 0;
if (cancelled) return;
const target = document.querySelector("[data-hero-cta]");
if (!target) { setVisible(false); return; }
const r = target.getBoundingClientRect();
// Show once the hero CTA's bottom edge is above the viewport top.
setVisible(r.bottom < 0);
};
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(tick);
};
tick();
const id = setTimeout(tick, 200);
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
document.addEventListener("scroll", onScroll, { passive: true, capture: true });
return () => {
cancelled = true;
clearTimeout(id);
if (raf) cancelAnimationFrame(raf);
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
document.removeEventListener("scroll", onScroll, { capture: true });
};
}, []);
const fg = inverse ? "var(--linen)" : "var(--cacao)";
const bg = inverse ? "rgba(31,14,0,0.86)" : "rgba(228,211,196,0.92)";
const border = inverse ? "1px solid rgba(239,227,209,0.10)" : "1px solid rgba(52,24,0,0.08)";
const onClickCta = (e) => {
e.preventDefault();
if (onOpen) onOpen();
};
return (
);
}
// Backward-compat: keep TeaserNav as an alias for HeroWordmark so existing
// callers don't break.
const TeaserNav = HeroWordmark;
Object.assign(window, { HeroWordmark, StickyBar, TeaserNav });