/* === Age gate + Cookie banner + Páginas legales === */

/* ====================================================================== */
/*  AGE GATE                                                               */
/* ====================================================================== */

function AgeGate({ onAccept }) {
  const [denied, setDenied] = React.useState(false);
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(14, 12, 8, 0.92)",
      backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24,
      animation: "fadeIn .4s ease",
    }}>
      <div style={{
        background: "var(--paper)",
        border: "0.5px solid var(--ink)",
        maxWidth: 560,
        width: "100%",
        padding: 0,
        position: "relative",
      }}>
        {/* archive header strip */}
        <div style={{
          padding: "16px 28px",
          borderBottom: "0.5px solid var(--rule)",
          display: "flex", justifyContent: "space-between",
          fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.22em",
          textTransform: "uppercase", color: "var(--engrave)",
        }}>
          <span>Archivo · Acceso</span>
          <span>Form. 18</span>
        </div>

        {denied ? (
          <div style={{ padding: "48px 40px", textAlign: "center" }}>
            <h2 style={{ fontSize: 32, marginBottom: 16 }}>Acceso restringido.</h2>
            <p style={{ fontSize: 15, color: "var(--engrave)" }}>
              Este sitio está dedicado a personas mayores de 18 años.
              El consumo de alcohol durante el embarazo es perjudicial, incluso en cantidades moderadas.
            </p>
          </div>
        ) : (
          <div style={{ padding: "48px 40px" }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Verificación de edad</div>
            <h2 style={{ fontSize: "clamp(32px, 5vw, 48px)", lineHeight: 1.05, marginBottom: 20 }}>
              ¿Eres mayor<br/>de 18 años?
            </h2>
            <p style={{ fontSize: 15, color: "var(--engrave-soft)", marginBottom: 32, maxWidth: "44ch" }}>
              VinoDePasto.com es un portal editorial sobre vino. Para acceder
              debes ser mayor de edad según la legislación española. Beba con moderación.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button
                className="btn"
                onClick={() => { localStorage.setItem("vdp_age_ok", "1"); onAccept(); }}
                style={{ flex: 1, minWidth: 180, justifyContent: "center" }}
              >
                <span>Sí, soy mayor de 18</span>
              </button>
              <button
                className="btn btn-ghost"
                onClick={() => setDenied(true)}
                style={{ flex: 1, minWidth: 140, justifyContent: "center" }}
              >
                <span>No</span>
              </button>
            </div>
            <div style={{
              marginTop: 28, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em",
              color: "var(--engrave-soft)", textTransform: "uppercase", lineHeight: 1.8,
            }}>
              Operado por Wine &amp; Cask Consulting SL · Beba con moderación · 18+
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ====================================================================== */
/*  COOKIE BANNER                                                          */
/* ====================================================================== */

function CookieBanner() {
  const [open, setOpen] = React.useState(() => !localStorage.getItem("vdp_cookies"));
  const [showSettings, setShowSettings] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ analytics: true, marketing: false });

  if (!open) return null;

  const accept = (mode) => {
    let final = prefs;
    if (mode === "all") final = { analytics: true, marketing: true };
    if (mode === "reject") final = { analytics: false, marketing: false };
    localStorage.setItem("vdp_cookies", JSON.stringify({ ts: Date.now(), ...final }));
    setOpen(false);
  };

  return (
    <div style={{
      position: "fixed", left: 16, right: 16, bottom: 16, zIndex: 900,
      maxWidth: 720, margin: "0 auto",
      background: "var(--ink)", color: "var(--paper)",
      border: "0.5px solid rgba(241,236,224,0.2)",
      padding: 24,
      fontFamily: "var(--sans)",
      boxShadow: "0 24px 60px rgba(0,0,0,0.45)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="eyebrow" style={{ color: "rgba(241,236,224,0.6)" }}>Cookies</div>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 8, marginBottom: 0, color: "rgba(241,236,224,0.85)" }}>
            Usamos cookies propias y de terceros para analizar tráfico, medir clics hacia la tienda de Bodegas Barón
            y mejorar el contenido editorial. Puedes aceptar todas, rechazar las opcionales o configurar.{" "}
            <a href="#/politica-cookies" style={{ color: "var(--bone)", textDecoration: "underline" }}>Política de cookies</a>.
          </p>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "flex-start", flexWrap: "wrap" }}>
          <button className="btn btn-ghost" onClick={() => setShowSettings(s => !s)}
            style={{ borderColor: "rgba(241,236,224,0.45)", color: "var(--paper)", padding: "10px 14px", fontSize: 11 }}>
            <span>Configurar</span>
          </button>
          <button className="btn btn-ghost" onClick={() => accept("reject")}
            style={{ borderColor: "rgba(241,236,224,0.45)", color: "var(--paper)", padding: "10px 14px", fontSize: 11 }}>
            <span>Rechazar</span>
          </button>
          <button className="btn" onClick={() => accept("all")}
            style={{ background: "var(--bone)", borderColor: "var(--bone)", color: "var(--ink)", padding: "10px 14px", fontSize: 11 }}>
            <span>Aceptar todo</span>
          </button>
        </div>
      </div>
      {showSettings && (
        <div style={{ marginTop: 20, paddingTop: 20, borderTop: "0.5px solid rgba(241,236,224,0.15)", display: "grid", gap: 10 }}>
          {[
            { k: "necessary", label: "Estrictamente necesarias", desc: "Sesión, idioma, cumplimiento del banner. Siempre activas.", locked: true, val: true },
            { k: "analytics", label: "Analíticas", desc: "Google Analytics 4 anonimizado · medición de tráfico, páginas vistas, tiempo de lectura.", val: prefs.analytics },
            { k: "marketing", label: "Marketing", desc: "Píxel de Meta y conversiones de Google Ads · medir clics al checkout de Bodegas Barón.", val: prefs.marketing },
          ].map(row => (
            <label key={row.k} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, padding: "10px 0", borderBottom: "0.5px solid rgba(241,236,224,0.08)", cursor: row.locked ? "default" : "pointer" }}>
              <input type="checkbox" checked={row.val} disabled={row.locked}
                onChange={e => row.k !== "necessary" && setPrefs(p => ({ ...p, [row.k]: e.target.checked }))}
                style={{ marginTop: 4 }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--paper)" }}>{row.label}</div>
                <div style={{ fontSize: 11.5, color: "rgba(241,236,224,0.55)", marginTop: 2 }}>{row.desc}</div>
              </div>
              <div className="kicker" style={{ color: "rgba(241,236,224,0.4)" }}>{row.locked ? "Obligatoria" : ""}</div>
            </label>
          ))}
          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 8 }}>
            <button className="btn" onClick={() => accept("custom")}
              style={{ background: "var(--paper)", borderColor: "var(--paper)", color: "var(--ink)", padding: "10px 14px", fontSize: 11 }}>
              <span>Guardar preferencias</span>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ====================================================================== */
/*  LEGAL PAGES                                                            */
/* ====================================================================== */

function LegalShell({ title, eyebrow, children }) {
  return (
    <Page>
      <section style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ paddingTop: 88, paddingBottom: 56 }}>
          <div className="eyebrow">{eyebrow}</div>
          <h1 style={{ marginTop: 24, fontSize: "clamp(40px, 5.6vw, 80px)" }}>{title}</h1>
        </div>
      </section>
      <section className="section-pad" style={{ borderBottom: "var(--hairline)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 80, alignItems: "start" }}>
          <aside style={{ position: "sticky", top: 88 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Legal</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontFamily: "var(--serif)", fontSize: 16 }}>
              <li><Link to="/aviso-legal">Aviso legal</Link></li>
              <li><Link to="/politica-privacidad">Privacidad</Link></li>
              <li><Link to="/politica-cookies">Cookies</Link></li>
            </ul>
          </aside>
          <article className="legal-body" style={{ maxWidth: 720, fontSize: 16, lineHeight: 1.7 }}>
            {children}
          </article>
        </div>
      </section>
    </Page>
  );
}

function AvisoLegal() {
  return (
    <LegalShell title="Aviso legal." eyebrow="Información obligatoria · LSSI-CE">
      <h3 style={{ marginTop: 0 }}>1. Titularidad del sitio</h3>
      <p>
        El sitio web <strong>www.vinodepasto.com</strong> es propiedad y está operado por
        <strong> Wine &amp; Cask Consulting, S.L.</strong> (en adelante, «la Sociedad»),
        sociedad de nacionalidad española.
      </p>
      <div style={{ background: "var(--paper-warm)", padding: 24, border: "0.5px solid var(--rule)", margin: "24px 0", fontFamily: "var(--mono)", fontSize: 12.5, letterSpacing: "0.04em", lineHeight: 1.9 }}>
        TITULAR · Wine &amp; Cask Consulting, S.L.<br/>
        DOMICILIO · [Dirección a completar]<br/>
        CIF · [Número a completar]<br/>
        REGISTRO MERCANTIL · [Datos a completar]<br/>
        CORREO · <a href="mailto:info@vinodepasto.com" style={{ borderBottom: "0.5px solid currentColor" }}>info@vinodepasto.com</a><br/>
        DOMINIO · www.vinodepasto.com
      </div>

      <h3>2. Objeto del sitio</h3>
      <p>
        VinoDePasto.com es un portal editorial y de recomendación dedicado a la
        categoría «vino de pasto» del Marco de Jerez. El sitio no opera tienda
        online propia ni gestiona pagos. La compra de los vinos a los que se
        hace referencia se realiza en webs de terceros, en particular en la
        tienda oficial de <strong>Bodegas Barón</strong>, mediante enlace externo.
      </p>

      <h3>3. Condiciones de acceso</h3>
      <p>
        El acceso al sitio requiere ser mayor de 18 años, edad legal mínima para
        el consumo de bebidas alcohólicas en España. La Sociedad muestra a tal
        efecto un control de edad en la primera visita.
      </p>

      <h3>4. Propiedad intelectual</h3>
      <p>
        Todos los contenidos —textos editoriales, fotografías, etiquetas,
        diseños, marca «Vino de Pasto» y «Paranormal» en este contexto— están
        protegidos por los derechos de propiedad intelectual e industrial de
        sus respectivos titulares.
      </p>

      <h3>5. Responsabilidad</h3>
      <p>
        La Sociedad no se hace responsable de la disponibilidad, precio,
        condiciones de envío ni de cualquier otra cuestión derivada de las
        compras realizadas en webs de terceros enlazadas desde este sitio.
      </p>

      <h3>6. Legislación aplicable</h3>
      <p>
        Las presentes condiciones se rigen por la legislación española. Para
        cualquier controversia, las partes se someten a los Juzgados y
        Tribunales del domicilio del titular, salvo que la legislación
        aplicable disponga otro fuero imperativo.
      </p>

      <p style={{ marginTop: 40, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--engrave)" }}>
        Última actualización · Mayo 2026 · Documento pendiente de revisión por asesor jurídico
      </p>
    </LegalShell>
  );
}

function PoliticaPrivacidad() {
  return (
    <LegalShell title="Política de privacidad." eyebrow="RGPD · LOPDGDD">
      <p>
        La presente política regula el tratamiento de los datos personales recogidos
        a través del sitio <strong>www.vinodepasto.com</strong>, propiedad de{" "}
        <strong>Wine &amp; Cask Consulting, S.L.</strong>
      </p>

      <h3>Responsable</h3>
      <p>Wine &amp; Cask Consulting, S.L. — <a href="mailto:info@vinodepasto.com" style={{ borderBottom: "0.5px solid currentColor" }}>info@vinodepasto.com</a></p>

      <h3>Datos que recogemos</h3>
      <ul>
        <li>Datos de navegación: IP anonimizada, páginas vistas, dispositivo, navegador.</li>
        <li>Datos de medición: clics hacia tienda externa con UTM (utm_source, utm_medium, utm_campaign).</li>
        <li>Datos voluntarios: si en el futuro habilitamos formularios, los datos que el usuario aporte.</li>
      </ul>

      <h3>Finalidad</h3>
      <p>
        Análisis de tráfico agregado, medición de conversiones hacia la tienda
        oficial de Bodegas Barón, y mejora del contenido editorial. No se realiza
        elaboración de perfiles ni decisiones automatizadas con efectos jurídicos.
      </p>

      <h3>Base jurídica</h3>
      <p>
        Consentimiento del usuario (art. 6.1.a RGPD), prestado mediante banner de
        cookies, e interés legítimo del responsable (art. 6.1.f RGPD) para las
        cookies estrictamente necesarias.
      </p>

      <h3>Cesión a terceros</h3>
      <p>
        No vendemos datos. Compartimos información agregada con Google Analytics,
        Google Ads y Meta cuando el usuario ha aceptado las cookies correspondientes.
        Los clics hacia <em>bodegasbaron.es</em> implican abandonar este sitio y
        someterse a las políticas de dicho tercero.
      </p>

      <h3>Derechos</h3>
      <p>
        Acceso, rectificación, supresión, limitación, portabilidad y oposición.
        Solicítalos en <strong><a href="mailto:info@vinodepasto.com" style={{ borderBottom: "0.5px solid currentColor" }}>info@vinodepasto.com</a></strong>. También puedes
        reclamar ante la Agencia Española de Protección de Datos (aepd.es).
      </p>

      <h3>Conservación</h3>
      <p>
        Datos de navegación: 14 meses. Logs de consentimiento de cookies: 24 meses.
      </p>

      <p style={{ marginTop: 40, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--engrave)" }}>
        Última actualización · Mayo 2026 · Documento pendiente de revisión por asesor jurídico
      </p>
    </LegalShell>
  );
}

function PoliticaCookies() {
  return (
    <LegalShell title="Política de cookies." eyebrow="Ley 34/2002 LSSI-CE · Guía AEPD 2023">
      <p>
        VinoDePasto.com utiliza cookies propias y de terceros. Esta política
        explica qué son, cuáles usamos, para qué, y cómo gestionarlas.
      </p>

      <h3>¿Qué es una cookie?</h3>
      <p>
        Un pequeño archivo de texto que el sitio guarda en tu navegador para
        recordar información entre visitas (idioma, sesión, consentimientos)
        o medir el uso del sitio de forma agregada.
      </p>

      <h3>Tipología de cookies que usamos</h3>
      <div style={{ border: "0.5px solid var(--rule)", marginTop: 20 }}>
        {[
          ["Necesarias",      "Sesión, consentimiento del banner.",                                   "Propia · sesión",         "Obligatorias"],
          ["Analíticas",      "Medición agregada de tráfico, páginas vistas, tiempo de lectura.",      "Google Analytics 4 · 14m", "Opcionales"],
          ["Marketing",       "Píxel de Meta y conversiones de Google Ads para medir clics a tienda.", "Meta · Google · 180d",     "Opcionales"],
        ].map(([name, desc, prov, type], i) => (
          <div key={name} style={{
            display: "grid", gridTemplateColumns: "1fr 2fr 1.2fr 0.9fr",
            gap: 16, padding: "14px 16px",
            borderTop: i === 0 ? "none" : "0.5px solid var(--rule)",
            fontSize: 13,
          }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 16 }}>{name}</div>
            <div style={{ color: "var(--engrave)" }}>{desc}</div>
            <div className="kicker">{prov}</div>
            <div className="kicker" style={{ color: type === "Obligatorias" ? "var(--atlantic-deep)" : "var(--engrave)" }}>{type}</div>
          </div>
        ))}
      </div>

      <h3 style={{ marginTop: 36 }}>Cómo gestionarlas</h3>
      <p>
        Puedes aceptar, rechazar o configurar las cookies opcionales desde el
        banner que mostramos en la primera visita. Para cambiar tu elección,
        borra las cookies de este dominio en tu navegador y recarga la página.
      </p>

      <h3>Bases legales</h3>
      <p>
        El uso de cookies analíticas y de marketing se basa en tu consentimiento,
        renovable cada 24 meses según las guías de la AEPD.
      </p>

      <div style={{ marginTop: 36 }}>
        <button className="btn" onClick={() => { localStorage.removeItem("vdp_cookies"); location.reload(); }}>
          <span>Volver a configurar cookies</span><span className="arrow">↻</span>
        </button>
      </div>

      <p style={{ marginTop: 40, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--engrave)" }}>
        Última actualización · Mayo 2026 · Documento pendiente de revisión por asesor jurídico
      </p>
    </LegalShell>
  );
}

Object.assign(window, { AgeGate, CookieBanner, AvisoLegal, PoliticaPrivacidad, PoliticaCookies });