// Frangos — shared UI: contexts, icons, nav, footer, heat picker, reveal animations
const { useState, useEffect, useRef, useContext, createContext, useMemo } = React;
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);
// ——— money ———
const dh = (n) => `${n} DH`;
// ——— Flame icon ———
function Flame({ size = 16, color = "currentColor", dim = false }) {
return (
);
}
// ——— Halal mark ———
function HalalBadge({ size = "md" }) {
const { t } = useApp();
const s = size === "lg" ? { pad: "10px 18px", font: 15, glyph: 22 } : { pad: "6px 12px", font: 12.5, glyph: 17 };
return (
{t.hero.halal}
);
}
// ——— heat colors ———
const HEAT_COLORS = ["#8FA84B", "#E8A33C", "#E8472B", "#9B1B0E"];
function HeatFlames({ level, size = 15 }) {
return (
{[0, 1, 2, 3].map((i) => (
level}>
))}
);
}
// ——— Heat picker (compact, for menu cards & cart) ———
function HeatPicker({ value, onChange, compact = false }) {
const { t } = useApp();
return (
{t.heat.levels.map((lv, i) => (
))}
);
}
// ——— Scroll reveal ———
function Reveal({ children, delay = 0, y = 28, as = "div", className = "", style = {} }) {
const ref = useRef(null);
const [on, setOn] = useState(false);
const { motionOk } = useApp();
useEffect(() => {
if (!motionOk) { setOn(true); return; }
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } },
{ threshold: 0.12 }
);
io.observe(el);
return () => io.disconnect();
}, [motionOk]);
const Tag = as;
return (
{children}
);
}
// ——— Section heading ———
function SectionHead({ kicker, title, sub, center = false }) {
return (
{kicker}
{title}
{sub ? {sub}
: null}
);
}
// ——— Logo ———
function Logo({ size = 30, onClick }) {
return (
Frangos
fire grilled peri peri chicken
);
}
// ——— Nav ———
function Nav() {
const { t, lang, setLang, route, cartCount, motionOk } = useApp();
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 24);
fn();
window.addEventListener("scroll", fn, { passive: true });
return () => window.removeEventListener("scroll", fn);
}, []);
useEffect(() => { setMenuOpen(false); }, [route]);
const links = [
["/", t.nav.home],
["/menu", t.nav.menu],
["/reserve", t.nav.reserve],
["/story", t.nav.story],
];
return (
);
}
// ——— Footer ———
function Footer() {
const { t } = useApp();
return (
);
}
// ——— Toast ———
function Toast({ toast }) {
return (
{toast ? ({toast}) : null}
);
}
Object.assign(window, {
AppCtx, useApp, dh, Flame, HalalBadge, HEAT_COLORS, HeatFlames, HeatPicker,
Reveal, SectionHead, Logo, Nav, Footer, Toast,
});