// Layout compartilhado das páginas de Segurança & Compliance.
// Cada página define window.LEGAL_PAGE = { slug, title, intro:[..], sections:[{ title, blocks:[..] }], updated }
// Blocos: 'texto' → parágrafo · ['a','b'] → lista · { h: 'Subtítulo' } → subtítulo · { note: 'texto' } → destaque
const LEGAL_PAGES = [
  { slug: 'trust-center', label: 'Trust Center' },
  { slug: 'seguranca-da-informacao', label: 'Segurança da Informação' },
  { slug: 'politica-de-privacidade', label: 'Política de Privacidade' },
  { slug: 'lgpd', label: 'LGPD' },
  { slug: 'compliance-etica', label: 'Compliance & Ética' }
];

function legalSlugify(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); }

function LegalText({ text }) {
  const m = text.match(/^([^:]{2,48}):\s(.+)$/);
  if (m) return <><strong style={{ color: 'var(--text)', fontWeight: 700 }}>{m[1]}:</strong> {m[2]}</>;
  return text;
}

function LegalBlock({ b }) {
  if (typeof b === 'string') return <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--muted)', margin: '0 0 1rem', textWrap: 'pretty' }}><LegalText text={b} /></p>;
  if (Array.isArray(b)) return (
    <ul style={{ listStyle: 'none', display: 'grid', gap: '0.6rem', margin: '0 0 1.25rem' }}>
      {b.map((it, i) => <li key={i} style={{ display: 'flex', gap: 12, fontSize: 16, lineHeight: 1.65, color: 'var(--muted)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)', flexShrink: 0, marginTop: 10 }} />
        <span><LegalText text={it} /></span>
      </li>)}
    </ul>
  );
  if (b && b.cards) return <div className="legal-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(220px,1fr))', gap: 12, margin: '0 0 1.25rem' }}>{b.cards.map((c) => <a key={c.t} href={c.href} style={{ display: 'block', padding: '1.25rem', borderRadius: 'var(--r-lg)', border: '1px solid var(--border)', background: '#fff', textDecoration: 'none', color: 'var(--text)' }}>
    <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6 }}>{c.t}</div>
    <div style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--muted)', marginBottom: 10 }}>{c.d}</div>
    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--green)' }}>Acessar →</div>
  </a>)}</div>;
  if (b && b.link) return <p style={{ margin: '0 0 1rem' }}><a href={b.href} style={{ fontSize: 15, fontWeight: 700, color: 'var(--green)', textDecoration: 'none' }}>{b.link} →</a></p>;
  if (b && b.pills) return <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, margin: '0 0 1.25rem' }}>{b.pills.map((p) => <span key={p} style={{ padding: '8px 16px', borderRadius: 'var(--r-pill)', border: '1px solid oklch(0.55 0.18 168 / 0.3)', background: 'oklch(0.55 0.18 168 / 0.06)', fontSize: 14.5, fontWeight: 700, color: 'var(--text)' }}>{p}</span>)}</div>;
  if (b && b.h) return <h3 style={{ fontSize: 17, fontWeight: 700, margin: '1.5rem 0 0.6rem', color: 'var(--text)' }}>{b.h}</h3>;
  if (b && b.note) return <div style={{ margin: '0 0 1.25rem', padding: '1.1rem 1.25rem', borderRadius: 'var(--r-lg)', background: 'oklch(0.55 0.18 168 / 0.06)', border: '1px solid oklch(0.55 0.18 168 / 0.2)', fontSize: 15.5, lineHeight: 1.65, color: 'var(--text)' }}><LegalText text={b.note} /></div>;
  return <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--muted)', margin: '0 0 1rem', textWrap: 'pretty' }}><LegalText text={b} /></p>;
}

function LegalPage() {
  const page = window.LEGAL_PAGE;
  const sections = page.sections.map((s) => ({ ...s, id: legalSlugify(s.title) }));
  const [active, setActive] = React.useState(sections[0] && sections[0].id);
  React.useEffect(() => {
    const onScroll = () => {
      let cur = sections[0] && sections[0].id;
      for (const s of sections) { const el = document.getElementById(s.id); if (el && el.getBoundingClientRect().top < 160) cur = s.id; }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const jump = (e, id) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 110, behavior: 'smooth' }); };

  return (
    <main>
      <section style={{ padding: '150px var(--gutter) 3rem', background: 'oklch(0.97 0.004 200)', borderBottom: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'inline-block', padding: '4px 14px', borderRadius: 'var(--r-pill)', background: 'oklch(0.55 0.18 168 / 0.08)', border: '1px solid oklch(0.55 0.18 168 / 0.25)', fontSize: 12, fontWeight: 700, color: 'var(--green)', letterSpacing: '0.08em', marginBottom: '1.1rem' }}>SEGURANÇA &amp; COMPLIANCE · TS CORP</div>
          <h1 style={{ fontSize: 'clamp(2rem,4.2vw,3.2rem)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.12, marginBottom: '1.25rem', maxWidth: 860 }}>{page.title}</h1>
          {(page.intro || []).map((p, i) => <p key={i} style={{ fontSize: '1.08rem', color: 'var(--muted)', lineHeight: 1.75, maxWidth: 820, marginBottom: '0.9rem', textWrap: 'pretty' }}>{p}</p>)}
          <nav aria-label="Páginas de Segurança & Compliance" className="legal-tabs" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: '2rem' }}>
            {LEGAL_PAGES.map((p) => <a key={p.slug} href={'/' + p.slug} aria-current={p.slug === page.slug ? 'page' : undefined} style={{ padding: '8px 16px', borderRadius: 'var(--r-pill)', fontSize: 14, fontWeight: 600, textDecoration: 'none', border: '1px solid ' + (p.slug === page.slug ? 'var(--text)' : 'var(--border)'), background: p.slug === page.slug ? 'var(--text)' : '#fff', color: p.slug === page.slug ? '#fff' : 'var(--muted)' }}>{p.label}</a>)}
          </nav>
        </div>
      </section>
      <section style={{ padding: '4rem var(--gutter) var(--section-y)' }}>
        <div className="legal-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '260px minmax(0,1fr)', gap: '4rem', alignItems: 'start' }}>
          <aside className="legal-toc" style={{ position: 'sticky', top: 120 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--faint)', marginBottom: '1rem' }}>NESTA PÁGINA</div>
            <div style={{ display: 'grid', gap: 2, borderLeft: '1px solid var(--border)' }}>
              {sections.map((s) => <a key={s.id} href={'#' + s.id} onClick={(e) => jump(e, s.id)} style={{ fontSize: 14, lineHeight: 1.45, padding: '7px 0 7px 14px', marginLeft: -1, textDecoration: 'none', borderLeft: '2px solid ' + (active === s.id ? 'var(--green)' : 'transparent'), color: active === s.id ? 'var(--text)' : 'var(--muted)', fontWeight: active === s.id ? 700 : 500 }}>{s.title}</a>)}
            </div>
          </aside>
          <article style={{ maxWidth: 780 }}>
            {sections.map((s, i) => <section key={s.id} id={s.id} style={{ paddingTop: i ? '2.5rem' : 0, marginTop: i ? '2.5rem' : 0, borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <h2 style={{ fontSize: 'clamp(1.35rem,2.2vw,1.65rem)', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: '1.1rem' }}>{s.title}</h2>
              {s.blocks.map((b, j) => <LegalBlock key={j} b={b} />)}
            </section>)}
            {page.updated && <p style={{ marginTop: '3rem', paddingTop: '1.5rem', borderTop: '1px solid var(--border)', fontSize: 14, color: 'var(--faint)' }}>{page.updated}</p>}
          </article>
        </div>
      </section>
    </main>
  );
}

function LegalApp() {
  return (<><TSNav current="" /><LegalPage /><TSFooter /></>);
}
Object.assign(window, { LegalApp, LEGAL_PAGES });