// Challenge — the pivot from "about him" to "about you". Designed as an editorial
// report grid: left-aligned headline, two-column blocks (title left / body right)
// with a drawing vertical rule, and break-out gold pull-quote punchlines.
// Scroll-triggered reveals: vertical translate + opacity only, micro-staggered.
function useReveal(options) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { setShown(true); return; }
const io = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) { setShown(true); io.disconnect(); }
}, { rootMargin: '0px 0px -12% 0px', threshold: 0.12, ...(options || {}) });
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, shown];
}
function Reveal({ as = 'div', delay = 0, slow = false, className = '', style, children, ...rest }) {
const [ref, shown] = useReveal();
const Tag = as;
return (
{children}
);
}
function Para({ children }) {
return (
{children}
);
}
function ChallengeBlock({ title, paragraphs, punch }) {
// one observer per block so the rule-draw + title→body→punch stagger stay in sync
const [ref, shown] = useReveal();
const vis = shown ? ' is-visible' : '';
return (
{title}
{paragraphs.map((p, i) => {p})}
{punch}
);
}
function Challenge() {
return (
{/* header — left-aligned, authoritative */}
The challenge
Every business knows AI matters. Very few know what to actually do about it.
{/* report-grid blocks */}