/* LegalPage.jsx — shared layout for legal / policy pages.
   Each host HTML sets `window.LEGAL_DATA` with:
   {
     key:       'legal' | 'privacy' | 'cookies' | 'terms', // for active-link state
     title:     'Aviso Legal',
     subtitle:  'optional short lede',
     lastUpdated: '16 de mayo de 2026',
     sections: [
       { h: 'Sección 1', body: ['Párrafo 1', 'Párrafo 2', ['li 1','li 2']] },
       ...
     ],
   }
   Each `body` entry is either a string (rendered as <p>) or an array (rendered as <ul>).
*/

/* global React, Nav, Footer, Icon, useT */

function LegalPage() {
  const KEY = window.LEGAL_KEY || 'legal';
  const D = (window.LEGAL_CONTENT && window.LEGAL_CONTENT[KEY]) || window.LEGAL_DATA || {};
  const sections = D.sections || [];

  const labels = {
    es:{ back:'Volver al inicio', updated:'Última actualización', toc:'Contenido', other:'Otras páginas legales' },
    en:{ back:'Back to home',     updated:'Last updated',         toc:'Contents', other:'Other legal pages' },
    fr:{ back:'Retour à l’accueil', updated:'Dernière mise à jour', toc:'Sommaire', other:'Autres pages légales' },
  };
  const { lang } = useT ? useT() : { lang:'es' };
  const L = labels[lang] || labels.es;

  const otherPages = [
    { k:'legal',   href:'aviso-legal.html',          es:'Aviso Legal',                    en:'Legal Notice',   fr:'Mentions légales' },
    { k:'privacy', href:'politica-privacidad.html',  es:'Política de Privacidad',         en:'Privacy Policy', fr:'Politique de confidentialité' },
    { k:'cookies', href:'politica-cookies.html',     es:'Política de Cookies',            en:'Cookie Policy',  fr:'Politique de cookies' },
    { k:'terms',   href:'terminos-condiciones.html', es:'Términos y Condiciones',         en:'Booking Terms',  fr:'Conditions générales' },
  ];

  return (
    <div data-screen-label={`Website · ${D.title || 'Legal'}`}>
      <Nav/>
      <main style={LP.main}>
        {/* HEADER */}
        <section style={LP.header}>
          <div style={LP.headerInner}>
            <a href="index.html" style={LP.back}>
              <span style={{transform:'rotate(180deg)', display:'inline-flex'}}><Icon name="arrow" size={14}/></span>
              {L.back}
            </a>
            <div style={LP.eyebrow}>{L.toc}</div>
            <h1 style={LP.h1}>{D.title || 'Legal'}</h1>
            {D.subtitle && <p style={LP.lede}>{D.subtitle}</p>}
            {D.lastUpdated && (
              <div style={LP.updated}>
                <span style={LP.updatedK}>{L.updated}</span>
                <span style={LP.updatedV}>{D.lastUpdated}</span>
              </div>
            )}
          </div>
        </section>

        {/* BODY */}
        <section style={LP.body}>
          <article style={LP.article}>
            {sections.length === 0 && (
              <p style={LP.placeholder}>
                Contenido pendiente — se completará con el texto legal definitivo.
              </p>
            )}
            {sections.map((s, i) => (
              <section key={i} style={LP.sec}>
                {s.h && <h2 style={LP.h2}>{s.h}</h2>}
                {(s.body || []).map((b, j) => {
                  if (Array.isArray(b)) {
                    return (
                      <ul key={j} style={LP.ul}>
                        {b.map((li, k) => <li key={k} style={LP.li}>{li}</li>)}
                      </ul>
                    );
                  }
                  return <p key={j} style={LP.p}>{b}</p>;
                })}
              </section>
            ))}
          </article>

          {/* Other legal pages */}
          <aside style={LP.aside}>
            <div style={LP.asideH}>{L.other}</div>
            <ul style={LP.asideList}>
              {otherPages.filter(p => p.k !== D.key).map(p => (
                <li key={p.k}>
                  <a href={p.href} style={LP.asideLink}>{p[lang] || p.es}</a>
                </li>
              ))}
            </ul>
          </aside>
        </section>
      </main>
      <Footer/>
    </div>
  );
}

const LP = {
  main:{ background:'#FAF8F2', minHeight:'100vh' },
  header:{ background:'#FAF8F2', borderBottom:'1px solid #ECECEC', padding:'56px 28px 40px' },
  headerInner:{ maxWidth:1080, margin:'0 auto' },
  back:{ display:'inline-flex', alignItems:'center', gap:8, fontFamily:'Montserrat, sans-serif', fontWeight:700,
         fontSize:12, letterSpacing:'.15em', textTransform:'uppercase', color:'#1A1A1A',
         textDecoration:'none', marginBottom:28, opacity:.7 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em',
            textTransform:'uppercase', color:'#9A9A9A' },
  h1:{ fontFamily:'Montserrat, sans-serif', fontWeight:900,
       fontSize:'clamp(36px,4.5vw,64px)', lineHeight:1, letterSpacing:'-0.02em',
       margin:'14px 0 16px', textTransform:'uppercase', color:'#1A1A1A' },
  lede:{ fontFamily:'Inter, sans-serif', fontSize:18, color:'#3A3A3A',
         lineHeight:1.55, margin:'0 0 18px', maxWidth:680 },
  updated:{ display:'inline-flex', gap:10, alignItems:'baseline',
            fontFamily:'ui-monospace, monospace', fontSize:12, color:'#6B6B6B' },
  updatedK:{ textTransform:'uppercase', letterSpacing:'.15em' },
  updatedV:{ color:'#1A1A1A' },

  body:{ maxWidth:1080, margin:'0 auto', padding:'56px 28px 80px',
         display:'grid', gridTemplateColumns:'minmax(0,1fr) 240px', gap:48,
         alignItems:'start' },
  article:{ maxWidth:720, color:'#1A1A1A' },
  placeholder:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#9A9A9A',
                fontStyle:'italic', padding:'18px 22px', background:'#fff',
                borderRadius:12, border:'1px dashed #D5D5D5' },
  sec:{ marginBottom:36 },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:800,
       fontSize:'clamp(20px,1.8vw,26px)', lineHeight:1.2, letterSpacing:'-0.01em',
       margin:'0 0 14px', color:'#1A1A1A' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#1A1A1A',
      lineHeight:1.7, margin:'0 0 14px' },
  ul:{ paddingLeft:22, margin:'0 0 14px',
       fontFamily:'Inter, sans-serif', fontSize:16, color:'#1A1A1A', lineHeight:1.7 },
  li:{ margin:'0 0 6px' },

  aside:{ position:'sticky', top:24, background:'#fff', border:'1px solid #ECECEC',
          borderRadius:14, padding:'18px 20px' },
  asideH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
           letterSpacing:'.2em', textTransform:'uppercase', color:'#1A1A1A',
           marginBottom:12, paddingBottom:10, borderBottom:'1px solid #ECECEC' },
  asideList:{ listStyle:'none', padding:0, margin:0, display:'flex',
              flexDirection:'column', gap:10 },
  asideLink:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#1A1A1A',
              textDecoration:'none', lineHeight:1.4, display:'block' },
};

window.LegalPage = LegalPage;