/* =============================================================
   Privacy — long-form legal page
   Placeholder structure with TODO markers for content agent.
   ============================================================= */

function PagePrivacy() {
  const sections = [
    { id: 'who',         title: '1. Who we are',
      body: 'MedSpaCopy is a service operated by [LEGAL_ENTITY] from [JURISDICTION]. We provide diagnostic SEO/AI-search reports and doctor-reviewed clinical content for licensed US aesthetic clinics.' },
    { id: 'what',        title: '2. What we collect',
      body: 'When you run a free visibility report, we collect the URL you submit and your work email. When you order content, we collect billing information through our payment processor and the brief you write. We do not collect protected health information (PHI), and our service is not intended for transmitting it.' },
    { id: 'why',         title: '3. Why we collect it',
      body: 'To deliver the report or the article you ordered, to send transactional email about your account, to improve our editorial methodology, and to comply with US tax and accounting law.' },
    { id: 'review',      title: '4. How doctor review works',
      body: 'Articles are reviewed by US-licensed physicians under contract with MedSpaCopy. Reviewers see only the article draft, the clinic name, and the editorial brief — no patient data. Each reviewer signs a confidentiality and FTC-claims compliance agreement.' },
    { id: 'sharing',     title: '5. Who we share data with',
      body: 'Stripe (payments), AWS (hosting), Loops (transactional email), and the assigned medical reviewer for the duration of the review. We do not sell data, and we do not share it with advertising networks.' },
    { id: 'retention',   title: '6. How long we keep it',
      body: 'Reports and account data: for as long as your account is open, plus 24 months after closure for accounting. Anonymized methodology samples may be kept indefinitely.' },
    { id: 'rights',      title: '7. Your rights',
      body: 'You can request access, correction, or deletion of your data at any time at privacy@medspacopy.com. California residents have additional rights under CCPA. EU/UK residents — we are not a controller for EU/UK personal data.' },
    { id: 'cookies',     title: '8. Cookies',
      body: 'A session cookie for sign-in, a preference cookie for theme. No third-party advertising or analytics cookies. Optional analytics through privacy-respecting tooling (Plausible).' },
    { id: 'children',    title: '9. Children',
      body: 'Our service is for licensed clinics and their staff. We do not knowingly collect data from anyone under 18.' },
    { id: 'changes',     title: '10. Changes',
      body: 'We will email account holders before any material change to this policy. Minor edits (typos, clarifications) are logged in the change history below.' },
  ];

  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: P4.ink, '--font-display': FONT_SERIF, background: '#fff' }}>
      <Header_v4 />

      <div style={{ padding: '56px 56px 28px', background: P4.surfaceTint, borderBottom: `1px solid ${P4.borderWarm}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -260, right: -240, opacity: 0.4 }}>
          <SignalGrid_v4 size={620} faint />
        </div>
        <div style={{ position: 'relative', maxWidth: 880 }}>
          <MonoKicker_v4 mb={14}>Legal · Updated 2026-04-15 · v 1.04</MonoKicker_v4>
          <h1 style={{ fontFamily: FONT_SERIF, fontSize: 48, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 14, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
            Privacy policy.
          </h1>
          <p style={{ fontSize: 17, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 680 }} className="pretty">
            What we collect, why we collect it, and the lines we don't cross. Written so you can read it in five minutes.
          </p>
        </div>
      </div>

      <div style={{ padding: '64px 56px 96px', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48, alignItems: 'flex-start', maxWidth: 1280, margin: '0 auto' }}>
        <nav style={{ position: 'sticky', top: 24, alignSelf: 'start' }}>
          <MonoKicker_v4 mb={14}>On this page</MonoKicker_v4>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
            {sections.map(s => (
              <li key={s.id}>
                <a href={`#${s.id}`} style={{ color: P4.inkMid, textDecoration: 'none', display: 'block', padding: '4px 0' }}>{s.title}</a>
              </li>
            ))}
          </ul>
          <hr style={{ border: 0, borderTop: `1px solid ${P4.border}`, margin: '20px 0' }} />
          <div style={{ fontSize: 12.5, color: P4.inkSoft, lineHeight: 1.55 }}>
            Questions about this policy? <a href="mailto:privacy@medspacopy.com" style={{ color: P4.accent, fontWeight: 600 }}>privacy@medspacopy.com</a>
          </div>
        </nav>

        <article style={{ maxWidth: 720 }}>
          {sections.map(s => (
            <section key={s.id} id={s.id} style={{ marginBottom: 36, scrollMarginTop: 80 }}>
              <h2 style={{ fontFamily: FONT_SERIF, fontSize: 24, fontWeight: 450, letterSpacing: '-0.015em', marginBottom: 12, fontVariationSettings: "'opsz' 72, 'SOFT' 50" }}>{s.title}</h2>
              <p style={{ fontSize: 15.5, lineHeight: 1.7, color: P4.inkMid }} className="pretty">{s.body}</p>
            </section>
          ))}

          <hr style={{ border: 0, borderTop: `1px solid ${P4.border}`, margin: '48px 0 24px' }} />
          <div style={{ fontSize: 12.5, color: P4.inkSoft, lineHeight: 1.55, fontFamily: FONT_MONO }}>
            <div>2026-04-15 · v 1.04 · clarified retention policy</div>
            <div>2026-02-02 · v 1.03 · added FTC-claims compliance language</div>
            <div>2025-12-10 · v 1.02 · launch</div>
          </div>
        </article>
      </div>

      <Footer_v4 />
    </div>
  );
}