// Shared chrome and primitives.
const { useState, useEffect, useRef, useCallback } = React;
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// Bespoke wordmark — original SVG re-draw (does not reproduce client's exact lockup).
// A simple elegant typographic mark.
function Wordmark({ small = false, light = false }) {
const fs = small ? 22 : 28;
const color = light ? "var(--paper)" : "var(--ink)";
return (
Carousel
EVENTS
);
}
function Nav({ route, onRoute, onEnquire, locale, onLocale, t }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const on = () => setScrolled(window.scrollY > 16);
on();
window.addEventListener("scroll", on, { passive: true });
return () => window.removeEventListener("scroll", on);
}, []);
// All current routes open with a dark image hero; nav rides light over it until scroll.
const onHero = !scrolled;
const links = [
{ k: "home", l: t.portfolio === "أعمالنا" ? "الرئيسية" : "Home" },
{ k: "weddings", l: t.weddings },
{ k: "corporate", l: t.corporate },
{ k: "social", l: t.social },
{ k: "approach", l: t.approach },
{ k: "story", l: t.story },
{ k: "accolades", l: t.accolades },
{ k: "contact", l: t.contact },
];
return (
{links.slice(1, 7).map((it) => (
onRoute(it.k === "weddings" ? "weddings" : it.k === "home" ? "home" : "stub:" + it.k)}
className="nav-link"
style={{
color: route === it.k ? "var(--accent-soft)" : "inherit",
opacity: route === it.k ? 1 : 0.92,
}}
onMouseEnter={(e) => { if (route !== it.k) e.currentTarget.style.color = "var(--accent-soft)"; }}
onMouseLeave={(e) => { if (route !== it.k) e.currentTarget.style.color = "inherit"; }}
>
{it.l}
))}
{t.enquire}
);
}
function LocaleToggle({ locale, onLocale, onHero }) {
return (
{[["en", "EN"], ["ar", "AR"]].map(([k, l]) => (
onLocale(k)}
style={{
padding: "6px 12px", borderRadius: 999,
background: locale === k ? (onHero ? "#FBF8F4" : "var(--ink)") : "transparent",
color: locale === k ? (onHero ? "var(--noir)" : "var(--paper)") : "inherit",
transition: "all 0.2s ease",
}}>{l}
))}
);
}
function Arrow({ size = 14, dir = "right" }) {
const rot = dir === "left" ? 180 : dir === "down" ? 90 : 0;
return (
);
}
function SectionEyebrow({ label, num }) {
return (
{num && {num} }
{label}
);
}
function Footer({ t, onEnquire }) {
return (
Let's plan something
We respond to every enquiry personally, within two working days.
{t.requestProposal}
© 2008 — 2026 Carousel Events FZ-LLC
);
}
function FooterCol({ title, items }) {
return (
);
}
// Sticky bottom CTA for mobile-feel persistent surface
function StickyEnquireBar({ onEnquire, t, route }) {
if (route === "case") return null; // case study has its own CTA band
return (
);
}
// Image with photographer credit overlay
function CreditedImage({ src, alt, credit, ratio = "4/5", style, className }) {
return (
{credit && (
© {credit}
)}
);
}
Object.assign(window, {
Nav, Footer, Wordmark, useReveal, SectionEyebrow, Arrow, StickyEnquireBar, CreditedImage,
});