'use client';
import { usePolicyLayout } from '../../layout';
import { useEffect } from 'react';

export default function PrivacyPolicyPage() {
  const { setTitle } = usePolicyLayout();

  useEffect(() => {
    setTitle('Privacy Policy');
  }, [setTitle]);

  return (
    <div className="relative flex size-full min-h-screen flex-col items-center justify-start">
      <div className="relative flex min-h-px w-full max-w-[1232px] min-w-px shrink-0 grow items-start justify-center gap-1 px-6 pt-6 pb-0 md:px-12">
        <div className="relative flex min-h-px w-full max-w-[752px] min-w-px shrink-0 grow flex-col items-center justify-start gap-12">
          {/* 主标题 */}
          {/* <div className="txt-headline-s w-full text-center text-white">
            <p className="whitespace-pre-wrap">Crushlevel Privacy Policy</p>
          </div> */}

          {/* 前言 */}
          <div className="txt-body-l w-full text-white">
            <p className="mb-4">
              Welcome to the Crushlevel application ("this App") and related website (Crushlevel.ai,
              "this Website"). We recognize the importance of your personal information and are
              committed to protecting your privacy rights and information security. This Privacy
              Policy ("Policy") explains the principles and practices we follow when collecting,
              using, storing, and safeguarding your personal information. Please read this Policy
              carefully before using our services. By registering or using our services, you
              acknowledge full acceptance of this Policy. For any inquiries, contact us through the
              provided channels.
            </p>
          </div>

          {/* 隐私政策条款 */}
          <div className="flex w-full flex-col items-start justify-start gap-6 text-white">
            {/* 1. Scope of Application */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>1. Scope of Application</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  This Policy applies to all personal information processing activities (including
                  collection, use, storage, and protection) during your use of this App and Website.
                  We comply with applicable laws in your country/region and international data
                  protection standards.
                </p>
              </div>
            </div>

            {/* 2. Collection of Personal Information */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>2. Collection of Personal Information</p>
              </div>

              {/* a) Registration Information */}
              <div className="flex w-full flex-col gap-4">
                <div className="txt-title-s w-full">
                  <p>a) Registration Information</p>
                </div>
                <div className="txt-body-l w-full">
                  <p className="mb-4">
                    When registering an account, we collect your mobile number or email address to
                    create your account, facilitate login, and deliver service notifications.
                  </p>
                </div>
              </div>

              {/* b) Service Usage Information */}
              <div className="flex w-full flex-col gap-4">
                <div className="txt-title-s w-full">
                  <p>b) Service Usage Information</p>
                </div>
                <div className="txt-body-l w-full">
                  <p className="mb-4">
                    <strong>Virtual Character Creation:</strong> Descriptions you provide for AI
                    characters (excluding non-personal information).
                  </p>
                  <p className="mb-4">
                    <strong>Chat Interactions:</strong> Text, images, voice messages, and other
                    content exchanged with AI characters to enable service functionality, store chat
                    history, and optimize features.
                  </p>
                  <p className="mb-4">
                    <strong>Feature Engagement:</strong> Records related to relationship upgrades,
                    unlocked features, and rewards to monitor service usage and ensure performance.
                  </p>
                </div>
              </div>

              {/* c) Payment Information */}
              <div className="flex w-full flex-col gap-4">
                <div className="txt-title-s w-full">
                  <p>c) Payment Information</p>
                </div>
                <div className="txt-body-l w-full">
                  <p className="mb-4">
                    For transactions (pay-per-message, subscriptions, virtual currency purchases),
                    we collect payment methods, amounts, and timestamps to complete transactions and
                    deliver paid services.
                  </p>
                </div>
              </div>

              {/* d) Device & Log Information */}
              <div className="flex w-full flex-col gap-4">
                <div className="txt-title-s w-full">
                  <p>d) Device & Log Information</p>
                </div>
                <div className="txt-body-l w-full">
                  <p className="mb-4">
                    To ensure service stability and security, we may collect device model, OS
                    version, IP address, browser type, timestamps, and access records.
                  </p>
                </div>
              </div>
            </div>

            {/* 3. Use of Personal Information */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>3. Use of Personal Information</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">We use your personal information to:</p>
                <ul className="mb-4 ml-6 list-disc">
                  <li className="mb-2">
                    Provide services (account management, character creation, chat interactions,
                    paid features, etc.).
                  </li>
                  <li className="mb-2">
                    Optimize services by analyzing usage patterns to enhance functionality.
                  </li>
                  <li className="mb-2">
                    Conduct promotional activities (with your consent or where permitted by law),
                    without disclosing sensitive data.
                  </li>
                  <li className="mb-2">
                    Troubleshoot issues, maintain service integrity, and protect your rights.
                  </li>
                </ul>
              </div>
            </div>

            {/* 4. Storage of Personal Information */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>4. Storage of Personal Information</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  a) Your data is stored on secure servers with robust technical/administrative
                  measures to prevent loss, leakage, tampering, or misuse.
                </p>
                <p className="mb-4">
                  b) Retention periods align with service needs and legal requirements. Post-expiry,
                  data is deleted or anonymized.
                </p>
                <p className="mb-4">
                  c) Data is primarily stored in your country/region. Cross-border transfers (if
                  any) comply with applicable laws and implement safeguards (e.g., standard
                  contractual clauses).
                </p>
              </div>
            </div>

            {/* 5. Protection of Personal Information */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>5. Protection of Personal Information</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  a) We implement strict security protocols, including encryption and access
                  controls, to prevent unauthorized access or disclosure.
                </p>
                <p className="mb-4">
                  b) Only authorized personnel bound by confidentiality obligations may access your
                  data.
                </p>
                <p className="mb-4">
                  c) In case of a data breach, we will take remedial actions and notify
                  you/regulators as required by law.
                </p>
              </div>
            </div>

            {/* 6. Sharing, Transfer, and Disclosure */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>6. Sharing, Transfer, and Disclosure</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  a) We do not share your data with third parties without your explicit consent,
                  except where mandated by law or to protect public/personal interests.
                </p>
                <p className="mb-4">
                  b) We do not transfer your data unless: (i) you consent; or (ii) during corporate
                  restructuring (mergers, acquisitions), where recipients must adhere to this
                  Policy.
                </p>
                <p className="mb-4">
                  c) Public disclosure occurs only when legally required or requested by
                  authorities, with efforts to minimize exposure.
                </p>
              </div>
            </div>

            {/* 7. Your Rights */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>7. Your Rights</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  a) <strong>Access & Correction:</strong> Request to view or correct
                  inaccurate/incomplete data.
                </p>
                <p className="mb-4">
                  b) <strong>Deletion:</strong> Request deletion where legally permissible or upon
                  service termination.
                </p>
                <p className="mb-4">
                  c) <strong>Consent Withdrawal:</strong> Withdraw consent for data processing
                  (note: may affect service functionality).
                </p>
                <p className="mb-4">
                  d) <strong>Account Deactivation:</strong> Deactivate your account; data will be
                  processed per relevant policies.
                </p>
              </div>
            </div>

            {/* 8. Minor Protection */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>8. Minor Protection</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  Users under 18 must obtain parental/guardian consent before using our services. We
                  prioritize minors' data protection. Parents/guardians may contact us to review or
                  delete minors' data improperly collected. We strictly comply with minor protection
                  laws in your jurisdiction.
                </p>
              </div>
            </div>

            {/* 9. Policy Updates */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>9. Policy Updates</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  We may revise this Policy due to legal changes or operational needs. Revised
                  versions will be published on this App/Website and take effect after the notice
                  period. Continued use constitutes acceptance of changes. Revisions will comply
                  with local legal requirements.
                </p>
              </div>
            </div>

            {/* 10. Contact Us */}
            <div className="flex w-full flex-col items-start justify-start gap-6">
              <div className="txt-title-l w-full">
                <p>10. Contact Us</p>
              </div>
              <div className="txt-body-l w-full">
                <p className="mb-4">
                  For questions or to exercise your rights, contact us via provided channels. We
                  will respond within a reasonable timeframe.
                </p>
                <p className="mb-4">
                  Thank you for trusting Crushlevel. We strive to protect your information security!
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
