/* === Home + Comprar + Bodega — atlantic edition === */

function Home() {
  return (
    <Page>
      {/* =========================================================
          HERO — ASYMMETRIC EDITORIAL. Massive type left, grape photo right.
          ========================================================= */}
      <section style={{ borderBottom: "var(--hairline)", overflow: "hidden" }}>
        {/* archive bar */}
        <div className="container" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "20px 40px", fontFamily: "var(--mono)", fontSize: 10.5,
          letterSpacing: "0.24em", color: "var(--engrave)", textTransform: "uppercase",
          borderBottom: "var(--hairline)",
          flexWrap: "wrap", gap: 16,
        }}>
          <span>Archivo · Vol. I</span>
          <span>Sanlúcar de Barrameda · 36°47′N · 6°21′W</span>
          <span>Caso 001 · Levitación de silla</span>
        </div>

        <div className="container" style={{
          display: "grid",
          gridTemplateColumns: "1.05fr 0.95fr",
          gap: 64,
          padding: "88px 40px 0",
          alignItems: "start",
        }}>
          {/* Left — type */}
          <div style={{ position: "relative", paddingBottom: 88 }}>
            <div className="eyebrow" style={{ marginBottom: 36 }}>
              <span className="pip" style={{
                display: "inline-block", width: 6, height: 6, background: "var(--atlantic-deep)",
                borderRadius: "50%", marginRight: 10, transform: "translateY(-1px)",
              }}></span>
              El blanco atlántico de Jerez
            </div>

            <h1 style={{ marginBottom: 0 }}>
              Vino
              <br/>
              <span className="italic" style={{ color: "var(--atlantic-deep)" }}>de</span>{" "}
              Pasto<span style={{ color: "var(--atlantic-deep)" }}>.</span>
            </h1>

            <p style={{
              fontFamily: "var(--editorial)",
              fontSize: 22,
              lineHeight: 1.5,
              color: "var(--ink-soft)",
              marginTop: 56,
              maxWidth: "38ch",
            }}>
              Antes del encabezado, antes del mito y antes de que el Jerez se
              explicara solo desde sus generosos, existía el blanco de viña:
              seco, salino, atlántico. Esta web lo recupera como{" "}
              <span className="italic">categoría</span>, y embotella cada añada como{" "}
              <span className="italic">caso</span>.
            </p>

            <div style={{ display: "flex", gap: 16, marginTop: 56, flexWrap: "wrap" }}>
              <Link to="/comprar-paranormal" className="btn">
                <span>Comprar Caso 001</span>
                <span className="arrow">→</span>
              </Link>
              <Link to="/que-es-vino-de-pasto" className="btn btn-ghost">
                <span>Qué es un vino de pasto</span>
              </Link>
            </div>
          </div>

          {/* Right — photo */}
          <div style={{
            position: "relative",
            height: "min(82vh, 760px)",
            minHeight: 480,
          }}>
            <div className="photo" style={{
              position: "absolute", inset: 0,
              backgroundImage: "url('assets/grapes-palomino.jpg')",
              backgroundPosition: "center",
            }} />
            {/* margin metadata */}
            <div className="vert" style={{
              position: "absolute", top: 20, left: -36,
            }}>
              Palomino Fino · Pago El Poedo · 2024
            </div>
          </div>
        </div>

        {/* hero footer strip — four facts */}
        <div style={{ borderTop: "var(--hairline)", marginTop: 0 }}>
          <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              ["UVA",     "Palomino Fino"],
              ["TIERRA",  "Albariza · El Poedo"],
              ["CRIANZA", "8 meses · bota vieja"],
              ["EDICIÓN", "1.200 botellas"],
            ].map(([k, v], i) => (
              <div key={k} style={{
                padding: "32px 28px",
                borderLeft: i === 0 ? "none" : "var(--hairline)",
              }}>
                <div className="eyebrow">{k}</div>
                <div style={{
                  fontFamily: "var(--serif)",
                  fontSize: 24,
                  marginTop: 10,
                  letterSpacing: "-0.01em",
                }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* =========================================================
          02 — DEFINICIÓN. Big editorial type, paragraph + pull quote.
          ========================================================= */}
      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 96, alignItems: "start" }}>
            <div>
              <div className="section-num">I · Categoría</div>
              <h2 style={{ marginBottom: 0 }}>
                Un blanco<br/>
                <span className="italic-atlantic">que el Jerez</span><br/>
                había <span className="italic">olvidado</span>.
              </h2>
            </div>
            <div style={{ paddingTop: 14 }}>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                En el Marco se llamaba <em>«vino de pasto»</em> al blanco de mesa:
                ligero, seco, sin encabezar. Hecho para acompañar la comida, no
                para imitar al fino ni para entrar en soleraje. Durante un siglo
                desapareció bajo la sombra del Jerez generoso. Hoy un puñado de
                productores lo recupera como categoría propia.
              </p>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                Vinos atlánticos, salinos, de viñedo. Sin la dulzura ni la
                pirotecnia del generoso. Beberlos es entrar en Jerez por una
                puerta que estaba abierta y que casi nadie había vuelto a usar.
              </p>
              <Link to="/que-es-vino-de-pasto" className="btn-link" style={{ marginTop: 24 }}>
                <span>Leer la guía completa</span>
                <span className="arrow" style={{ fontFamily: "var(--serif)", fontStyle: "italic" }}>→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* =========================================================
          03 — PARANORMAL — case file (dark section, bottle photo)
          ========================================================= */}
      <section style={{ background: "var(--ink)", color: "var(--bone)", borderBottom: "1px solid #000" }}>
        <div className="container" style={{ padding: "140px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center" }}>
            {/* bottle */}
            <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
              <div className="vert" style={{
                position: "absolute", top: 10, left: -20,
                color: "rgba(242,238,231,0.4)",
              }}>
                Evidencia · 75 cl · 12% vol. · Caso 001
              </div>
              <img
                src="assets/bottle-paranormal.jpg"
                alt="Botella Paranormal — Caso 001 Levitación de silla"
                style={{
                  width: "min(420px, 92%)",
                  height: "auto",
                  display: "block",
                  filter: "drop-shadow(0 50px 80px rgba(0,0,0,0.7))",
                }}
              />
            </div>

            <div>
              <div className="case-tag dark" style={{ marginBottom: 32 }}>
                <span className="pip" />
                <span>Caso 001</span>
                <span style={{ width: 1, height: 12, background: "currentColor", opacity: 0.4 }} />
                <span>Levitación de silla</span>
              </div>
              <h2 style={{ color: "var(--bone)" }}>
                Paranormal.<br/>
                <span className="italic" style={{ color: "var(--atlantic-soft)" }}>Strange &amp; Unaccountable.</span>
              </h2>
              <p style={{
                fontFamily: "var(--editorial)",
                fontSize: 19, lineHeight: 1.65,
                marginTop: 32,
                color: "rgba(242,238,231,0.78)",
                maxWidth: "44ch",
              }}>
                Palomino Fino sin velo de flor, criado ocho meses en bota vieja
                oxidativa. La bodega no sabe explicar del todo de dónde sale el
                final salino. Lo embotellamos como lo que es:{" "}
                <span className="italic">un fenómeno</span>.
              </p>

              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, auto)",
                gap: 48,
                marginTop: 48,
                paddingTop: 32,
                borderTop: "0.5px solid rgba(242,238,231,0.2)",
              }}>
                {[
                  ["12%",   "alcohol"],
                  ["8 m.",  "sobre lías"],
                  ["7-8°C", "servicio"],
                  ["1.200", "botellas"],
                ].map(([n, l]) => (
                  <div key={l}>
                    <div style={{
                      fontFamily: "var(--serif)",
                      fontSize: 38,
                      color: "var(--bone)",
                      lineHeight: 1,
                      letterSpacing: "-0.02em",
                    }}>{n}</div>
                    <div className="eyebrow" style={{
                      color: "rgba(242,238,231,0.55)",
                      marginTop: 10,
                    }}>{l}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: "flex", gap: 14, marginTop: 48, flexWrap: "wrap" }}>
                <Link to="/paranormal" className="btn" style={{
                  background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)",
                }}>
                  <span>Abrir el expediente</span><span className="arrow">→</span>
                </Link>
                <ExternalBuyButton variant="ghost">Comprar en Bodegas Barón</ExternalBuyButton>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* =========================================================
          04 — TESTIMONIO (etiqueta + cita)
          ========================================================= */}
      <section style={{ background: "var(--ink-2)", color: "var(--bone)", borderBottom: "1px solid #000" }}>
        <div className="container" style={{ padding: "120px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 96, alignItems: "center" }}>
            <div style={{
              background: "var(--bone)",
              padding: 24,
              boxShadow: "0 40px 80px rgba(0,0,0,0.55)",
            }}>
              <img
                src="assets/label-case-001.png"
                alt="Etiqueta del Caso 001 — Levitación de silla"
                style={{ width: "100%", display: "block" }}
              />
            </div>
            <div>
              <div className="eyebrow" style={{ color: "rgba(242,238,231,0.6)", marginBottom: 20 }}>
                Testimonio · 1782 · cuaderno de bodega
              </div>
              <h2 style={{ color: "var(--bone)", fontSize: "clamp(36px, 4.6vw, 64px)" }}>
                «Una silla flota<br/>
                sobre la chimenea.<br/>
                <span className="italic" style={{ color: "var(--atlantic-soft)" }}>Nadie sabe por qué.»</span>
              </h2>
              <p style={{
                marginTop: 32,
                color: "rgba(242,238,231,0.7)",
                fontSize: 16.5, lineHeight: 1.75,
                maxWidth: "52ch",
              }}>
                La cita está en un cuaderno de bodega del XVIII, encontrado entre
                añadas antiguas. Termina con una nota a lápiz:{" "}
                <span className="italic">«las botas que están debajo son las
                que mejor saben.»</span> Tres añadas después, las catamos. El
                vino salió así.
              </p>
              <Link to="/paranormal" className="btn-link" style={{
                marginTop: 28,
                color: "var(--bone)", borderColor: "rgba(242,238,231,0.45)",
              }}>
                <span>Ver expediente completo</span>
                <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* =========================================================
          05 — BODEGAS BARÓN  (full-bleed vineyard photo)
          ========================================================= */}
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="photo tint" style={{
          height: "min(72vh, 640px)",
          minHeight: 420,
          backgroundImage: "url('assets/vineyard-poedo.jpg')",
          backgroundPosition: "center",
        }}>
          <div className="caption">El Poedo · viñedo en albariza · Sanlúcar · vendimia 2024</div>
        </div>
        <div className="container" style={{ padding: "100px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 96, alignItems: "start" }}>
            <div>
              <div className="section-num">II · Bodega</div>
              <h2 style={{ marginBottom: 0 }}>
                Bodegas Barón.<br/>
                <span className="italic-atlantic">Sanlúcar,</span><br/>
                oficio y <span className="italic">silencio</span>.
              </h2>
            </div>
            <div style={{ paddingTop: 14 }}>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                Familiar, sin teatro, con criaderas vivas y un saber heredado.
                Paranormal nace de su viña <strong>El Poedo</strong>, en albariza,
                y se cría en botas viejas que la bodega ya no quiere para finos.
              </p>
              <p style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                Ahí, sin velo de flor, el Palomino se vuelve otro vino. La bodega
                no llama a esto «paranormal». Nosotros sí.
              </p>
              <div style={{
                display: "grid", gridTemplateColumns: "1fr 1fr",
                gap: 20, marginTop: 36, maxWidth: 500,
              }}>
                {[
                  ["Sanlúcar de Barrameda", "Sede"],
                  ["Familiar",       "Estructura"],
                  ["El Poedo",       "Pago"],
                  ["Criaderas vivas","Crianza"],
                ].map(([v, k]) => (
                  <div key={k} style={{ borderTop: "var(--hairline)", paddingTop: 14 }}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{v}</div>
                    <div className="eyebrow" style={{ marginTop: 4 }}>{k}</div>
                  </div>
                ))}
              </div>
              <Link to="/bodegas-baron" className="btn-link" style={{ marginTop: 40 }}>
                <span>Conocer la bodega</span>
                <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* =========================================================
          06 — CASOS DOCUMENTADOS (3-col archive)
          ========================================================= */}
      <section className="section-pad" style={{ borderBottom: "var(--hairline)", background: "var(--bone-2)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="section-num">III · Archivo</div>
              <h2>Casos<br/><span className="italic">documentados</span>.</h2>
            </div>
            <p style={{
              color: "var(--engrave)", maxWidth: "44ch",
              fontSize: 15, margin: 0, fontFamily: "var(--editorial)",
            }}>
              Cada vendimia documenta un fenómeno distinto del Marco. Nombramos
              el caso, lo embotellamos y lo soltamos al mundo.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule)" }}>
            {[
              {
                n: "001", t: "Levitación de silla", year: "Vendimia 2024",
                state: "Disponible",
                desc: "Palomino Fino, 8 meses sobre lías en bota vieja oxidativa. 1.200 botellas numeradas.",
                active: true,
              },
              {
                n: "002", t: "Voz en la criadera", year: "Vendimia 2025",
                state: "En crianza",
                desc: "Palomino del Pago de Miraflores. Sin velo, crianza extendida en bota olorosa.",
              },
              {
                n: "003", t: "Reloj que adelanta", year: "Vendimia 2026",
                state: "Programado",
                desc: "Coupage de añadas. Botas de tres orígenes distintos. En estudio.",
              },
            ].map(c => (
              <div key={c.n} style={{
                background: "var(--bone)",
                padding: "40px 32px 36px",
                position: "relative",
                transition: "background .35s ease",
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = c.active ? "var(--ink)" : "var(--bone)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--bone)"}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
                  <div className="kicker">Caso {c.n}</div>
                  <div className="kicker">{c.year}</div>
                </div>
                <h3 style={{ fontSize: 32, lineHeight: 1, marginBottom: 18, fontFamily: "var(--serif)" }}>
                  {c.t}
                </h3>
                <p style={{ color: "var(--engrave)", fontSize: 14.5, margin: 0, marginBottom: 28, minHeight: 70 }}>{c.desc}</p>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  borderTop: "0.5px solid var(--rule)", paddingTop: 18,
                }}>
                  <span className="kicker" style={{
                    color: c.active ? "var(--atlantic-deep)" : "var(--engrave)",
                  }}>{c.state}</span>
                  {c.active
                    ? <Link to="/paranormal" className="btn-link" style={{ fontSize: 12 }}>
                        <span>Ver</span><span className="arrow">→</span>
                      </Link>
                    : <span className="kicker">—</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* =========================================================
          07 — MARIDAJE
          ========================================================= */}
      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 96 }}>
            <div>
              <div className="section-num">IV · Mesa</div>
              <h2>
                Maridaje.<br/>
                <span className="italic">Mediterráneo,</span><br/>
                <span className="italic-atlantic">salino</span>,<br/>
                generoso.
              </h2>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, alignSelf: "end" }}>
              {[
                { t: "Marisco fresco",  d: "Gambas blancas, almejas, ostra. La salinidad responde a la salinidad." },
                { t: "Foie de pato",    d: "El final oxidativo limpia la grasa sin entrar en el dulzor habitual." },
                { t: "Ibéricos",        d: "Bellota, cecina, lomo. La bota vieja perfila la grasa larga." },
                { t: "Pescado azul",    d: "Atún rojo a la brasa, caballa marinada, sardina ahumada." },
                { t: "Quesos curados",  d: "Payoyo, manchego viejo, comté. Largo, profundo, sin pelearse." },
                { t: "Arroces secos",   d: "Caldoso de bogavante, arroz negro, fideuá. Acompaña sin rendirse." },
              ].map((p, i) => (
                <div key={p.t} style={{
                  padding: "32px 28px",
                  borderTop: "var(--hairline)",
                  borderLeft: (i % 3 === 0) ? "none" : "var(--hairline)",
                  borderBottom: i >= 3 ? "var(--hairline)" : "none",
                }}>
                  <div className="kicker">{String(i + 1).padStart(2, "0")}</div>
                  <h3 style={{ marginTop: 12, marginBottom: 10, fontSize: 24 }}>{p.t}</h3>
                  <p style={{ fontSize: 14.5, color: "var(--engrave)", margin: 0 }}>{p.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* =========================================================
          08 — CUADERNO
          ========================================================= */}
      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56, flexWrap: "wrap", gap: 20 }}>
            <div>
              <div className="section-num">V · Cuaderno</div>
              <h2>Guías<br/><span className="italic">editoriales</span>.</h2>
            </div>
            <Link to="/blog" className="btn-link">
              <span>Ver todo el cuaderno</span><span className="arrow">→</span>
            </Link>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            borderTop: "0.5px solid var(--ink)",
          }}>
            {window.BLOG_POSTS.slice(0, 3).map((p, i) => (
              <Link key={p.slug} to={"/blog/" + p.slug} style={{
                padding: "36px 32px 40px",
                borderRight: i < 2 ? "var(--hairline)" : "none",
                borderBottom: "0.5px solid var(--ink)",
                display: "block",
                transition: "background .25s ease",
              }}>
                <div className="kicker">{p.category} · {p.read}</div>
                <h3 style={{ marginTop: 16, marginBottom: 16, fontSize: 30, fontFamily: "var(--serif)", lineHeight: 1.05 }}>{p.title}</h3>
                <p style={{ fontSize: 15, color: "var(--engrave)", lineHeight: 1.6 }}>{p.excerpt}</p>
                <span className="btn-link" style={{ marginTop: 12, fontSize: 12.5 }}>
                  <span>Leer</span><span className="arrow">→</span>
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* =========================================================
          09 — CTA FINAL
          ========================================================= */}
      <section style={{ background: "var(--ink)", color: "var(--bone)" }}>
        <div className="container" style={{ padding: "160px 40px", textAlign: "center" }}>
          <div className="eyebrow" style={{ color: "rgba(242,238,231,0.5)", marginBottom: 28 }}>
            VI · Compra
          </div>
          <h2 style={h3                color: "var(--bone)"Compra                maxWidth: 16marginTop                fontSize: "clamp(48px, 7vw, 112px)"flex                lineHeight: 0.95letterSpacing              }}>
                              <span>Paranormal no es un vino extraño.</spanstyle                <br /Bodegas                <span className="italic" style={{ color: "var(--atlantic-soft)" }}>Es una forma distinta de mirar Jerez.</spanspan              </h2></span>}
                              
                                              <div style={{ display: "flex", gap: 32, justifyContent: "center", marginTop: 48, flexWrap: "wrap" }}div                  <div style={{ flex: "1 1 auto", minWidth: 200, maxWidth: 300 }}div                    <img src="/uploads/Captura de pantalla 2026-05-19 a las 18.51.05.png" alt="Etiqueta Paranormal - Blanco" style={{ width: "100%", height: "auto" }} /italic                  </divdiv                  <div style={{ flex: "1 1 auto", minWidth: 200, maxWidth: 300 }}div                    <img src="/uploads/Captura de pantalla 2026-05-19 a las 18.55.59.png" alt="Etiqueta Paranormal - Magnum" style={{ width: "100%", height: "auto" }} /italic                  </divdiv                </div>

          <div style={{
            marginTop: 72,
            display: "flex", flexDirection: "column",
            gap: 32, alignItems: "center",
          }}>
            <div style={{ maxWidth: 480, width: "100%" }}>
              <CouponBox tone="dark" />
            </div>
            <ExternalBuyButton>Comprar con descuento en Bodegas Barón</ExternalBuyButton>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em",
              textTransform: "uppercase", color: "rgba(242,238,231,0.4)",
              maxWidth: 560, lineHeight: 1.9,
            }}>
              Compra gestionada por la tienda oficial de Bodegas Barón.<br/>
              VinoDePasto.com actúa como portal editorial y de recomendación.
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

/* ====================================================================== */
/*  COMPRAR PARANORMAL                                                    */
/* ====================================================================== */

function Comprar() {
  const products = [
    {
      key: "blanco",
      caso: "Caso 003",
      eyebrow: "Vino Blanco · Atlantic Wine",
      title: "Paranormal",
      subtitle: "Blanco · «Strange & Unaccountable»",
      image: "assets/paranormal-blanco.webp",
      lede:
        "Palomino Fino de pago El Poedo, criado en bota vieja sin velo de flor. " +
        "Vino de pasto de oxidación lenta — un blanco atlántico de Jerez que ya nadie hacía.",
      href: SITE.buyUrlBlanco,
      price: "15 €",
      unit: "Botella 750 ml · IVA inc.",
      meta: [
        ["Tipo",     "Vino blanco · Vino de pasto"],
        ["Uva",      "Palomino Fino 100%"],
        ["D.O.",     "Marco de Jerez · Sanlúcar"],
        ["Crianza",  "Bota vieja · sin velo"],
        ["Graduación", "12,5% vol."],
        ["Añada",    "2023"],
      ],
      tone: "light",
    },
    {
      key: "oxidativo",
      caso: "Caso 001",
      eyebrow: "Blanco oxidativo · Levitation of Chair",
      title: "Paranormal",
      subtitle: "Oxidativo 2023 · edición magnum",
      image: "assets/paranormal-oxidativo.webp",
      lede:
        "La lectura oxidativa del mismo Palomino, embotellada en magnum y lacrada en oro. " +
        "Más tiempo en bota, más concentración, más rareza. Tirada cortísima.",
      href: SITE.buyUrlOxidativo,
      price: "20 €",
      unit: "Magnum 1500 ml · IVA inc.",
      meta: [
        ["Tipo",     "Blanco oxidativo · Vino de pasto"],
        ["Uva",      "Palomino Fino 100%"],
        ["D.O.",     "Marco de Jerez · Sanlúcar"],
        ["Crianza",  "Oxidativa lenta · bota viva"],
        ["Graduación", "14% vol."],
        ["Añada",    "2023 · ed. limitada"],
      ],
      tone: "dark",
    },
  ];

  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)", background: "var(--bone)" }}>
        <div className="container" style={{ padding: "72px 40px 40px" }}>
          <div className="eyebrow">Tienda · Bodegas Barón · envíos desde Sanlúcar</div>
          <h1 style={{ marginTop: 24 }}>
            Comprar<br/>
            <span className="italic-atlantic">Paranormal.</span>
          </h1>
          <p style={{
            fontFamily: "var(--editorial)", fontSize: 21, lineHeight: 1.55,
            color: "var(--ink-soft)", maxWidth: "58ch", marginTop: 32,
          }}>
            Dos lecturas del mismo Palomino. El <strong>Blanco</strong>, más directo,
            y el <strong>Oxidativo en magnum</strong>, donde el tiempo ha hecho su trabajo.
            La compra se realiza en la tienda oficial de Bodegas Barón; aquí solo te enseñamos las dos botellas a tamaño real.
          </p>
          <div style={{ marginTop: 36, maxWidth: 520 }}>
            <CouponBox tone="light" />
          </div>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "var(--bone)" }}>
        <div className="comprar-split">
          {products.map((p, i) => {
            const dark = p.tone === "dark";
            return (
              <div key={p.key} className={"col " + (dark ? "is-dark" : "is-light")}>
                <div className="col-eyebrow">
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  <span>{p.caso} · {p.eyebrow}</span>
                </div>

                <ZoomImage
                  src={p.image}
                  alt={`${p.title} ${p.subtitle} — Bodegas Barón · vino blanco de pasto`}
                  zoom={2.6}
                  lensSize={240}
                  captionTop={`Etiqueta · ${p.caso}`}
                  captionBottom="Pasa el ratón sobre la botella · toca y desliza en móvil"
                />

                <h2 className="product-title" style={{ marginTop: 36 }}>{p.title}</h2>
                <div className="product-sub">{p.subtitle}</div>
                <p style={{
                  fontFamily: "var(--editorial)",
                  fontSize: 17, lineHeight: 1.6,
                  maxWidth: "44ch",
                  color: dark ? "rgba(242,238,231,0.78)" : "var(--ink-soft)",
                }}>
                  {p.lede}
                </p>

                <div className="product-meta">
                  {p.meta.map(([k, v]) => (
                    <div key={k}>
                      <div className="k">{k}</div>
                      <div className="v">{v}</div>
                    </div>
                  ))}
                </div>

                <div className="price">
                  <span className="amt">{p.price}</span>
                  <span className="unit">{p.unit}</span>
                </div>

                <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 8 }}>
                  <a
                    className="btn"
                    href={p.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={dark ? { background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)" } : null}
                  >
                    <span>Comprar en Bodegas Barón</span>
                    <span className="arrow">↗</span>
                  </a>
                  <Link
                    to="/paranormal"
                    className="btn btn-ghost"
                    style={dark ? { borderColor: "rgba(242,238,231,0.45)", color: "var(--bone)" } : null}
                  >
                    <span>Ver ficha del vino</span>
                  </Link>
                </div>

                <div style={{
                  marginTop: 28,
                  fontFamily: "var(--mono)", fontSize: 10,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  opacity: .55,
                }}>
                  Enlace directo · bodegasbaron.es
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section style={{ background: "var(--bone)", borderTop: "var(--hairline)" }}>
        <div className="container" style={{ padding: "88px 40px 120px" }}>
          <div className="eyebrow" style={{ marginBottom: 36 }}>Cómo funciona la compra</div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
          }}>
            {[
              ["Copia el código", `${SITE.coupon} — descuento en el checkout de Bodegas Barón`],
              ["Pulsa «Comprar»",  "Te llevamos a la ficha oficial del producto en bodegasbaron.es"],
              ["Aplica el código", "En el formulario de pedido, campo de descuento"],
              ["Recibe la botella","Envíos desde Sanlúcar gestionados por la bodega"],
            ].map(([t, d], i) => (
              <div key={t} style={{ paddingTop: 24, borderTop: "0.5px solid var(--ink)" }}>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, color: "var(--atlantic-deep)", lineHeight: 1, marginBottom: 14 }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 8 }}>{t}</h3>
                <p style={{ fontSize: 15, color: "var(--ink-soft)", margin: 0, lineHeight: 1.55 }}>{d}</p>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 64,
            fontFamily: "var(--mono)", fontSize: 10.5,
            letterSpacing: "0.22em", color: "var(--engrave)",
            textTransform: "uppercase", lineHeight: 1.9,
          }}>
            Enlace con utm_source=vinodepasto · utm_medium=referral · utm_campaign=paranormal<br/>
            VinoDePasto.com es un portal editorial. La compra y el envío los gestiona Bodegas Barón.
          </div>
        </div>
      </section>
    </Page>
  );
}

/* ====================================================================== */
/*  BODEGAS BARÓN                                                          */
/* ====================================================================== */

function BodegaPage() {
  return (
    <Page>
      {/* Hero with vineyard */}
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ padding: "88px 40px 56px" }}>
          <div className="eyebrow">Bodega · Sanlúcar de Barrameda</div>
          <h1 style={{ marginTop: 28 }}>
            Bodegas<br/>
            <span className="italic-atlantic">Barón.</span>
          </h1>
          <p style={{
            fontFamily: "var(--editorial)", fontSize: 22, lineHeight: 1.5,
            color: "var(--ink-soft)", maxWidth: "48ch", marginTop: 40,
          }}>
            Familiar, sin teatro. Criaderas vivas, viña en albariza y una manera
            de trabajar que no necesita explicarse cada año desde cero.
          </p>
        </div>
        <div className="photo tint" style={{
          height: "min(72vh, 680px)", minHeight: 420,
          backgroundImage: "url('assets/vineyard-poedo.jpg')",
        }}>
          <div className="caption">El Poedo · vendimia 2024 · cuadrilla en pleno trabajo</div>
        </div>
      </section>

      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "start" }}>
          <div>
            <p className="dropcap" style={{ fontSize: 19, lineHeight: 1.75 }}>
              Bodegas Barón es una bodega familiar de Sanlúcar de Barrameda con
              criaderas vivas, un puñado de pagos en albariza y una manera de
              trabajar que no busca explicarse cada año desde cero. Aquí el oficio
              pesa más que el discurso.
            </p>
            <p style={{ fontSize: 19, lineHeight: 1.75 }}>
              De su viña <strong>El Poedo</strong> sale el Palomino que termina en
              Paranormal: criado en botas viejas que la bodega ya no destina a
              finos, sin velo de flor, en oxidación lenta. Un vino de pasto que
              solo podía nacer en una bodega que entiende el tiempo como herramienta.
            </p>
          </div>
          <div>
            <div className="photo tint" style={{ aspectRatio: "4 / 3", backgroundImage: "url('assets/cellar-corridor.jpg')", marginBottom: 24 }}>
              <div className="caption">Criadera principal · sin velo</div>
            </div>
            <div className="photo-cluster">
              <div className="photo tint" style={{ aspectRatio: "1", backgroundImage: "url('assets/barrel-head-chalk.jpg')" }}>
                <div className="caption">Bota viva · tiza</div>
              </div>
              <div className="photo tint" style={{ aspectRatio: "1", backgroundImage: "url('assets/grapes-palomino.jpg')" }}>
                <div className="caption">Palomino · 2024</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "var(--bone)" }}>
        <div className="container" style={{ padding: "120px 40px", textAlign: "center" }}>
          <h2 style={{ color: "var(--bone)", maxWidth: 880, margin: "0 auto", fontSize: "clamp(34px, 4.8vw, 64px)" }}>
            <span className="italic" style={{ color: "var(--atlantic-soft)" }}>«Paranormal»</span>{" "}
            es la lectura editorial<br/>de un saber que ya estaba <span className="italic">ahí</span>.
          </h2>
          <div style={{ marginTop: 48, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to="/paranormal" className="btn" style={{ background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)" }}>
              <span>Ver el vino</span><span className="arrow">→</span>
            </Link>
            <ExternalBuyButton variant="ghost">Comprar en Bodegas Barón</ExternalBuyButton>
          </div>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { Home, Comprar, BodegaPage });
Page_Up