// legal-shared.jsx — shell reusable para páginas legales (Términos, Privacidad)

function LegalNav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100, padding: '20px 40px',
      background: 'rgba(6,8,19,0.85)', backdropFilter: 'blur(20px)',
      borderBottom: `1px solid ${F.lineStrong}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    }}>
      <a href="/" style={{ display: 'inline-flex', alignItems: 'center' }}>
        <img src="../assets/logo-color.svg" alt="Eurekant" style={{ height: 38, width: 'auto', display: 'block' }} />
      </a>
      <a href="/" style={{
        color: F.textDim, fontSize: 13, letterSpacing: '0.04em', textDecoration: 'none',
        fontFamily: 'var(--font-body)', display: 'inline-flex', alignItems: 'center', gap: 8,
        transition: 'color .25s'
      }} onMouseEnter={(e) => e.currentTarget.style.color = F.accent}
        onMouseLeave={(e) => e.currentTarget.style.color = F.textDim}>← Volver al inicio</a>
    </nav>
  );
}

function LegalPage({ title, updated, sections }) {
  const siteContent = EUREKANT_CONTENT.es;
  return (
    <div style={{ background: F.bg, minHeight: '100vh' }}>
      <LegalNav />
      <main style={{ maxWidth: 760, margin: '0 auto', padding: '80px 24px 100px' }}>
        <div style={{ color: F.accent, fontSize: 11, letterSpacing: '0.2em', marginBottom: 16, fontFamily: 'var(--font-mono)' }}>// LEGAL</div>
        <h1 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 400, letterSpacing: '-0.02em',
          fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.15, color: F.text, margin: '0 0 12px'
        }}>{title}</h1>
        <p style={{ color: F.textMute, fontSize: 14, marginBottom: 56 }}>Última actualización: {updated}</p>

        {sections.map((s, i) => (
          <section key={i} style={{ marginBottom: 40 }}>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: 21, color: F.text,
              margin: '0 0 14px', letterSpacing: '-0.01em'
            }}>{s.h}</h2>
            {s.body.map((p, j) => (
              <p key={j} style={{ color: F.textDim, fontSize: 16, lineHeight: 1.7, margin: '0 0 14px' }}>{p}</p>
            ))}
            {s.list && (
              <ul style={{ margin: '0 0 14px', padding: '0 0 0 20px' }}>
                {s.list.map((li, k) => (
                  <li key={k} style={{ color: F.textDim, fontSize: 16, lineHeight: 1.7, marginBottom: 8 }}>{li}</li>
                ))}
              </ul>
            )}
          </section>
        ))}

        <div style={{
          marginTop: 64, padding: 28, borderRadius: 24, background: F.surface,
          border: `1px solid ${F.line}`, display: 'flex', flexDirection: 'column', gap: 6
        }}>
          <span style={{ color: F.text, fontSize: 15, fontWeight: 500 }}>¿Tenés preguntas sobre este documento?</span>
          <a href="mailto:contacto@eurekant.com" style={{ color: F.accent, fontSize: 15, textDecoration: 'none' }}>contacto@eurekant.com</a>
        </div>
      </main>
      <FFooter content={siteContent} />
    </div>
  );
}

Object.assign(window, { LegalPage });