/* ============================================================ Villa 44 Badulla — THIS IS YOUR CHANCE: EXPERIENCE SRI LANKA Cinematic Scroll-Driven Interactive React 18 Component Inspired by https://searic.rotaract3220.org/ ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ── Experience Destinations Database (6 Curated Cinematic Chapters) ── */ const EXPERIENCE_DESTINATIONS = [ { id: 'highlands', number: '01', category: 'highlands', categoryLabel: 'The Highlands', title: 'Misty Ridges & Ceylon Tea Estates', subtitle: 'THE HIGHLANDS', tagline: 'Misty mornings. Endless tea estates. Crisp mountain air.', description: 'Awaken to emerald slopes veiled in morning mist. Wander through century-old colonial tea estates where Ceylon tea leaves glisten under the gentle dawn sun, framed by the majestic silhouettes of the Uva range.', distance: 'On your doorstep · 10–30 min from Villa 44', elevation: '1,050 – 1,890 m', bestTime: '06:00 AM – 09:30 AM (Golden Dawn Mist)', highlights: ['Centuries-old tea plantations', 'Panoramic Uva valley vistas', 'Cool mountain breeze & birdsong', 'Exclusive artisan tea tasting'], poster: 'images/tea.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/hike.mp4', detailStory: 'The highlands surrounding Villa 44 are home to some of the world\'s finest single-origin tea terroirs. Stroll through the tea trails of Badulla and Bandarawela, witness skilled tea pluckers amidst the morning dew, and savor fresh high-grown brew overlooking endless green horizons.', conciergeNote: 'Our private chauffeur will arrange a sunrise tea estate walk followed by a warm Ceylon breakfast basket prepared by our private chef.' }, { id: 'waterfalls', number: '02', category: 'waterfalls', categoryLabel: 'Cascading Waters', title: 'Dunhinda & Highland Cascades', subtitle: 'WATERFALLS', tagline: 'Follow the sound of cascading water through the hills.', description: 'Feel the thunderous roar and cool spray of Dunhinda Falls — known as the "Smoky Falls" of Sri Lanka — where river waters plunge 64 meters into a lush jungle gorge surrounded by pristine biodiversity.', distance: '20 min drive from Villa 44', elevation: '640 m cascade gorge', bestTime: '08:30 AM – 11:30 AM (Bright Sunshine & Rainbows)', highlights: ['Dunhinda "Smoky" Falls', 'Turquoise natural rock pools', 'Jungle canopy nature walk', 'Diyaluma & Ravana Falls day routes'], poster: 'images/dunhinda_falls.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/pearl.mp4', detailStory: 'Fed by the Badulu Oya, Dunhinda Falls creates an ethereal misty cloud that drifts through dense forest valleys. Follow the scenic 1.5 km pathway accompanied by native monkeys, wild butterflies, and the tranquil sounds of untouched nature.', conciergeNote: 'Combine Dunhinda Falls with a refreshing dip at nearby natural stream cascades, accompanied by a custom chilled picnic prepared by Villa 44.' }, { id: 'railway', number: '03', category: 'railways', categoryLabel: 'The Iconic Journey', title: 'Nine Arches Bridge & Blue Train', subtitle: 'THE JOURNEY', tagline: 'Scenic roads, winding railways and unforgettable views.', description: 'Traverse the legendary British-era viaduct in Demodara and watch the iconic bright blue train curve gracefully through misty jungle valleys and emerald hills in a timeless portrait of highland romance.', distance: '35 min scenic drive from Villa 44', elevation: '1,041 m', bestTime: '09:20 AM / 11:45 AM / 03:30 PM (Train Passings)', highlights: ['Demodara 9 Arches Viaduct', 'Scenic train crossing photo-spots', 'Hidden jungle walking trails', 'Historic Demodara spiral railway loop'], poster: 'images/nine_arch_bridge.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/177127-856658451_tiny.mp4', detailStory: 'Commissioned in 1921 and built entirely of stone, brick, and cement without a single piece of steel, the Nine Arches Bridge stands as one of Sri Lanka\'s most photogenic and celebrated engineering masterpieces.', conciergeNote: 'We provide VIP timing schedules for train passages so you capture cinematic photographs without the crowded peak rush.' }, { id: 'wildlife', number: '04', category: 'wildlife', categoryLabel: 'Wild Sri Lanka', title: 'Untamed Sanctuaries & Cloud Forests', subtitle: 'WILD SRI LANKA', tagline: 'Discover the untamed side of the island.', description: 'Venture into the mystical plains of Horton Plains and nearby wild sanctuaries. Encounter sambar deer grazing in misty grasslands, endemic highland birdlife, and wild elephants roaming ancient island corridors.', distance: '1.5 – 2.5 hrs scenic day expedition', elevation: '2,100 m plateau', bestTime: '06:00 AM (Clear View of World\'s End)', highlights: ['Horton Plains "World\'s End" sheer cliff', 'Baker\'s Waterfall forest loop', 'Wild elephant habitat corridors', 'Endemic cloud forest bird species'], poster: 'images/horton_plains.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/246461_tiny.mp4', detailStory: 'From windswept montane grasslands to dense rainforest fringes, Sri Lanka is a global biodiversity hotspot. Explore the dramatic 880-meter vertical drop of World\'s End, where southern coastal plains unfold far beneath the cloud cover.', conciergeNote: 'Our concierge arranges private 4x4 safari and national park permits with experienced local naturalist trackers.' }, { id: 'culture', number: '05', category: 'culture', categoryLabel: 'Sacred Soul & Heritage', title: 'Ancient Shrines & Timeless Traditions', subtitle: 'THE CULTURE', tagline: 'Experience the warmth, rhythm and soul of Sri Lanka.', description: 'Immerse yourself in over two millennia of sacred heritage — from the historic Muthiyangana Raja Maha Viharaya and 16th-century Bogoda wooden bridge to Adam\'s Peak sunrise pilgrimages and traditional Kandyan drumbeats.', distance: '15–40 min to key local heritage sites', elevation: '680 – 2,243 m', bestTime: 'Sunrise Puja & Twilight Chants', highlights: ['Muthiyangana Sacred Temple', '16th Century Bogoda Wooden Bridge', 'Kandyan drumming & cultural dance', 'Warm highland village hospitality'], poster: 'images/adams_peak.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/culture.mp4', detailStory: 'Sri Lanka\'s cultural tapestry is woven with spiritual warmth, ancient rock art, and monastic sanctuaries nestled quietly within mountain forests. Experience authentic blessings, intricate wood architecture, and genuine island smiles.', conciergeNote: 'Private guided cultural walks with respectful temple attire guidelines and private tuk-tuk transfers arranged upon request.' }, { id: 'peaks', number: '06', category: 'peaks', categoryLabel: 'Sunsets & Horizons', title: 'Ella Rock & Namunukula Ridge', subtitle: 'PEAKS & SUNSETS', tagline: 'Where dramatic mountain crests meet golden skies.', description: 'Scale the scenic heights of Ella Rock and Namunukula Peak, where golden hour paints the mountain folds in warm amber hues and the starry hill-country night sky unfolds in crystal clarity.', distance: '30–45 min to hiking trailheads', elevation: '1,320 – 2,036 m', bestTime: '04:30 PM – 06:45 PM (Sunset Golden Hour)', highlights: ['Ella Rock sheer gap panorama', 'Namunukula 9-peak mountain crest', 'Little Adam\'s Peak gentle climb', 'Astrophotography & sunset verandas'], poster: 'images/ella_rock.jpg', videoSrc: 'https://pub-2dd8b455cfa4473a847d652148f88c45.r2.dev/hospitality.mp4', detailStory: 'Rising prominently over the Badulla valley, Namunukula stands as the guardian peak of the province. Sunset over Ella Gap offers one of the most celebrated vistas in Asia, casting golden rays through dramatic cloud formations.', conciergeNote: 'Return from your sunset hike to a roaring bonfire and bespoke candlelit lawn dinner on Villa 44\'s private terrace.' } ]; /* ── Category Filters ── */ const CATEGORIES = [ { key: 'all', label: 'All Experiences' }, { key: 'highlands', label: 'Highlands' }, { key: 'waterfalls', label: 'Waterfalls' }, { key: 'railways', label: 'Railways' }, { key: 'wildlife', label: 'Wildlife' }, { key: 'culture', label: 'Culture & Sacred' }, { key: 'peaks', label: 'Peaks & Sunsets' } ]; /* ============================================================ Subcomponent: CinematicVideo Robust Autoplaying Video Element with Controls & Fallbacks ============================================================ */ function CinematicVideo({ src, poster, className, controls = false, autoPlay = true, isHero = false }) { const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [isMuted, setIsMuted] = useState(true); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const video = videoRef.current; if (!video) return; video.muted = true; const playPromise = video.play(); if (playPromise !== undefined) { playPromise .then(() => setIsPlaying(true)) .catch(() => { video.muted = true; video.play().then(() => setIsPlaying(true)).catch(() => {}); }); } }, [src]); const toggleSound = (e) => { e.stopPropagation(); if (!videoRef.current) return; const nextMuted = !videoRef.current.muted; videoRef.current.muted = nextMuted; setIsMuted(nextMuted); }; const togglePlay = (e) => { e.stopPropagation(); if (!videoRef.current) return; if (videoRef.current.paused) { videoRef.current.play(); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; return (
Video backdrop
); } /* ============================================================ Subcomponent: HeroVideoTrio Signature 3-Video Layout from https://searic.rotaract3220.org/ ============================================================ */ function HeroVideoTrio({ onSelectChapter }) { return (
{/* Video 1 (Left): Demodara Nine Arches Viaduct */}
onSelectChapter('railway')} role="button" tabIndex={0} aria-label="Experience Nine Arches Bridge and Highland Railway" >
✦ 01 · ICONIC RAILWAYS

Nine Arches & Blue Train

British-era viaduct in Demodara

Explore Route
{/* Video 2 (Center): Tall Hero Spotlight Feature */}
onSelectChapter('waterfalls')} role="button" tabIndex={0} aria-label="Experience Sri Lanka Cinematic Spotlight" >
CINEMATIC SRI LANKA

The Sanctuary Beyond Villa 44

From misty tea ridges & roaring waterfalls to wild elephant corridors

{/* Video 3 (Right): Untamed Wildlife & Cloud Forests */}
onSelectChapter('wildlife')} role="button" tabIndex={0} aria-label="Experience Wild Sri Lanka & Sanctuaries" >
✦ 02 · WILD SANCTUARIES

Cloud Forests & Safari

Horton Plains & highland wildlife

Explore Route
); } /* ============================================================ Subcomponent: ExperienceMediaCard Destination Chapter Card with Smooth Video Playback ============================================================ */ function ExperienceMediaCard({ destination, index, total, isActive, onSelect }) { const cardRef = useRef(null); const videoRef = useRef(null); const [videoLoaded, setVideoLoaded] = useState(false); const [isPlaying, setIsPlaying] = useState(false); useEffect(() => { const cardEl = cardRef.current; if (!cardEl || typeof IntersectionObserver === 'undefined') { if (videoRef.current) { videoRef.current.muted = true; videoRef.current.play().catch(() => {}); } return; } const playbackObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const vid = videoRef.current; if (!vid) return; if (entry.isIntersecting) { vid.muted = true; const playPromise = vid.play(); if (playPromise !== undefined) { playPromise .then(() => setIsPlaying(true)) .catch(() => setIsPlaying(false)); } } else { vid.pause(); setIsPlaying(false); } }); }, { threshold: 0.25 } ); playbackObserver.observe(cardEl); return () => playbackObserver.disconnect(); }, []); return (
onSelect(destination)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(destination); } }} > {/* Visual Media Frame */}
{destination.title}
{/* Card Content */}
{destination.distance} {destination.elevation}
{destination.subtitle}

{destination.title}

“{destination.tagline}”

{destination.description}

{/* Signature Highlights */}
{destination.highlights.slice(0, 3).map((item, i) => ( {item} ))}
{/* Action Button */}
); } /* ============================================================ Subcomponent: ExperienceDetailModal ============================================================ */ function ExperienceDetailModal({ destination, onClose }) { useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handleKeyDown); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', handleKeyDown); document.body.style.overflow = ''; }; }, [onClose]); if (!destination) return null; return (
e.stopPropagation()}>
{destination.subtitle}

{destination.title}

“{destination.tagline}”

Distance {destination.distance}
Elevation {destination.elevation}
Best Timing {destination.bestTime}

The Experience Story

{destination.detailStory}

Villa 44 Private Concierge Touch

{destination.conciergeNote}

Arrange Tour with Concierge
); } /* ============================================================ Main Component: ExperienceSriLankaApp ============================================================ */ function ExperienceSriLankaApp() { const [activeCategory, setActiveCategory] = useState('all'); const [selectedDestination, setSelectedDestination] = useState(null); const filteredDestinations = useMemo(() => { if (activeCategory === 'all') return EXPERIENCE_DESTINATIONS; return EXPERIENCE_DESTINATIONS.filter((d) => d.category === activeCategory); }, [activeCategory]); const handleHeroSelect = useCallback((key) => { const dest = EXPERIENCE_DESTINATIONS.find((d) => d.id === key) || EXPERIENCE_DESTINATIONS[0]; setSelectedDestination(dest); }, []); return (
{/* Visual Bridge */}
✦ BEYOND VILLA 44 SANCTUARY ✦
{/* Section Header */}

✦ AN INVITATION TO WONDER ✦

THIS IS YOUR CHANCE

EXPERIENCE SRI LANKA

“From misty mountains and endless tea estates to cascading waterfalls, ancient trails and unforgettable journeys — discover the Sri Lanka beyond Villa 44.”

{/* Signature SEARIC 3-Video Trio Showcase */} {/* Interactive Chapters Header & Filters */}

CURATED HIGHLAND EXPEDITIONS

{/* Filter Pills */}
{CATEGORIES.map((cat) => ( ))}
{/* Destination Cards Grid */}
{filteredDestinations.map((dest, idx) => ( setSelectedDestination(d)} /> ))}
{/* Detail Modal */} {selectedDestination && ( setSelectedDestination(null)} /> )}
); } /* ── Mount React Component ─────────────────────────────────── */ const expRootEl = document.getElementById('experience-sri-lanka-root'); if (expRootEl && typeof ReactDOM !== 'undefined') { ReactDOM.createRoot(expRootEl).render(React.createElement(ExperienceSriLankaApp)); }