/* ──────────────────────────────────────────────────────────── Section 2 - The Problem "Beyond 5km, the economics collapse. That's exactly where geothermal begins." 3 proof points + a closing line about US geothermal potential. Visual: large headline, three numbered proof points laid out as a 3-column band of typographic specimens. ──────────────────────────────────────────────────────────── */ function SectionProblem() { // Parallax: U.S. drilling-costs background drifts slower than the // foreground as the user descends - gives the impression of moving // down through rock. Speed 0.5 per motion brief §11 (anchored / // monumental). The bg layer is sized 140% tall so the offset never // reveals empty edges, as the brief requires. const bgRef = React.useRef(null); const sectionRef = React.useRef(null); // Parallax speed RISES on mobile to dial the effect down. The // hook's convention is: maxOffset = sectionHeight * (1 - speed), // so a HIGHER speed value means LESS drift. On a phone the // section occupies most of the viewport, so a desktop-tuned 0.5 // produces a much larger pixel-distance drift than intended — // raising to 0.8 keeps a hint of depth without the heave. const isMobile = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(max-width: 768px)").matches; useParallax(bgRef, { speed: isMobile ? 0.8 : 0.5, container: sectionRef }); const points = [ { n: "01", stat: "~60%", label: "OF TOTAL PROJECT COST", body: "Drilling consumes ~60% of total project cost - before a single watt is produced." }, { n: "02", stat: "5 km", label: "WHERE CONVENTIONAL DRILLING FAILS", body: "Beyond 5 km, conventional drilling fails - where 90%+ of the viable resource begins." }, { n: "03", stat: "10×", label: "OUTPUT VS. CONVENTIONAL", body: "Superhot rock, capable of 10× the output of a conventional well, has never been commercially reached." }]; return (
{/* Full-bleed Geothermal Drilling Costs background. Replaces the earlier strata graphic. Same parallax slack (140% tall). ImageSettle wraps the parallax layer so the entrance transform (1.06→1.00 + y +40→0) lives on the wrapper while the inner div keeps owning the per-scroll parallax shift. */}