/* ============ RAVO KAFE — main app ============ */
const { useState, useEffect, useRef, useMemo } = React;
/* ---------- Tiny icons ---------- */
const Icon = {
Search: () =>
);
}
/* ---------- Wordmark (real SVG logo) ---------- */
function Wordmark({ variant = "dark", height = 56, style }) {
const src = variant === "light" ? "assets/ravo-kafe-ravo-logo-light.svg" : "assets/ravo-kafe-ravo-logo-dark.svg";
return (
{t.showTicker &&
}
setDrawerOpen(true)} />
setDrawerOpen(false)}
items={cart}
total={cartTotal}
updateQty={updateQty} />
✓
{toast}
{doubled.map((it, i) => {it} )}
);
}
function Nav({ cartCount, onCart }) {
return (
);
}
function Hero({ autoRotate }) {
const [idx, setIdx] = useState(0);
const [progress, setProgress] = useState(0);
const [manualClick, setManualClick] = useState(false);
const ROTATE_MS = 6500;
useEffect(() => {
if (!autoRotate || manualClick) { setProgress(0); return; }
setProgress(0);
const start = performance.now();
let raf;
const tick = (now) => {
const p = Math.min(1, (now - start) / ROTATE_MS);
setProgress(p);
if (p < 1) raf = requestAnimationFrame(tick);
else setIdx((i) => (i + 1) % BEANS.length);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [idx, autoRotate, manualClick]);
const handleDotClick = (i) => {
setIdx(i);
setManualClick(true);
setTimeout(() => setManualClick(false), 500);
};
const bean = BEANS[idx];
return (
{/* Stack of background images cross-fading */}
Lot {bean.lot} · Récolte 2026
●
{bean.origin.toUpperCase()} · {bean.subtitle}
Single origin —
{bean.name}
Café d'origine cultivé en altitude, torréfié en petite série à Pantin et livré frais sous huit jours. Notes de {bean.notes[0].toLowerCase()} , {bean.notes[1].toLowerCase()} et {bean.notes[2].toLowerCase()} .
Torréfaction
{[1, 2, 3, 4].map((n) =>
{/* Right column intentionally empty — image holds the subject */}
{/* Carousel rail at bottom */}
Édition 026
{String(idx + 1).padStart(2, '0')} / {String(BEANS.length).padStart(2, '0')}
{BEANS.map((b, i) =>
handleDotClick(i)}
role="tab"
aria-selected={i === idx}>
{String(i + 1).padStart(2, '0')}
{b.name}
{b.origin}
{i === idx && autoRotate && !manualClick &&
)}
);
}
function Shop({ onAdd }) {
const featured = BEANS.find((b) => b.featured);
const others = BEANS.filter((b) => !b.featured);
return (
La boutique · Édition 026
Quatre grains,
{featured &&
onAdd(featured)}>
{featured.tag}
{featured.origin}
{featured.subtitle}
{featured.name}
{featured.blurb}
Notes de dégustation
{featured.notes.map((n) => {n} )}
Torréfaction
250 g · grains entiers
{featured.price}€
{e.stopPropagation();onAdd(featured);}}>
Ajouter au panier
}
{others.map((b) => onAdd(b)} />)}
);
}
function RoastBar({ level }) {
return (
{[1, 2, 3, 4].map((i) =>
{["", "Doux", "Médium", "Corpsé", "Intense"][level]}
);
}
function Bean({ bean, onAdd }) {
return (
{bean.tag}
{e.stopPropagation();onAdd();}}>
{bean.origin}
{bean.price}€
{bean.name}
{bean.subtitle}
{bean.notes.map((n) => {n} )}
);
}
function Manifesto() {
return (
Le manifeste
Du grain
Nous travaillons avec onze producteurs, sur quatre continents, que nous visitons chaque année. Pas d'intermédiaires : chaque sac de Ravo est tracé, signé, daté. La torréfaction est lente, par lots de douze kilos, dans notre atelier de Pantin — pour révéler ce que le terroir a déjà fait de mieux.
11
Producteurs
);
}
function Brew({ active, setActive }) {
const tabs = [
{ id: "espresso", label: "Espresso" },
{ id: "v60", label: "V60" },
{ id: "coldbrew", label: "Cold brew" }];
const specs = {
espresso: [["Dose", "18 g"], ["Eau", "94 °C"], ["Temps", "25 s"]],
v60: [["Dose", "15 g"], ["Eau", "94 °C"], ["Temps", "2:45"]],
coldbrew: [["Dose", "80 g/L"], ["Eau", "Froide"], ["Temps", "8 h"]]
};
return (
Méthodes · Journal de préparation
Comment
{tabs.map((tab) =>
setActive(tab.id)}>
{tab.label}
)}
{tabs.find((x) => x.id === active).label}
{active === "espresso" && "Le geste précis du barista. Une extraction courte qui concentre les arômes pour une tasse dense et soyeuse."}
{active === "v60" && "Le rituel du matin. L'eau prend son temps, révèle les notes florales et la complexité du grain."}
{active === "coldbrew" && "L'infusion longue à froid. Faible acidité, sucrosité naturelle, parfait pour les longues journées d'été."}
{specs[active].map(([l, v]) =>
)}
{STEPS[active].map((s, i) =>
{String(i + 1).padStart(2, '0')}
{s.t}
)}
);
}
function Cafes() {
return (
{CAFES.map((c) =>
{c.city}
Boutique-atelier
{c.name}
{c.addr}
{c.hours}
)}
);
}
function Press() {
return (
);
}
function Footer({ subscription }) {
const [email, setEmail] = useState("");
const [sent, setSent] = useState(false);
function submit(e) {
e.preventDefault();
if (!email) return;
setSent(true);
setEmail("");
setTimeout(() => setSent(false), 3000);
}
return (
);
}
/* ---------- Drawer ---------- */
function CartDrawer({ open, onClose, items, total, updateQty }) {
return (
<>
Panier · {items.reduce((a, c) => a + c.qty, 0)}
{items.length === 0 ?
Votre panier est vide.
:
items.map((it) =>
{it.name}
{it.origin} · 250g
updateQty(it.id, -1)}>−
{it.qty}
updateQty(it.id, +1)}>+
{(it.price * it.qty).toFixed(0)}€
)}
);
}
/* ---------- Tweaks panel ---------- */
function TweaksUI({ t, setTweak }) {
return (
setTweak('palette', v)}
options={[
['#1B3A26', '#DDE1BE', '#F2EEDF'],
['#3A1F12', '#EFD9B8', '#F4ECD8'],
['#16202B', '#D6DBE1', '#ECEEF1']].
map((p, i) => ({ value: ['forest', 'ember', 'midnight'][i], color: p }))} />
setTweak('palette', v)}
options={[
{ value: 'forest', label: 'Forêt' },
{ value: 'ember', label: 'Braise' },
{ value: 'midnight', label: 'Minuit' }]
} />
setTweak('heroAuto', v)} />
setTweak('showTicker', v)} />
setTweak('showPress', v)} />
setTweak('subscriptionMode', v)} />
);
}
/* TweakColor doesn't natively support options-as-objects in starter — fallback wrapper */
function TweakColor({ label, value, onChange, options }) {
return (
{label &&
{label}
}
{options.map((opt) =>
onChange(opt.value)}
style={{
flex: 1, height: 48, borderRadius: 10, border: value === opt.value ? '2px solid #111' : '1px solid #ddd',
padding: 0, cursor: 'pointer', overflow: 'hidden', display: 'flex'
}}>
{opt.color.map((c, i) =>
)}
