/* global React */ // Shared components for Langebaan const { useState, useMemo, useEffect, useRef } = React; // ────────────────────────────────────────────────────────────── // Icons (small, hand-stroked, inline SVG) // ────────────────────────────────────────────────────────────── const Ico = { search: (p) => , pin: (p) => , cal: (p) => , user: (p) => , bed: (p) => , bath: (p) => , guests: (p) => , wifi: (p) => , fire: (p) => , parking:(p) => , pool: (p) => , pet: (p) => , kitchen:(p) => , ac: (p) => , star: (p) => , heart: (p) => , arrow: (p) => , back: (p) => , chev: (p) => , plus: (p) => , minus: (p) => , check: (p) => , share: (p) => , tide: (p) => , filter: (p) => , sort: (p) => , lock: (p) => , menu: (p) => , }; // ────────────────────────────────────────────────────────────── // Property data // ────────────────────────────────────────────────────────────── const PROPERTIES = [ { id: 'driftwood', name: 'Driftwood Cottage', loc: 'Pearl Bay', price: 245, rating: 4.94, reviews: 128, beds: 3, baths: 2, guests: 6, walk: 2, tone: 'sand', blurb: 'Whitewashed clapboard with a deep verandah and uninterrupted reach across the dune line.', tags:['Beachfront','Pet-friendly','Family'], img: 'whitewashed cottage · golden hour', icon:'NW-facing'}, { id: 'tideglass', name: 'Tideglass House', loc: 'Langebaan', price: 410, rating: 4.99, reviews: 84, beds: 4, baths: 3, guests: 8, walk: 1, tone: 'ocean', blurb: 'Architect-built, full-height glazing onto the breakers. Sleeps eight in linen-soft calm.', tags:['Architect','Sea views','Hot tub'], img: 'modernist deck · breakers below', icon:'2 min · sand'}, { id: 'salthaven', name: 'Salt Haven', loc: 'Calypso Beach', price: 185, rating: 4.86, reviews: 211, beds: 2, baths: 1, guests: 4, walk: 5, tone: 'shell', blurb: 'A working fisherman’s cottage, soft-restored. Slate floors, deep window seats.', tags:['Historic','Cosy','Couples'], img: 'fisherman cottage · slate hearth', icon:'5 min · path'}, { id: 'pelican', name: 'Pelican Loft', loc: 'Club Mykonos', price: 168, rating: 4.81, reviews: 156, beds: 1, baths: 1, guests: 2, walk: 3, tone: 'dusk', blurb: 'A one-bedroom apartment above the harbour, with the rigging-clink as your morning soundtrack.', tags:['Harbour','Studio','Walkable'], img: 'harbour loft · rigging masts', icon:'Quay-side'}, { id: 'duneline', name: 'Duneline Lodge', loc: 'Kraalbaai', price: 295, rating: 4.92, reviews: 47, beds: 3, baths: 2, guests: 6, walk: 0, tone: 'sky', blurb: 'Cedar-clad lodge built into the marram. Step from the deck onto warm sand.', tags:['Dune access','Sauna','Family'], img: 'cedar lodge · marram grass', icon:'On the dune'}, { id: 'mariner', name: "Mariner's Reach", loc: 'Mykonos Village', price: 220, rating: 4.88, reviews: 93, beds: 3, baths: 2, guests: 5, walk: 6, tone: 'deep', blurb: 'A captain’s house on the cobbled lane up from the slipway. Restored bookcases, deep bath.', tags:['Historic','Walk to pubs','Reading'], img: 'georgian terrace · brass knocker', icon:'Old town'}, ]; // ────────────────────────────────────────────────────────────── // Image placeholder (designed, not generic) // ────────────────────────────────────────────────────────────── function SBImage({ tone='sand', label, corner, children, style, className='', kind }) { return (
{children} {corner ?
{corner}
: null} {label ?
{label}
: null} {kind ?
{kind}
: null}
); } // ────────────────────────────────────────────────────────────── // Logo // ────────────────────────────────────────────────────────────── function Logo({ size = 22, light = false }) { // Recoloured Langebaan wordmark (sand-gold + ocean-navy on cream disc). // `light` flips background to translucent so it sits cleanly on the dark hero. return ( Langebaan Holiday Homes ); } // ────────────────────────────────────────────────────────────── // Rating // ────────────────────────────────────────────────────────────── function Rating({ value, count, compact }) { return ( {value}{count ? ({count}) : null} ); } // ────────────────────────────────────────────────────────────── // Tide widget — fake but pretty // ────────────────────────────────────────────────────────────── function Tide({ compact=false, dark=false }) { // Pseudo wave bars const bars = useMemo(() => { const out = []; for (let i=0; i<14; i++) { const v = 0.4 + Math.abs(Math.sin((i+2)/2.4))*0.6; out.push(v); } return out; }, []); return (
{bars.map((v,i) => )}
High 14:32 {!compact && Low 08:14 · 21:08}
); } // ────────────────────────────────────────────────────────────── // Top navigation // ────────────────────────────────────────────────────────────── function TopNav({ onNav, active, transparent=false }) { const style = transparent ? { background: 'transparent', borderBottomColor: 'rgba(255,255,255,0.18)', color: 'var(--paper)' } : {}; const linkColor = transparent ? { color: 'var(--paper)' } : {}; return (
onNav && onNav('home')} style={{cursor:'pointer'}}> {transparent ? : }
EN · ZAR
); } // ────────────────────────────────────────────────────────────── // Search bar (composer) // ────────────────────────────────────────────────────────────── function SearchBar({ values, onChange, onSearch, dark=false }) { const v = values || { where: 'Langebaan, West Coast', checkin: 'Fri 12 Jun', checkout: 'Mon 15 Jun', guests: '4 guests · 1 dog' }; const upd = (k) => (e) => onChange && onChange({ ...v, [k]: e.target.value }); return (
); } // ────────────────────────────────────────────────────────────── // Property card // ────────────────────────────────────────────────────────────── function PropCard({ p, fav, onFav, onClick, large=false }) { return (
{p.walk <= 2 && (
Steps from sand
)}
{p.name}
{p.loc} · Sleeps {p.guests}
R{p.price} / night
Tide HW 14:32 · {p.walk===0?'0 min':p.walk+' min'} to sea
); } // ────────────────────────────────────────────────────────────── // Mini-calendar // ────────────────────────────────────────────────────────────── function MiniCalendar({ year=2026, month=5 /* 0-idx; June */, startDay=12, endDay=15, onSelect, disabled=[] }) { const monthName = new Date(year, month, 1).toLocaleString('en-GB', { month: 'long' }); const first = new Date(year, month, 1).getDay(); // 0 Sun // Make Monday-first const firstMon = (first + 6) % 7; const dim = new Date(year, month+1, 0).getDate(); const prevDim = new Date(year, month, 0).getDate(); const days = []; for (let i=0; i
{monthName} {year}
{['Mo','Tu','We','Th','Fr','Sa','Su'].map(d =>
{d}
)} {days.map((cell, i) => { if (cell.out) return
{cell.d}
; const between = cell.d > startDay && cell.d < endDay; const start = cell.d === startDay; const end = cell.d === endDay; const dis = disabled.includes(cell.d); return (
!dis && onSelect && onSelect(cell.d)}> {cell.d}
); })}
); } // ────────────────────────────────────────────────────────────── // Step indicator // ────────────────────────────────────────────────────────────── function Steps({ step }) { const labels = ['Dates', 'Guests', 'Review', 'Pay']; return (
{labels.map((l, i) => (
i?'is-done':''}`}>{step>i ? : (i+1)}
=i?'var(--ink)':'var(--muted)'}}>{l} {ii?'is-done':''}`}/>} ))}
); } // ────────────────────────────────────────────────────────────── // Counter // ────────────────────────────────────────────────────────────── function Counter({ label, sub, value, onChange, min=0, max=12 }) { return (
{label}
{sub &&
{sub}
}
{value}
); } // ────────────────────────────────────────────────────────────── // Footer // ────────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { Ico, PROPERTIES, SBImage, Logo, Rating, Tide, TopNav, SearchBar, PropCard, MiniCalendar, Steps, Counter, Footer });