// app.jsx — Grano Zero PWA // Stages: splash → home → catalog (scroll) + detail sheet // (las dependencias Bean, Steam, IntensityBeans, Sfx, CAFES viven en window) const { useState, useEffect, useRef, useCallback, useMemo } = React; // ─── HELPERS ───────────────────────────────────────────────────────────────── const useSettled = (delay) => { const [done, setDone] = useState(false); useEffect(() => {const t = setTimeout(() => setDone(true), delay);return () => clearTimeout(t);}, [delay]); return done; }; // ─── HEADER ────────────────────────────────────────────────────────────────── function Header({ visible, soundOn, setSoundOn, ambientOn, setAmbientOn, onJumpCatalog, onOpenCata, currentSection }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{ e.preventDefault(); Sfx.click(); window.scrollTo({ top: 0, behavior: "smooth" }); }}> GranoZero
{ const next = !ambientOn; setAmbientOn(next); if (next) Sfx.startAmbient();else Sfx.stopAmbient(); Sfx.click(); }}> {ambientOn ? : } { const next = !soundOn; setSoundOn(next); Sfx.setMuted(!next); if (next) setTimeout(() => Sfx.click(), 50); }}> {soundOn ? : }
); } function IconButton({ children, onClick, label, active }) { return ( ); } const IconSound = () => ; const IconMute = () => ; const IconWaves = () => ; const IconWavesOff = () => ; // ─── SPLASH: café que se sirve y llena la pantalla ─────────────────────────── function Splash({ onDone }) { const [phase, setPhase] = useState(0); // 0: bean entra y respira → 1: wordmark aparece → 2: fade a home → 3: done useEffect(() => { Sfx.ensure(); const tl = [ [300, () => {Sfx.grinder(1.4, 0.08);}], [1100, () => setPhase(1)], [2200, () => setPhase(2)], [3000, () => {setPhase(3);onDone();}]]; let acc = 0;const timers = []; tl.forEach(([d, fn]) => {acc += d;timers.push(setTimeout(fn, acc));}); return () => timers.forEach(clearTimeout); }, []); if (phase >= 3) return null; return (
= 2}>
GranoZero
una taza, ocho caminos
); } // ─── HOME: hero con taza humeante ──────────────────────────────────────────── function Home({ onJumpCatalog, onOpenCata }) { return (
Tu PWA para aprender de café

El café no debería intimidarte.

Ocho preparaciones. Una taza.
Aprendé tomando — desde el grano hasta tu sorbo favorito.

{/* Marquee inferior */} ); } function Stat({ n, label }) { return (
{n} {label}
); } function CenterpieceCup() { return (
{/* Granos reales decorativos alrededor */}
{[ { x: "4%", y: "16%", r: -22, s: 50, op: .5 }, { x: "10%", y: "74%", r: 18, s: 40, op: .38 }, { x: "86%", y: "72%", r: -10, s: 46, op: .45 }, { x: "84%", y: "18%", r: 40, s: 42, op: .38 }]. map((d, i) => )}
); } // (función _OldCenterpiece eliminada — ahora CenterpieceCup ES la versión CSS/SVG) function _Unused() { return null; } function Marquee() { const items = ["Espresso", "Ristretto", "Cortado", "Cappuccino", "Flat White", "Latte", "Americano", "Mocha"]; const loop = [...items, ...items, ...items]; return ( ); } // ─── CATÁLOGO ──────────────────────────────────────────────────────────────── // ─── CATÁLOGO ────────────────────────────────────────────────────────────────────────── function Catalog({ onOpen, refEl }) { return ( ); } function CafeCard({ cafe, idx, onOpen }) { const [hover, setHover] = useState(false); return ( ); } // ─── DETALLE ───────────────────────────────────────────────────────────────── function Detail({ cafe, onClose }) { useEffect(() => { if (!cafe) return; const onEsc = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onEsc); document.body.style.overflow = "hidden"; return () => {window.removeEventListener("keydown", onEsc);document.body.style.overflow = "";}; }, [cafe, onClose]); if (!cafe) return null; const idx = CAFES.findIndex(c => c.id === cafe.id); return (
{if (e.target === e.currentTarget) {Sfx.click();onClose();}}}>
FIG. {String(idx + 1).padStart(2, "0")} · de {CAFES.length}
Receta

{cafe.name} {cafe.italic}

{cafe.blurb}

Notas
{cafe.notas.map((n) => {n})}
Preparación
    {cafe.receta.map((step, i) =>
  1. {i + 1}{step}
    2. )}
); } function StatBar({ label, value }) { return (
{label} {value}/5
); } function DataCell({ label, value }) { return (
{label} {value}
); } // ─── CATA MODAL ────────────────────────────────────────────────────────────── function CataModal({ open, onClose, onOpenCafe }) { useEffect(() => { if (!open) return; const onEsc = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onEsc); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onEsc); document.body.style.overflow = ""; }; }, [open, onClose]); if (!open) return null; return (
{ if (e.target === e.currentTarget) { Sfx.click(); onClose(); } }}>
¿Qué café sos?

Cuatro preguntas honestas. Al final, te decimos cuál de los ocho es tu match. Spoiler: no hay respuestas equivocadas.

{ onOpenCafe(cafe); onClose(); }} />
); } // ─── ROOT APP ──────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": ["#1F1410", "#C8881F", "#F1EAD8"], "intro": "pour", "ambientOnStart": false, "soundOnStart": true, "breatheSpeed": 1 } /*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [stage, setStage] = useState("splash"); // splash | app const [selected, setSelected] = useState(null); const [cataOpen, setCataOpen] = useState(false); const [soundOn, setSoundOn] = useState(t.soundOnStart); const [ambientOn, setAmbientOn] = useState(t.ambientOnStart); const catalogRef = useRef(null); useEffect(() => {Sfx.setMuted(!soundOn);}, [soundOn]); // Aplicar paleta useEffect(() => { const root = document.documentElement; root.style.setProperty("--gz-ink", t.palette[0]); root.style.setProperty("--gz-gold", t.palette[1]); root.style.setProperty("--gz-paper", t.palette[2]); root.style.setProperty("--gz-breathe-speed", t.breatheSpeed); }, [t.palette, t.breatheSpeed]); const jumpCatalog = useCallback(() => { document.getElementById("origen")?.scrollIntoView({ behavior: "smooth", block: "start" }); }, []); return ( <> { setStage("app"); if (ambientOn) Sfx.startAmbient(); }} />
{ Sfx.click(); setCataOpen(true); }} />
setCataOpen(true)} />
setCataOpen(true)} />
setSelected(null)} /> setCataOpen(false)} onOpenCafe={setSelected} /> setTweak("palette", v)} /> {setTweak("soundOnStart", v);setSoundOn(v);}} /> {setTweak("ambientOnStart", v);setAmbientOn(v);if (v) Sfx.startAmbient();else Sfx.stopAmbient();}} /> Sfx.grinder()} /> Sfx.bubble()} /> setTweak("breatheSpeed", v)} /> {setStage("splash");setTimeout(() => location.reload(), 100);}} /> ); } function Footer({ onOpenCata }) { const sections = [ { id: "top", n: "00", label: "Inicio" }, { id: "origen", n: "01", label: "Origen" }, { id: "metodos", n: "02", label: "Métodos" }, { id: "catalogo", n: "03", label: "Catálogo" }, { id: "grano", n: "04", label: "El Grano" }, { id: "tueste", n: "05", label: "Tueste" }, { id: "molienda", n: "06", label: "Molienda" }, ]; const jump = (id) => { Sfx.click(); document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); }; return (
{/* Wordmark gigante de cierre */}
{/* Columna 1: brand */}

Aprender café, un sorbo a la vez.

Una PWA educativa hecha para que dejes de pedir “lo más suave que tengan”.

{/* Columna 2: indice de secciones */}
Índice
    {sections.map(s => (
    • ))}
{/* Columna 4: meta */}
Colofón

“ El café es lengua. Apréndelo, y probá el mundo en una taza.

© {new Date().getFullYear()} · GranoZero
{/* Linea final */}
Hecho con café · desde el grano hasta tu pantalla
); } // Granos rellenos = bean.png; granos vacios = bean.png con baja opacidad function IntensityBeansImg({ intensity = 3, total = 5 }) { return (
{Array.from({ length: total }).map((_, i) => )}
); } ReactDOM.createRoot(document.getElementById("root")).render();