/* === Blog: index + 5 posts === */

const BLOG_POSTS = [
  {
    slug: "que-es-vino-de-pasto",
    title: "Qué es un vino de pasto",
    excerpt: "Definición editorial breve: blanco seco, sin encabezar, hecho con Palomino. La categoría que el Marco había dejado de embotellar.",
    category: "Fundamentos",
    read: "6 min",
    date: "12 · MAY · 2026",
    num: "01",
  },
  {
    slug: "diferencia-vino-de-pasto-fino-manzanilla",
    title: "Vino de pasto, fino y manzanilla: diferencias claras",
    excerpt: "Tres vinos, una sola uva. Qué los separa: el encabezado, el velo de flor, el soleraje y la decisión de embotellarlos como blanco.",
    category: "Categoría",
    read: "8 min",
    date: "05 · MAY · 2026",
    num: "02",
  },
  {
    slug: "palomino-fino",
    title: "Palomino Fino, fuera del soleraje",
    excerpt: "La uva del Jerez vista como uva de blanco. Qué hace cuando no se encabeza ni entra a velo, y por qué ese «cuando no» importa.",
    category: "Uva",
    read: "7 min",
    date: "28 · ABR · 2026",
    num: "03",
  },
  {
    slug: "crianza-sobre-lias",
    title: "Crianza sobre lías: lo que aporta a un blanco oxidativo",
    excerpt: "Por qué un Palomino sin velo de flor gana cuerpo, textura y profundidad cuando se cría ocho meses con sus propias lías.",
    category: "Elaboración",
    read: "6 min",
    date: "20 · ABR · 2026",
    num: "04",
  },
  {
    slug: "como-tomar-paranormal",
    title: "Cómo tomar Paranormal",
    excerpt: "Temperatura, copa, decantación, momento del día, maridajes ideales. Una guía corta y útil para una botella concreta.",
    category: "Servicio",
    read: "5 min",
    date: "10 · ABR · 2026",
    num: "05",
  },
];

const POST_BODIES = {
  "que-es-vino-de-pasto": [
    { kind: "intro", text: "El vino de pasto es el blanco de mesa del Marco de Jerez: seco, ligero, hecho con Palomino y sin alcohol vínico añadido. Lo contrario, en estructura, de un fino o una manzanilla." },
    { kind: "h", text: "Una categoría cultural, no legal" },
    { kind: "p", text: "Vino de pasto no es una D.O. ni una indicación oficial: es una categoría histórica que un puñado de bodegas familiares ha vuelto a embotellar. Se reconoce por lo que no es. No se encabeza, no se cría bajo velo de flor, no entra en soleras." },
    { kind: "h", text: "Qué se entiende hoy" },
    { kind: "p", text: "En el contexto contemporáneo, vino de pasto suele referirse a un blanco seco hecho en Jerez o Sanlúcar con Palomino Fino, con o sin crianza, embotellado por añadas. Algunos llevan crianza oxidativa en botas viejas, como Paranormal." },
    { kind: "quote", text: "Es lo que el Marco hacía antes de que el generoso ocupara toda la conversación." },
    { kind: "h", text: "Cómo se reconoce en copa" },
    { kind: "p", text: "Color dorado pajizo, nariz salina y de fruta blanca compotada, boca seca y vertical, final largo. Sin la intensidad almendrada del fino ni la untuosidad del amontillado." },
    { kind: "cta", text: "Empieza por Paranormal" },
  ],
  "diferencia-vino-de-pasto-fino-manzanilla": [
    { kind: "intro", text: "Misma uva, mismos pagos, decisiones distintas. La diferencia entre un fino, una manzanilla y un vino de pasto no está en la viña: está en lo que la bodega hace después." },
    { kind: "h", text: "El encabezado" },
    { kind: "p", text: "El fino y la manzanilla se encabezan con alcohol vínico hasta cerca del 15%, un nivel pensado para permitir la crianza biológica bajo velo. El vino de pasto no se encabeza: se embotella como blanco seco, normalmente entre 11% y 12,5%." },
    { kind: "h", text: "El velo de flor" },
    { kind: "p", text: "Fino y manzanilla crían bajo velo, una capa viva de levaduras que protege el vino del oxígeno y le da su perfil punzante y almendrado. El vino de pasto no tiene velo. Puede oxidarse lentamente, como Paranormal, pero esa oxidación se acepta y se mide." },
    { kind: "h", text: "El soleraje" },
    { kind: "p", text: "Fino, manzanilla y amontillado se crían por sistema de criaderas y soleras, mezclando añadas. El vino de pasto se embotella por añada, sin mezcla. Es un vino tranquilo, en el sentido técnico." },
    { kind: "cta", text: "Ver Paranormal" },
  ],
  "palomino-fino": [
    { kind: "intro", text: "Palomino Fino es la uva del Jerez. Casi todo lo que se bebe del Marco viene de ahí. Pero fuera del soleraje, sin velo de flor, hace otra cosa." },
    { kind: "h", text: "La uva del Marco" },
    { kind: "p", text: "Adaptada a la albariza, tolerante al calor y al viento, generosa en mosto. Durante un siglo se ha medido por su utilidad para el fino y el oloroso. Como uva de blanco tranquilo había caído en desuso." },
    { kind: "h", text: "Como blanco tranquilo" },
    { kind: "p", text: "El Palomino vinificado como blanco da vinos de baja graduación natural, ligeramente neutros en nariz, salinos en boca. Necesita decisiones de bodega: crianza sobre lías, oxígeno controlado, fermentación lenta." },
    { kind: "h", text: "Por qué ahora" },
    { kind: "p", text: "La generación actual de bodegas familiares ha vuelto al Palomino fuera del soleraje porque la albariza, la baja graduación y el Atlántico componen, sin esfuerzo, el tipo de blanco que el mercado contemporáneo busca." },
    { kind: "cta", text: "Paranormal: Palomino sin velo" },
  ],
  "crianza-sobre-lias": [
    { kind: "intro", text: "Las lías son los restos de levaduras y materia orgánica que quedan en el fondo del depósito o la bota tras la fermentación. En un blanco de pasto cambian todo." },
    { kind: "h", text: "Qué aportan" },
    { kind: "p", text: "Cuerpo, textura cremosa, notas de panadería y miga tostada, una sensación de boca más larga. En vinos de baja graduación natural, como el Palomino, la crianza sobre lías compensa lo que la uva no puede dar por sí sola." },
    { kind: "h", text: "Ocho meses, bota vieja" },
    { kind: "p", text: "Paranormal se cría ocho meses sobre lías finas en botas viejas oxidativas. No bajo velo. La bota vieja respira poco, suficiente para perfilar el vino sin imponer madera." },
    { kind: "h", text: "El resultado" },
    { kind: "p", text: "Un blanco más estructurado, con final salino y un recuerdo lejano al fino. Sin dulzor, sin azúcar residual, sin volumen alcohólico forzado." },
    { kind: "cta", text: "Probar Paranormal" },
  ],
  "como-tomar-paranormal": [
    { kind: "intro", text: "Una guía corta de servicio. Cómo abrir una botella de Paranormal sin desperdiciarla y sacarle lo que tiene dentro." },
    { kind: "h", text: "Temperatura" },
    { kind: "p", text: "Entre 7 y 8 ºC. Frío pero no helado. Si está demasiado frío, se cierra; si está templado, pierde verticalidad. Sácala de la nevera diez minutos antes." },
    { kind: "h", text: "Copa" },
    { kind: "p", text: "Copa de vino blanco gastronómica, de cuerpo medio. No catavinos ni copa de generoso: queremos darle aire y mantener temperatura, no concentrar el aroma fino." },
    { kind: "h", text: "Cuándo abrirla" },
    { kind: "p", text: "Sobremesa larga, aperitivo amplio, cena salina. Funciona muy bien en arroces y en cocina mediterránea de pescado. No es un vino para sentarse a tomar solo: pide mesa." },
    { kind: "h", text: "Maridaje breve" },
    { kind: "p", text: "Mariscos atlánticos, ibéricos, foie de pato, quesos semicurados y curados, pescado azul a la brasa, arroces secos y caldosos. Cocina mediterránea en general." },
    { kind: "cta", text: "Comprar Paranormal" },
  ],
};

function BlogIndex() {
  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ paddingTop: 100, paddingBottom: 64 }}>
          <div className="eyebrow">Cuaderno editorial</div>
          <h1 style={{ marginTop: 24 }}>
            Cuaderno.<br/>
            <em style={{ fontFamily: "var(--editorial)", fontStyle: "italic", fontWeight: 300, color: "var(--engrave)" }}>
              Guías, notas y archivo.
            </em>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, marginTop: 32, maxWidth: "50ch", color: "var(--ink-soft)" }}>
            Textos largos sobre vino de pasto, Palomino, crianza oxidativa y
            Sanlúcar. Pensados para leer despacio, sin algoritmo.
          </p>
        </div>
      </section>

      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container">
          <div style={{ borderTop: "0.5px solid var(--ink)" }}>
            {BLOG_POSTS.map((p, i) => (
              <Link key={p.slug} to={"/blog/" + p.slug} style={{
                display: "grid",
                gridTemplateColumns: "80px 2.4fr 1fr auto",
                gap: 32,
                alignItems: "baseline",
                padding: "36px 0",
                borderBottom: "0.5px solid var(--rule)",
                transition: "background .2s",
              }}>
                <div className="kicker">{p.num}</div>
                <div>
                  <h3 style={{ marginBottom: 8 }}>{p.title}</h3>
                  <p style={{ fontSize: 15, color: "var(--engrave)", margin: 0, maxWidth: "60ch" }}>{p.excerpt}</p>
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--engrave)", textTransform: "uppercase" }}>
                  {p.category} · {p.read}
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink)" }}>→</div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

function BlogPost({ slug }) {
  const post = BLOG_POSTS.find(p => p.slug === slug);
  if (!post) {
    return (
      <Page>
        <section className="section-pad">
          <div className="container">
            <div className="eyebrow">404</div>
            <h1 style={{ marginTop: 20 }}>Texto no encontrado.</h1>
            <Link to="/blog" className="btn-link" style={{ marginTop: 24, display: "inline-block" }}>Volver al cuaderno</Link>
          </div>
        </section>
      </Page>
    );
  }
  const body = POST_BODIES[slug] || [];
  const idx = BLOG_POSTS.findIndex(p => p.slug === slug);
  const next = BLOG_POSTS[(idx + 1) % BLOG_POSTS.length];

  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
          <Link to="/blog" className="kicker" style={{ display: "inline-block", marginBottom: 32 }}>← Cuaderno</Link>
          <div className="eyebrow">{post.category} · {post.read} · {post.date}</div>
          <h1 style={{ marginTop: 24, maxWidth: "16ch", fontSize: "clamp(40px, 5.6vw, 88px)" }}>{post.title}</h1>
        </div>
      </section>

      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "180px 1fr 220px", gap: 64, alignItems: "start" }}>
          <aside>
            <div className="eyebrow">Archivo</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, marginTop: 8, color: "var(--engrave)" }}>N.º {post.num}</div>
          </aside>
          <article style={{ maxWidth: 680, margin: "0 auto" }}>
            {body.map((b, i) => {
              if (b.kind === "intro") {
                return (
                  <p key={i} className="dropcap" style={{ fontSize: 21, lineHeight: 1.6, marginBottom: 36 }}>
                    {b.text}
                  </p>
                );
              }
              if (b.kind === "h") {
                return <h2 key={i} style={{ marginTop: 48, marginBottom: 18, fontSize: 32 }}>{b.text}</h2>;
              }
              if (b.kind === "p") {
                return <p key={i} style={{ fontSize: 17.5, lineHeight: 1.75 }}>{b.text}</p>;
              }
              if (b.kind === "quote") {
                return (
                  <blockquote key={i} style={{
                    margin: "48px 0",
                    padding: "0 0 0 32px",
                    borderLeft: "1.5px solid var(--atlantic-deep)",
                    fontFamily: "var(--editorial)",
                    fontStyle: "italic",
                    fontSize: 24,
                    lineHeight: 1.45,
                    color: "var(--ink)",
                  }}>«{b.text}»</blockquote>
                );
              }
              if (b.kind === "cta") {
                return (
                  <div key={i} style={{ marginTop: 56, padding: 28, background: "var(--bone-2)", border: "0.5px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
                    <div>
                      <div className="eyebrow">El vino del texto</div>
                      <h3 style={{ marginTop: 6 }}>{b.text}</h3>
                    </div>
                    <div style={{ display: "flex", gap: 12 }}>
                      <Link to="/paranormal" className="btn-link">Ficha →</Link>
                      <Link to="/comprar-paranormal" className="btn">
                        <span>Comprar</span><span className="arrow">→</span>
                      </Link>
                    </div>
                  </div>
                );
              }
              return null;
            })}
          </article>
          <aside style={{ position: "sticky", top: 88 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Siguiente</div>
            <Link to={"/blog/" + next.slug} style={{ display: "block", padding: 20, border: "0.5px solid var(--ink)" }}>
              <div className="kicker">{next.category} · {next.read}</div>
              <h3 style={{ marginTop: 10, fontSize: 20 }}>{next.title}</h3>
              <span className="btn-link" style={{ marginTop: 12, display: "inline-block" }}>Leer →</span>
            </Link>
          </aside>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="container" style={{ padding: "80px 40px", textAlign: "center" }}>
          <h3 style={{ color: "var(--bone)", fontSize: 28, marginBottom: 20 }}>
            <em style={{ fontStyle: "italic", fontFamily: "var(--serif)", color: "var(--atlantic-soft)" }}>
              ¿Has leído suficiente? Toca beberlo.
            </em>
          </h3>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to="/comprar-paranormal" className="btn" style={{ background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)" }}>
              <span>Comprar Paranormal</span><span className="arrow">→</span>
            </Link>
            <Link to="/paranormal" className="btn btn-ghost" style={{ borderColor: "rgba(242,238,231,0.45)", color: "var(--bone)" }}>
              <span>Ver ficha</span>
            </Link>
          </div>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { BLOG_POSTS, POST_BODIES, BlogIndex, BlogPost });