// Shared components: monogram, navbar, concierge footer, icons, image slots
const { useState, useEffect, useRef, useMemo } = React;
function useBreakpoint() {
const get = () => ({ isMobile: window.innerWidth < 768, isTablet: window.innerWidth >= 768 && window.innerWidth < 1100 });
const [bp, setBp] = useState(get);
useEffect(() => {
const fn = () => setBp(get());
window.addEventListener('resize', fn);
return () => window.removeEventListener('resize', fn);
}, []);
return bp;
}
function useIsMobile(bp = 768) {
const [v, setV] = useState(() => window.innerWidth < bp);
useEffect(() => {
const fn = () => setV(window.innerWidth < bp);
window.addEventListener('resize', fn);
return () => window.removeEventListener('resize', fn);
}, [bp]);
return v;
}
// ——— Brand mark — clean SVG 8-fold mandala rosette (vector, scales sharply)
function RosetteSVG({ size = 36, stroke = 1.4, glow = false }) {
const id = "rg_" + Math.random().toString(36).slice(2, 7);
return (
);
}
// ——— Small circular logo mark used in chrome (navbar etc.)
function LogoMark({ size = 36, glow = false }) {
return (
);
}
// ——— Full official logo (rosette + OUMIX wordmark + LUX) — image asset
function OumixFullLogo({ width = 280, style = {} }) {
return (
);
}
// ——— OUMIX wordmark — used for each vertical (CAR / VILLAS)
function OumixMonogram({ size = 28, sub, tone = "gold" }) {
const color = tone === "gold" ? "var(--gold)" : "currentColor";
return (
);
}
// ——— Center divider badge — circular dark token with SVG monogram
function CenterBadge({ size = 168 }) {
return (
);
}
// ——— Icons (line, gold)
const Icon = {
Phone: (p) => (),
Plane: (p) => (),
Pin: (p) => (),
Shield: (p) => (),
Clock: (p) => (),
Pool: (p) => (),
Sparkle: (p) => (),
Bell: (p) => (),
Sun: (p) => (),
Arrow: (p) => (),
Car: (p) => (),
Bed: (p) => (),
Guest: (p) => (),
Close: (p) => (),
Check: (p) => (),
Star: (p) => (),
Compass: (p) => (),
};
// ——— Navbar
function Navbar({ page, go }) {
const isMobile = useIsMobile();
const [menuOpen, setMenuOpen] = useState(false);
const links = [
{ id: "cars", label: "Fleet" },
{ id: "villas", label: "Villas" },
{ id: "about", label: "About" },
{ id: "contact", label: "Contact" },
];
const isActive = (l) =>
(l.id === "cars" && (page === "cars" || page === "detail-car")) ||
(l.id === "villas" && (page === "villas" || page === "detail-villa")) ||
l.id === page;
const nav = (id) => {
go({ page: id });
setMenuOpen(false);
};
return (
);
}
// ——— Concierge sticky footer
function ConciergeFooter() {
const isMobile = useIsMobile();
return (
);
}
// ——— Hairline title block (e.g. "01 — Fleet")
function SectionEyebrow({ index, label }) {
return (
{index}
{label}
);
}
// ——— Generic image placeholder slot
function ImgSlot({ label, tone, height = 200, style = {} }) {
return ;
}
Object.assign(window, { useIsMobile, useBreakpoint, OumixMonogram, OumixFullLogo, LogoMark, CenterBadge, RosetteSVG, Icon, Navbar, ConciergeFooter, SectionEyebrow, ImgSlot });