// Shared / reusable components const { useEffect, useState, useRef } = React; // Simple hash router helpers function navigate(path) { window.location.hash = path; } function useRoute() { const [route, setRoute] = useState(() => window.location.hash.replace(/^#/, "") || "/"); useEffect(() => { const onHash = () => { setRoute(window.location.hash.replace(/^#/, "") || "/"); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); return route; } // IntersectionObserver reveal — with immediate-fire fallback for above-the-fold content function Reveal({ children, delay = 0, className = "", as: Tag = "div", ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; let observer; let timeoutId; // Immediately reveal if already in viewport const rect = el.getBoundingClientRect(); const vh = window.innerHeight || 800; if (rect.top < vh) { timeoutId = setTimeout(() => setShown(true), delay); } else { observer = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { timeoutId = setTimeout(() => setShown(true), delay); observer.unobserve(el); } }); }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" } ); observer.observe(el); } // Safety net — always show after 1500ms regardless const safety = setTimeout(() => setShown(true), 1500); return () => { if (observer) observer.disconnect(); if (timeoutId) clearTimeout(timeoutId); clearTimeout(safety); }; }, [delay]); return ( {children} ); } // Editorial label function EditorialLabel({ children, className = "" }) { return {children}; } // Section title block function SectionTitle({ eyebrow, number, title, description, align = "left", invert = false }) { return (
{number && {number}} {eyebrow && {eyebrow}}

{title}

{description && (

{description}

)}
); } // Button (link / button) function Button({ children, variant = "primary", to, href, type = "button", onClick, target }) { const cls = `btn btn-${variant}`; const content = ( <> {children} ); if (to) { return ( { onClick && onClick(e); }}> {content} ); } if (href) { return ( {content} ); } return ( ); } // Coach portrait placeholder function CoachPortrait({ name, number, head, imageUrl }) { // Initials const initials = (name || "").replace("Coach ", "").split(" ").map((s) => s[0]).slice(0, 2).join(""); return (
COACH · {number || "00"} {imageUrl ? (
{name} {/* Subtle gradient overlay to blend with card bottom */}
) : ( <>
)} {number || "00"} {head && ( KETUA PROGRAM
GH GAMBIT SCHOOL DEVELOPMENT )}
); } // Coach card function CoachCard({ coach, large = false }) { return (
{large ? "KETUA PROGRAM" : "STAFF / " + coach.number} VIEW →

{coach.name}

{coach.role}

{large && (

{coach.shortBio}

)}
{coach.specialization.map((s, i) => ( {s} ))}
); } // Program / pillar card function ProgramCard({ num, title, description, accent = false }) { return (
{num}

{title}

{description}

); } // Benefit card (compact) function BenefitCard({ num, label }) { return (
{num}

{label}

); } // Stat card function StatCard({ k, l }) { return (
{k} {l}
); } // Page header (shared across inner pages) function PageHeader({ number, eyebrow, title, subtitle }) { return (
{number}
{number} {eyebrow}

{title}

 {subtitle && (

{subtitle}

 )}
); } // Trophy card function TrophyCard({ trophy, idx }) { return (
{/* Background Image if exists */} {trophy.imageUrl ? (
{trophy.eventName}
) : (
)}
TRP / {String(idx + 1).padStart(2, "0")} {!trophy.imageUrl && ( )}

{trophy.achievement} · {trophy.year}

{trophy.eventName}

{trophy.category}

); } // Partnership card function PartnershipCard({ partnership, highlight }) { return (
PROGRAM KERJA SAMA

{partnership.bestFor}

Includes

); } // Expose globals Object.assign(window, { navigate, useRoute, Reveal, EditorialLabel, SectionTitle, Button, CoachPortrait, CoachCard, ProgramCard, BenefitCard, StatCard, PageHeader, TrophyCard, PartnershipCard, });