// pages-legal.jsx — Privacidad, Términos y Cookies (adaptado de wipbot.es)

function LegalLayout({ p, title, eyebrow, updated, sections }) {
  const [active, setActive] = React.useState(0);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 120, behavior: "smooth" });
  };

  React.useEffect(() => {
    const handler = () => {
      if (!sections) return;
      let found = 0;
      sections.forEach((s, i) => {
        const el = document.getElementById(s.id);
        if (el && el.getBoundingClientRect().top < 160) found = i;
      });
      setActive(found);
    };
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, [sections]);

  return (
    <div style={{ background: p.bg }}>
      {/* Compact hero */}
      <section data-legal-hero style={{ padding: "72px 32px 56px", borderBottom: `1px solid ${p.ink}10` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: p.primary, marginBottom: 14 }}>{eyebrow}</div>
          <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(44px, 5vw, 72px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>{title}</h1>
          <p style={{ fontSize: 14, color: p.inkSoft, marginTop: 16 }}>Última actualización: {updated}</p>
        </div>
      </section>

      {/* Body */}
      <section data-legal-body style={{ padding: "64px 32px 120px" }}>
        <div data-legal-grid style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "240px 1fr", gap: 72, alignItems: "start" }}>

          {/* TOC */}
          <nav data-legal-toc style={{ position: "sticky", top: 110 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: p.inkSoft, marginBottom: 16 }}>Contenido</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 2 }}>
              {sections.map((s, i) => (
                <li key={s.id}>
                  <button onClick={() => scrollTo(s.id)} style={{
                    width: "100%", textAlign: "left", background: active === i ? p.primary + "12" : "none",
                    border: 0, cursor: "default", padding: "8px 12px", borderRadius: 8,
                    fontSize: 14, fontWeight: active === i ? 600 : 400,
                    color: active === i ? p.primary : p.inkSoft,
                    transition: "all .15s ease", fontFamily: "'Plus Jakarta Sans', sans-serif",
                  }}>{s.title}</button>
                </li>
              ))}
            </ul>
          </nav>

          {/* Content */}
          <div style={{ display: "flex", flexDirection: "column", gap: 52 }}>
            {sections.map((s) => (
              <section key={s.id} id={s.id} style={{ scrollMarginTop: 130 }}>
                <h2 style={{
                  fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
                  fontSize: 26, letterSpacing: "-.025em", color: p.ink,
                  margin: "0 0 20px", paddingBottom: 16, borderBottom: `1px solid ${p.ink}12`
                }}>{s.title}</h2>
                <div style={{ fontSize: 16, lineHeight: 1.8, color: p.inkSoft }}>
                  {s.content}
                </div>
              </section>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function LP({ children }) {
  return <p style={{ margin: "0 0 16px" }}>{children}</p>;
}
function LU({ items }) {
  return (
    <ul style={{ margin: "0 0 20px", paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
          <span style={{ flexShrink: 0, marginTop: 9, width: 5, height: 5, borderRadius: 999, background: "currentColor", opacity: .35 }}></span>
          <span>{it}</span>
        </li>
      ))}
    </ul>
  );
}
function LT({ rows }) {
  return (
    <div style={{ overflowX: "auto", margin: "0 0 20px", borderRadius: 12, border: "1px solid rgba(0,0,0,.08)" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
        <thead>
          <tr style={{ background: "rgba(0,0,0,.03)" }}>
            {rows[0].map((h, i) => (
              <th key={i} style={{ padding: "12px 16px", textAlign: "left", fontWeight: 700, whiteSpace: "nowrap", borderBottom: "1px solid rgba(0,0,0,.08)" }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.slice(1).map((row, ri) => (
            <tr key={ri} style={{ borderBottom: "1px solid rgba(0,0,0,.06)" }}>
              {row.map((cell, ci) => (
                <td key={ci} style={{ padding: "12px 16px", fontWeight: ci === 0 ? 600 : 400, verticalAlign: "top" }}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ─── Política de Privacidad ───────────────────────────────────────────────
function PrivacidadPage({ p }) {
  const sections = [
    {
      id: "intro",
      title: "Introducción",
      content: (
        <>
          <LP>La presente Política de Privacidad establece los términos en que Wipbot utiliza y protege la información que sus usuarios proporcionan al utilizar este sitio web. Estamos comprometidos con la seguridad de los datos personales de nuestros usuarios.</LP>
          <LP>Esta política puede cambiar con el tiempo. Te recomendamos revisarla periódicamente para estar al tanto de posibles actualizaciones. El uso continuado del sitio implica la aceptación de la versión vigente.</LP>
        </>
      ),
    },
    {
      id: "informacion",
      title: "Información que recogemos",
      content: (
        <>
          <LP>A través de los formularios de nuestro sitio web podemos recoger la siguiente información personal:</LP>
          <LU items={[
            "Nombre y apellidos del alumno y del tutor legal.",
            "Dirección de correo electrónico.",
            "Número de teléfono de contacto.",
            "Información demográfica básica (edad o curso escolar del alumno).",
            "Datos económicos necesarios para gestionar el pago de la matrícula o cuota mensual, siempre a través de los canales seguros correspondientes.",
          ]} />
          <LP>Solo recogemos los datos estrictamente necesarios para cada finalidad y nunca solicitamos información innecesaria.</LP>
        </>
      ),
    },
    {
      id: "uso",
      title: "Uso de la información",
      content: (
        <>
          <LP>Wipbot utiliza la información recogida exclusivamente para:</LP>
          <LU items={[
            "Gestionar la inscripción y seguimiento de los alumnos en nuestros programas.",
            "Enviar comunicaciones administrativas: horarios, avisos, facturas y novedades del curso.",
            "Mejorar nuestros servicios y la experiencia en el sitio web.",
            "Enviar, con tu consentimiento, información sobre nuevos programas u ofertas especiales. Puedes cancelar esta suscripción en cualquier momento escribiendo a hola@wipbot.es.",
          ]} />
          <LP>Wipbot no venderá, cederá ni distribuirá tus datos personales sin tu consentimiento, salvo requerimiento judicial.</LP>
        </>
      ),
    },
    {
      id: "fotos",
      title: "Fotografías y vídeos",
      content: (
        <>
          <LP>Wipbot puede tomar fotografías y grabar vídeos durante las clases presenciales y actividades de campus. Este material puede ser utilizado con fines promocionales de la marca Wipbot: redes sociales, sitio web, prensa y newsletters.</LP>
          <LP>Al formalizar la matrícula se solicitará el consentimiento explícito del tutor legal para el uso de la imagen del menor. Si no deseas que fotografiemos o grabemos a tu hijo/a, puedes indicarlo en el formulario de inscripción o enviando un correo a <strong>hola@wipbot.es</strong>. Este consentimiento puede revocarse en cualquier momento.</LP>
        </>
      ),
    },
    {
      id: "menores",
      title: "Menores de edad",
      content: (
        <>
          <LP>Nuestros servicios están dirigidos a menores de 18 años, por lo que el tratamiento de sus datos requiere el consentimiento del padre, madre o tutor legal.</LP>
          <LP>Al cumplimentar cualquier formulario de inscripción, la persona que lo rellena declara tener capacidad legal para hacerlo en nombre del menor y asume la responsabilidad de la veracidad de los datos aportados. No recabamos datos directamente de los menores a través del sitio web.</LP>
        </>
      ),
    },
    {
      id: "cookies",
      title: "Cookies",
      content: (
        <>
          <LP>Nuestro sitio web emplea cookies para identificar las páginas visitadas y guardar preferencias del usuario. Esta información se usa únicamente para mejorar la experiencia de navegación.</LP>
          <LP>Puedes eliminar o bloquear las cookies desde la configuración de tu navegador en cualquier momento. Deshabilitar cookies técnicas puede afectar al correcto funcionamiento de algunas partes del sitio.</LP>
        </>
      ),
    },
    {
      id: "enlaces",
      title: "Enlac‌es a terceros",
      content: (
        <>
          <LP>Este sitio web puede contener enlaces a otros sitios de interés. Una vez que hagas clic en esos enlaces y abandones nuestra página, ya no tenemos control sobre el sitio al que eres redirigido. No somos responsables de sus políticas de privacidad ni de la protección de tus datos en dichos sitios. Te recomendamos consultarlas antes de facilitar cualquier información personal.</LP>
        </>
      ),
    },
    {
      id: "derechos",
      title: "Control y derechos sobre tus datos",
      content: (
        <>
          <LP>En cualquier momento puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad escribiendo a <strong>hola@wipbot.es</strong> con copia de tu documento identificativo.</LP>
          <LP>También puedes cancelar la suscripción a comunicaciones comerciales en cualquier momento desde el mismo correo. Si consideras que tus derechos no han sido atendidos, puedes presentar una reclamación ante la Agencia Española de Protección de Datos (aepd.es).</LP>
          <LP>Wipbot se reserva el derecho de modificar esta Política de Privacidad en cualquier momento, publicando la versión actualizada en esta misma página.</LP>
        </>
      ),
    },
  ];

  return <LegalLayout p={p} title="Política de privacidad" eyebrow="Legal · Wipbot" updated="Mayo 2026" sections={sections} />;
}

// ─── Términos y Condiciones ───────────────────────────────────────────────
function TerminosPage({ p }) {
  const sections = [
    {
      id: "intro",
      title: "Bienvenida",
      content: (
        <>
          <LP>Bienvenido/a a Wipbot, la academia de actividades extraescolares. Los presentes Términos y Condiciones regulan el acceso y uso de nuestro sitio web y servicios. Por favor, léelos detenidamente antes de utilizar nuestros servicios.</LP>
          <LP>Al acceder o usar el sitio web y contratar nuestros servicios, aceptas cumplir con estos Términos. Si no estás de acuerdo con alguno de ellos, te rogamos que no uses nuestros servicios.</LP>
        </>
      ),
    },
    {
      id: "uso",
      title: "1. Uso de los servicios",
      content: (
        <>
          <LP>Nuestro sitio web y servicios están diseñados para proporcionar información sobre nuestras actividades extraescolares y permitir la inscripción en las mismas. Aceptas utilizar nuestros servicios de manera lícita, ética y conforme a estos Términos.</LP>
        </>
      ),
    },
    {
      id: "registro",
      title: "2. Registro y cuentas",
      content: (
        <>
          <LP>Al registrarte o cumplimentar cualquier formulario en nuestro sitio, te comprometes a proporcionar información veraz y completa. Eres responsable de mantener la confidencialidad de tus credenciales de acceso y de todas las actividades que se realicen bajo tu cuenta. Si sospechas un uso no autorizado, notifícanos de inmediato en <strong>hola@wipbot.es</strong>.</LP>
        </>
      ),
    },
    {
      id: "inscripciones",
      title: "3. Inscripciones y pagos",
      content: (
        <>
          <LP>La inscripción en nuestras actividades está sujeta a disponibilidad y se realiza a través del formulario de matrícula del sitio web o presencialmente en nuestras instalaciones. Al hacer clic en "Enviar" en el formulario de inscripción, aceptas estos Términos y la Política de Privacidad.</LP>
          <LP>Los pagos deben realizarse según las instrucciones proporcionadas en el proceso de inscripción. Las cuotas mensuales y los importes de matrícula vigentes se detallan en cada programa. Wipbot se reserva el derecho de actualizar las tarifas entre cursos académicos, comunicándolo con antelación suficiente.</LP>
        </>
      ),
    },
    {
      id: "cancelaciones",
      title: "4. Cancelaciones y reembolsos",
      content: (
        <>
          <LP>Las políticas de cancelación y reembolso pueden variar según la actividad y se especifican en la descripción de cada programa.</LP>
          <LU items={[
            "Baja voluntaria: debe comunicarse por escrito (email o WhatsApp) con un mínimo de 15 días naturales de antelación al inicio del mes siguiente.",
            "No se abonan devoluciones por mensualidades ya cobradas salvo causa justificada.",
            "En caso de cancelación de un grupo por parte de Wipbot, se informará a las familias y se ofrecerá reembolso o traslado a otra actividad disponible.",
          ]} />
        </>
      ),
    },
    {
      id: "propiedad",
      title: "5. Propiedad intelectual",
      content: (
        <>
          <LP>Todo el contenido del sitio web —textos, imágenes, gráficos, logotipos y código— está protegido por derechos de autor y otros derechos de propiedad intelectual de Wipbot o de sus licenciantes.</LP>
          <LP>Te comprometes a no copiar, distribuir, comunicar públicamente ni transformar ninguno de estos contenidos sin autorización expresa y por escrito de Wipbot.</LP>
        </>
      ),
    },
    {
      id: "responsabilidad",
      title: "6. Limitación de responsabilidad",
      content: (
        <>
          <LP>Wipbot vela por la seguridad de todos los alumnos durante las sesiones. No obstante, no nos hacemos responsables de daños directos, indirectos, incidentales o consecuentes derivados del uso del sitio web o de incidencias ocurridas fuera del horario y las instalaciones propias de la actividad.</LP>
          <LP>Los tutores son responsables de comunicar a Wipbot cualquier condición médica, alergia o necesidad especial del menor que pueda ser relevante para el desarrollo seguro de las actividades.</LP>
        </>
      ),
    },
    {
      id: "modificaciones",
      title: "7. Modificaciones y baja",
      content: (
        <>
          <LP>Wipbot se reserva el derecho de modificar, suspender o interrumpir cualquier parte de los servicios en cualquier momento por causas organizativas o de fuerza mayor, notificando a las familias afectadas con la mayor antelación posible.</LP>
          <LP>Asimismo, podemos causar baja a un usuario si incumple estos Términos o si su conducta resulta perjudicial para otros alumnos o para el funcionamiento del centro.</LP>
        </>
      ),
    },
    {
      id: "ley",
      title: "8. Ley aplicable y jurisdicción",
      content: (
        <>
          <LP>Estos Términos se rigen por la legislación española. Cualquier disputa que surja se resolverá en los Juzgados y Tribunales competentes de Alcañiz (Teruel), salvo que la normativa de consumidores establezca otro fuero.</LP>
          <LP>Si tienes alguna pregunta o necesitas asistencia, no dudes en contactarnos en <strong>hola@wipbot.es</strong> o en el teléfono <strong>622 457 302</strong>.</LP>
        </>
      ),
    },
  ];

  return <LegalLayout p={p} title="Términos y condiciones" eyebrow="Legal · Wipbot" updated="Mayo 2026" sections={sections} />;
}

// ─── Política de Cookies ──────────────────────────────────────────────────
function CookiesPage({ p }) {
  const sections = [
    {
      id: "que-son",
      title: "¿Qué son las cookies?",
      content: (
        <>
          <LP>Una cookie es un pequeño fichero de texto que un sitio web envía a tu navegador para almacenarse en tu dispositivo. Al aceptar su uso, la cookie se crea y permite que el sitio recuerde información sobre tu visita: páginas consultadas, preferencias de visualización, etc., facilitando futuras visitas y mejorando tu experiencia.</LP>
          <LP>Las cookies no dan acceso a información de tu dispositivo ni a datos personales, salvo que tú los hayas proporcionado directamente al sitio.</LP>
        </>
      ),
    },
    {
      id: "tipos",
      title: "Cookies que utilizamos",
      content: (
        <>
          <LP>Wipbot emplea cookies propias de carácter técnico y de preferencias para garantizar el correcto funcionamiento del sitio y recordar tus ajustes:</LP>
          <LT rows={[
            ["Nombre", "Tipo", "Duración", "Finalidad"],
            ["wipbot_palette", "Preferencias", "1 año", "Guarda la paleta de colores seleccionada."],
            ["wipbot_ribbon", "Preferencias", "1 año", "Recuerda si se ha ocultado el banner superior."],
            ["sessionStorage (varios)", "Técnica — sesión", "Cierre de pestaña", "Conserva el progreso del formulario de matrícula durante la sesión. No se envía a ningún servidor."],
          ]} />
          <LP>Estas cookies también nos permiten identificar las páginas visitadas y su frecuencia con fines estadísticos internos. Dicha información se emplea únicamente para análisis agregado y se elimina de forma permanente transcurrido el periodo de retención.</LP>
        </>
      ),
    },
    {
      id: "terceros",
      title: "Servicios de terceros",
      content: (
        <>
          <LP>El sitio puede cargar recursos externos que podrían instalar sus propias cookies:</LP>
          <LT rows={[
            ["Servicio", "Finalidad"],
            ["Google Fonts", "Carga de tipografías web desde los servidores de Google."],
            ["Acadesoft (panel.wipbot.es)", "Iframe del calendario de inscripciones del Campus."],
          ]} />
          <LP>Wipbot no controla las cookies instaladas por estos servicios externos. Te recomendamos consultar sus respectivas políticas de privacidad si deseas más información.</LP>
        </>
      ),
    },
    {
      id: "gestion",
      title: "Gestión y desactivación",
      content: (
        <>
          <LP>Puedes aceptar o rechazar el uso de cookies desde la configuración de tu navegador. La mayoría de navegadores las aceptan automáticamente, pero puedes cambiar esta configuración en cualquier momento:</LP>
          <LU items={[
            "Google Chrome: Configuración → Privacidad y seguridad → Cookies y otros datos de sitios.",
            "Mozilla Firefox: Opciones → Privacidad y seguridad → Cookies y datos del sitio.",
            "Safari: Preferencias → Privacidad → Cookies y datos de sitios web.",
            "Microsoft Edge: Configuración → Privacidad, búsqueda y servicios → Cookies.",
          ]} />
          <LP>Ten en cuenta que deshabilitar las cookies técnicas puede impedir el uso correcto de algunas funcionalidades del sitio.</LP>
        </>
      ),
    },
    {
      id: "actualizaciones",
      title: "Actualizaciones",
      content: (
        <>
          <LP>Esta política puede actualizarse cuando cambie la tecnología que usamos o la normativa aplicable. La fecha de «última actualización» al inicio de esta página refleja siempre la versión vigente.</LP>
          <LP>Para cualquier consulta sobre cookies o privacidad, escríbenos a <strong>hola@wipbot.es</strong>.</LP>
        </>
      ),
    },
  ];

  return <LegalLayout p={p} title="Política de cookies" eyebrow="Legal · Wipbot" updated="Mayo 2026" sections={sections} />;
}

Object.assign(window, { PrivacidadPage, TerminosPage, CookiesPage });
