/* ============================================
   LEGAL PAGE LAYOUT — shared shell for privacy/cookies/terms
   ============================================ */

function LegalShell({ title, eyebrow, lastUpdate, sections }) {
  return (
    <>
      <Header />
      <main>
        <section style={{background:'var(--paper)', paddingTop:48, paddingBottom:32, borderBottom:'1px solid var(--line)'}}>
          <div className="container">
            <a href="index.html" style={{display:'inline-flex', alignItems:'center', gap:6, color:'var(--muted)', fontSize:14, fontWeight:600, marginBottom:24}}>
              ← Voltar ao início
            </a>
            <span className="eyebrow">{eyebrow}</span>
            <h1 className="display-lg" style={{margin:'12px 0 16px'}}>{title}</h1>
            <p className="body-sm" style={{margin:0}}>Última atualização: {lastUpdate}</p>
          </div>
        </section>

        <section className="section" style={{paddingTop:48}}>
          <div className="container" style={{maxWidth:820, display:'grid', gap:48, gridTemplateColumns:'1fr'}}>
            <div className="legal-toc">
              <h3 style={{margin:'0 0 12px', fontFamily:'var(--font-display)', fontSize:14, fontWeight:700, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Índice</h3>
              <ol style={{margin:0, paddingLeft:18, display:'grid', gap:6}}>
                {sections.map((s, i) => (
                  <li key={i} style={{fontSize:14}}>
                    <a href={`#sec-${i+1}`} style={{color:'var(--teal-700)', textDecoration:'none'}}>{s.title}</a>
                  </li>
                ))}
              </ol>
            </div>

            <article className="legal-content">
              {sections.map((s, i) => (
                <section key={i} id={`sec-${i+1}`} style={{marginBottom:48}}>
                  <h2 style={{fontFamily:'var(--font-display)', fontSize:28, fontWeight:600, color:'var(--ink)', margin:'0 0 16px'}}>
                    {i+1}. {s.title}
                  </h2>
                  {s.body.split('\n\n').map((para, j) => (
                    <p key={j} style={{fontSize:16, lineHeight:1.7, color:'var(--ink-soft)', margin:'0 0 14px'}} dangerouslySetInnerHTML={{__html: para}}/>
                  ))}
                </section>
              ))}
            </article>
          </div>
          <style>{`
            .legal-toc {
              padding: 24px;
              background: white;
              border: 1px solid var(--line);
              border-radius: var(--r-lg);
            }
            @media (min-width: 1024px) {
              .container.legal-grid { grid-template-columns: 240px 1fr; gap: 64px; }
            }
          `}</style>
        </section>
      </main>
      <Footer />
      <GlobalWidgets />
    </>
  );
}

Object.assign(window, { LegalShell });