/* ──────────────────────────────────────────────────────────── Section 3 - The Solve (v3 - exploded drill, PHASE 1: desktop) ---------------------------------------------------------------- Replaces the single flat schematic image + SVG leader lines + off-image markers with an EXPLODED DRILL: seven separate transparent component PNGs stacked on the vertical axis, each with a number marker on the part itself and a 45deg base plane beneath it. What changed from v2: - Schematic component fully rebuilt (Drill component below). The flat image, the leader-line layer and the off-image marker layer are all gone. - Markers are number-only, ON the component (no rings/pulse, no leader lines). - Three interaction states per component: idle (dimmed), hover (clickable mid-state), active (full). - A 45deg rhombus "base plane" sits under each component; it brightens (opacity only, no colour) when its component is active. - Staggered entrance: one IntersectionObserver trigger, then the seven parts + planes settle in (slide-up + fade) on their own timeline. What is unchanged: - section-solve-data.jsx (decks, redaction flags, ROP row already removed) - this file just consumes it. - The left SubsystemPanel: it now renders `deck` (always visible, under the title) instead of the old `one` line. - The footer, the CTA, redaction rendering, reduced motion. - activeId remains the single source of truth; Esc -> "01". PHASE 2 (separate brief) rebuilds the mobile layout into the horizontal lying-down drill. In THIS phase, below 960px the drill simply stacks above the panel at a reduced size - safe, not final. ──────────────────────────────────────────────────────────── */ function SectionSolve() { const subs = window.SOLVE_SUBS; // activeId is the single source of truth: marker state, panel // expansion, the amber rail, and the active base plane. const [activeId, setActiveId] = React.useState("01"); const handleSelect = React.useCallback((id) => { // Toggle: clicking the already-active entry closes it, so the // accordion can return to a fully-collapsed state. Default on // mount is still "01"; Esc still resets to "01". setActiveId((current) => (current === id ? null : id)); }, []); // hoveredId drives the panel-entry rail preview on hover. const [hoveredId, setHoveredId] = React.useState(null); // `revealed` gates the staged in-view entrance. const [revealed, setRevealed] = React.useState(false); const sectionRef = React.useRef(null); React.useEffect(() => { if (!sectionRef.current) return; if (revealed) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setRevealed(true); io.disconnect(); } }); }, { threshold: 0.2 } ); io.observe(sectionRef.current); return () => io.disconnect(); }, [revealed]); // Esc returns active to "01" - there is no deselected state. React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setActiveId("01"); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return ( {/* Drafting-paper grid overlay - barely perceptible. */}