/* Auto-generated from mockups/04-case-study.html */ (function(){ const { useState, useEffect, useRef } = React; /* ── Icons ── */ const Icon = ({ size = 16, children, style }) => ( {children} ); const X = (p) => ; const Check = (p) => ; const Arrow = (p) => ; const Sparkle = (p) => ; /* ── Animation hooks ── */ function useInView(threshold = 0.3) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) { setInView(true); return; } const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold }); io.observe(ref.current); return () => io.disconnect(); }, [threshold]); return [ref, inView]; } function useMetricPop({ active, delay = 0 } = {}) { const [popped, setPopped] = useState(false); useEffect(() => { if (!active) { setPopped(false); return; } const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches; if (reduce) { setPopped(true); return; } const id = setTimeout(() => setPopped(true), delay); return () => clearTimeout(id); }, [active, delay]); return { display: 'inline-block', opacity: popped ? 1 : 0, transform: popped ? 'scale(1)' : 'scale(0.9)', transition: 'opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)', transformOrigin: 'left center', willChange: 'transform, opacity', }; } function Reveal({ children, delay = 0, style }) { const [ref, inView] = useInView(0.15); return (
{children}
); } /* ── Headline number trio — CPL / Message cost / Lead volume ── */ function MetricCallout({ label, before, after, unit, pct, vs, accent, delay = 0, active, format = 'num' }) { const popStyle = useMetricPop({ active, delay }); const display = format === 'plus' ? `+${after}%` : after; return (
{/* Accent stripe */}
{label}
{format === 'num' && ( {before} )} {display} {unit && ( {unit} )}
{pct} {vs}
); } /* ── The 3-column story block ── */ function StoryColumn({ eyebrow, eyebrowColor, title, items, tone = 'neutral' }) { const isCenter = tone === 'center'; return (
{isCenter && (
)}
{eyebrow}

{title}

    {items.map((it, i) => )}
); } function StoryItem({ item, tone }) { const [Mark, markColor] = tone === 'before' ? [X, '#f87171'] : tone === 'after' ? [Check, '#22c55e'] : [Sparkle, '#0047ff']; if (tone === 'center') { return (
  • {item.n}
    {item.title}
    {item.body}
    {item.tiers && (
    {item.tiers.map((t, i) => ( {t} ))}
    )}
    • ); } const text = item.text || item; const parts = item.num ? [item.text, item.num, item.suffix || ''] : null; return (
  • {parts ? ( <> {parts[0]} {parts[1]} {parts[2]} ) : text}
    • ); } /* ── Case Study Section ── */ function CaseStudySection() { const [metricsRef, metricsIn] = useInView(0.35); const t = window.useCopy(); const stepTiers = [['Tier 1'], ['Tier 1'], ['Tier 2'], ['Tier 1']]; const interventionItems = t.sila.col2.steps.map((step, i) => ({ n: String(i + 1), title: step.title, body: step.body, tiers: stepTiers[i], })); return (
    {/* Soft blue horizon under the metric row */}
    {/* Header */}
    {t.sila.badge}

    {t.sila.h1_pre}{' '} {t.sila.h1_metric} {' '} {t.sila.h1_post}

    {t.sila.meta.client} {t.sila.meta.industry} {t.sila.meta.region} {t.sila.meta.engagement}
    {/* 3-column story */}
    {/* Headline metric trio — animates on scroll-into-view */}
    ); } window.SilaSection = CaseStudySection; })();