// sections.jsx — TODAS las secciones nuevas de GranoZero
// Origen, El Grano, Tueste, Molienda, Métodos, Cata, Glosario, Diario
const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;
// ════════════════════════════════════════════════════════════════════════════
// HELPERS
// ════════════════════════════════════════════════════════════════════════════
function SectionHead({ num, kicker, title, children }) {
return (
{num} — {kicker}
{title}
{children &&
{children}
}
);
}
// ════════════════════════════════════════════════════════════════════════════
// 01 · ORIGEN — mapa del cinturón cafetero (rediseñado)
// ════════════════════════════════════════════════════════════════════════════
// Continentes en proyección equirectangular simplificada (viewBox 1000x500)
const CONTINENT_PATHS = {
// Norteamérica
na: "M 80 80 L 200 70 L 240 85 L 260 130 L 240 170 L 200 200 L 230 210 L 220 235 L 180 245 L 160 230 L 130 235 L 110 200 L 90 170 L 70 130 Z",
// Centroamérica
ca: "M 180 245 L 215 250 L 225 270 L 200 275 L 175 265 Z",
// Sudamérica
sa: "M 240 270 L 290 275 L 310 295 L 330 340 L 320 400 L 290 450 L 275 460 L 260 425 L 250 380 L 235 330 Z",
// Europa
eu: "M 470 100 L 540 95 L 580 105 L 570 145 L 530 175 L 485 170 L 460 145 Z",
// África
af: "M 500 195 L 580 180 L 615 210 L 615 270 L 595 320 L 565 360 L 530 380 L 505 350 L 490 290 L 485 235 Z",
// Asia
asia: "M 580 95 L 720 80 L 820 95 L 900 110 L 920 145 L 880 180 L 820 200 L 770 215 L 715 220 L 670 200 L 625 195 L 600 175 L 580 140 Z",
// Sudeste asiático + Indonesia
se: "M 770 240 L 815 245 L 840 270 L 870 290 L 855 320 L 820 335 L 795 320 L 780 295 L 770 270 Z",
// Oceanía
oce: "M 850 360 L 920 355 L 945 380 L 940 410 L 905 425 L 870 415 L 855 395 Z"
};
function SectionOrigen() {
const [active, setActive] = useS(ORIGENES[0]);
return (
Todo café viene de algún lugar.}>
Antes de ser tu cortado, el grano vivió a 1.500 metros sobre un volcán, fue cosechado a mano y cruzó un océano.
Estos son los lugares donde el café decide quién es.
23°N · Trópico de Cáncer0° · Ecuador23°S · Trópico de Capricornio
{/* Lista horizontal scrolleable de todos los orígenes */}
{ORIGENES.map((o) => (
))}
);
}
// ════════════════════════════════════════════════════════════════════════════
// 02 · EL GRANO — Arábica vs Robusta + anatomía
// ════════════════════════════════════════════════════════════════════════════
function SectionGrano() {
return (
Dos granos, dos mundos.}>
El 99% del café del planeta es Arábica o Robusta. Saber distinguirlos te cambia para siempre cómo tomás café.
{GRANOS.map((g, i) => (
{i === 0 ? "60%" : "40%"} del mundo
{g.name}
{g.italic}
{g.desc}
Altitud
{g.altitud}
Cafeína
{g.cafeina}
Forma
{g.forma}
{g.perfil.map((p) => {p})}
))}
vs
{/* Anatomía exploded */}
Anatomía · 6 etapas
Del fruto rojo al grano tostado.
El café no nace como grano. Empieza como una cereza roja en una rama. Cada capa que se le saca es una transformación.
{[
{ id: "cereza", n: 1, name: "Cereza", desc: "El fruto rojo del cafeto" },
{ id: "pulpa", n: 2, name: "Pulpa", desc: "La capa carnosa exterior" },
{ id: "mucilago", n: 3, name: "Mucílago", desc: "La capa pegajosa dulce" },
{ id: "pergamino", n: 4, name: "Pergamino", desc: "La cáscara dura, papel" },
{ id: "verde", n: 5, name: "Verde", desc: "El grano sin tostar" },
{ id: "tostado", n: 6, name: "Tostado", desc: "Lo que llega a tu taza" },
].map((step, i) => (
{step.n}
{step.name}{step.desc}
))}
);
}
// SVGs ilustrativos de cada etapa de la anatomía (viewBox 100x100)
function AnatomiaArt({ id }) {
if (id === "cereza") {
return (
);
}
if (id === "pulpa") {
return (
);
}
if (id === "mucilago") {
return (
);
}
if (id === "pergamino") {
return (
);
}
if (id === "verde") {
return (
);
}
if (id === "tostado") {
return (
);
}
return null;
}
// ════════════════════════════════════════════════════════════════════════════
// 03 · TUESTE — slider con grano que cambia de color
// ════════════════════════════════════════════════════════════════════════════
// Usa assets/tueste/.png si existe (foto real); si no, cae al grano con filtro
function TuesteBeanImg({ t }) {
const [failed, setFailed] = useS(false);
useE(() => { setFailed(false); }, [t.id]);
if (failed) {
return (
);
}
return (
setFailed(true)} />
);
}
function SectionTueste() {
const [idx, setIdx] = useS(2); // medio por defecto
const t = TUESTES[idx];
return (
Verde, claro, oscuro.}>
Tostar es transformar. El mismo grano, según los minutos que pase en la tostadora, va a ser ácido y floral, o redondo y achocolatado, o amargo y ahumado.
{/* Vapor que sale del grano cuando es tueste oscuro */}
{idx >= 3 && (
);
}
// ════════════════════════════════════════════════════════════════════════════
// 04 · MOLIENDA — grueso a fino
// ════════════════════════════════════════════════════════════════════════════
function SectionMolienda() {
const [sel, setSel] = useS(MOLIENDAS[2]);
return (
Cada método pide su grano partido.}>
El tamaño de las partículas decide cuánto se extrae el café. Demasiado fino: amargo. Demasiado grueso: agua sucia. La molienda correcta es la diferencia entre un buen café y uno mediocre.
{MOLIENDAS.map((m) => (
))}
Te sirve para
{sel.metodo}
Como se siente{sel.referencia}
Tamaño{sel.size}
);
}
// Campo de "partículas" pseudo-random pero determinístico por count
function ParticleField({ count, size }) {
const seeds = useM(() => {
// Genera posiciones determinísticas para que no salten en re-render
const r = (n) => {
let x = Math.sin(n * 9973) * 10000;
return x - Math.floor(x);
};
return Array.from({ length: count }, (_, i) => ({
x: r(i + 1) * 100,
y: r(i + 31) * 100,
rot: r(i + 71) * 360,
sc: 0.7 + r(i + 113) * 0.6
}));
}, [count]);
return (
{seeds.map((p, i) => (
))}
);
}
// ════════════════════════════════════════════════════════════════════════════
// 05 · MÉTODOS — V60, AeroPress, French press, Moka, Espresso
// ════════════════════════════════════════════════════════════════════════════
function SectionMetodos() {
const [active, setActive] = useS(METODOS[0]);
return (
Cinco caminos al mismo grano.}>
Misma materia prima, distinta máquina, café totalmente diferente. Cada método es una receta hecha aparato. Hacé click en cualquier ilustración para verla en acción.
{/* Selector de método + lámina activa */}
{METODOS.map((m, i) => (
))}
);
}
function MetodoLamina({ m, idx }) {
const [running, setRunning] = useS(false);
return (
{i === 0 ? "60%" : "40%"} del
setFailed(true)} />
);
}
function SectionTueste() {
const [idx, setIdx] = useS(2); // medio por defecto
const t = TUESTES[idx];
return (