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

const BLOG_POSTS = [
  {
    slug: "que-es-vino-de-pasto",
    title: "Qué guarda un vino de pasto",
    excerpt: "Blanco seco, Palomino y mesa. Una memoria del Marco que vuelve con discreción y mucho contexto.",
    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: tres caminos del Marco",
    excerpt: "Una misma uva puede tomar caminos muy distintos. La diferencia está en la crianza, el encabezado y la intención de mesa.",
    category: "Categoría",
    read: "8 min",
    date: "05 · MAY · 2026",
    num: "02",
  },
  {
    slug: "palomino-fino",
    title: "Palomino Fino, la uva que deja hablar al suelo",
    excerpt: "La uva del Marco vista sin el gran aparato del generoso. Menos máscara, más origen.",
    category: "Uva",
    read: "7 min",
    date: "28 · ABR · 2026",
    num: "03",
  },
  {
    slug: "crianza-sobre-lias",
    title: "Crianza sobre lías: la paciencia debajo del vino",
    excerpt: "Cómo un Palomino gana cuerpo y textura cuando permanece cerca de su propia fermentación.",
    category: "Elaboración",
    read: "6 min",
    date: "20 · ABR · 2026",
    num: "04",
  },
  {
    slug: "como-tomar-paranormal",
    title: "Cómo tomar Paranormal",
    excerpt: "Frío justo, copa amplia y una mesa cerca. Nada más. Nada menos.",
    category: "Servicio",
    read: "5 min",
    date: "10 · ABR · 2026",
    num: "05",
  },
];



const BLOG_POSTS_EN = [
  { slug: "what-is-vino-de-pasto", title: "What Vino de Pasto keeps in the glass", excerpt: "Dry white wine, Palomino and table culture: a discreet memory of the Marco returning with context.", category: "Foundations", read: "6 min", date: "12 · MAY · 2026", num: "01" },
  { slug: "difference-vino-de-pasto-fino-manzanilla", title: "Vino de Pasto, fino and manzanilla: three paths from the Marco", excerpt: "The same grape can take very different routes. Fortification, ageing and intention change everything.", category: "Style", read: "8 min", date: "05 · MAY · 2026", num: "02" },
  { slug: "palomino-fino", title: "Palomino Fino, the grape that lets the soil speak", excerpt: "The grape of Jerez seen without the full architecture of fortified wine. Less mask, more place.", category: "Grape", read: "7 min", date: "28 · APR · 2026", num: "03" },
  { slug: "lees-ageing", title: "Lees ageing: patience beneath the wine", excerpt: "How Palomino gains body, texture and length when it remains close to its own fermentation.", category: "Winemaking", read: "6 min", date: "20 · APR · 2026", num: "04" },
  { slug: "how-to-serve-paranormal", title: "How to serve Paranormal", excerpt: "The right chill, a generous glass and food nearby. Nothing else. Nothing less.", category: "Service", read: "5 min", date: "10 · APR · 2026", num: "05" },
];

const POST_BODIES_EN = {
  "what-is-vino-de-pasto": [
    { kind: "intro", text: "Vino de Pasto belongs to a quieter side of the Marco de Jerez: dry Palomino whites, unfortified, made for the table rather than the display cabinet." },
    { kind: "h", text: "A word of use before a rule" },
    { kind: "p", text: "Vino de Pasto is not a closed administrative label. It is a memory of use: dry white wines from Jerez and Sanlúcar, close to food, which a number of producers are now looking at again with care." },
    { kind: "h", text: "How it is understood today" },
    { kind: "p", text: "Today the term usually points to dry white wines from the Marco, often made from Palomino Fino, with or without ageing, and bottled with a calmer reading of the vineyard. Paranormal sits there: between vineyard, cask and a contemporary Sanlúcar white." },
    { kind: "quote", text: "A way of drinking the Marco from the vineyard, not only from the solera." },
    { kind: "h", text: "What it feels like in the glass" },
    { kind: "p", text: "It often shows a pale or lightly golden colour, a restrained nose, a saline line and a dry finish. It does not try to replace fino or amontillado. It proposes another scale: whiter, more direct, more gastronomic." },
    { kind: "cta", text: "Start with Paranormal" },
  ],
  "difference-vino-de-pasto-fino-manzanilla": [
    { kind: "intro", text: "Same grape, same landscape, different decisions. Between fino, manzanilla and Vino de Pasto, the key differences are fortification, ageing and the way the wine is meant to sit at the table." },
    { kind: "h", text: "Fortification" },
    { kind: "p", text: "Fino and manzanilla are fortified to around 15%, a level that allows biological ageing under flor. Vino de Pasto is not fortified: it is bottled as a dry white wine, closer in strength and behaviour to a still table wine." },
    { kind: "h", text: "Flor" },
    { kind: "p", text: "Fino and manzanilla age under flor, the living veil of yeasts that protects the wine and gives its sharp, almond-like profile. Vino de Pasto may follow other forms of ageing. In an oxidative reading, like Paranormal Oxidative, the cask brings air, memory and measured depth." },
    { kind: "h", text: "Solera or vintage reading" },
    { kind: "p", text: "Fino, manzanilla and amontillado usually speak through the criaderas and solera system. Many Vinos de Pasto are read closer to vintage, vineyard and the logic of a dry white wine." },
    { kind: "cta", text: "See Paranormal" },
  ],
  "palomino-fino": [
    { kind: "intro", text: "Palomino Fino is the grape of Jerez. Most of what is drunk from the Marco begins there. When worked as a dry white, it reveals another part of the territory." },
    { kind: "h", text: "The grape of the Marco" },
    { kind: "p", text: "It is adapted to albariza soils, heat and wind, and it gives generous must. For more than a century it has been measured mainly by its usefulness for fino and oloroso. As a dry white grape, it had moved into the background." },
    { kind: "h", text: "As a still white" },
    { kind: "p", text: "Palomino vinified as white wine tends to be naturally moderate in alcohol, discreet on the nose and saline on the palate. It asks for precise decisions: lees, measured oxygen, careful fermentation and an honest reading of place." },
    { kind: "h", text: "Why the attention is returning" },
    { kind: "p", text: "The attention returns because albariza, natural freshness, moderate alcohol and the Atlantic line offer exactly what many drinkers now seek: dry, gastronomic wines with origin and little disguise." },
    { kind: "cta", text: "Paranormal: Palomino without fortification" },
  ],
  "lees-ageing": [
    { kind: "intro", text: "Lees are the fine sediment of yeasts and organic matter left after fermentation. In a Vino de Pasto they can change the texture of the wine without making it heavy." },
    { kind: "h", text: "What they bring" },
    { kind: "p", text: "Body, creaminess, a hint of bread crumb and a longer palate. In naturally moderate Palomino wines, lees ageing adds volume and pause without forcing the wine." },
    { kind: "h", text: "Eight months, old cask" },
    { kind: "p", text: "Paranormal is aged for eight months on fine lees in old oxidative casks. The old cask lets the wine breathe slowly, enough to shape it without imposing new oak." },
    { kind: "h", text: "The result" },
    { kind: "p", text: "A more structured white, with a saline finish and a distant echo of the world of Jerez. No obvious sweetness, no excess alcohol, a clear vocation for the table." },
    { kind: "cta", text: "Taste Paranormal" },
  ],
  "how-to-serve-paranormal": [
    { kind: "intro", text: "A bottle like this asks for very little, but it asks for it well: the right chill, a generous glass and food nearby." },
    { kind: "h", text: "Temperature" },
    { kind: "p", text: "Serve between 7 and 9 ºC. Cold, but not icy. Too cold and it closes; too warm and it loses its vertical line. Take it out of the fridge a few minutes before pouring." },
    { kind: "h", text: "Glass" },
    { kind: "p", text: "Use a medium-sized white-wine glass. It benefits from a little air and from keeping its temperature, rather than being trapped in a narrow tasting glass." },
    { kind: "h", text: "When to open it" },
    { kind: "p", text: "A long aperitif, a salty dinner, rice dishes, fish-led Mediterranean cooking. It can be enjoyed alone, but it grows at the table." },
    { kind: "h", text: "Short pairing guide" },
    { kind: "p", text: "Atlantic seafood, Iberian pork, duck foie gras, semi-cured and mature cheeses, grilled oily fish, dry and brothy rice dishes. Mediterranean food in general." },
    { kind: "cta", text: "Buy Paranormal" },
  ],
};

function blogLang() { return window.location.pathname.startsWith('/en') ? 'en' : 'es'; }
function blogPosts() { return blogLang() === 'en' ? BLOG_POSTS_EN : BLOG_POSTS; }
function postBodies() { return blogLang() === 'en' ? POST_BODIES_EN : POST_BODIES; }
function blogBase() { return blogLang() === 'en' ? '/en/notebook' : '/blog'; }

const POST_BODIES = {
  "que-es-vino-de-pasto": [
    { kind: "intro", text: "El vino de pasto pertenece a esa parte del Marco que no siempre aparece en primer plano: blancos secos de Palomino, sin fortificación, pensados para acompañar la mesa y no para quedarse en una vitrina." },
    { kind: "h", text: "Una palabra de casa antes que de norma" },
    { kind: "p", text: "Vino de pasto no funciona como una etiqueta administrativa cerrada. Es una memoria de uso: blancos del Marco, secos y cercanos a la mesa, que algunas bodegas han vuelto a mirar con atención porque ahí también hay identidad." },
    { kind: "h", text: "Cómo se entiende hoy" },
    { kind: "p", text: "Hoy suele nombrar blancos secos de Jerez o Sanlúcar, muchas veces de Palomino Fino, con crianza o sin ella, y embotellados con una lectura más próxima al vino tranquilo. Paranormal se mueve ahí: entre la viña, la bota y una lectura actual del blanco de Sanlúcar." },
    { kind: "quote", text: "Una manera de beber el Marco desde la viña y no solo desde la solera." },
    { kind: "h", text: "Cómo se reconoce en copa" },
    { kind: "p", text: "Suele aparecer con color claro o dorado tenue, una nariz sobria, una línea salina y una boca seca. No busca sustituir al fino ni al amontillado. Propone otra escala: más blanca, más directa, más gastronómica." },
    { kind: "cta", text: "Empieza por Paranormal" },
  ],
  "diferencia-vino-de-pasto-fino-manzanilla": [
    { kind: "intro", text: "Misma uva, mismos pagos, decisiones distintas. Entre un fino, una manzanilla y un vino de pasto cambian el encabezado, la crianza y la forma de entender la mesa." },
    { 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, con una graduación más próxima a la de un vino tranquilo." },
    { 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 puede tener diferentes crianzas. En una lectura oxidativa, como Paranormal Oxidativo, la bota aporta aire, memoria y una profundidad medida." },
    { kind: "h", text: "El soleraje" },
    { kind: "p", text: "Fino, manzanilla y amontillado suelen hablar desde el sistema de criaderas y soleras. Muchos vinos de pasto, en cambio, se leen más cerca de la añada, la parcela y la elaboración como blanco seco." },
    { 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 cuando se trabaja como blanco seco muestra otra parte del territorio." },
    { 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 seco había quedado en un segundo plano." },
    { 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. Pide decisiones precisas: crianza sobre lías, oxígeno medido, fermentación cuidada y una lectura honesta del lugar." },
    { kind: "h", text: "Por qué vuelve la mirada" },
    { kind: "p", text: "La mirada vuelve al Palomino porque la albariza, la baja graduación natural y el Atlántico ofrecen justo lo que muchos buscan ahora: vinos secos, gastronómicos, de origen reconocible y con menos maquillaje." },
    { 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 pueden cambiar mucho el tacto del vino." },
    { 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 aporta volumen y pausa sin tener que forzar el vino." },
    { kind: "h", text: "Ocho meses, bota vieja" },
    { kind: "p", text: "Paranormal se cría ocho meses sobre lías finas en botas viejas oxidativas. La bota vieja aporta una respiración lenta, suficiente para perfilar el vino sin imponer madera nueva." },
    { kind: "h", text: "El resultado" },
    { kind: "p", text: "Un blanco más estructurado, con final salino y un recuerdo lejano al fino. Sin dulzor evidente, sin exceso de alcohol, con una vocación clara de mesa." },
    { kind: "cta", text: "Probar Paranormal" },
  ],
  "como-tomar-paranormal": [
    { kind: "intro", text: "Una botella así agradece pocas cosas, pero bien elegidas: frío justo, copa amplia y una mesa cerca." },
    { 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. Mejor copa de blanco que catavinos: interesa darle algo de aire y mantener temperatura, no encerrarlo demasiado." },
    { 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. Puede disfrutarse solo, pero crece mucho con 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() {
  const en = blogLang() === "en";
  const posts = blogPosts();
  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container blog-index-hero" style={{ paddingTop: 100, paddingBottom: 64 }}>
          <div className="eyebrow">{en ? "Editorial notebook" : "Cuaderno editorial"}</div>
          <h1 style={{ marginTop: 24 }}>
            {en ? "Notebook." : "Cuaderno."}<br/>
            <em style={{ fontFamily: "var(--editorial)", fontStyle: "italic", fontWeight: 300, color: "var(--engrave)" }}>
              {en ? "Guides, notes and archive." : "Guías, notas y archivo."}
            </em>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, marginTop: 32, maxWidth: "50ch", color: "var(--ink-soft)" }}>
            {en ? "Long-form notes on Vino de Pasto, Palomino, oxidative ageing and Sanlúcar. Written to be read slowly, away from the algorithm." : "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)" }}>
            {posts.map((p, i) => (
              <Link key={p.slug} to={blogBase() + "/" + p.slug} className="blog-list-row" 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 en = blogLang() === "en";
  const posts = blogPosts();
  const bodies = postBodies();
  const post = 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 }}>{en ? "Text not found." : "Texto no encontrado."}</h1>
            <Link to={blogBase()} className="btn-link" style={{ marginTop: 24, display: "inline-block" }}>{en ? "Back to notebook" : "Volver al cuaderno"}</Link>
          </div>
        </section>
      </Page>
    );
  }
  const body = bodies[slug] || [];
  const idx = posts.findIndex(p => p.slug === slug);
  const next = posts[(idx + 1) % posts.length];

  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
          <Link to={blogBase()} className="kicker" style={{ display: "inline-block", marginBottom: 32 }}>{en ? "← Notebook" : "← 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 blog-post-shell" style={{ display: "grid", gridTemplateColumns: "180px 1fr 220px", gap: 64, alignItems: "start" }}>
          <aside className="blog-post-meta">
            <div className="eyebrow">{en ? "Archive" : "Archivo"}</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, marginTop: 8, color: "var(--engrave)" }}>N.º {post.num}</div>
          </aside>
          <article className="blog-post-body" 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: "2px solid var(--gold)",
                    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(--paper-warm)", border: "0.5px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
                    <div>
                      <div className="eyebrow">{en ? "The wine in the text" : "El vino del texto"}</div>
                      <h3 style={{ marginTop: 6 }}>{b.text}</h3>
                    </div>
                    <div style={{ display: "flex", gap: 12 }}>
                      <Link to={en ? "/en/paranormal" : "/paranormal"} className="btn-link">{en ? "File" : "Ficha"} →</Link>
                      <Link to={en ? "/en/paranormal" : "/comprar-paranormal"} className="btn">
                        <span>{en ? "Buy" : "Comprar"}</span><span className="arrow">→</span>
                      </Link>
                    </div>
                  </div>
                );
              }
              return null;
            })}
          </article>
          <aside className="blog-next" style={{ position: "sticky", top: 88 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{en ? "Next" : "Siguiente"}</div>
            <Link to={blogBase() + "/" + 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" }}>{en ? "Read" : "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(--paper)", fontSize: 28, marginBottom: 20 }}>
            <em style={{ fontStyle: "italic", fontFamily: "var(--editorial)", color: "var(--gold)" }}>
              {en ? "Read enough? Time to drink it." : "¿Has leído suficiente? Toca beberlo."}
            </em>
          </h3>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to={en ? "/en/paranormal" : "/comprar-paranormal"} className="btn" style={{ background: "var(--gold)", borderColor: "var(--gold)", color: "var(--ink)" }}>
              <span>{en ? "Buy Paranormal" : "Comprar Paranormal"}</span><span className="arrow">→</span>
            </Link>
            <Link to={en ? "/en/paranormal" : "/paranormal"} className="btn btn-ghost" style={{ borderColor: "rgba(241,236,224,0.45)", color: "var(--paper)" }}>
              <span>{en ? "View file" : "Ver ficha"}</span>
            </Link>
          </div>
        </div>
      </section>
    </Page>
  );
}

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