/* global React */ // Pepe Verde — shared UI primitives + chrome. const { useState, useEffect, useRef, useCallback } = React; // ============================================================ // STRIPE BACKGROUND — vertical light-green / off-white stripes // ============================================================ function StripeBg({ opacity = 1, className = "", style = {} }) { // 8 vertical bands across full width; soft sage/cream. return (
); } // ============================================================ // LOGO — uses the real Pepe Verde circle mark (jpg). // `size` is the diameter in px. `flat` removes the cream backdrop // so it sits on cream sections without a visible square. // ============================================================ function Logo({ size = 80, flat = true, alt = "Pepe Verde" }) { return ( {alt} ); } // Wordmark-only fallback (for header, mobile). Hand-blocky like the logo. function Wordmark({ small = false }) { return ( Pepe Verde ); } // ============================================================ // BUTTONS // ============================================================ function Button({ children, variant = "primary", as = "button", href, onClick, type = "button", size = "md", style = {}, full = false, ...rest }) { const sizes = { sm: { padding: "8px 14px", fontSize: 13 }, md: { padding: "12px 22px", fontSize: 14 }, lg: { padding: "16px 28px", fontSize: 15 }, }; const base = { fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", borderRadius: 2, cursor: "pointer", transition: "all 0.15s ease", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, border: "1px solid #1F5A3F", textDecoration: "none", width: full ? "100%" : "auto", ...sizes[size], }; const variants = { primary: { background: "#1F5A3F", color: "#F7F4E8" }, outline: { background: "transparent", color: "#1F5A3F" }, red: { background: "#C8463F", color: "#F7F4E8", border: "1px solid #C8463F" }, ghost: { background: "transparent", color: "#1F5A3F", border: "1px solid transparent" }, }; const Tag = as === "a" || href ? "a" : "button"; const props = Tag === "a" ? { href, ...rest } : { type, onClick, ...rest }; return ( {children} ); } // ============================================================ // SECTION TITLE — red, blocky, matches PIZZA CLÁSSICA style // ============================================================ function RedTitle({ children, as = "h2", size = 40, align = "center", style = {} }) { const Tag = as; return ( {children} ); } function GreenTitle({ children, as = "h3", size = 22, align = "center", style = {} }) { const Tag = as; return ( {children} ); } // ============================================================ // MENU ITEM — name+price row, italics-style desc below // ============================================================ function MenuItem({ item, lang = "pt", compact = false }) { const desc = lang === "en" ? item.desc_en : item.desc_pt; const tagLabel = { v: "(v)", vg: "(vegano)", gf: "(gf)" }; return (

{item.name} {item.tags?.length > 0 && ( {item.tags.map((t) => tagLabel[t]).join(" ")} )}

{item.price && ( {item.price}{item.price.includes("/") ? "" : " €"} )}
{desc && (

{desc}

)}
); } // ============================================================ // TOAST // ============================================================ const ToastCtx = React.createContext(null); function ToastProvider({ children }) { const [toasts, setToasts] = useState([]); const push = useCallback((msg, kind = "ok") => { const id = Math.random().toString(36).slice(2); setToasts((t) => [...t, { id, msg, kind }]); setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500); }, []); return ( {children}
{toasts.map((t) => (
{t.msg}
))}
); } function useToast() { return React.useContext(ToastCtx); } // ============================================================ // PLACEHOLDER PHOTO — striped block with monospace explainer // (used wherever a real photo isn't available yet) // ============================================================ function PhotoPlaceholder({ label = "interior photo", aspect = "4/3", style = {} }) { return (
[ {label} ]
); } // ============================================================ // HEADER + nav (responsive). `route` is current hash route key. // ============================================================ function Header({ route, lang, setLang, settings }) { const t = window.PV.T[lang]; const [open, setOpen] = useState(false); const links = [ ["home", t.nav_home], ["menu", t.nav_menu], ["sobre", t.nav_sobre], ["contactos", t.nav_contactos], ]; const navLink = (key, label) => ( setOpen(false)} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: route === key ? "#C8463F" : "#1F5A3F", textDecoration: "none", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500, padding: "8px 0", borderBottom: route === key ? "1px solid #C8463F" : "1px solid transparent", }} >{label} ); return (
PEPE VERDE
{["pt", "en"].map((l) => ( ))}
{t.cta_uber}
{open && (
{links.map(([k, l]) => navLink(k, l))}
{t.cta_uber}
)}
); } // ============================================================ // FOOTER // ============================================================ function Footer({ lang, settings }) { const t = window.PV.T[lang]; const orderedDays = [1, 2, 3, 4, 5, 6, 0].map( (d) => settings.hours.find((h) => h.day === d) ); return ( ); } // ============================================================ // Eyebrow label (small uppercase) // ============================================================ function Eyebrow({ children, color = "#C8463F", style = {} }) { return ( {children} ); } // Export to window Object.assign(window, { StripeBg, Logo, Wordmark, Button, RedTitle, GreenTitle, MenuItem, ToastProvider, useToast, PhotoPlaceholder, Header, Footer, Eyebrow, });