/* global React, StripeBg, Logo, Button, RedTitle, GreenTitle, MenuItem, PhotoPlaceholder, Eyebrow, useToast */ // Pepe Verde — public-facing pages (Home, Menu, Reservas, Sobre, Contactos) const { useState, useEffect, useMemo, useRef } = React; // ============================================================ // HOME — hero, about, highlights, quick reserve, uber, location. // Hero has 3 variants exposed via Tweaks: 'menu', 'split', 'photo'. // ============================================================ function HomePage({ lang, settings, items, tweaks = {} }) { const t = window.PV.T[lang]; // Featured: items with photos first, then others const featured = items .filter((i) => i.featured && i.active) .sort((a, b) => (b.photo ? 1 : 0) - (a.photo ? 1 : 0)); const heroVariant = tweaks.heroVariant || "split"; const showStripes = tweaks.showStripes !== false; const showPhotos = tweaks.showPhotos !== false; return (
{/* ---------- HERO ---------- */} {/* ---------- ABOUT short ---------- */} {tweaks.showAbout !== false && (
{t.hero_eyebrow} {t.about_title}

{t.about_body}

)} {/* ---------- HIGHLIGHTS strip ---------- */} {tweaks.showFeatured !== false && (
{t.highlights_sub} {t.highlights_title}
{featured.slice(0, 4).map((it) => ( ))}
)} {/* ---------- DUAL: reserva + uber ---------- */}
{t.cta_reserve}

{t.quick_reserve_title}

{t.quick_reserve_sub}

delivery

{t.also_uber_title}

{t.also_uber_sub}

{/* ---------- LOCATION ---------- */} {tweaks.showLocation !== false && }
); } // ----- Hero variants ----- function Hero({ variant, lang, settings, tweaks }) { const t = window.PV.T[lang]; const showStripes = tweaks.showStripes !== false; const showPhotos = tweaks.showPhotos !== false; const heroPhoto = tweaks.heroPhoto || "hero_neon_real.jpg"; const headline = lang === "pt" ? (tweaks.heroHeadlinePT || t.hero_title) : (tweaks.heroHeadlineEN || t.hero_title); if (variant === "split") return ; if (variant === "photo") return ; return ; } // "Menu-as-hero": centered, on full stripe background, logo prominent function HeroMenu({ t, settings, showStripes, headline }) { return (
{showStripes && }
{t.hero_eyebrow}

{headline}

{t.hero_sub}

); } // Split variant: text left, photo (or stripes) right function HeroSplit({ t, settings, showStripes, showPhotos, heroPhoto, headline }) { return (
{showStripes && }
{t.hero_eyebrow}

{headline}

{t.hero_sub}

{showPhotos ? ( <> Pepe Verde interior
— Ericeira
{t.come_hungry}
R. Mendes Leal 22
) : ( <> {showStripes && }
{t.come_hungry} — Ericeira — {t.made_fresh}
)}
); } // Photo variant: real interior shot full-bleed function HeroPhoto({ t, settings, heroPhoto, headline }) { return (
Pepe Verde Ericeira
{t.hero_eyebrow}

{headline}

{t.hero_sub}

); } // ----- Featured card ----- function FeaturedCard({ item, lang }) { const t = window.PV.T[lang]; const desc = lang === "en" ? item.desc_en : item.desc_pt; return ( e.currentTarget.style.transform = "translateY(-4px)"} onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
{item.photo ? ( {item.name} ) : ( <>
{item.name}
)}
{item.category.replace("-", " ")}

{item.name}

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

{desc}

 ); } // ----- Location strip ----- function LocationStrip({ lang, settings }) { const t = window.PV.T[lang]; const mapsQ = encodeURIComponent(settings.address_line1 + ", " + settings.address_line2); return (
localização {t.location_title}

{settings.address_line1}
{settings.address_line2}

); } // ============================================================ // MENU PAGE — full menu with filters, sticky category nav // ============================================================ function MenuPage({ lang, items, categories, stickers = "polaroid" }) { const t = window.PV.T[lang]; const [filter, setFilter] = useState("all"); // all, v, vg, gf const [activeCat, setActiveCat] = useState(categories[0]?.id); const sectionRefs = useRef({}); const filtered = useMemo(() => { if (filter === "all") return items; return items.filter((i) => i.tags?.includes(filter) || i.category === "extras"); }, [items, filter]); const grouped = useMemo(() => { const g = {}; categories.forEach((c) => { g[c.id] = filtered.filter((i) => i.category === c.id && i.active); }); return g; }, [filtered, categories]); const scrollToCat = (id) => { setActiveCat(id); const el = sectionRefs.current[id]; if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 140; window.scrollTo({ top: y, behavior: "smooth" }); } }; // observe sections useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setActiveCat(e.target.dataset.cat); }); }, { rootMargin: "-150px 0px -60% 0px" }); Object.values(sectionRefs.current).forEach((el) => el && obs.observe(el)); return () => obs.disconnect(); }, [categories.length]); return (
{/* Top header */}
{t.hero_eyebrow} {t.menu_title}

{t.menu_sub}

{/* Sticky nav: tabs + filters */}
{categories.map((c) => ( ))}
{[ ["all", t.filter_all], ["v", t.filter_v], ["vg", t.filter_vg], ["gf", t.filter_gf], ].map(([k, l]) => ( ))}
{/* Body */}
{categories.map((c, ci) => { const list = grouped[c.id] || []; if (list.length === 0) return null; // Pick a photo'd item from this category to use as a decorative sticker const photoItem = (items || []).find((i) => i.category === c.id && i.photo && i.active); // Alternate sticker side: even = right, odd = left const stickerSide = ci % 2 === 0 ? "right" : "left"; return (
(sectionRefs.current[c.id] = el)} data-cat={c.id} style={{ scrollMarginTop: 140, marginBottom: 60, position: "relative" }} >
{lang === "en" ? c.name_en : c.name_pt}
4 ? "repeat(auto-fit, minmax(320px, 1fr))" : "1fr", maxWidth: 920, margin: "0 auto", background: "rgba(247,244,232,0.85)", border: "1px solid rgba(31,90,63,0.18)", padding: "20px 32px", position: "relative", zIndex: 2, }}> {list.map((it) => )}
{stickers !== "off" && photoItem && ( )}
); })}
(v) (vg) (gf)

{t.allergens_note}

); } // ----- Menu sticker (decorative floating photo, lives in the side gutter) ----- // The outer menu container is 1280px wide and the inner card 920px, so each // gutter is ~180px — wide enough for a 170px sticker without touching the card. function MenuSticker({ item, variant = "polaroid", side = "right", index = 0 }) { const rotations = [-7, 6, -5, 8, -9, 4, -6, 7, -4]; const rot = rotations[index % rotations.length]; const topOffset = 10 + (index % 3) * 30; const isPolaroid = variant === "polaroid"; const width = isPolaroid ? 170 : 150; const sideStyle = side === "right" ? { right: -10, top: topOffset } : { left: -10, top: topOffset }; const baseStyle = { position: "absolute", width, transform: `rotate(${rot}deg)`, transformOrigin: "center center", zIndex: 3, pointerEvents: "none", transition: "transform 0.3s ease", ...sideStyle, }; if (!isPolaroid) { return (
{item.name}
); } return (
{item.name}
{item.name}
); } // ============================================================ // RESERVAS PAGE // ============================================================ function ReservasPage({ lang, settings, reservations, setReservations }) { const t = window.PV.T[lang]; const toast = useToast(); const [submitted, setSubmitted] = useState(null); const [form, setForm] = useState({ name: "", phone: "", email: "", date: "", time: "", people: 2, area: "indiferente", notes: "", rgpd: false, }); const [errors, setErrors] = useState({}); // Compute min selectable date (today + advance hours) const minDate = useMemo(() => { const d = new Date(); d.setHours(d.getHours() + settings.minAdvanceHours); return d.toISOString().slice(0, 10); }, [settings.minAdvanceHours]); // Available time slots for chosen date const availableSlots = useMemo(() => { if (!form.date) return []; const d = new Date(form.date + "T00:00:00"); const day = d.getDay(); const hours = settings.hours.find((h) => h.day === day); if (!hours || !hours.open) return []; if (settings.blockedDates.includes(form.date)) return []; const slots = []; hours.slots.forEach(([from, to]) => { const [fh, fm] = from.split(":").map(Number); const [th, tm] = to.split(":").map(Number); let cur = fh * 60 + fm; const end = th * 60 + tm - 60; // last reservation 1h before close while (cur <= end) { const hh = String(Math.floor(cur / 60)).padStart(2, "0"); const mm = String(cur % 60).padStart(2, "0"); // check capacity const taken = reservations .filter((r) => r.date === form.date && r.time === `${hh}:${mm}` && (r.status === "confirmed" || r.status === "pending")) .reduce((s, r) => s + r.people, 0); const remaining = settings.capacityPerSlot - taken; slots.push({ time: `${hh}:${mm}`, remaining }); cur += settings.slotMinutes; } }); return slots; }, [form.date, reservations, settings]); const validate = () => { const e = {}; if (!form.name.trim()) e.name = true; if (!form.phone.trim()) e.phone = true; if (!form.email.trim() || !/^\S+@\S+\.\S+$/.test(form.email)) e.email = true; if (!form.date) e.date = true; if (!form.time) e.time = true; if (form.people < 1) e.people = true; if (!form.rgpd) e.rgpd = true; setErrors(e); return Object.keys(e).length === 0; }; const submit = (ev) => { ev.preventDefault(); if (!validate()) { toast(lang === "pt" ? "Verifica os campos em vermelho" : "Check fields in red", "err"); return; } const slot = availableSlots.find((s) => s.time === form.time); const fits = slot && slot.remaining >= Number(form.people); const status = settings.autoConfirm && fits ? "confirmed" : "pending"; const r = { id: "r-" + Date.now().toString(36), ...form, people: Number(form.people), status, createdAt: Date.now(), }; setReservations([r, ...reservations]); setSubmitted({ ...r }); toast(status === "confirmed" ? (lang === "pt" ? "Reserva confirmada!" : "Reservation confirmed!") : (lang === "pt" ? "Reserva enviada — pendente" : "Reservation sent — pending")); }; if (submitted) { return (
{submitted.status === "confirmed" ? (lang === "pt" ? "confirmada" : "confirmed") : (lang === "pt" ? "pendente" : "pending")} {lang === "pt" ? "Obrigado!" : "Thank you!"}

{lang === "pt" ? `A tua reserva para ${submitted.people} pessoa${submitted.people > 1 ? "s" : ""} a ${submitted.date} às ${submitted.time} ${submitted.status === "confirmed" ? "está confirmada" : "está a aguardar confirmação"}.` : `Your booking for ${submitted.people} guest${submitted.people > 1 ? "s" : ""} on ${submitted.date} at ${submitted.time} is ${submitted.status === "confirmed" ? "confirmed" : "pending"}.`}

{lang === "pt" ? `Vamos enviar confirmação para ${submitted.email}.` : `We'll email you at ${submitted.email}.`}

); } const fieldStyle = (err) => ({ width: "100%", padding: "12px 14px", fontFamily: 'Inter, sans-serif', fontSize: 14, background: "#F7F4E8", color: "#1F5A3F", border: err ? "1px solid #C8463F" : "1px solid rgba(31,90,63,0.4)", outline: "none", borderRadius: 0, }); const labelStyle = { fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, color: "#1F5A3F", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6, display: "block", }; return (
{t.cta_reserve} {t.reservas_title}

{t.reservas_sub}

setForm({ ...form, name: e.target.value })} />
setForm({ ...form, phone: e.target.value })} />
setForm({ ...form, email: e.target.value })} />
setForm({ ...form, date: e.target.value, time: "" })} />
{form.date && availableSlots.length === 0 && (

{lang === "pt" ? "Fechado neste dia" : "Closed on this date"}

)}
setForm({ ...form, people: e.target.value })} />
{[ ["interior", t.area_inside], ["exterior", t.area_outside], ["indiferente", t.area_either], ].map(([k, l]) => ( ))}