function LegalHero({ label, title, intro, lastUpdated }) {
  return (
    <section style={{ background: 'var(--surface-page)', padding: '64px var(--space-5) 40px' }}>
      <div style={{ maxWidth: 840, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700, color: 'var(--blue-600)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 16 }}>{label}</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--text-h1-weight)', fontSize: 'clamp(32px, 4.4vw, 44px)', lineHeight: 1.15, color: 'var(--text-heading)', margin: '0 0 20px' }}>{title}</h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.65, color: 'var(--text-body)', margin: '0 0 12px', maxWidth: 620 }}>{intro}</p>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', margin: 0 }}>Last Updated: {lastUpdated}</p>
      </div>
    </section>
  );
}

function PolicySection({ id, title, children }) {
  return (
    <section id={id} style={{ padding: '36px 0', borderTop: '1px solid var(--border-default)', scrollMarginTop: 110 }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--text-h2-weight)', fontSize: 'clamp(21px, 2.4vw, 26px)', lineHeight: 1.25, color: 'var(--text-heading)', margin: '0 0 16px' }}>{title}</h2>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-body)' }}>{children}</div>
    </section>
  );
}

function PolicyList({ items }) {
  return (
    <ul style={{ margin: '12px 0 20px', paddingLeft: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map((it, i) => (<li key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-body)' }}>{it}</li>))}
    </ul>
  );
}

function InlinePolicyLink({ href, children }) {
  return <a href={href || '#'} style={{ color: 'var(--blue-600)', fontWeight: 600, textDecoration: 'underline' }}>{children}</a>;
}

function ContactPanel({ heading, copy, address, phone, email }) {
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: '32px', marginTop: 8 }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20, color: 'var(--text-heading)', margin: '0 0 10px' }}>{heading}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 20px' }}>{copy}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-body)' }}>{address}</div>
        <a href={`tel:${phone.replace(/[^\d+]/g, '')}`} style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--blue-600)', fontWeight: 600, textDecoration: 'none' }}>{phone}</a>
        <a href={`mailto:${email}`} style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--blue-600)', fontWeight: 600, textDecoration: 'none' }}>{email}</a>
      </div>
    </div>
  );
}

function LegalPageNav({ active }) {
  const items = [
    { label: 'Privacy Policy', href: 'Privacy Policy.html' },
    { label: 'Terms of Use', href: 'Terms of Use.html' },
    { label: 'Cookie Policy', href: 'Cookie Policy.html' },
    { label: 'Accessibility Statement', href: 'Accessibility.html' },
    { label: 'Website Disclaimer', href: 'Website Disclaimer.html' },
  ];
  return (
    <nav aria-label="Legal pages" style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 20px', padding: '28px 0 0' }}>
      {items.map((it) => (
        <a key={it.label} href={it.href} aria-current={it.label === active ? 'page' : undefined} style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: it.label === active ? 700 : 500, color: it.label === active ? 'var(--blue-600)' : 'var(--text-muted)', textDecoration: 'none' }}>{it.label}</a>
      ))}
    </nav>
  );
}

function TOCNav({ sections, activeId }) {
  return (
    <nav aria-label="Table of contents" style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {sections.map((s) => (
        <a key={s.id} href={`#${s.id}`} style={{ fontFamily: 'var(--font-body)', fontSize: 14, padding: '8px 0 8px 14px', borderLeft: activeId === s.id ? '2px solid var(--blue-500)' : '2px solid transparent', color: activeId === s.id ? 'var(--blue-700)' : 'var(--text-muted)', fontWeight: activeId === s.id ? 600 : 500, textDecoration: 'none', transition: 'color 150ms, border-color 150ms' }}>{s.title}</a>
      ))}
    </nav>
  );
}

function MobileTOC({ sections, activeId }) {
  return (
    <details className="legal-toc-mobile" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '14px 18px', marginBottom: 32 }}>
      <summary style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--text-heading)', cursor: 'pointer' }}>On this page</summary>
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 14 }}>
        {sections.map((s) => (<a key={s.id} href={`#${s.id}`} style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: activeId === s.id ? 'var(--blue-600)' : 'var(--text-body)', fontWeight: activeId === s.id ? 600 : 500, textDecoration: 'none', padding: '8px 0' }}>{s.title}</a>))}
      </nav>
    </details>
  );
}

function SafetyCallout({ heading, children }) {
  return (
    <div style={{ background: 'var(--blue-50)', border: '1px solid var(--blue-100)', borderLeft: '3px solid var(--blue-500)', borderRadius: 'var(--radius-md)', padding: '20px 24px', margin: '20px 0' }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--blue-700)', margin: '0 0 8px' }}>{heading}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{children}</p>
    </div>
  );
}

Object.assign(window, { LegalHero, PolicySection, PolicyList, InlinePolicyLink, ContactPanel, LegalPageNav, TOCNav, MobileTOC, SafetyCallout });