/* =============================================================
   Terms of service — long-form legal page
   ============================================================= */

function PageTerms() {
  const sections = [
    { id: 'agreement',  title: '1. Agreement',
      body: 'These Terms govern your use of MedSpaCopy. By creating an account, you agree to them on behalf of your clinic. If you do not agree, do not use the service.' },
    { id: 'eligibility', title: '2. Who can use MedSpaCopy',
      body: 'US-based licensed aesthetic clinics, medical spas, and individual licensed providers. We do not sell to international clinics, non-medical content agencies, or end-patients.' },
    { id: 'scope',       title: '3. What MedSpaCopy is — and is not',
      body: 'MedSpaCopy delivers diagnostic visibility reports and clinical content drafts reviewed by US-licensed physicians. It is not legal advice, not medical advice for patients, not a guarantee of search ranking, and not a substitute for your clinic\'s own compliance program.' },
    { id: 'review',      title: '4. Doctor review and editorial standards',
      body: 'Each delivered article is reviewed by a US-licensed physician for FTC-aware claims, factual accuracy, and clinical safety language. The reviewing physician\'s name appears in the editorial footer of each delivered article. The clinic remains the publisher and is responsible for the final published version.' },
    { id: 'wallet',      title: '5. Wallet, billing, and refunds',
      body: 'You top up your wallet with USD, billed through Stripe. Wallet credits are non-refundable but never expire. Article orders deduct from your wallet balance. If a delivered article fails our editorial standards, we will rewrite or refund the order at our discretion.' },
    { id: 'usage',       title: '6. Usage rights',
      body: 'On payment, you receive a perpetual, irrevocable, exclusive license to publish, edit, and modify the delivered article on properties owned by your clinic. We retain the right to keep an anonymized methodology copy.' },
    { id: 'prohibited',  title: '7. What you cannot do',
      body: 'You may not resell our deliverables to other clinics, use them to make claims that have not been reviewed, attempt to deceive the doctor reviewer about the clinic context, or use the service for non-aesthetic medical content.' },
    { id: 'termination', title: '8. Termination',
      body: 'You can close your account at any time. We may suspend or close accounts that violate these Terms or attempt to misuse the doctor-review system. We will refund unused wallet balance on close, less a $50 processing fee.' },
    { id: 'disclaimers', title: '9. Disclaimers',
      body: 'MedSpaCopy is provided "as is". We make no warranty of fitness for any purpose, no guarantee of search ranking, traffic, or patient acquisition. Editorial review is performed in good faith but does not transfer FTC or state-board liability from your clinic to us.' },
    { id: 'liability',   title: '10. Limitation of liability',
      body: 'Our maximum aggregate liability under these Terms is the amount paid to us by your clinic in the 12 months preceding the claim. We are not liable for indirect, incidental, or consequential damages.' },
    { id: 'law',         title: '11. Governing law',
      body: 'These Terms are governed by the laws of [STATE], United States. Disputes are resolved by binding arbitration in [VENUE], unless prohibited by your state\'s law.' },
    { id: 'changes',     title: '12. Changes',
      body: 'We will email account holders 30 days before any material change. Continued use of the service after the effective date constitutes acceptance.' },
  ];

  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">
            Terms of service.
          </h1>
          <p style={{ fontSize: 17, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 680 }} className="pretty">
            How the service works, what you get, and the lines we won't cross. Plain language first; lawyer language only where it has to be.
          </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 }}>
            Legal questions? <a href="mailto:legal@medspacopy.com" style={{ color: P4.accent, fontWeight: 600 }}>legal@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 wallet refund policy</div>
            <div>2026-02-02 · v 1.03 · added editorial standards section</div>
            <div>2025-12-10 · v 1.02 · launch</div>
          </div>
        </article>
      </div>

      <Footer_v4 />
    </div>
  );
}