const { Button } = window.PilatesLifeStudioDesignSystem_f49721;

// Renderiza el texto legal real del estudio (ver LEGAL_CONTENT en data.jsx). Antes estos
// links del footer salían al sitio antiguo (studiopilateslife.com); ahora quedan dentro
// del sitio nuevo.
function BloqueLegal({ bloque, i }) {
  if (bloque.tipo === 'h3') {
    return <h3 style={{ fontSize: 'var(--size-display-sm)', marginTop: 'var(--space-2)' }}>{bloque.texto}</h3>;
  }
  if (bloque.tipo === 'p-enlace') {
    return (
      <p key={i} style={{ color: 'var(--text-body)', fontSize: 'var(--size-body)' }}>
        {bloque.pre}
        <a href={bloque.url} target="_blank" rel="noopener noreferrer">{bloque.url}</a>
        {bloque.post}
      </p>
    );
  }
  return <p key={i} style={{ color: 'var(--text-body)', fontSize: 'var(--size-body)' }}>{bloque.texto}</p>;
}

function LegalPage({ id, onNavigate }) {
  const entrada = LEGAL.find(l => l.id === id) || LEGAL[0];
  const contenido = LEGAL_CONTENT[id] || [];
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 720 }}>
        <div className="eyebrow">Legal</div>
        <h1 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>{entrada.label}</h1>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          {contenido.map((bloque, i) => <BloqueLegal key={i} bloque={bloque} i={i} />)}
        </div>
        <Button variant="ghost" onClick={() => onNavigate('home')} style={{ marginTop: 'var(--space-7)' }}>
          Volver al inicio
        </Button>
      </div>
    </section>
  );
}

Object.assign(window, { LegalPage });