function LegalModal({ page, onClose }) {
  if (!page) return null;

  const sectionTitle = { color: "#5E3719", fontFamily: "'Playfair Display', serif" };
  const bodyStyle = { color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300 };

  const content = {
    aviso: {
      title: "Aviso Legal",
      body: (
        <div className="space-y-6 text-sm leading-relaxed" style={bodyStyle}>
          <div>
            <p>Bienvenido a la página Web de <strong>ASOCIACIÓN ESTUDIANTIL JUNIOR EMPRESA KORA</strong> (en adelante, KORA) con NIF G24760407 y domicilio en C/Uribitarte 6, Bilbao, España. Contacto mediante mail en <a href="mailto:info@companykora.com" style={{ color: "#5E3719" }}>info@companykora.com</a> e inscrita en el Registro de Asociaciones con el número AS/B/26675/2026.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Propiedad Intelectual</h3>
            <p>Los contenidos de este sitio Web, textos, imágenes, sonidos, animaciones, etc. así como su diseño gráfico y su código fuente están protegidos por la legislación española sobre los derechos de propiedad intelectual e industrial a favor de las sociedades que conforman KORA. Queda por tanto prohibida su reproducción, distribución o comunicación pública, total o parcial, sin la autorización expresa de KORA.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Contenido de la Web y enlaces</h3>
            <p>En KORA no nos responsabilizamos del mal uso que se realice de los contenidos de nuestra página Web, siendo exclusiva responsabilidad de la persona que accede a ellos o los utiliza. Tampoco asumimos ninguna responsabilidad por la información contenida en las páginas Web de terceros a las que se pueda acceder por enlaces o buscadores desde este sitio Web.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Actualización y modificación de la página Web</h3>
            <p>KORA se reserva el derecho a modificar o eliminar, sin previo aviso, tanto la información contenida en su sitio Web como su configuración y presentación, sin asumir responsabilidad alguna por ello.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Indicaciones sobre aspectos técnicos</h3>
            <p>KORA no asume ninguna responsabilidad que se pueda derivar de problemas técnicos o fallos en los equipos informáticos que se produzcan durante la conexión a la red de Internet, así como de daños que pudieran ser causados por terceras personas mediante intromisiones ilegítimas fuera del control de KORA. También quedamos exonerados de toda responsabilidad ante posibles daños o perjuicios que pueda sufrir el usuario a consecuencia de errores, defectos u omisiones en la información que facilitemos cuando proceda de fuentes ajenas a nosotros.</p>
          </div>
        </div>
      ),
    },
    cookies: {
      title: "Política de Cookies",
      body: (
        <div className="space-y-6 text-sm leading-relaxed" style={bodyStyle}>
          <div>
            <p>La <strong>ASOCIACIÓN ESTUDIANTIL JUNIOR EMPRESA KORA</strong> (en adelante, KORA) quiere informarle sobre el uso de las cookies en sus sitios web.</p>
            <p className="mt-3">Las cookies son archivos que se pueden descargar en su equipo a través de las páginas web. Son herramientas que tienen un papel esencial para la prestación de numerosos servicios de la sociedad de la información. Entre otros, permiten a un sitio web almacenar y recuperar información sobre los hábitos de navegación de un usuario o de su equipo y, dependiendo de la información obtenida, se pueden utilizar para reconocer al usuario y mejorar el servicio ofrecido.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Tipos de cookies</h3>
            <p>Se pueden distinguir dos tipos de cookies, según quien sea la entidad que gestione el dominio desde donde se envían las cookies y trate los datos que se obtengan: cookies propias y cookies de terceros.</p>
            <p className="mt-2">Además, hablamos de cookies de sesión o cookies permanentes, cuando se trata del plazo de tiempo que permanecen almacenadas en el navegador del cliente.</p>
            <p className="mt-2">Por último, existe otra clasificación con cinco tipos de cookies según la finalidad para la que se traten los datos obtenidos: cookies técnicas, cookies de personalización, cookies de análisis, cookies publicitarias y cookies de publicidad comportamental.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Cookies utilizadas en la web</h3>
            <div className="space-y-3">
              <p><strong>WordPress:</strong></p>
              <ul className="space-y-2 list-disc list-inside ml-2">
                <li><code>cookillian_opt_*</code> — Almacena sus preferencias con respecto al uso de cookies en este sitio web.</li>
                <li><code>wordpress_test_cookie</code> — Ayuda a determinar si no se puede almacenar cookies para WordPress. Se requiere para el funcionamiento de este sitio web.</li>
                <li><code>wp-settings-*</code> — Recuerda sus preferencias personales dentro de WordPress.</li>
                <li><code>comment_author_*</code> — Recuerda su último comentario y sus detalles.</li>
                <li><code>wordpress_*</code> — Cookie de autenticación que almacena detalles de WordPress. Se requiere para el funcionamiento de este sitio web.</li>
              </ul>
              <p className="mt-2"><strong>Google Maps:</strong> Los sitios web de KORA utilizan Google Maps. Puede encontrar más información en <a href="https://www.google.com/intl/es/policies/technologies/cookies/" target="_blank" rel="noopener noreferrer" style={{ color: "#5E3719" }}>google.com/intl/es/policies/technologies/cookies/</a></p>
            </div>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Aceptación de la Política de cookies</h3>
            <p>KORA asume que usted acepta el uso de cookies. No obstante, muestra información sobre su Política de cookies en la parte inferior de cualquier página de los sitios web con cada inicio de sesión con el objeto de que usted sea consciente.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Cómo modificar la configuración de las cookies</h3>
            <p>Usted puede restringir, bloquear o borrar las cookies de KORA o cualquier otro sitio web, utilizando su navegador. En cada navegador la operativa es diferente, la función de "Ayuda" le mostrará cómo hacerlo.</p>
            <ul className="mt-2 space-y-1 list-disc list-inside">
              <li>Internet Explorer: windows.microsoft.com/es-xl/internet-explorer/delete-manage-cookies</li>
              <li>Firefox: support.mozilla.org/es/kb/Borrar%20cookies</li>
              <li>Chrome: support.google.com/chrome/answer/95647?hl=es</li>
              <li>Safari: www.apple.com/es/privacy/use-of-cookies/</li>
            </ul>
          </div>
        </div>
      ),
    },
    privacidad: {
      title: "Política de Privacidad",
      body: (
        <div className="space-y-6 text-sm leading-relaxed" style={bodyStyle}>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Identificación del responsable</h3>
            <ul className="space-y-1">
              <li><strong>Responsable:</strong> Asociación Estudiantil Junior Empresa Kora (KORA)</li>
              <li><strong>NIF:</strong> G24760407</li>
              <li><strong>Domicilio:</strong> Calle Uribitarte, 6, Abando, 48001, Bilbao</li>
              <li><strong>Contacto:</strong> <a href="mailto:info@companykora.com" style={{ color: "#5E3719" }}>info@companykora.com</a></li>
            </ul>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Quién es el responsable del tratamiento de sus datos?</h3>
            <p>La presente política de privacidad aplica a todos los datos de carácter personal que el interesado aporte a KORA, así como a toda persona física interesada en las actividades y servicios que KORA ofrece a través de sus páginas web y a través de cualquier otro medio de comunicación. El objetivo de la Política de Privacidad de KORA es dar transparencia a la información de cómo tratamos sus datos personales en cumplimiento de la normativa vigente en protección de datos.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Con qué finalidad tratamos sus datos personales y con qué legitimación?</h3>
            <p className="mb-3">KORA dispone de un Registro de Actividades de Tratamiento donde se detallan cada uno de los siguientes tratamientos realizados como responsable de tratamiento:</p>
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse" style={{ borderColor: "#EDE0CF" }}>
                <thead>
                  <tr style={{ backgroundColor: "#EDE0CF" }}>
                    <th className="p-2 text-left border" style={{ borderColor: "#D4C4B0", color: "#5E3719" }}>Tratamiento</th>
                    <th className="p-2 text-left border" style={{ borderColor: "#D4C4B0", color: "#5E3719" }}>Finalidad</th>
                    <th className="p-2 text-left border" style={{ borderColor: "#D4C4B0", color: "#5E3719" }}>Base legítima</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Personas asociadas</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Gestión de las personas socias</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Art. 6.1 b) RGPD — ejecución de contrato</td>
                  </tr>
                  <tr style={{ backgroundColor: "#FAF6F0" }}>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Personas de contacto</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Gestión de la base de datos de contactos</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Art. 6.1 f) RGPD — interés legítimo</td>
                  </tr>
                  <tr>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Consumidores y atención al cliente</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Inscripción y gestión de asistentes a eventos</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Art. 6.1 a) y f) RGPD — consentimiento e interés legítimo</td>
                  </tr>
                  <tr style={{ backgroundColor: "#FAF6F0" }}>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Usuarios web</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Gestión de solicitantes de información y contacto de la web</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Art. 6.1 f) RGPD — interés legítimo</td>
                  </tr>
                  <tr>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Administración</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Gestión administrativa y contable de los clientes</td>
                    <td className="p-2 border align-top" style={{ borderColor: "#EDE0CF" }}>Art. 6.1 b) RGPD — ejecución de contrato</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Por cuánto tiempo conservamos sus datos personales?</h3>
            <p>KORA conservará los datos de los afectados mientras dure su relación con la organización y posteriormente durante 5 años, acorde a lo dispuesto en la normativa de archivo y documentación que cada legislación aplicable establezca.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Quién tiene acceso a sus datos personales?</h3>
            <p>KORA podrá realizar cesiones o comunicaciones de datos personales para atender sus obligaciones con las Administraciones Públicas en los casos que así se requiera de acuerdo con la legislación vigente en cada momento.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Cuáles son los derechos de los afectados?</h3>
            <p className="mb-2">Le informamos de que podrá ejercer los siguientes derechos:</p>
            <ul className="space-y-1 list-disc list-inside">
              <li>Derecho de acceso a sus datos personales</li>
              <li>Derecho de rectificación de cualquier dato personal inexacto</li>
              <li>Derecho de supresión de sus datos personales</li>
              <li>Derecho a solicitar la limitación del tratamiento</li>
              <li>Derecho de oposición al tratamiento de sus datos personales</li>
              <li>Derecho a la portabilidad de sus datos</li>
            </ul>
            <p className="mt-3">Dichos derechos podrán ser ejercitados mediante solicitud escrita dirigida a <a href="mailto:info@companykora.com" style={{ color: "#5E3719" }}>info@companykora.com</a></p>
            <p className="mt-2">El interesado tiene derecho a presentar una reclamación ante la Autoridad de Control competente (Agencia Española de Protección de Datos, <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" style={{ color: "#5E3719" }}>aepd.es</a>).</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>¿Qué medidas de seguridad tenemos implementadas?</h3>
            <p>KORA se compromete al cumplimiento de su obligación de secreto de los datos de carácter personal y adoptará las medidas necesarias para evitar su alteración, pérdida, tratamiento o acceso no autorizado, de acuerdo con lo establecido por normativa aplicable.</p>
          </div>
          <div>
            <h3 className="font-semibold mb-2" style={sectionTitle}>Modificación de la Política de Privacidad</h3>
            <p>KORA podrá modificar su Política de Privacidad de acuerdo con la legislación aplicable en cada momento. Cualquier modificación le será debidamente notificada al Afectado.</p>
            <p className="mt-2" style={{ color: "#886E58" }}>Última actualización: 12 de febrero de 2026.</p>
          </div>
        </div>
      ),
    },
  };

  const { title, body } = content[page];

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4 md:p-8"
      style={{ backgroundColor: "rgba(26, 14, 7, 0.8)" }}
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-2xl max-h-[85vh] overflow-y-auto"
        style={{ backgroundColor: "#FAF6F0" }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 flex items-center justify-between p-6 pb-4" style={{ backgroundColor: "#FAF6F0", borderBottom: "1px solid #EDE0CF" }}>
          <h2 className="text-2xl font-normal" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
            {title}
          </h2>
          <button onClick={onClose} className="p-1 transition-opacity hover:opacity-60">
            <X size={20} style={{ color: "#886E58" }} />
          </button>
        </div>
        <div className="p-6 pt-5">{body}</div>
      </div>
    </div>
  );
}

window.LegalModal = LegalModal;