/* ============================================================
components.jsx — Header, Footer, WhatsApp FAB, CartDrawer, ProductCard
============================================================ */
const { useState, useEffect, useRef } = React;
const waLink = (text) =>
`https://wa.me/${BIZ.phoneE164}?text=${encodeURIComponent(text)}`;
/* ---------- Stars ---------- */
function Stars({ value = 5, size = 16 }) {
return (
{[0, 1, 2, 3, 4].map((i) => (
))}
);
}
/* ---------- Photo placeholder ---------- */
const PH_LABEL = { burger: "FOTO · BURGER", beer: "FOTO · CERVEZA", fries: "FOTO · FRITOS", ribs: "FOTO · RIBS", drink: "FOTO · BEBIDA", promo: "PROMO" };
function Photo({ kind = "burger", className = "", style }) {
// la promo Thomason sí tiene imagen real
if (kind === "promo") {
return ;
}
return (
{PH_LABEL[kind] || "FOTO"}
);
}
/* ============================================================
HEADER
============================================================ */
function Header({ route, go }) {
const store = useStore();
const [open, setOpen] = useState(false); // mobile menu
const [scrolled, setScrolled] = useState(false);
const count = store.cartCount();
const links = [
["#/", "Inicio"], ["#/menu", "Menú"], ["#/nosotros", "Nosotros"], ["#/contacto", "Contacto"],
];
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
window.addEventListener("scroll", onScroll); onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => { setOpen(false); }, [route]);
return (
);
}
/* ============================================================
FOOTER
============================================================ */
function Footer({ go }) {
return (
);
}
/* ============================================================
WHATSAPP FLOATING BUTTON
============================================================ */
function WhatsAppFAB() {
const [hint, setHint] = useState(false);
useEffect(() => { const t = setTimeout(() => setHint(true), 1400); const t2 = setTimeout(() => setHint(false), 7000); return () => { clearTimeout(t); clearTimeout(t2); }; }, []);
return (
setHint(true)}
style={{ position: "fixed", right: 22, bottom: 22, zIndex: 60, display: "flex", alignItems: "center", gap: 0 }}>
{hint && (
Pedí por WhatsApp
)}
);
}
/* ============================================================
PRODUCT CARD
============================================================ */
function ProductCard({ item, draft }) {
const store = useStore();
const stock = store.getStock()[item.id] ?? 99;
const out = stock <= 0;
const hasVariant = !!(item.priceDouble || item.pint);
const variantKey = item.pint ? "pint" : "double";
const variantLabel = item.pint ? "Pinta 0,5L" : "Doble";
const baseLabel = item.pint ? "Chopp 0,33L" : "Simple";
const [bump, setBump] = useState(false);
const addToCart = (variant) => {
if (out) return;
store.add(item.id, variant);
setBump(true); setTimeout(() => setBump(false), 350);
window.dispatchEvent(new CustomEvent("bf-cart-bump"));
};
return (
{ e.currentTarget.style.borderColor = "var(--orange)"; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-dark)"; }}>
{item.tags.map((t) => (
{t === "TOP" ? "★ TOP" : t}
))}
{out &&
Sin stock
}
{item.name}
{item.desc}
{money(item.price)}
{hasVariant && {baseLabel}}
{hasVariant && (
)}