import React, { useMemo } from 'react'
import { motion } from 'framer-motion'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'

export const Privacy: React.FC = () => {
  const locale = useMemo(() => getLocaleFromPathname(window.location.pathname), [])

  usePageMeta({
    title: locale === 'en' ? 'Privacy Policy' : '隐私政策',
    description:
      locale === 'en'
        ? 'Privacy policy and personal information processing notice.'
        : '个人信息处理规则与隐私政策说明。',
    locale,
  })

  return (
    <motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.4 }}>
      <Header />

      <main>
        <section className="pt-28 pb-14 bg-gradient-to-br from-primary to-primary-light">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-white">
              <Breadcrumbs items={[{ label: locale === 'en' ? 'Privacy Policy' : '隐私政策', href: '/privacy' }]} className="mb-5" />
              <h1 className="text-4xl md:text-5xl font-bold tracking-tight">{locale === 'en' ? 'Privacy Policy' : '隐私政策'}</h1>
              <p className="mt-4 text-lg text-white/85 max-w-3xl">
                {locale === 'en'
                  ? 'This policy describes how we process personal information in connection with website inquiries and callback requests.'
                  : '本政策用于说明我们在网站咨询与“预约回电”等场景下对个人信息的处理规则。'}
              </p>
              <p className="mt-2 text-xs text-white/70">{locale === 'en' ? 'Effective date: 2026-01-01' : '生效日期：2026-01-01'}</p>
            </div>
          </div>
        </section>

        <section className="py-14 -mt-8">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 space-y-8 text-sm leading-relaxed text-gray-700">
              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '1. Scope' : '一、适用范围'}</h2>
                <p className="mt-3">
                  {locale === 'en'
                    ? 'This policy applies to personal information processing when you use our website features such as inquiries, AI assistant, and callback requests.'
                    : '本政策适用于你使用本网站提供的咨询、AI智能助手、预约回电等功能时，我们对个人信息的处理活动。'}
                </p>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '2. What we collect' : '二、我们收集哪些信息'}</h2>
                <ul className="mt-3 list-disc pl-5 space-y-2">
                  <li>{locale === 'en' ? 'Phone number (required for callback requests).' : '手机号（用于预约回电时必填）。'}</li>
                  <li>{locale === 'en' ? 'Inquiry description and related information you provide.' : '你主动填写的咨询内容及相关信息。'}</li>
                  <li>{locale === 'en' ? 'Optional name/company information.' : '姓名、公司等选填信息（如你提供）。'}</li>
                  <li>{locale === 'en' ? 'Basic device/browser information for security and performance.' : '为保障安全与服务稳定性所需的基础设备/浏览器信息（通常由浏览器自动提供）。'}</li>
                </ul>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '3. Purpose and legal basis' : '三、使用目的与处理依据'}</h2>
                <ul className="mt-3 list-disc pl-5 space-y-2">
                  <li>
                    {locale === 'en'
                      ? 'To contact you and respond to your inquiry / arrange a callback.'
                      : '用于联系你、答复你的咨询、安排专员回电沟通。'}
                  </li>
                  <li>
                    {locale === 'en'
                      ? 'To ensure service security, prevent abuse, and improve performance.'
                      : '用于保障服务安全、防范滥用与提升服务稳定性。'}
                  </li>
                </ul>
                <p className="mt-3 text-gray-700">
                  {locale === 'en'
                    ? 'For scenarios requiring consent (e.g., collecting your phone number for callback), we will obtain your explicit consent before submission.'
                    : '对于需要取得同意的场景（例如：收集手机号用于回电沟通），我们会在你提交前通过弹框获得你的明确同意。'}
                </p>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '4. Retention' : '四、保存期限'}</h2>
                <p className="mt-3">
                  {locale === 'en'
                    ? 'We retain your personal information for the minimum period necessary to complete the processing of your inquiry and comply with applicable laws.'
                    : '我们仅在实现本政策所述目的所必需的最短期限内保存个人信息，并在法律法规要求的范围内留存必要记录。'}
                </p>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '5. Sharing and disclosure' : '五、共享、转让与公开披露'}</h2>
                <p className="mt-3">
                  {locale === 'en'
                    ? 'We do not sell personal information. We may share information with authorized personnel and service providers only as needed for inquiry processing, and under appropriate confidentiality and security measures.'
                    : '我们不会出售个人信息。仅在处理咨询所必需的范围内，与经授权的工作人员及必要的服务提供方共享，并采取相应的保密与安全措施。'}
                </p>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '6. Security measures' : '六、安全保护措施'}</h2>
                <ul className="mt-3 list-disc pl-5 space-y-2">
                  <li>{locale === 'en' ? 'Access control and least-privilege principle.' : '权限控制与最小必要原则。'}</li>
                  <li>{locale === 'en' ? 'Audit and monitoring for abnormal access.' : '对异常访问进行审计与监测。'}</li>
                  <li>{locale === 'en' ? 'Secure storage and transmission where applicable.' : '在适用情况下采取安全存储与传输措施。'}</li>
                </ul>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '7. Your rights' : '七、你的权利'}</h2>
                <ul className="mt-3 list-disc pl-5 space-y-2">
                  <li>{locale === 'en' ? 'Access, correction, and deletion as permitted by law.' : '在法律允许范围内的查阅、更正、删除等权利。'}</li>
                  <li>{locale === 'en' ? 'Withdraw consent (will not affect processing already performed).' : '撤回同意（不影响撤回前已进行的处理活动的效力）。'}</li>
                </ul>
                <p className="mt-3 text-gray-700">
                  {locale === 'en'
                    ? 'You can stop providing information at any time by not submitting the form.'
                    : '你可以随时选择不再提交信息（例如：不提交“预约回电”表单），以停止进一步提供个人信息。'}
                </p>
              </div>

              <div>
                <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? '8. Contact' : '八、联系我们'}</h2>
                <p className="mt-3">
                  {locale === 'en'
                    ? 'If you have any questions about this policy, please contact us via the Contact page.'
                    : '如你对本政策有任何疑问，可通过“联系我们”页面与我们取得联系。'}
                </p>
              </div>

              <p className="text-xs text-gray-500">
                {locale === 'en'
                  ? 'Note: This is a template policy. Please have legal/compliance review and update fields such as entity name, contact, retention and security details.'
                  : '提示：本页面为模板化隐私政策内容。正式上线前建议由法务/合规审核，并补齐主体名称、联系方式、保存期限与安全措施等细节。'}
              </p>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </motion.div>
  )
}

export default Privacy
