/* ============================================================ components-core.jsx — shared across all pages Constants · useToast · useBooking · Arrow · Nav · Hero · Footer ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; const TOPMATE = "https://topmate.io/abhileen_singh_saluja"; const WHATSAPP = "https://api.whatsapp.com/send?phone=971567453636"; const LINKEDIN = "https://www.linkedin.com/in/abhileen-singh-saluja-078623141/?skipRedirect=true"; const EMAIL = "hi@thathyperactivesardar.com"; /* Newsletter target — leave "" to capture in-page (local) until the real Substack/Beehiiv URL is wired in. When set, the form POSTs/links there. */ const NEWSLETTER_ACTION = ""; function useToast() { const [msg, setMsg] = useState(null); const fire = useCallback((m) => { setMsg(m); clearTimeout(window.__toastT); window.__toastT = setTimeout(() => setMsg(null), 2600); }, []); const node = (
{msg}
); return [node, fire]; } /* one hook every page uses to wire the booking CTAs + toast */ function useBooking() { const [toast, fireToast] = useToast(); const go = (url, label) => { window.open(url, "_blank", "noopener"); fireToast(label); }; const onBook = () => go(TOPMATE, Opening Topmate — pick a slot ↗); const onWhats = () => go(WHATSAPP, Opening WhatsApp ↗); const onMail = () => { window.location.href = "mailto:" + EMAIL; fireToast(Drafting an email to hi@ ↗); }; return { toast, fireToast, onBook, onWhats, onMail }; } function Arrow() { return (); } /* ---------------- NAV (multi-page) ---------------- */ function Nav({ active, onBook }) { const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const link = (href, label, key) => ( {label} ); const mlink = (href, label, key) => ( setMenuOpen(false)}>{label} ); return ( ); } /* ---------------- HERO — rapid-cut zooming photo cycle (home) ---------------- */ const HERO_SHOTS = [ "assets/hero-main.png", "assets/hero-1.png", "assets/hero-2.png", "assets/hero-3.png", "assets/hero-4.png", ]; function Hero() { const [idx, setIdx] = useState(0); const [flash, setFlash] = useState(false); const [splashIdx, setSplashIdx] = useState(0); const [splashOut, setSplashOut] = useState(false); const [splashDone, setSplashDone] = useState(false); const ref = useRef(null); const reduceRef = useRef(false); useEffect(() => { reduceRef.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduceRef.current) { setSplashDone(true); return; } const timers = []; // Splash: cycle each photo at 380ms HERO_SHOTS.forEach((_, i) => { timers.push(setTimeout(() => setSplashIdx(i), i * 380)); }); const introDuration = HERO_SHOTS.length * 380; // Start fade-out of splash timers.push(setTimeout(() => setSplashOut(true), introDuration)); // Remove splash from DOM after fade completes timers.push(setTimeout(() => setSplashDone(true), introDuration + 520)); // Start background hero cycle after splash is gone timers.push(setTimeout(() => { let n = 0; const tick = () => { n += 1; setIdx((i) => (i + 1) % HERO_SHOTS.length); if (n % HERO_SHOTS.length === 0) { setFlash(true); setTimeout(() => setFlash(false), 110); } }; const iv = setInterval(tick, 2500); timers.push(iv); }, introDuration + 520)); return () => timers.forEach((t) => { clearTimeout(t); clearInterval(t); }); }, []); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const h = el.offsetHeight || 1; const p = Math.min(1, Math.max(0, window.scrollY / h)); el.style.setProperty("--scroll", p.toFixed(3)); }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return ( {!splashDone && ( )}
{HERO_SHOTS.map((src, i) => ( {i ))}
{flash && }
); } /* ---------------- FOOTER (shared, multi-page) ---------------- */ function Footer() { return ( ); } Object.assign(window, { useToast, useBooking, Arrow, Nav, Hero, Footer, HERO_SHOTS, TOPMATE, WHATSAPP, LINKEDIN, EMAIL, NEWSLETTER_ACTION });