// LegalLayout.jsx: the shared frame for the light legal pages (terms,
// acceptable use, subprocessors): title block, a row of links to the other
// legal pages, an optional plain-language summary, a table of contents built
// from the sections, then the sections themselves.
// Needs Shared.jsx and assets/site.css.

const LEGAL_PAGES = [
  { id: 'terms', label: 'Terms of Service', href: '/terms' },
  { id: 'privacy', label: 'Privacy Policy', href: '/privacy' },
  { id: 'acceptable-use', label: 'Acceptable Use Policy', href: '/acceptable-use' },
  { id: 'subprocessors', label: 'Subprocessors', href: '/subprocessors' },
];

const legalText = { fontSize: 16, lineHeight: 1.7, color: '#3a5578', margin: '0 0 16px' };

// Paragraph, list and inline styles for section bodies.
const LP = ({ children, style }) => <p style={{ ...legalText, ...style }}>{children}</p>;
const LUL = ({ children }) => (
  <ul style={{ ...legalText, paddingLeft: 22 }}>{children}</ul>
);
const LLI = ({ children }) => <li style={{ marginBottom: 8 }}>{children}</li>;
const LStrong = ({ children }) => <strong style={{ color: '#0a1220', fontWeight: 600 }}>{children}</strong>;
const LLink = ({ href, children }) => (
  <a href={href} className="sk-link" style={{ fontWeight: 500, textDecoration: 'underline', textUnderlineOffset: 3 }}
    {...(/^https?:/.test(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{children}</a>
);
const LCode = ({ children }) => (
  <code style={{ fontFamily: SK_MONO, fontSize: 13, color: '#13764a', background: '#f2f6fb', padding: '1px 6px', borderRadius: 4 }}>{children}</code>
);

// `sections` is [{ id, title, body }]; numbering comes from the order.
const LegalLayout = ({ page, title, updated, intro, summary, sections }) => (
  <>
    <section className="sk-hero" style={{
      position: 'relative', overflow: 'hidden', paddingTop: 72, paddingBottom: 48,
      background: 'linear-gradient(180deg, #ffffff 0%, #f2f6fb 100%)',
      borderBottom: '1px solid rgba(30,58,100,0.08)',
    }}>
      <GridOverlay mask="radial-gradient(ellipse 70% 70% at 30% 30%, #000 20%, transparent 80%)" />
      <div style={{ position: 'relative', maxWidth: 860, margin: '0 auto' }}>
        <Eyebrow>Legal</Eyebrow>
        <h1 style={{
          fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 700, lineHeight: 1.08, letterSpacing: '-0.03em',
          margin: '0 0 14px', color: '#0a1220',
        }}>{title}</h1>
        <div style={{ fontFamily: SK_MONO, fontSize: 13, color: '#6b7e9a', marginBottom: 24 }}>Last updated {updated}</div>
        <nav aria-label="Legal pages" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {LEGAL_PAGES.map((l) => {
            const on = l.id === page;
            return (
              <a key={l.id} href={l.href} aria-current={on ? 'page' : undefined} style={{
                fontSize: 13, fontWeight: 600, padding: '6px 12px', borderRadius: 9999, textDecoration: 'none',
                background: on ? 'rgba(29,168,105,0.1)' : '#fff',
                color: on ? '#13764a' : '#3a5578',
                border: `1px solid ${on ? 'rgba(29,168,105,0.3)' : 'rgba(30,58,100,0.14)'}`,
              }}>{l.label}</a>
            );
          })}
        </nav>
      </div>
    </section>

    <section className="sk-section" style={{ background: '#fff', paddingTop: 56 }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        {intro}

        {summary && (
          <div style={{
            margin: '8px 0 32px', padding: '22px 24px', borderRadius: 12,
            background: '#f2f6fb', border: '1px solid rgba(30,58,100,0.12)',
          }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#0a1220', marginBottom: 10 }}>The short version</div>
            <ul style={{ ...legalText, fontSize: 15, paddingLeft: 20, margin: '0 0 10px' }}>
              {summary.map((s, i) => <li key={i} style={{ marginBottom: 6 }}>{s}</li>)}
            </ul>
            <div style={{ fontSize: 13, color: '#6b7e9a' }}>This summary is here to help you read what follows. It is not part of the legal text.</div>
          </div>
        )}

        <nav aria-label="Contents" style={{
          margin: '0 0 40px', padding: '18px 22px', borderRadius: 12, border: '1px solid rgba(30,58,100,0.12)',
        }}>
          <div style={{ fontFamily: SK_MONO, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#6b7e9a', marginBottom: 10 }}>Contents</div>
          <ol style={{ margin: 0, paddingLeft: 22, columns: '2 260px', columnGap: 32, fontSize: 14, lineHeight: 1.9 }}>
            {sections.map((s) => (
              <li key={s.id} style={{ breakInside: 'avoid' }}>
                <a href={`#${s.id}`} className="sk-nav-link">{s.title}</a>
              </li>
            ))}
          </ol>
        </nav>

        {sections.map((s, i) => (
          <section key={s.id} id={s.id} style={{ scrollMarginTop: 80, paddingTop: 8, marginBottom: 32 }}>
            <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', color: '#0a1220', margin: '0 0 14px' }}>
              <span style={{ fontFamily: SK_MONO, fontSize: 14, color: '#1da869', marginRight: 10 }}>{i + 1}.</span>{s.title}
            </h2>
            {s.body}
          </section>
        ))}
      </div>
    </section>
  </>
);

Object.assign(window, { LEGAL_PAGES, LegalLayout, LP, LUL, LLI, LStrong, LLink, LCode });