/* ============================================================ Site chrome — Header, MobileNav, Footer, Sticky WhatsApp ============================================================ */ const { useState, useEffect, useRef } = React; const NAV = [ { id: 'home', label: 'Home' }, { id: 'trips', label: 'Trips', children: [ { id: 'snorkeling', label: 'Dolphin House Snorkeling' }, { id: 'diving', label: 'Dolphin Snorkeling & Diving' }, { id: 'speedboat', label: 'Speedboat Dolphin Trip' }, { id: 'private_boat', label: 'Private Boat Dolphin Trip' }, ]}, { id: 'explained', label: 'Dolphin House Explained' }, { id: 'faq', label: 'FAQ' }, { id: 'contact', label: 'Book Now' }, ]; function Logo({ white, icon, height = 38, onClick }) { const src = icon ? '/assets/logo-icon.png' : (white ? '/assets/logo-white.png' : '/assets/logo-color.png'); return ( { e.preventDefault(); onClick && onClick('home'); }} style={{ display: 'flex', alignItems: 'center' }} aria-label="Dolphin House Hurghada — home"> Dolphin House Hurghada logo ); } function LangSelect({ dark }) { const cur = (window.I18N && window.I18N.lang) || 'en'; const opts = (window.I18N && window.I18N.langs) || [{ code: 'en', label: 'English' }]; const switchLang = (code) => { if (!window.I18N || !window.I18N.isSupported(code)) return; // Rewrite ONLY the language prefix of the current page, keep the same // clean path + query string. Checkout/confirmation routes stay unprefixed. const path = window.location.pathname; const search = window.location.search || ''; const isCheckout = path.indexOf('/book/') === 0 || path.indexOf('/booking-confirmation/') === 0; let target = path; if (!isCheckout) { const split = window.I18N.splitLangPath(path); target = window.I18N.withLangPrefix(split.cleanPath, code); } try { history.pushState(null, '', target + search); } catch (e) {} // setLang persists localStorage + sets + triggers re-render. window.I18N.setLang(code); }; return ( ); } function Header({ page, go, heroDark }) { const [scrolled, setScrolled] = useState(false); const [openMenu, setOpenMenu] = useState(false); const [tripsOpen, setTripsOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { setOpenMenu(false); }, [page]); const transparent = heroDark && !scrolled; const tripIds = ['snorkeling', 'diving', 'speedboat', 'private_boat']; return ( <>
{/* mobile burger */}
{/* mobile drawer */}
setOpenMenu(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(6,40,61,.5)', backdropFilter: 'blur(2px)', opacity: openMenu ? 1 : 0, transition: '.3s' }}>
{ setOpenMenu(false); go(p); }} height={34}/>
{NAV.map(item => (
{item.children && (
{item.children.map(c => ( ))}
)}
))}
{window.t('nav.bookViaWhatsapp')}

{window.t('nav.noPayEnquire')}

); } function navLinkStyle(active, color) { return { display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--body)', fontWeight: 600, fontSize: 15.5, padding: '9px 14px', borderRadius: 999, color: active ? 'var(--turq)' : color, opacity: active ? 1 : .9, transition: '.18s', letterSpacing: '-.01em', }; } const mobileLinkStyle = { display: 'block', width: '100%', textAlign: 'left', fontFamily: 'var(--display)', fontWeight: 700, fontSize: 21, padding: '13px 0', color: 'var(--ink)' }; /* ---------- Sticky WhatsApp (mobile bottom bar + desktop float) ---------- */ function StickyCTA({ trip, page }) { const pl = trip ? DATA.priceLabel(trip) : null; const msg = trip ? window.t('wa.bookTrip', { name: window.tt(trip, 'name'), price: pl.main, note: pl.note }) : window.t('wa.generic'); return ( <> {/* mobile bottom bar — hidden on contact page (has its own submit button) */} {page !== 'contact' &&
{trip && (
{window.tt(trip, 'name')}
{pl.main} {pl.note}
)}
{trip ? window.t('nav.bookThisTrip') : window.t('nav.bookViaWhatsapp')}
} {/* desktop floating button */} { e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }}> {window.t('nav.bookViaWhatsapp')} ); } /* ---------- Footer ---------- */ function Footer({ go }) { return ( ); } function FootCol({ title, links, go }) { return (

{title}

{links.map((l, i) => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(234,246,247,.85)'}>{l[0]})}
); } Object.assign(window, { Header, Footer, StickyCTA, Logo, NAV });