// ---------- Legal (shared) ----------
function LegalLayout({ title, effective, children, current }) {
  return (
    <SideRailLayout current={current}>
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Legal" title={title} subtitle={`Effective ${effective}. If anything here is unclear, email legal@issuesid.com.`} align="left" />
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32 }} className="legal-grid">
          <nav style={{
            position: 'sticky', top: 24, alignSelf: 'start',
            display: 'flex', flexDirection: 'column', gap: 6,
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>
            {React.Children.toArray(children).filter(c => c?.props?.title).map((c, i) => (
              <a key={i} href={`#${c.props.anchor}`} style={{ color: 'var(--ink-3)', padding: '2px 0' }}>{String(i + 1).padStart(2, '0')} · {c.props.title}</a>
            ))}
          </nav>
          <div style={{ maxWidth: 640, fontSize: 14, lineHeight: 1.7, color: 'var(--ink-2)' }}>
            {children}
          </div>
        </div>
      </Block>
      <style>{`@media(max-width:720px){.legal-grid{grid-template-columns:1fr !important;}}`}</style>
    </SideRailLayout>
  );
}

function LegalSection({ title, anchor, children }) {
  return (
    <section id={anchor} style={{ marginBottom: 32 }}>
      <h3 style={{ fontSize: 18, fontWeight: 500, margin: '0 0 10px', color: 'var(--ink)', letterSpacing: '-0.01em' }}>{title}</h3>
      <div>{children}</div>
    </section>
  );
}

function PrivacyPage() {
  return (
    <LegalLayout title="Privacy Policy" effective="1 March 2026" current="/privacy">
      <LegalSection title="What we collect" anchor="collect">
        <p>When you use IssuesId we collect account details (name, email, company), defect records you create (photos, location, descriptions), and usage telemetry (pages viewed, features used, errors encountered).</p>
      </LegalSection>
      <LegalSection title="How we use it" anchor="use">
        <p>To operate the service, support you, improve the product, and meet legal obligations. We do not sell personal data. We do not train AI models on your defect records.</p>
      </LegalSection>
      <LegalSection title="Data location" anchor="location">
        <p>Your data is stored in Australian data centres by default. Enterprise customers may request EU (Frankfurt) residency. Daily geo-redundant backups are retained for 35 days.</p>
      </LegalSection>
      <LegalSection title="Sub-processors" anchor="subprocessors">
        <p>We use a small set of audited sub-processors (AWS, Twilio for SMS, Postmark for email, Stripe for billing). A full list is maintained at issuesid.com/subprocessors.</p>
      </LegalSection>
      <LegalSection title="Your rights" anchor="rights">
        <p>You may request access to, correction of, or deletion of your personal data at any time by emailing privacy@issuesid.com. We respond within 30 days.</p>
      </LegalSection>
      <LegalSection title="Contact" anchor="contact">
        <p>privacy@issuesid.com · IssuesId Pty Ltd, Level 2, 100 George St, Sydney NSW 2000, Australia.</p>
      </LegalSection>
    </LegalLayout>
  );
}

Object.assign(window, { LegalLayout, LegalSection, PrivacyPage });