// landing.jsx — TranscriptAgent · final landing page
// Hybrid: Concept B base · Concept A warmth + levels · Concept C problem + trust.
const { useMemo, useState, useEffect } = React;
/* Scroll-spy: watch the three anchored sections (#how-it-works,
#features, #levels) and return the id of the one currently most
in view. NavBar then marks the matching link with `.is-active`
so it lights up as the visitor scrolls down. */
function useActiveSection(ids = []) {
const [active, setActive] = useState(null);
useEffect(() => {
if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') return;
const els = ids
.map((id) => document.getElementById(id))
.filter(Boolean);
if (els.length === 0) return;
// Pick the section whose top is closest to the viewport's
// 1/4 line. rootMargin shrinks the active band so we don't
// flip the active link the instant a section's edge appears.
const observer = new IntersectionObserver((entries) => {
const visible = entries
.filter((e) => e.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
if (visible.length > 0) {
setActive(visible[0].target.id);
}
}, {
rootMargin: '-25% 0px -55% 0px',
threshold: [0, 0.25, 0.5, 0.75, 1],
});
els.forEach((el) => observer.observe(el));
return () => observer.disconnect();
}, [ids.join('|')]);
return active;
}
/* dynamic "week of" so the sample week never goes stale */
const weekOfLabel = () => {
const d = new Date();
d.setDate(d.getDate() - d.getDay()); // most recent Sunday
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};
/* Server-injected live numbers from window.__landingData. The Flask
/welcome-landing route populates this; if missing (e.g. running
the static bundle outside the app) we fall back to placeholders. */
const __DATA = (typeof window !== 'undefined' && window.__landingData) || {};
const fmtCount = (n, fallback) => {
if (n == null) return fallback;
return Number(n).toLocaleString('en-US');
};
const fmtDelta = (n, suffix) => {
if (n == null || n === 0) return null;
return `+${Number(n).toLocaleString('en-US')} ${suffix}`;
};
/* ============================================================
HERO HEADLINE — locked to "trust"
============================================================ */
const HERO_HEADLINE = <>The research desk for the market channels you already trust.;
const HERO_EYEBROW = () => `Your workspace · sample week of ${weekOfLabel()}`;
/* ============================================================
ROOT
============================================================ */
const Landing = () => {
const activeAnchor = useActiveSection(['how-it-works', 'features', 'levels']);
return (
);
};
/* ============================================================
INTRO ANIMATION — slim "what you get in six seconds" interlude
between the Hero and the longer-form ProblemBand. Sandboxed
iframe so the animation's