// Router + shared utilities (hash-based routing)
function useHashRoute() {
const parse = () => {
const h = window.location.hash.replace(/^#\/?/, '') || 'home';
return h.split('?')[0] || 'home';
};
const [route, setRoute] = React.useState(parse());
React.useEffect(() => {
const onHash = () => {
setRoute(parse());
window.scrollTo({ top: 0, behavior: 'instant' });
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
}
function navigate(route) {
window.location.hash = '/' + route;
}
// Reveal-on-scroll hook
function useReveal() {
React.useEffect(() => {
const els = document.querySelectorAll('.reveal:not(.in)');
if (!('IntersectionObserver' in window)) {
els.forEach(el => el.classList.add('in'));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
});
}
// Lock body scroll when modal open
function useScrollLock(locked) {
React.useEffect(() => {
if (locked) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [locked]);
}
// ----- Logo -----
function Logo({ dark = false, size = 'md', onClick }) {
const s = size === 'sm' ? 32 : size === 'lg' ? 56 : 40;
const color = dark ? '#F5EFE6' : '#1A1814';
const accent = '#C8624A';
return (
{ e.preventDefault(); navigate('home'); onClick && onClick(); }} className="logo-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
Kain Ama
Málaga · Mediterráneo
);
}
// ----- Language switcher -----
function LangSwitcher({ dark = false }) {
const { lang, setLang } = useI18n();
const langs = ['ro', 'en', 'es'];
return (
{langs.map((l, i) => (
{i > 0 && ·}
))}
);
}
// ----- Header -----
function Header({ openBooking }) {
const { t } = useI18n();
const route = useHashRoute();
const [scrolled, setScrolled] = React.useState(false);
const [mobileOpen, setMobileOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 60);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
React.useEffect(() => { setMobileOpen(false); }, [route]);
useScrollLock(mobileOpen);
const links = [
{ id: 'home', label: t.nav.home },
{ id: 'cruises', label: t.nav.cruises },
{ id: 'about', label: t.nav.about },
{ id: 'gallery', label: t.nav.gallery },
{ id: 'routes', label: t.nav.routes },
{ id: 'faq', label: t.nav.faq },
{ id: 'contact', label: t.nav.contact },
];
return (
<>
{/* Mobile menu */}
);
}
// ----- Footer -----
function Footer({ openBooking }) {
const { t } = useI18n();
return (
);
}
// ----- Floating WhatsApp -----
function WhatsAppFloat() {
const { t, lang } = useI18n();
const msg = encodeURIComponent({
ro: 'Bună! Aș vrea să rezerv o croazieră.',
en: 'Hi! I\'d like to book a cruise.',
es: '¡Hola! Me gustaría reservar un crucero.',
}[lang]);
return (
);
}
// ----- Icons -----
function InstagramIcon() {
return ;
}
function WhatsAppIcon() {
return ;
}
function MailIcon() {
return ;
}
function PhoneIcon() {
return ;
}
function PinIcon() {
return ;
}
function ClockIcon() {
return ;
}
function UsersIcon() {
return ;
}
function ArrowRight({ size = 16 }) {
return ;
}
function CheckIcon() {
return ;
}
function ChevronDown() {
return ;
}
function StarIcon() {
return ;
}
Object.assign(window, {
useHashRoute, navigate, useReveal, useScrollLock,
Logo, LangSwitcher, Header, Footer, WhatsAppFloat,
InstagramIcon, WhatsAppIcon, MailIcon, PhoneIcon, PinIcon, ClockIcon, UsersIcon,
ArrowRight, CheckIcon, ChevronDown, StarIcon,
});