// RIVA — composants du site const { useState, useEffect, useRef, useMemo } = React; // ====== VIGNETTE D'UN PLAT ====== // Affiche la photo si elle existe dans le dossier photos\, sinon une // vignette propre avec les initiales du plat, aux couleurs de sa catégorie. function PlatVisuel({ item, className = '', children }) { // 1. Une vraie photo déposée dans photos\ passe avant tout le reste. if (item?.img) { return (
{children}
); } // 2. Sinon, le plat reçoit son illustration, dessinée d'après sa catégorie // et les ingrédients cités dans son nom (voir illustrations.js). let dessin = null; try { if (item?.name && typeof illustrationPlat === 'function') { dessin = illustrationPlat(item.catId || item.cat || '', item.name, item.teinte, item.desc); } } catch (e) {} if (dessin) { return (
{children}
); } // 3. Filet de sécurité : les initiales du plat, si le dessin a échoué. const initiales = String(item?.name || '') .replace(/[^\p{L}\p{N}\s]/gu, ' ') .split(/\s+/).filter(Boolean).slice(0, 2) .map(m => m[0].toUpperCase()).join(''); return (
{initiales || '洋'} {item?.catLabel && {item.catLabel}} {children}
); } // ====== ICONS ====== const Icon = { Star: (p) => , Bag: (p) => , Close: (p) => , Menu: (p) => , Plus: (p) => , WhatsApp: (p) => , Phone: (p) => , MapPin: (p) => , Clock: (p) => , Truck: (p) => , Store: (p) => , Check: (p) => , ArrowRight: (p) => , Trash: (p) => , Insta: (p) => , Spark: (p) => , Settings: (p) => , Flame: (p) => , Copy: (p) => , Sliders: (p) => , Sparkles: (p) => , Printer: (p) => , Lock: (p) => , CreditCard: (p) => , Cash: (p) => , Mail: (p) => , Warning: (p) => , }; // ====== LOGO ====== /* Le logo officiel de RIVA — l'image fournie par le restaurant, détourée (site/logo/), et RIEN d'autre : pas de redessin, pas de ligne ajoutée. Source : photos/logo-fond-noir.jpg. size = hauteur de l'arche en pixels. sansTexte = l'arche seule, sans le mot RIVA. empile = le logo complet, arche au-dessus du mot (pied de page). */ const LOGOS = Object.assign({ arche: '/site/logo/riva-arche.png', mot: '/site/logo/riva-mot.png', complet: '/site/logo/riva-logo.png', }, window.RIVA_LOGOS || {}); // version fichier unique : images intégrées function Logo({ size = 40, sansTexte = false, empile = false }) { if (empile) { return RIVA; } return (
{sansTexte {!sansTexte && ( RIVA )}
); } // ====== HEADER ====== // `compact` : le client est à table, il vient pour commander. On lui enlève // la navigation du site (histoire, accès, commander) : il n'a rien à visiter. function Header({ cartCount, onCartOpen, onNav, view, setView, adminUnlocked, onLogoClick, startLongPress, cancelLongPress, compact }) { const [mobileOpen, setMobileOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { id: 'menu', label: 'Menu' }, { id: 'commander', label: 'Commander' }, { id: 'histoire', label: 'L\'histoire' }, { id: 'visite', label: 'Nous trouver' }, ]; return (
{ // Si l'appui long s'est déclenché, on ignore le clic const blocked = onLogoClick && onLogoClick(e); if (blocked === false) return; e.preventDefault(); onNav('top'); setView('site'); }} onMouseDown={() => startLongPress && startLongPress()} onMouseUp={() => cancelLongPress && cancelLongPress()} onMouseLeave={() => cancelLongPress && cancelLongPress()} onTouchStart={() => startLongPress && startLongPress()} onTouchEnd={() => cancelLongPress && cancelLongPress()} onTouchCancel={() => cancelLongPress && cancelLongPress()} onContextMenu={(e) => e.preventDefault()} className="flex items-center select-none" style={{ WebkitUserSelect: 'none', userSelect: 'none' }}>
{adminUnlocked && ( )}
{mobileOpen && !compact && (
{links.map(l => ( {e.preventDefault(); onNav(l.id); setMobileOpen(false); setView('site');}} className="py-2.5 text-base font-medium uppercase">{l.label} ))} {adminUnlocked && ( )}
)}
); } // ====== HERO ====== function Hero({ onScrollToMenu, openPhone, table }) { const [status, setStatus] = useState({ open: false, label: '' }); const { menu: effectiveMenu, featuredId } = getEffectiveMenu(); // Plat mis en avant : celui choisi dans le tableau de bord, sinon le // Rivanuozzo — Imad veut un PANUOZZO en vitrine, pas une pizza. const platVedette = useMemo(() => { const all = Object.values(effectiveMenu).flatMap(c => c.items); if (featuredId) { const found = all.find(it => it.id === featuredId); if (found) return found; } const panuozzos = all.filter(it => String(it.catId || '').startsWith('panuozzo')); return panuozzos.find(it => it.name === 'Rivanuozzo') || panuozzos[0] || effectiveMenu.signature?.items?.[0] || all[0]; }, [featuredId, effectiveMenu]); // Nombre réel de plats à la carte, recompté à chaque chargement const nbPlats = useMemo( () => Object.values(effectiveMenu).reduce((s, c) => s + c.items.length, 0), [effectiveMenu] ); const heroQuote = getHeroQuote(); const textes = getHeroTextes(); useEffect(() => { setStatus(isOpenNow()); const t = setInterval(() => setStatus(isOpenNow()), 60000); return () => clearInterval(t); }, []); return (
{status.label} {textes.pastille1.trim() && {textes.pastille1}} {textes.pastille2.trim() && {textes.pastille2}}

{textes.titre1}
{textes.titre2.trim() && <>{textes.titre2}
} {textes.signature.trim() && ( {textes.signature} )}

{textes.texte}{' '} {textes.texteFort.trim() && {textes.texteFort}}

{SHOP.phone && ( )}
LA
STAR
{/* Voile sombre en bas de la photo, sinon le nom du plat en blanc se perd sur une image claire. */}
{platVedette?.catLabel}
{platVedette?.name}
{/* Le petit mot manuscrit. Le patron peut le couper depuis le tableau de bord : alors rien, pas même une étiquette vide. */} {heroQuote.actif !== false && (heroQuote.line1 || '').trim() && (
{/* SVG sticker — forme organique avec bord déchiré et petite étoile */} {/* Forme blob/sticker stylisée */} {/* Petite étoile décorative rouge */} {/* Contenu */}
" {heroQuote.line1} "
{heroQuote.author && (
{heroQuote.author}
)}
)}
); } // ====== PHONE POPUP ====== function PhonePopup({ open, onClose }) { const [copied, setCopied] = useState(false); const [status, setStatusP] = useState({ open: false, label: '' }); const [nextOpen, setNextOpen] = useState(''); useEffect(() => { if (open) { setCopied(false); const s = isOpenNow(); setStatusP(s); setNextOpen(s.open ? '' : computeNextOpening()); } }, [open]); if (!open) return null; const copy = async () => { try { await navigator.clipboard.writeText(SHOP.phone); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (e) {} }; return (
e.stopPropagation()} className="bg-[var(--bg-2)] border border-[var(--line)] rounded-3xl p-7 max-w-[440px] w-full text-center relative"> {/* Numéro en gros — pas cliquable pour éviter Skype/FaceTime sur desktop */}
Numéro du restaurant
{SHOP.phone}
{/* Statut ouvert / fermé */}
{status.open ? (
Ouvert · appelle quand tu veux
) : (
Fermé maintenant
)} {!status.open && nextOpen && (
Ouvre {nextOpen}
)} {!status.open && (
Personne ne répondra. Tu peux quand même commander en ligne 👇
)}
{/* Actions */}
{!status.open && ( )}
); } // Calcule la prochaine ouverture (ex: "demain à 11h30", "vendredi à 18h30") function computeNextOpening() { const now = new Date(); const dayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']; const mins = now.getHours() * 60 + now.getMinutes(); const todayIdx = (now.getDay() + 6) % 7; // 0 = lundi for (let offset = 0; offset < 8; offset++) { const idx = (todayIdx + offset) % 7; const day = SHOP.hours[idx]; if (day.closed) continue; // Parse slots const slots = day.slots.split('/').map(s => { const [from, to] = s.trim().split('–').map(t => { const [hh, mm] = t.trim().replace('h', ':').split(':'); return parseInt(hh) * 60 + parseInt(mm || 0); }); return { from, to }; }); for (const slot of slots) { if (offset === 0 && slot.from <= mins) continue; // déjà passé aujourd'hui const h = Math.floor(slot.from / 60); const m = slot.from % 60; const timeStr = `${h}h${String(m).padStart(2,'0')}`; if (offset === 0) return `aujourd'hui à ${timeStr}`; if (offset === 1) return `demain à ${timeStr}`; const dayName = dayNames[(now.getDay() + offset) % 7]; return `${dayName} à ${timeStr}`; } } return ''; } function Stat({ n, sub }) { return (
{n}
{sub}
); } // ====== TICKER ====== function Ticker() { const items = ['Pâte napolitaine', '★', '100% Halal', '★', 'Panuozzo sur mesure', '★', 'Pâtes à la meule', '★', 'Soufflés Riva', '★', 'Commande à table par QR', '★']; return (
{[...items, ...items, ...items].map((t, i) => ( {t} ))}
); } // ====== HOW IT WORKS ====== // Un simple bandeau : trois pas, une ligne chacun. Le client a compris avant // d'avoir fini de lire — une explication qui prend un écran entier, personne // ne la lit et elle repousse la carte plus bas. function HowItWorks() { const steps = [ { n: '1', title: 'Vous composez', desc: 'Sur votre téléphone, à votre rythme.' }, { n: '2', title: 'Ça tombe en caisse', desc: 'Le ticket sort en cuisine dans la seconde.' }, { n: '3', title: 'Vous mangez', desc: 'Servi à table, ou prêt à l’heure choisie.' }, ]; return (
{steps.map((s, i) => (
{s.n}

{s.title}

{s.desc}

))}
); } // ====== SIGNATURE FEATURE ====== function SignatureFeature({ addToCart }) { const { menu: effectiveMenu } = getEffectiveMenu(); const featured = (effectiveMenu.signature?.items || []).slice(0, 3); if (featured.length === 0) return null; return (
Les Signatures

Les trois
qu'on refuse de retirer de la carte.

{e.preventDefault(); document.getElementById('menu')?.scrollIntoView({behavior: 'smooth'});}} className="btn btn-ghost shrink-0"> Voir toute la carte
{featured.map((item, i) => (
N°{i+1}
{item.tagline || item.catLabel}

{item.name}

{item.desc}

{item.price.toFixed(2)}€ {item.rupture ? ( En rupture ) : ( )}
))}
); } // ====== FULL MENU ====== function FullMenu({ addToCart, compact }) { const [activeCat, setActiveCat] = useState('signature'); const { menu: effectiveMenu } = getEffectiveMenu(); const cats = Object.values(effectiveMenu); const current = cats.find(c => c.id === activeCat) || cats[0]; return ( ); } function MenuCard({ item, addToCart }) { // Un plat « à composer » a des choix obligatoires (viande, accompagnement…) : // on le signale pour que le client sache qu'un écran de choix va s'ouvrir. const aComposer = !!(item.options && item.options.length); return (
{/* En rupture : la photo est assombrie, l'étiquette reste rouge vif en haut à gauche */} {item.rupture &&
} {item.rupture && ( En rupture )} {item.badges?.includes('signature') && Signature} {item.badges?.includes('hot') && Épicé} {item.badges?.includes('new') && Nouveau} {item.badges?.includes('veg') && Végé}

{item.name}

{item.price.toFixed(2)}€
{item.tagline &&
{item.tagline}
}

{item.desc}

{item.rupture ? Revient bientôt : aComposer ? À composer : } {item.rupture ? ( En rupture ) : ( )}
); } Object.assign(window, { Icon, Logo, PlatVisuel, Header, Hero, PhonePopup, Stat, Ticker, HowItWorks, SignatureFeature, FullMenu, MenuCard });