// Cook Street Sourcing v2 — Sections 1: Hero, StatsBar, About function useReveal(threshold = 0.1) { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { el.querySelectorAll(".fu").forEach((c, i) => { setTimeout(() => { c.style.opacity="1"; c.style.transform="translateY(0)"; }, i*120); }); obs.disconnect(); } }, { threshold }); obs.observe(el); return () => obs.disconnect(); }, []); return ref; } const fu = { opacity:0, transform:"translateY(24px)", transition:"opacity 0.7s ease, transform 0.7s ease" }; // ─── Hero: Bleed Split ─────────────────────────────────────────────────────── function HeroBleed({ t, in_, anim }) { const h = t.hero; return (
{/* Left text */}
{h.label}

{h.line1} {h.line2} {h.line3}

{h.sub}

e.currentTarget.style.backgroundColor="#5a6450"} onMouseLeave={e=>e.currentTarget.style.backgroundColor="#4A5240"}>{h.cta1} {e.currentTarget.style.borderColor="rgba(255,255,255,0.5)";e.currentTarget.style.color="#fff";}} onMouseLeave={e=>{e.currentTarget.style.borderColor="rgba(255,255,255,0.18)";e.currentTarget.style.color="rgba(255,255,255,0.65)";}}>{h.cta2}
{/* Right image — bleeds to viewport edge */}
Premium leather handbage.currentTarget.style.transform="scale(1.04)"} onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"} />
{/* Scroll indicator */}
); } // ─── Hero: Full Photo Overlay ─────────────────────────────────────────────── function HeroOverlay({ t, in_, anim }) { const h = t.hero; return (
{h.label}

{h.line1} {h.line2} {h.line3}

{h.sub}

); } // ─── Hero: Typographic (Giant Type) ───────────────────────────────────────── function HeroTypographic({ t, in_, anim }) { const h = t.hero; return (
{/* Grid texture */}
{/* Accent image — right edge strip */}
); } // ─── Hero (dispatcher) ─────────────────────────────────────────────────────── function Hero() { const [in_, setIn] = React.useState(false); const t = useT(); const tweaks = React.useContext(window.TweakCtx || React.createContext({})); const heroLayout = (tweaks && tweaks.heroLayout) || "bleed"; React.useEffect(() => { const tm = setTimeout(()=>setIn(true),80); return ()=>clearTimeout(tm); },[]); const anim = d => ({ transition:`opacity 0.9s ease ${d}ms, transform 0.9s ease ${d}ms`, opacity:in_?1:0, transform:in_?"none":"translateY(24px)" }); if (heroLayout === "overlay") return ; if (heroLayout === "type") return ; return ; } // ─── Stats Bar ──────────────────────────────────────────────────────────────── function CountUp({ to, suffix }) { const [n, setN] = React.useState(0); const [started, setStarted] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const obs = new IntersectionObserver(e=>{if(e[0].isIntersecting){setStarted(true);obs.disconnect();}},{threshold:0.5}); obs.observe(ref.current); return ()=>obs.disconnect(); },[]); React.useEffect(() => { if(!started)return; let start=null; const dur=1600; const step=ts=>{if(!start)start=ts;const p=Math.min((ts-start)/dur,1);setN(Math.floor(to*(1-Math.pow(1-p,3))));if(p<1)requestAnimationFrame(step);}; requestAnimationFrame(step); },[started,to]); return {n}{suffix}; } function StatsBar() { const t = useT(); const nums = [{ to:25, suffix:"+" },{ to:315, suffix:"K+" },{ to:19, suffix:"" },{ to:3, suffix:"" },{ to:18, suffix:"" }]; return (
{nums.map((s,i) => (
{t.stats[i].label}
))}
); } // ─── About ─────────────────────────────────────────────────────────────────── function About() { const ref = useReveal(0.05); const t = useT(); const a = t.about; return (
{/* Label */}
{a.label}
{/* About layout */}

{a.headline1}
{a.headline2}

{/* Show just 2 core paragraphs — breathe */}

{a.p1}

{a.p3}

{a.tagline}

{/* Divider */}
{/* Founding Expertise */}
{a.expertiseLabel}
{/* Top row: headline left, stats right */}

{a.expertiseH1}
{a.expertiseH2}

{a.stats.map((s,i) => (
{s.value}
{s.label}
))}
{/* Points — Process style */}
{a.points.map((p,i) => (
0{i+1}
{i < a.points.length-1 &&
}

{p.title}

{p.desc}

))}
{a.points.map((p,i) => (
0{i+1}

{p.title}

{p.desc}

))}
); } function Expertise() { return null; } Object.assign(window, { Hero, StatsBar, About, Expertise, useReveal, fu });