// ───────────────────────────────────────────────────────── // App — orchestrates layout + scroll-linked section transitions // Single-line topnav with live Jammu time // ───────────────────────────────────────────────────────── const { useEffect: useEffectA, useRef: useRefA, useState: useStateA } = React; function SoundToggle() { const [on, setOn] = useStateA(false); return ( ); } function LiveTime() { const [now, setNow] = useStateA(new Date()); useEffectA(() => { const id = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(id); }, []); const time = now.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Asia/Kolkata', }); return ( Jammu {time} ); } function TopNav() { return (

2 slots Q3

); } function Footer() { return ( ); } function scrollToHash(offset = 80) { const hash = window.location.hash; if (!hash || hash === '#top' || hash === '#') return; const target = document.querySelector(hash); if (!target) return; const top = target.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top: Math.max(0, top), behavior: 'instant' }); } window.__scrollToHash = scrollToHash; function App() { const stackRef = useRefA(null); // Land on #booking / #audit etc. when opened via direct link (browser does not scroll SPA) useEffectA(() => { scrollToHash(); const delays = [300, 1200, 3500, 6000].map((ms) => setTimeout(scrollToHash, ms)); const onHash = () => scrollToHash(); window.addEventListener('hashchange', onHash); return () => { delays.forEach(clearTimeout); window.removeEventListener('hashchange', onHash); }; }, []); // Smooth view-transition scrolling on nav anchor clicks useEffectA(() => { const onClick = (e) => { const a = e.target.closest('a[href^="#"]'); if (!a) return; const href = a.getAttribute('href'); if (href === '#' || href === '#top') { e.preventDefault(); window.__withTransition(() => window.scrollTo({ top: 0, behavior: 'smooth' })); return; } const target = document.querySelector(href); if (target) { e.preventDefault(); const top = target.getBoundingClientRect().top + window.scrollY - 80; window.__withTransition(() => window.scrollTo({ top, behavior: 'smooth' })); } }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, []); // Scroll-linked section transitions useEffectA(() => { const stack = stackRef.current; if (!stack) return; const sections = Array.from(stack.querySelectorAll('.section')); const onScroll = () => { const vh = window.innerHeight; sections.forEach((sec, i) => { // Blur/opacity on parent breaks Cal iframe + booking UI if (sec.id === 'booking') { sec.style.transform = ''; sec.style.filter = ''; sec.style.opacity = ''; return; } const next = sections[i + 1]; if (!next) { sec.style.transform = ''; sec.style.filter = ''; sec.style.opacity = ''; return; } const nextRect = next.getBoundingClientRect(); // Trigger blur LATER: only when next section is 70% into the viewport // (i.e. its top is within 30% from the top of screen) const startAt = vh * 0.3; const endAt = -vh * 0.1; const progress = Math.max(0, Math.min(1, (startAt - nextRect.top) / (startAt - endAt) )); const scale = 1 - progress * 0.05; // 1 → 0.95 const blur = progress * 6; // 0 → 6px (was 8) const dim = progress * 0.45; const ty = -progress * 32; sec.style.transform = `translate3d(0, ${ty}px, 0) scale(${scale})`; sec.style.filter = `blur(${blur}px) brightness(${1 - dim * 0.35})`; sec.style.opacity = String(1 - dim * 0.6); }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return ( <>