/* ============================================================ UI primitives — Red Sea Pulse Exposes components on window for other babel scripts. ============================================================ */ const { useState, useEffect, useRef } = React; /* ---------- ICONS ---------- */ const Ic = { wa: (p) => , clock: (p)=> , van: (p)=> , bag: (p)=> , mask: (p)=> , family: (p)=> , chat: (p)=> , mail: (p)=> , wave: (p)=> , check: (p)=> , x: (p)=> , arrow: (p)=> , plus: (p)=> , bolt: (p)=> , users: (p)=> , shield: (p)=> , leaf: (p)=> , dolphin: (p)=> , dolphinSearch: (p)=> , speedboat: (p)=> , guide: (p)=> , diver: (p)=> , plate: (p)=> , cup: (p)=> , fruit: (p)=> , lifejacket: (p)=> , fish: (p)=> , coral: (p)=> , calendar: (p)=> , wallet: (p)=> , tag: (p)=> , help: (p)=> , fins: (p)=> , snorkel: (p)=> , pin: (p)=> , star: (p)=> , boat: (p)=> , menu: (p)=> , sun: (p)=> , anchor: (p)=> , }; /* ---------- price formatting ---------- */ function PriceChip({ trip, coral, float, className }) { const pl = DATA.priceLabel(trip); return ( {pl.isFixed ? 'flat' : 'from'} {pl.main} {pl.note} ); } /* ---------- meta pill ---------- */ function Pill({ icon, children, dark, solid }) { const I = icon ? Ic[icon] : null; return {I && }{children}; } function Tag({ children, tone }) { return {children}; } /* ---------- buttons ---------- */ function Btn({ kind = 'teal', size, block, href, onClick, children, icon, newTab }) { const I = icon ? Ic[icon] : null; const cls = `btn btn-${kind}${size ? ' btn-' + size : ''}${block ? ' btn-block' : ''}`; const inner = <>{kind === 'wa' && }{children}{I && }; if (href) return {inner}; return ; } /* WhatsApp CTA that opens a prefilled message */ function WAButton({ msg, size = 'lg', block, children }) { return {children || 'Book via WhatsApp'}; } /* ---------- PHOTO SLOT (placeholder for real photography) ---------- */ function PhotoSlot({ label, g1, g2, ratio, radius, className, children, overlay, imgSrc, alt }) { const [imgFailed, setImgFailed] = useState(false); // A real photo is present only when we have a src that hasn't failed to load. // `has-image` lets CSS drop the placeholder sheen/stripe overlay for real photos // while keeping the full gradient placeholder as a fallback when no/failed image. const hasImage = imgSrc && !imgFailed; const style = { '--g1': g1 || '#1e6fae', '--g2': g2 || '#0e3a56' }; if (ratio) style.aspectRatio = ratio; if (radius) style.borderRadius = radius; return (
{hasImage ? {alt setImgFailed(true)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }}/> : null} {overlay} {children} {label}
); } /* ---------- ROUTE / DAY TIMELINE ---------- */ function RouteMap({ stops, dark }) { return (
{stops.map((s, i) => (
{s[0]}
{s[1]}
{s[2]}
))}
); } /* ---------- ACCORDION ---------- */ function Accordion({ q, a, defaultOpen, icon }) { const [open, setOpen] = useState(!!defaultOpen); const ref = useRef(null); return (
{a}
); } /* ---------- SCROLL REVEAL ---------- */ function Reveal({ children, delay = 0, className, style, as = 'div' }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); io.observe(el); return () => io.disconnect(); }, [delay]); const Tag = as; return {children}; } /* ---------- section heading block ---------- */ function SecHead({ kicker, title, lead, center, dark, max }) { return (
{kicker &&
{kicker}
}

{title}

{lead &&

{lead}

}
); } Object.assign(window, { Ic, PriceChip, Pill, Tag, Btn, WAButton, PhotoSlot, RouteMap, Accordion, Reveal, SecHead });