/* Pōda Ksamil — shared website chrome (wordmark, header, hero, footer) */
function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.6, style = {} }) {
// Lucide icon, rendered via data-lucide and hydrated by lucide.createIcons()
return ;
}
function useIsNarrow(bp = 680) {
const get = () => (typeof window !== 'undefined' ? window.innerWidth <= bp : false);
const [narrow, setNarrow] = React.useState(get);
React.useEffect(() => {
const onR = () => setNarrow(get());
window.addEventListener('resize', onR);
onR();
return () => window.removeEventListener('resize', onR);
}, [bp]);
return narrow;
}
function Wordmark({ tone = 'light', size = 1 }) {
const ink = tone === 'light' ? 'var(--ink-900)' : '#fff';
const gold = tone === 'light' ? 'var(--gold-600)' : 'var(--gold-500)';
return (
PŌDA
KSAMIL
);
}
function LangToggle({ lang, setLang }) {
const langs = ['EN', 'SQ', 'IT'];
return (
{langs.map((l) => {
const active = l === lang;
return (
);
})}
);
}
function SiteHeader({ lang, setLang, t, onReserve }) {
const [scrolled, setScrolled] = React.useState(false);
const narrow = useIsNarrow(680);
React.useEffect(() => {
const el = document.querySelector('[data-scroll-root]') || window;
const onScroll = () => setScrolled((el.scrollTop || window.scrollY || 0) > 40);
el.addEventListener('scroll', onScroll, { passive: true });
return () => el.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
function Hero({ t }) {
const narrow = useIsNarrow(680);
return (
{/* clean turquoise Ionian water gradient — the Ksamil beach-bar backdrop */}
{narrow ? (
{/* mobile-only: real PODA KSAMIL portrait photo */}
) : (
{/* desktop/laptop: real PODA KSAMIL whitewashed-entrance photo, dropped below the header */}
)}
{t.heroEyebrow}
{t.heroTitle}
{t.heroSub}
{t.heroHours}
·
{t.heroSeaview}
);
}
function Gallery({ t }) {
const shots = [
{ src: '../../assets/brand/poda-ksamil-swing-sign.png', cap: t.galSwing },
{ src: '../../assets/brand/beach-bar-entrance.png', cap: t.galEntrance },
{ src: '../../assets/brand/pineapple-cocktail.png', cap: t.galPineapple },
{ src: '../../assets/brand/night-cocktails.png', cap: t.galNight },
];
return (
{t.galEyebrow}
{t.galTitle}
{shots.map((s, i) => (
{s.cap}
))}
);
}
function SiteFooter({ t }) {
const cols = [
{ h: t.footFind, lines: ['Poda Bay, Rruga Gjiri Poda', 'Ksamil 9706, Albania'], icon: 'map-pin' },
{ h: t.footHours, lines: ['Every day · 09:00 – 01:00', 'Kitchen until 23:00'], icon: 'clock' },
{ h: t.footReach, lines: ['+355 69 896 6814', '@poda.ksamil'], icon: 'phone' },
];
return (
);
}
Object.assign(window, { Icon, Wordmark, LangToggle, SiteHeader, Hero, Gallery, SiteFooter });