// Hero — headline, growing tree, progress bar, CTAs, prayer counter const { useState, useEffect, useRef } = React; // --- Zoomable lightbox: click image → opens fullscreen. Wheel to zoom, drag to pan, pinch on touch, Esc or backdrop to close. function ImageLightbox({ src, alt, onClose }) { const [scale, setScale] = useState(1); const [offset, setOffset] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const dragState = useRef({ startX: 0, startY: 0, startOffX: 0, startOffY: 0 }); const pinchState = useRef({ active: false, startDist: 0, startScale: 1 }); // Esc closes useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "+" || e.key === "=") setScale(s => Math.min(6, s * 1.2)); else if (e.key === "-" || e.key === "_") setScale(s => Math.max(1, s / 1.2)); else if (e.key === "0") { setScale(1); setOffset({ x: 0, y: 0 }); } }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); const onWheel = (e) => { e.preventDefault(); const delta = -e.deltaY * 0.0015; setScale(s => { const next = Math.max(1, Math.min(6, s * (1 + delta))); if (next === 1) setOffset({ x: 0, y: 0 }); return next; }); }; const onPointerDown = (e) => { if (e.pointerType === "touch" && e.isPrimary === false) return; if (scale <= 1) return; setDragging(true); e.currentTarget.setPointerCapture(e.pointerId); dragState.current = { startX: e.clientX, startY: e.clientY, startOffX: offset.x, startOffY: offset.y }; }; const onPointerMove = (e) => { if (!dragging) return; setOffset({ x: dragState.current.startOffX + (e.clientX - dragState.current.startX), y: dragState.current.startOffY + (e.clientY - dragState.current.startY), }); }; const onPointerUp = (e) => { setDragging(false); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {} }; // Touch pinch-to-zoom const touches = useRef(new Map()); const onTouchStart = (e) => { for (const t of e.touches) touches.current.set(t.identifier, { x: t.clientX, y: t.clientY }); if (e.touches.length === 2) { const [a, b] = e.touches; const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY); pinchState.current = { active: true, startDist: dist, startScale: scale }; } }; const onTouchMove = (e) => { if (e.touches.length === 2 && pinchState.current.active) { e.preventDefault(); const [a, b] = e.touches; const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY); const next = Math.max(1, Math.min(6, pinchState.current.startScale * (dist / pinchState.current.startDist))); setScale(next); if (next === 1) setOffset({ x: 0, y: 0 }); } }; const onTouchEnd = (e) => { if (e.touches.length < 2) pinchState.current.active = false; for (const t of e.changedTouches) touches.current.delete(t.identifier); }; const doubleClick = () => { if (scale > 1) { setScale(1); setOffset({ x: 0, y: 0 }); } else setScale(2.5); }; return (

{ if (e.target === e.currentTarget) onClose(); }} onWheel={onWheel} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(8,17,32,0.96)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", display: "grid", placeItems: "center", animation: "lbFadeIn 220ms ease-out", }} > {/* Close */} {/* Zoom controls */}

{[ { label: "−", onClick: () => setScale(s => { const n = Math.max(1, s / 1.25); if (n === 1) setOffset({x:0,y:0}); return n; }) }, { label: "Reset", onClick: () => { setScale(1); setOffset({ x: 0, y: 0 }); }, wide: true }, { label: "+", onClick: () => setScale(s => Math.min(6, s * 1.25)) }, ].map((b, i) => ( ))}

{Math.round(scale * 100)}%

{/* Hint */}

Scroll to zoom · Drag to pan · Esc to close

{/* Image stage */}

1 ? (dragging ? "grabbing" : "grab") : "zoom-in", overflow: "hidden", touchAction: "none", }} > {alt}

); } // Architectural rendering of the finished New Eden campus — seen from a gentle elevated angle. // Hand-drawn SVG: chapel at center (cross on steeple), flanked by academic wings, dining hall, // dormitories, treed quad with walking paths, sunrise behind. Cream + gold line-art on deep navy. function CampusRendering() { return ( ); } // --- Monthly giving sparkline: dot+line chart of donations since launch --- function GrowthSparkline({ data }) { // data: array of { month: "Jan", amount: number } const w = 420, h = 90, pad = { t: 14, r: 10, b: 22, l: 10 }; const innerW = w - pad.l - pad.r; const innerH = h - pad.t - pad.b; if (!Array.isArray(data) || data.length === 0) return null; const max = Math.max(...data.map(d => d.amount), 1); const single = data.length === 1; const step = single ? 0 : innerW / (data.length - 1); const pts = data.map((d, i) => ({ x: single ? pad.l + innerW / 2 : pad.l + i * step, y: pad.t + innerH - (d.amount / max) * innerH, ...d, })); const linePath = pts.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(" "); const areaPath = single ? "" : `${linePath} L ${pts[pts.length-1].x} ${pad.t + innerH} L ${pts[0].x} ${pad.t + innerH} Z`; const latest = pts[pts.length - 1]; const labelIndices = single ? [0] : Array.from(new Set([0, Math.floor(pts.length / 2), pts.length - 1])); return ( ); } function TreeOfGrowth({ progress }) { // progress: 0..1 // Renders an original tree silhouette whose branches "draw in" as progress grows. // We animate stroke-dashoffset per path using dynamic `style`. const segments = [ // trunk { d: "M 160 320 V 180", w: 4, t: 0 }, // main left branch { d: "M 160 220 Q 120 210 90 180 Q 70 160 55 130", w: 2.5, t: 0.1 }, // main right branch { d: "M 160 220 Q 200 208 230 175 Q 250 150 265 120", w: 2.5, t: 0.18 }, // upper-left { d: "M 160 200 Q 130 185 110 160 Q 95 140 85 115", w: 2, t: 0.28 }, // upper-right { d: "M 160 200 Q 190 182 215 155 Q 232 132 240 105", w: 2, t: 0.36 }, // top center { d: "M 160 200 Q 155 170 150 140 Q 148 115 155 90", w: 2, t: 0.46 }, { d: "M 160 200 Q 168 175 172 140 Q 174 110 168 85", w: 2, t: 0.54 }, // outer tips { d: "M 85 115 L 70 95", w: 1.5, t: 0.64 }, { d: "M 85 115 L 95 90", w: 1.5, t: 0.7 }, { d: "M 240 105 L 250 85", w: 1.5, t: 0.76 }, { d: "M 240 105 L 228 82", w: 1.5, t: 0.82 }, { d: "M 155 90 L 145 72", w: 1.5, t: 0.88 }, { d: "M 168 85 L 176 68", w: 1.5, t: 0.92 }, ]; // leaves positions matched to branch tips const leaves = [ { cx: 55, cy: 130, t: 0.32 }, { cx: 265, cy: 120, t: 0.40 }, { cx: 85, cy: 115, t: 0.50 }, { cx: 240, cy: 105, t: 0.58 }, { cx: 150, cy: 140, t: 0.66 }, { cx: 172, cy: 140, t: 0.72 }, { cx: 70, cy: 95, t: 0.80 }, { cx: 95, cy: 90, t: 0.84 }, { cx: 250, cy: 85, t: 0.88 }, { cx: 228, cy: 82, t: 0.92 }, { cx: 145, cy: 72, t: 0.96 }, { cx: 176, cy: 68, t: 0.99 }, ]; // roots const roots = [ { d: "M 160 320 Q 120 335 90 355", t: 0 }, { d: "M 160 320 Q 200 335 230 355", t: 0 }, { d: "M 160 320 Q 140 345 120 368", t: 0 }, { d: "M 160 320 Q 180 345 200 368", t: 0 }, { d: "M 160 320 V 360", t: 0 }, ]; return ( ); } function PrayerButton({ count, hasPrayed, onPray }) { const [ripples, setRipples] = useState([]); const handle = () => { if (!hasPrayed) { setRipples(rs => [...rs, Date.now()]); setTimeout(() => setRipples(rs => rs.slice(1)), 1200); } onPray(); }; return (

Praying for this vision

{count.toLocaleString("en-US")}

); } function Hero({ raised, goal, prayerCount, hasPrayed, onPray, onGive, monthlySeries }) { const sparklineData = (Array.isArray(monthlySeries) ? monthlySeries : []).map(m => ({ month: m.label || m.key, amount: (m.amountCents || 0) / 100, })); const monthCount = sparklineData.length; const progress = Math.max(0.015, Math.min(1, raised / goal)); const pct = (progress * 100).toFixed(2); const [starYear] = useState(2026); const [lightboxOpen, setLightboxOpen] = useState(false); return (

{/* subtle horizon line */}

Est. {starYear} · Faith-Supported

A school,
planted seed by seed,
built by believers.

New Eden is a donation-supported, faith-based academy being built step by step — from a single Head Start classroom today to a full K–12 residential school tomorrow. Every dollar, every prayer, every hand is part of the vision.

{/* progress bar */}

Raised to date

{formatMoney(raised)}

Full vision

{formatMoney(goal, { compact: true })}+

{pct}% complete {formatMoney(goal - raised, { compact: true })} remaining

{/* Campus rendering */}

{/* corner marks */}

The vision · how New Eden will stand, completed

{/* Monthly giving growth sparkline */}

Monthly giving · growing

{monthCount === 1 ? "Launch month" : monthCount + " months"}

{/* scroll hint */}

Scroll · the journey

{lightboxOpen && ( setLightboxOpen(false)} /> )}

); } Object.assign(window, { Hero });

A school, planted seed by seed, built by believers.

A school,
planted seed by seed,
built by believers.