const { useState, useEffect, useCallback, useContext, createContext, useRef } = React; // ─── ROUTER ───────────────────────────────────────────────────────────────── const RouterCtx = createContext({ path: '/', navigate: () => {} }); const useRouter = () => useContext(RouterCtx); const RouterProvider = ({ children }) => { const [path, setPath] = useState(window.location.pathname); const navigate = useCallback((to) => { history.pushState(null, '', to); setPath(to); window.scrollTo(0, 0); }, []); useEffect(() => { const onPop = () => { setPath(window.location.pathname); window.scrollTo(0, 0); }; window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); return {children}; }; // ─── HOOKS ────────────────────────────────────────────────────────────────── const PAGE_TITLES = { '/': '株式会社隼 / HAYABUSA Inc.', '/service/sns': 'SNS PRODUCTION | 株式会社隼', '/service/entertainment': 'ENTERTAINMENT | 株式会社隼', '/about': '会社概要 | 株式会社隼', '/contact': 'お問い合わせ | 株式会社隼', '/contact/thanks': 'お問い合わせ完了 | 株式会社隼', '/privacy': 'プライバシーポリシー | 株式会社隼', }; const useReveal = () => { useEffect(() => { const els = document.querySelectorAll('.reveal:not(.in)'); const io = new IntersectionObserver((entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; const useCountUp = (target, duration, trigger) => { const [count, setCount] = useState(0); useEffect(() => { if (!trigger) return; let startTs = null; const tick = (ts) => { if (!startTs) startTs = ts; const p = Math.min((ts - startTs) / duration, 1); const ease = 1 - Math.pow(1 - p, 3); setCount(Math.round(ease * target)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }, [trigger, target, duration]); return count; }; const useIsMobile = () => { const [v, setV] = useState(window.innerWidth < 820); useEffect(() => { const fn = () => setV(window.innerWidth < 820); window.addEventListener('resize', fn); return () => window.removeEventListener('resize', fn); }, []); return v; }; // ─── LOADING SCREEN ────────────────────────────────────────────────────────── const LoadingScreen = ({ onDone }) => { const [pct, setPct] = useState(0); const [out, setOut] = useState(false); useEffect(() => { let startTs = null; const dur = 1900; const tick = (ts) => { if (!startTs) startTs = ts; const t = Math.min((ts - startTs) / dur, 1); const ease = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; setPct(Math.floor(ease * 100)); if (t < 1) requestAnimationFrame(tick); else setTimeout(() => { setOut(true); setTimeout(onDone, 780); }, 140); }; const id = requestAnimationFrame(tick); return () => cancelAnimationFrame(id); }, []); return (
{/* Grid */}