/* About page — bio for the founder plus legal documents (privacy, terms of service,
   medical disclaimer) via anchor links. */

const ABOUT_SECTIONS = [
  { id: 'bio',        title: 'Bio',                soon: false },
  { id: 'privacy',    title: 'Privacy policy',     soon: false },
  { id: 'terms',      title: 'Terms of service',   soon: false },
  { id: 'disclaimer', title: 'Medical Disclaimer', soon: false },
];

/* ── Shared legal text styles ── */
const ls = {
  section: { marginBottom: 28 },
  h3: { fontSize: 15.5, fontWeight: 700, color: 'var(--text)', margin: '0 0 10px', letterSpacing: -0.2, lineHeight: 1.3 },
  h4: { fontSize: 14, fontWeight: 700, color: 'var(--text)', margin: '18px 0 6px', letterSpacing: -0.1 },
  p:  { fontSize: 14, lineHeight: 1.7, color: 'var(--muted)', margin: '0 0 10px', textWrap: 'pretty' },
  ul: { margin: '6px 0 12px', paddingLeft: 22 },
  li: { fontSize: 14, lineHeight: 1.65, color: 'var(--muted)', marginBottom: 5 },
};

/* ──────────────────────────────────────────────────────
   TERMS OF SERVICE — Version 1.0, OrthoVaultOS LLC
   ────────────────────────────────────────────────────── */
function TermsContent() {
  return (
    <div style={{ maxWidth: 720 }}>
      <p style={{ ...ls.p, color: 'var(--subtle)', fontStyle: 'italic', marginBottom: 24 }}>
        Version 1.0 &nbsp;·&nbsp; Last updated: July 11, 2026
      </p>

      <div style={ls.section}>
        <h3 style={ls.h3}>1. Overview &amp; Acceptance</h3>
        <p style={ls.p}>OrthoVaultOS ("Application" or "App") is a personal notes and surgical workflow organization tool designed to help orthopedic surgeons and surgical residents organize their own surgical notes, procedural reminders, and educational reference material.</p>
        <p style={ls.p}>By accessing, downloading, or using the Application, you ("User" or "you") agree to be bound by these Terms of Service ("Terms"). If you do not agree to these Terms, you must not access or use the Application. Your continued use of the Application following the posting of updated Terms means you accept and agree to the changes.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>2. Eligibility &amp; Licensing Requirements</h3>
        <p style={ls.p}>You represent and warrant that:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>You are at least 18 years of age</li>
          <li style={ls.li}>You are a licensed or credentialed healthcare professional (physician, resident, nurse, physician assistant, or other qualified healthcare provider)</li>
          <li style={ls.li}>You have the authority to enter into these Terms</li>
          <li style={ls.li}>You will use the Application in compliance with all applicable laws and your professional obligations</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>3. Subscription, Billing &amp; Cancellation</h3>
        <h4 style={ls.h4}>3.1 Subscription Plans</h4>
        <p style={ls.p}>The Application is available through three subscription tiers:</p>
        <ul style={ls.ul}>
          <li style={ls.li}><strong>Free Tier:</strong> Limited features (1 surgeon, 1 procedure)</li>
          <li style={ls.li}><strong>Essentials Tier:</strong> $9.99/month (up to 10 surgeons, up to 20 procedures)</li>
          <li style={ls.li}><strong>Professional Tier:</strong> $19.99/month (unlimited surgeons and procedures, cloud photo sync, synced across up to 3 devices)</li>
        </ul>
        <p style={ls.p}>Pricing is subject to change at any time, but price changes will not apply to your current subscription during your current billing period. We will provide at least 30 days' notice of any price increases.</p>

        <h4 style={ls.h4}>3.2 Automatic Renewal</h4>
        <p style={ls.p}>Your subscription will automatically renew at the end of each billing period unless you cancel. You will be charged the subscription fee each month using the payment method you provide at checkout.</p>

        <h4 style={ls.h4}>3.3 Cancellation</h4>
        <p style={ls.p}>You may cancel your subscription at any time through your account settings. Cancellation will be effective at the end of your current billing period. You will retain access to your account and notes through the end of your current billing period.</p>

        <h4 style={ls.h4}>3.4 Refunds</h4>
        <p style={ls.p}>We do not offer refunds for partial months of service. If you cancel mid-month, you will retain access through the end of that billing period, but no refund will be issued. If you believe you were charged in error, contact us at hello@orthovaultos.com within 30 days of the charge.</p>

        <h4 style={ls.h4}>3.5 Payment Method</h4>
        <p style={ls.p}>You authorize OrthoVaultOS LLC to charge the payment method you provide for your subscription. You agree to maintain accurate and complete payment information. If your payment method is declined, we may attempt to charge it again, and you are responsible for any resulting fees.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>4. No Medical Advice &amp; User Responsibility</h3>
        <p style={ls.p}>The Application is an educational and workflow organization tool only. It does NOT:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Provide medical advice, diagnosis, or treatment recommendations</li>
          <li style={ls.li}>Replace your clinical judgment or professional obligations</li>
          <li style={ls.li}>Substitute for consultation with your attending surgeon or supervisor</li>
          <li style={ls.li}>Replace your institution's protocols, policies, or procedures</li>
          <li style={ls.li}>Serve as an official medical record or clinical documentation system</li>
        </ul>
        <p style={ls.p}>You acknowledge and agree that:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>You are solely responsible for all clinical decisions and their outcomes</li>
          <li style={ls.li}>You will independently verify all reference information before clinical use</li>
          <li style={ls.li}>You will follow your institution's protocols and policies, not the Application</li>
          <li style={ls.li}>You will consult your attending surgeon for all surgical decisions</li>
          <li style={ls.li}>You understand the Application is a personal notes tool, not a clinical system</li>
          <li style={ls.li}>Clinical outcomes depend on many factors beyond the Application</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>5. No Patient Data &amp; Privacy Responsibility</h3>
        <p style={ls.p}>The Application is NOT designed to store, process, or transmit patient-identifiable information (PII), protected health information (PHI), or any confidential medical data.</p>
        <p style={ls.p}>You agree that you will:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>NOT input patient names, medical record numbers, or identifiers</li>
          <li style={ls.li}>NOT input patient diagnoses, imaging, medical history, or clinical details</li>
          <li style={ls.li}>NOT input any information that could identify a patient</li>
          <li style={ls.li}>NOT use the Application for official patient medical records</li>
          <li style={ls.li}>NOT input any confidential or sensitive information you cannot afford to lose</li>
        </ul>
        <p style={ls.p}>If you do input any patient information, you do so at your own risk, understanding that the Application does not provide healthcare-grade security, data may be lost or accessed by unauthorized parties, you may be violating institutional policies and HIPAA regulations, and you should immediately notify OrthoVaultOS LLC and request deletion. You are responsible for compliance with HIPAA, institutional policies, and all applicable healthcare privacy regulations.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>6. Account Registration &amp; Security</h3>
        <h4 style={ls.h4}>6.1 Account Creation</h4>
        <p style={ls.p}>To use certain features of the Application, you must create an account. You agree to provide accurate, complete, and current information; maintain the confidentiality of your login credentials; immediately notify us of any unauthorized access; and accept responsibility for all activity under your account.</p>

        <h4 style={ls.h4}>6.2 Account Security</h4>
        <p style={ls.p}>You are responsible for maintaining the security of your account credentials. OrthoVaultOS LLC will not be liable for any unauthorized use of your account, loss of data, or other harm resulting from disclosure of your credentials.</p>

        <h4 style={ls.h4}>6.3 Password Requirements</h4>
        <p style={ls.p}>You agree to maintain a strong password and change it regularly. You should not share your password with anyone else.</p>

        <h4 style={ls.h4}>6.4 Account Termination</h4>
        <p style={ls.p}>OrthoVaultOS LLC may suspend or terminate your account if you violate these Terms, misuse the Application, input prohibited information (such as patient data), your subscription lapses, or you request deletion. Upon termination, your access ends immediately. If you request account deletion, all of your cloud data is wiped from our systems — export your personal notes first if you want to keep a copy. Residual backups are purged within 90 days.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>7. User-Generated Content &amp; Data Ownership</h3>
        <h4 style={ls.h4}>7.1 Your Notes &amp; Data</h4>
        <p style={ls.p}>You retain ownership of the personal notes, reminders, and content you create and store in the Application ("User Content").</p>

        <h4 style={ls.h4}>7.2 License to OrthoVaultOS LLC</h4>
        <p style={ls.p}>By storing User Content in the Application, you grant OrthoVaultOS LLC a worldwide, non-exclusive, royalty-free license to store and backup your User Content on our servers, replicate it for redundancy and disaster recovery, analyze aggregated de-identified data for product improvement, and delete User Content as required by law or these Terms. If you delete your account, all of your cloud data is wiped from our systems, with residual backups purged within 90 days.</p>

        <h4 style={ls.h4}>7.3 Restrictions</h4>
        <p style={ls.p}>OrthoVaultOS LLC will NOT share your User Content with third parties (except as required by law), use it for marketing, identify you personally in connection with it, or use it without your permission beyond what is needed to provide the service.</p>

        <h4 style={ls.h4}>7.4 Data Export &amp; Portability</h4>
        <p style={ls.p}>Upon reasonable request, we will provide you with a copy of your User Content in a portable format. Requests should be directed to hello@orthovaultos.com.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>8. Intellectual Property Rights</h3>
        <p style={ls.p}>All content, features, and functionality of the Application — including procedural templates, surgical guides, design, layout, software code, trademarks, and logos — are owned by or licensed to OrthoVaultOS LLC and protected by copyright, trademark, and other intellectual property laws. You may not copy, reverse engineer, distribute, sell, modify, or use the Application for any purpose other than personal, non-commercial use.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>9. Third-Party Services &amp; Integrations</h3>
        <p style={ls.p}>The Application may use third-party services including cloud hosting providers, payment processors, and analytics providers. OrthoVaultOS LLC is not responsible for third-party services; your use of them is governed by their own terms and privacy policies.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>10. Acceptable Use Policy</h3>
        <p style={ls.p}>You agree that you will NOT use the Application to:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Violate any applicable law or regulation</li>
          <li style={ls.li}>Input, transmit, or store PHI or patient-identifiable information</li>
          <li style={ls.li}>Input, transmit, or store any confidential or sensitive medical data</li>
          <li style={ls.li}>Reverse engineer, hack, or disrupt the Application</li>
          <li style={ls.li}>Access the Application through automated means without permission</li>
          <li style={ls.li}>Attempt to gain unauthorized access to user accounts or data</li>
          <li style={ls.li}>Harass, threaten, or engage in malicious behavior toward other users</li>
          <li style={ls.li}>Transmit malware, viruses, or malicious code</li>
          <li style={ls.li}>Use the Application for commercial purposes</li>
        </ul>
        <p style={ls.p}>Violation may result in immediate account suspension or termination.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>11. Confidentiality &amp; Support Access</h3>
        <p style={ls.p}>If you request technical support, you may need to provide access to your account or notes to diagnose issues. By requesting support, you authorize OrthoVaultOS LLC to access your account and User Content for troubleshooting. All support personnel will maintain confidentiality of your information to the extent permitted by law.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>12. Disclaimer of Warranties</h3>
        <p style={{ ...ls.p, fontWeight: 600, color: 'var(--text)' }}>THE APPLICATION IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT ANY WARRANTIES, EXPRESS OR IMPLIED.</p>
        <p style={ls.p}>OrthoVaultOS LLC does NOT warrant that the Application will meet your needs, be error-free or uninterrupted, contain accurate or current information, be compatible with your devices, or that any third-party services will function properly.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>13. Limitation of Liability</h3>
        <p style={{ ...ls.p, fontWeight: 600, color: 'var(--text)' }}>TO THE FULLEST EXTENT PERMITTED BY APPLICABLE LAW, OrthoVaultOS LLC SHALL NOT BE LIABLE FOR:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Any direct, indirect, incidental, special, or consequential damages</li>
          <li style={ls.li}>Loss of data, notes, or User Content</li>
          <li style={ls.li}>Loss of revenue, profits, or business opportunity</li>
          <li style={ls.li}>Clinical outcomes or patient harm</li>
          <li style={ls.li}>Errors, omissions, or inaccuracies in Application content</li>
          <li style={ls.li}>Unauthorized access to your account or data</li>
          <li style={ls.li}>Interruption or unavailability of the Application</li>
          <li style={ls.li}>Third-party services or integrations</li>
        </ul>
        <p style={ls.p}>This limitation does NOT apply to gross negligence, willful misconduct, fraud, or violations of law that cannot be waived.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>14. Indemnification</h3>
        <p style={ls.p}>You agree to indemnify, defend, and hold harmless OrthoVaultOS LLC, its officers, directors, employees, and agents from any claims, damages, losses, or expenses (including reasonable attorneys' fees) arising from your use of the Application, violation of these Terms, violation of any law, input of prohibited information, or any harm caused by your clinical use of information from the Application.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>15. Privacy &amp; Data Collection</h3>
        <p style={ls.p}>Your use of the Application is subject to our Privacy Policy. We collect information about your IP address, browser type, pages visited, and usage analytics for product improvement. Please review the Privacy Policy for full details.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>16. Communications &amp; Notifications</h3>
        <p style={ls.p}>By using the Application, you agree to receive administrative communications, service-related notifications, and legal notices. Marketing communications can be opted out of. We may communicate via email, in-app notifications, or other reasonable methods.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>17. Availability &amp; Maintenance</h3>
        <p style={ls.p}>OrthoVaultOS LLC does not guarantee uninterrupted access. We may perform maintenance, temporarily suspend access for security or operational reasons, or modify features without notice. We will make reasonable efforts to minimize disruption and provide advance notice of planned downtime when possible.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>18. Changes to Terms &amp; Services</h3>
        <p style={ls.p}>OrthoVaultOS LLC may update these Terms at any time. We will post updated Terms and update the "Last Updated" date. For material changes, we will provide at least 30 days' notice. Continued use constitutes acceptance. If you do not agree, you must discontinue use and cancel your account.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>19. Governing Law &amp; Dispute Resolution</h3>
        <h4 style={ls.h4}>19.1 Governing Law</h4>
        <p style={ls.p}>These Terms are governed by the laws of California, United States, without regard to conflict of law principles.</p>

        <h4 style={ls.h4}>19.2 Dispute Resolution</h4>
        <p style={ls.p}>You and OrthoVaultOS LLC agree that any dispute will be resolved by binding arbitration, except for claims of injunctive relief, small claims, or OrthoVaultOS LLC's claims for non-payment or IP infringement. You agree not to bring claims on a class action basis.</p>

        <h4 style={ls.h4}>19.3 Informal Resolution</h4>
        <p style={ls.p}>Before formal dispute resolution, you agree to contact us at hello@orthovaultos.com to attempt informal resolution. We will attempt to resolve your concern within 30 days.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>20. Severability &amp; Entire Agreement</h3>
        <p style={ls.p}>If any provision of these Terms is found unenforceable, it will be modified to the minimum extent necessary or severed. These Terms, together with the Medical Disclaimer and Privacy Policy, constitute the entire agreement between you and OrthoVaultOS LLC.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>21. No Waiver</h3>
        <p style={ls.p}>Failure by OrthoVaultOS LLC to enforce any provision of these Terms does not waive our right to enforce it in the future.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>22. Contact &amp; Support</h3>
        <p style={ls.p}>For questions regarding these Terms:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Email: hello@orthovaultos.com</li>
          <li style={ls.li}>Support form: https://orthovaultos.com/support.html</li>
        </ul>
        <p style={ls.p}>OrthoVaultOS LLC will respond to inquiries within 2 business days.</p>
      </div>

    </div>
  );
}

/* ──────────────────────────────────────────────────────
   MEDICAL DISCLAIMER — Version 1.0, OrthoVaultOS LLC
   ────────────────────────────────────────────────────── */
function DisclaimerContent() {
  return (
    <div style={{ maxWidth: 720 }}>
      <p style={{ ...ls.p, color: 'var(--subtle)', fontStyle: 'italic', marginBottom: 24 }}>
        Version 1.0 &nbsp;·&nbsp; Last updated: July 11, 2026
      </p>

      <div style={ls.section}>
        <h3 style={ls.h3}>1. What This Application Is</h3>
        <p style={ls.p}>OrthoVaultOS ("Application") is a personal notes and surgical workflow organization tool designed to help orthopedic surgeons and residents organize their own surgical notes, procedural reminders, and educational reference material.</p>
        <p style={ls.p}>This is NOT a clinical record system, electronic health record (EHR), or official medical documentation tool. This Application is for personal use and educational purposes only.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>2. NOT a Medical Device or Clinical System</h3>
        <p style={ls.p}>This Application:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Is not a medical device under FDA regulations</li>
          <li style={ls.li}>Is not intended for official patient medical records</li>
          <li style={ls.li}>Is not a substitute for institutional EHR systems</li>
          <li style={ls.li}>Is not intended for clinical decision-making documentation</li>
          <li style={ls.li}>Is not compliant with HIPAA, security regulations, or healthcare standards</li>
          <li style={ls.li}>Is a personal notes app similar to a notebook or personal planning tool</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>3. NOT a Substitute for Professional Judgment</h3>
        <p style={ls.p}>The Application is designed to help you organize your own surgical notes, reminders, and educational material. It is not a substitute for independent clinical judgment, professional medical advice, or consultation with your attending surgeon, institutional guidelines, or institutional protocols.</p>
        <p style={ls.p}>All clinical and surgical decisions remain solely your responsibility and must be based on:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Direct evaluation of the patient</li>
          <li style={ls.li}>Your independent medical judgment</li>
          <li style={ls.li}>Current clinical guidelines and evidence-based practice</li>
          <li style={ls.li}>Your institution's protocols and policies</li>
          <li style={ls.li}>Consultation with appropriate colleagues and supervisors</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>4. Personal Notes Only — NOT Official Records</h3>
        <p style={ls.p}>The information you store in this Application (your notes, reminders, case documentation) are personal notes only and are:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Not part of the official medical record</li>
          <li style={ls.li}>Not official clinical documentation</li>
          <li style={ls.li}>Not intended for clinical care decisions</li>
          <li style={ls.li}>For your personal educational and workflow use only</li>
          <li style={ls.li}>Your personal responsibility to organize and verify</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>5. Content Accuracy &amp; Limitations</h3>
        <p style={ls.p}>The reference content provided in this Application (procedural information, post-operative protocols, surgical techniques, clinical references):</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Is provided on an "as-is" basis without warranties</li>
          <li style={ls.li}>May not reflect current clinical guidelines or evidence-based practice</li>
          <li style={ls.li}>May not align with your institution's protocols or your surgeon's preferences</li>
          <li style={ls.li}>May contain errors, omissions, or outdated information</li>
          <li style={ls.li}>Is for your personal reference only</li>
        </ul>
        <p style={ls.p}>You are solely responsible for independently verifying all reference information before applying it in any clinical context.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>6. Individual Surgeon Variation &amp; Technique Differences</h3>
        <p style={ls.p}>Orthopedic surgical practice involves significant variation in technique, approach, and post-operative management. The reference content in the Application may present one approach, may not capture all variations, or may differ from your attending surgeon's technique or your institution's protocols.</p>
        <p style={ls.p}>You must always reconcile any reference material with your attending surgeon's instructions and your institution's official protocols.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>7. This is NOT an Official Medical Record</h3>
        <p style={ls.p}>Your notes in this Application are not official patient records and should not be used for:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Official clinical documentation</li>
          <li style={ls.li}>Patient medical records</li>
          <li style={ls.li}>Billing or coding purposes</li>
          <li style={ls.li}>Compliance or regulatory documentation</li>
          <li style={ls.li}>Official institutional records</li>
        </ul>
        <p style={ls.p}>Your institution's official EHR is the source of truth for all patient care documentation.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>8. No Patient Information Storage</h3>
        <p style={ls.p}>This Application is not designed to store patient information. While the Application does not prevent you from entering information, users should:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Not enter patient names, medical record numbers, or identifiers</li>
          <li style={ls.li}>Not enter specific patient diagnoses or medical details</li>
          <li style={ls.li}>Use the Application only for personal notes and workflow</li>
        </ul>
        <p style={ls.p}>If you do enter any patient information, you are responsible for understanding that the Application does not protect this information with healthcare-grade security, does not comply with HIPAA or healthcare regulations, and data may be subject to loss, breach, or unauthorized access.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>9. Data Security &amp; Backup Disclaimers</h3>
        <p style={ls.p}>The Application does not guarantee protection of data from loss, corruption, or unauthorized access; security compliance with HIPAA, SOC 2, or any healthcare standard; recovery of deleted or lost data; encryption of data transmitted or stored; or backup or redundancy of your notes.</p>
        <p style={ls.p}>This is a personal notes app with standard consumer-grade security, not a healthcare-grade system. Users are responsible for maintaining independent backups, understanding the security limitations, and not storing sensitive information they cannot afford to lose.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>10. No Physician-Patient Relationship</h3>
        <p style={ls.p}>Use of this Application does not establish a physician-patient relationship between you and OrthoVaultOS LLC or its developers. The Application does not provide personalized medical advice for any specific patient.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>11. Limitation of Liability</h3>
        <p style={{ ...ls.p, fontWeight: 600, color: 'var(--text)' }}>TO THE FULLEST EXTENT PERMITTED BY APPLICABLE LAW, OrthoVaultOS LLC, its developers, employees, agents, and content providers are not liable for:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Any direct, indirect, incidental, special, or consequential damages</li>
          <li style={ls.li}>Errors, omissions, or inaccuracies in reference content</li>
          <li style={ls.li}>Data loss, corruption, or inability to access your notes</li>
          <li style={ls.li}>Clinical outcomes or patient harm from your use of the Application</li>
          <li style={ls.li}>Breach of security or unauthorized access to your notes</li>
          <li style={ls.li}>Loss or inability to recover deleted data</li>
        </ul>
        <p style={ls.p}>This disclaimer does NOT waive liability for gross negligence, willful misconduct, or violations of law.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>12. User Responsibility &amp; Indemnification</h3>
        <p style={ls.p}>By using this Application, you:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Acknowledge this is a personal notes app, not a clinical record system</li>
          <li style={ls.li}>Understand it is not designed for official medical documentation</li>
          <li style={ls.li}>Agree to independently verify all reference content before clinical use</li>
          <li style={ls.li}>Will consult your attending surgeon and institutional protocols</li>
          <li style={ls.li}>Understand this Application will not serve as official documentation</li>
          <li style={ls.li}>Assume all risks associated with using a personal notes app for surgical workflows</li>
          <li style={ls.li}>Will not rely on this Application for patient safety, clinical outcomes, or official documentation</li>
        </ul>
        <p style={ls.p}>You agree to indemnify and hold harmless OrthoVaultOS LLC, its developers, employees, and agents from any claims arising from your use of the Application or violation of this disclaimer.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>13. Operative Report Notes</h3>
        <p style={ls.p}>If you use this Application to organize notes from your own operative reports:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>These are your personal notes only, not official records</li>
          <li style={ls.li}>Your institution's official operative report in the EHR is the legal medical record</li>
          <li style={ls.li}>Your personal notes should not be used in place of official documentation</li>
          <li style={ls.li}>Verify your institutional policy on personal note-taking during or after cases</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>14. Photographs &amp; Media</h3>
        <p style={ls.p}>Users uploading photos or media should:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Be aware the Application does not provide healthcare-grade security for images</li>
          <li style={ls.li}>Understand that any patient information in images is at risk of loss or breach</li>
          <li style={ls.li}>Comply with their institution's policy on photo documentation</li>
          <li style={ls.li}>Only store images that they would be comfortable losing or having accessed</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>15. Clinical Setting Use</h3>
        <p style={ls.p}>When using the Application in clinical settings (including operating rooms):</p>
        <ul style={ls.ul}>
          <li style={ls.li}>Ensure use complies with institutional policies</li>
          <li style={ls.li}>Verify use does not interfere with patient care or safety</li>
          <li style={ls.li}>Ensure compliance with sterility and safety protocols</li>
          <li style={ls.li}>Maintain clinical focus and judgment as your priority</li>
          <li style={ls.li}>Remember this is a personal workflow tool, not a clinical system</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>16. Resident / Trainee Specific</h3>
        <p style={ls.p}>If you are a surgical resident or trainee: This Application is designed to support your personal learning and organization. All surgical decisions, techniques, and post-operative protocols must be approved and verified by your supervising attending surgeon. This Application does not replace direct supervision, mentorship, or instruction from your attending surgeon.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>17. Differences From Official Systems</h3>
        <p style={ls.p}>This Application is fundamentally different from your institution's EHR, official operative report systems, clinical decision support systems, and HIPAA-compliant medical documentation tools. Do not treat this Application as a substitute for official institutional systems.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>18. Institutional Use Clarification</h3>
        <p style={ls.p}>If your surgical program or institution uses this Application:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>This remains a personal notes app for individual surgeons/residents</li>
          <li style={ls.li}>Your institution's official records are maintained in your institutional EHR</li>
          <li style={ls.li}>This Application should not be used for official clinical documentation</li>
          <li style={ls.li}>Users remain responsible for compliance with institutional policies</li>
        </ul>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>19. Governing Law</h3>
        <p style={ls.p}>This disclaimer is governed by the laws of California, United States, without regard to conflict of laws. Any legal claim must be brought in the courts of California.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>20. Severability</h3>
        <p style={ls.p}>If any provision is found unenforceable, that provision is severable, and all other provisions remain in full force.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>21. Acknowledgment of Understanding</h3>
        <p style={{ ...ls.p, fontWeight: 600, color: 'var(--text)' }}>BY USING THIS APPLICATION, YOU ACKNOWLEDGE THAT:</p>
        <ul style={ls.ul}>
          <li style={ls.li}>You have read and understood this entire disclaimer</li>
          <li style={ls.li}>You understand this is a personal notes app, not a clinical record system</li>
          <li style={ls.li}>You understand the Application lacks healthcare-grade security and compliance</li>
          <li style={ls.li}>You will not rely on this Application for official medical documentation</li>
          <li style={ls.li}>You will not use this Application as a substitute for your institutional EHR</li>
          <li style={ls.li}>You will independently verify all reference content before clinical use</li>
          <li style={ls.li}>You will consult your attending surgeon and institutional protocols</li>
          <li style={ls.li}>You assume all risks associated with using a personal workflow tool</li>
          <li style={ls.li}>Clinical outcomes depend on many factors beyond this Application</li>
          <li style={ls.li}>OrthoVaultOS LLC assumes no responsibility for clinical outcomes or patient safety</li>
        </ul>
      </div>

    </div>
  );
}

/* ── Placeholder copy for sections awaiting content ── */
function placeholderCopy(id) {
  switch (id) {
    case 'privacy':
      return 'The full privacy policy will be posted here. It will cover what data the app stores locally, what (if anything) is synced, and how we handle the small amount of telemetry the app collects.';
    default:
      return 'Content coming soon.';
  }
}

/* ──────────────────────────────────────────────────────
   BIO
   ────────────────────────────────────────────────────── */
function BioContent() {
  return (
    <div style={{ maxWidth: 720 }}>
      <p style={ls.p}>
        I'm an orthopedic surgery resident — early training — and I built OrthoVaultOS because I needed it.
      </p>

      <p style={ls.p}>
        The problem wasn't that information didn't exist. It existed everywhere: attending preference lists on a shared drive that hadn't been touched in two years, hand-written notes from a co-resident who graduated, a PDF missing the implant sizes, a text chain from three months ago where someone answered a question about a surgeon's suture preference. The night before a case, I'd piece it together from five different places and still show up not quite sure.
      </p>

      <p style={ls.p}>
        Mid-case is worse. You can't pull out your phone without breaking flow. You can't ask the attending without sounding unprepared. You just have to know — or pretend you do.
      </p>

      <p style={ls.p}>
        I got tired of it. I wanted one place: the procedure, the surgeon's preferences, the implant details, the technique notes — organized, searchable, and fast enough to actually use in the OR. I couldn't find it, so I built it.
      </p>

      <p style={ls.p}>
        OrthoVaultOS is a personal notes app, not a clinical system. It doesn't integrate with your EHR, it doesn't comply with HIPAA, and it's not trying to replace anything official. It's the thing I wanted to have in pre-op: my notes, my way, organized around the case in front of me.
      </p>

      <p style={ls.p}>
        But it didn't stop at cases. Residency is more than the OR — it's journal clubs, landmark articles, technique videos shared in group chats, conference talks you want to revisit, pearls from an attending you'll never forget. All of it matters. None of it has a home. OrthoVaultOS is that home: one place to keep everything you're learning, from your first day on service to the end of training, so nothing gets lost between rotations.
      </p>

      <p style={{ ...ls.p, fontStyle: 'italic', color: 'var(--subtle)', marginBottom: 0 }}>
        Your friendly neighborhood orthobro — building the playbook I wish I'd had.
      </p>
    </div>
  );
}

/* ──────────────────────────────────────────────────────
   PRIVACY POLICY
   ────────────────────────────────────────────────────── */
function PrivacyContent() {
  return (
    <div style={{ maxWidth: 720 }}>
      <p style={{ ...ls.p, color: 'var(--subtle)', fontStyle: 'italic', marginBottom: 24 }}>
        Version 1.0 &nbsp;·&nbsp; Last updated: July 11, 2026
      </p>

      <div style={ls.section}>
        <h3 style={ls.h3}>1. Who we are</h3>
        <p style={ls.p}>OrthoVaultOS LLC operates OrthoVaultOS, a personal notes and surgical workflow application available on macOS and Windows. This policy explains how we collect, use, and protect information when you use our app or website.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>2. What we collect</h3>
        <h4 style={ls.h4}>Account information</h4>
        <p style={ls.p}>When you create an account, we collect your name, email address, role, subspecialty, and institution. This is stored in our database (Supabase) and used solely to operate your account.</p>

        <h4 style={ls.h4}>Usage data</h4>
        <p style={ls.p}>We collect anonymous usage analytics — pages visited, features used, app version, device OS. This never includes your notes, procedure content, or any personal clinical information.</p>

        <h4 style={ls.h4}>Payment information</h4>
        <p style={ls.p}>Payments are processed by Stripe. We never see or store your card number. We store your Stripe customer ID and subscription tier in our database.</p>

        <h4 style={ls.h4}>Cloud storage</h4>
        <p style={ls.p}>If you're signed in, your procedures, steps, surgeon preferences, implants, evidence links, and notes sync to encrypted cloud storage (Supabase) so they follow you across your own devices — on any tier, including Free. If you use cloud photo sync (Professional tier), your uploaded images are stored the same way. Only you can access your files.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>3. What we do NOT collect</h3>
        <p style={ls.p}>We do not collect HPI (History of Present Illness), patient information, clinical data, or protected health information (PHI). OrthoVaultOS is not designed for patient data. If you enter patient information into the app, you do so at your own risk — we are not liable for that data and it is not protected under HIPAA.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>4. How we use your information</h3>
        <ul style={ls.ul}>
          <li style={ls.li}>To create and manage your account</li>
          <li style={ls.li}>To process your subscription via Stripe</li>
          <li style={ls.li}>To provide cloud sync of your library across your own devices, and cloud photo sync if you are on the Professional tier</li>
          <li style={ls.li}>To send service-related emails (account confirmation, billing receipts, product updates)</li>
          <li style={ls.li}>To improve the app using anonymous aggregate analytics</li>
        </ul>
        <p style={ls.p}>We do not sell your data. We do not use your notes or content for advertising or training AI models.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>5. Third-party services</h3>
        <p style={ls.p}>We use the following third-party services:</p>
        <ul style={ls.ul}>
          <li style={ls.li}><strong>Supabase</strong> — database, authentication, and file storage</li>
          <li style={ls.li}><strong>Stripe</strong> — payment processing</li>
          <li style={ls.li}><strong>Google Fonts</strong> — typography (loaded from Google's CDN)</li>
        </ul>
        <p style={ls.p}>Each service has its own privacy policy. We recommend reviewing them.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>6. Data storage</h3>
        <p style={ls.p}>Your data is stored securely in the cloud, so it's always accessible from any device you're signed in to. We use Supabase encrypted cloud storage to keep your procedures, surgeon profiles, and notes safe and in sync. You can export your entire library at any time from Settings → Export.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>7. Data retention</h3>
        <p style={ls.p}>Your account data is retained as long as your account is active. If you delete your account, all of your cloud data is wiped from our systems — export your library first from Settings → Export if you want to keep a copy. Residual backups are purged within 90 days.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>8. Your rights</h3>
        <p style={ls.p}>You may request access to, correction of, or deletion of your personal data at any time by contacting us at hello@orthovaultos.com. We will respond within 30 days.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>9. Security</h3>
        <p style={ls.p}>All of your data is protected via our storage partner, Supabase, using industry-standard encryption in transit (HTTPS/TLS) and at rest (AES-256). However, OrthoVaultOS is not a healthcare-grade system and does not guarantee protection against all forms of data loss or breach.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>10. Children</h3>
        <p style={ls.p}>OrthoVaultOS is intended for licensed or credentialed healthcare professionals aged 18 and over. We do not knowingly collect data from anyone under 18.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>11. Changes to this policy</h3>
        <p style={ls.p}>We may update this policy at any time. Material changes will be communicated via email at least 30 days before taking effect. Continued use after changes constitutes acceptance.</p>
      </div>

      <div style={ls.section}>
        <h3 style={ls.h3}>12. Contact</h3>
        <p style={ls.p}>For privacy questions, contact us at hello@orthovaultos.com or use the support form. This policy is governed by the laws of California, United States.</p>
      </div>

    </div>
  );
}

/* ── Route section id to its content component ── */
function renderSectionBody(id) {
  if (id === 'bio')        return <BioContent />;
  if (id === 'privacy')    return <PrivacyContent />;
  if (id === 'terms')      return <TermsContent />;
  if (id === 'disclaimer') return <DisclaimerContent />;
  return null;
}

function AboutApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#b91c2c';
  const theme = t.theme || 'light';
  const [active, setActive] = React.useState(ABOUT_SECTIONS[0].id);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    return () => { document.body.removeAttribute('data-theme'); };
  }, [theme]);

  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: '-20% 0px -60% 0px', threshold: 0 });
    ABOUT_SECTIONS.forEach((s) => {
      const el = document.getElementById(s.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <div data-theme={theme} style={{
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: 'var(--text)',
      background: 'var(--bg)',
      minHeight: '100vh',
    }}>
      <Nav accent={accent} />

      {/* Header */}
      <section style={{ padding: isMobile ? '40px 20px 24px' : '72px 28px 32px', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(40% 70% at 80% 0%, ${accent}1a, transparent 60%)`,
        }}></div>
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1.4,
            textTransform: 'uppercase', marginBottom: 14
          }}>About</div>
          <h1 style={{
            fontSize: isMobile ? 32 : 64, lineHeight: 1.05, letterSpacing: isMobile ? -1 : -1.8, fontWeight: 600,
            margin: '0 0 18px', color: 'var(--text)', textWrap: 'balance'
          }}>
            The story behind{' '}
            <span style={{ color: accent, fontWeight: 600, textTransform: 'uppercase', letterSpacing: -0.5 }}>
              ORTHOVAULTOS.
            </span>
          </h1>
          <p style={{ fontSize: isMobile ? 15.5 : 18, lineHeight: 1.55, color: 'var(--muted)', margin: 0, maxWidth: 640, textWrap: 'pretty' }}>
            Bio, plus the legal essentials — privacy policy, terms of service, and medical disclaimer — all in one place.
          </p>
        </div>
      </section>

      {/* TOC + sections */}
      <section style={{ padding: isMobile ? '24px 20px 56px' : '32px 28px 96px', borderTop: '1px solid var(--border)' }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto',
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '240px 1fr', gap: isMobile ? 28 : 56, alignItems: 'start'
        }}>
          {/* Sticky TOC */}
          <nav style={{ position: isMobile ? 'static' : 'sticky', top: 96, alignSelf: 'start' }}>
            <div style={{
              fontSize: 10.5, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 1.2,
              textTransform: 'uppercase', marginBottom: 14, fontFamily: '"Geist Mono", ui-monospace, monospace'
            }}>Contents</div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
              {ABOUT_SECTIONS.map((s, i) => {
                const isActive = active === s.id;
                return (
                  <li key={s.id}>
                    <a href={`#${s.id}`} style={{
                      display: 'flex', alignItems: 'baseline', gap: 10,
                      padding: '8px 10px 8px 12px',
                      borderRadius: 8,
                      textDecoration: 'none',
                      color: isActive ? 'var(--text)' : 'var(--muted)',
                      background: isActive ? 'var(--surface)' : 'transparent',
                      fontSize: 13.5, fontWeight: isActive ? 600 : 500,
                      letterSpacing: -0.1,
                      borderLeft: `2px solid ${isActive ? accent : 'transparent'}`
                    }}>
                      <span style={{
                        fontFamily: '"Geist Mono", ui-monospace, monospace',
                        fontSize: 11, color: isActive ? accent : 'var(--very-subtle)',
                        minWidth: 18
                      }}>{String(i + 1).padStart(2, '0')}</span>
                      <span>{s.title}</span>
                    </a>
                  </li>
                );
              })}
            </ol>
          </nav>

          {/* Sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
            {ABOUT_SECTIONS.map((s, i) => (
              <article key={s.id} id={s.id} style={{ scrollMarginTop: 96 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20, flexWrap: 'wrap'
                }}>
                  <span style={{
                    fontFamily: '"Geist Mono", ui-monospace, monospace',
                    fontSize: 13, fontWeight: 600, color: accent, letterSpacing: 0.6
                  }}>{String(i + 1).padStart(2, '0')}</span>
                  <h2 style={{
                    fontSize: 30, lineHeight: 1.15, letterSpacing: -0.8, fontWeight: 600,
                    margin: 0, color: 'var(--text)'
                  }}>{s.title}</h2>
                  {s.soon && (
                    <span style={{
                      fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6,
                      textTransform: 'uppercase',
                      padding: '3px 9px', borderRadius: 100,
                      background: `${accent}1a`, color: accent,
                      fontFamily: '"Geist Mono", ui-monospace, monospace'
                    }}>Coming soon</span>
                  )}
                </div>

                {s.soon ? (
                  /* Placeholder card for sections without content yet */
                  <div style={{
                    padding: '28px 30px',
                    border: '1px dashed var(--border-strong)',
                    borderRadius: 14,
                    background: 'var(--surface)',
                    maxWidth: 720
                  }}>
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      fontFamily: '"Geist Mono", ui-monospace, monospace',
                      fontSize: 11, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 0.6,
                      textTransform: 'uppercase', marginBottom: 12
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3, background: accent, display: 'inline-block' }}></span>
                      Awaiting content
                    </div>
                    <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', margin: 0, textWrap: 'pretty' }}>
                      {placeholderCopy(s.id)}
                    </p>
                  </div>
                ) : (
                  /* Real legal content */
                  <div style={{
                    padding: '32px 36px',
                    border: '1px solid var(--border)',
                    borderRadius: 14,
                    background: 'var(--surface)'
                  }}>
                    {renderSectionBody(s.id)}
                  </div>
                )}
              </article>
            ))}

            {/* End CTA */}
            <div style={{
              marginTop: 16, padding: '28px 30px',
              border: '1px solid var(--border)', borderRadius: 14,
              background: 'var(--surface)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
              flexWrap: 'wrap'
            }}>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2 }}>
                  Questions about anything here?
                </div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>
                  We respond to every email within 48 hours.
                </div>
              </div>
              <a href="support.html" style={{
                padding: '11px 20px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
                background: 'var(--btn-solid-bg)', color: 'var(--btn-solid-fg)',
                border: 'none', borderRadius: 9, cursor: 'pointer', letterSpacing: -0.1,
                textDecoration: 'none'
              }}>Contact us</a>
            </div>
          </div>
        </div>
      </section>

      <Footer accent={accent} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutApp />);