"use client";

import { UI, SITE, type Lang } from "@/lib/config";
import Link from "next/link";
import { useState, useEffect } from "react";
import {
  Shield,
  FileText,
  Globe,
  Bell,
  Lock,
  Users,
  Cookie,
  MapPin,
  Baby,
  RefreshCw,
  Mail,
} from "lucide-react";

const LAST_UPDATED = "January 11, 2025";

interface Section {
  id: string;
  icon: React.ReactNode;
  titleEn: string;
  titleAr: string;
  contentEn: string[];
  contentAr: string[];
}

const PRIVACY_SECTIONS: Section[] = [
  {
    id: "introduction",
    icon: <FileText className="w-5 h-5" />,
    titleEn: "Introduction",
    titleAr: "المقدمة",
    contentEn: [
      'Mawidi ("we," "our," or "us") is committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our WhatsApp appointment management platform and related services.',
      "**This policy applies to:** Business owners and administrators using Mawidi, end-users booking appointments through Mawidi, and visitors to our website.",
      "**Jurisdictions & Compliance:** We operate globally with a focus on the GCC region (Saudi Arabia, UAE, Qatar, Kuwait, Bahrain, Oman), United Kingdom, and serve customers worldwide.",
      "We comply with **GDPR** (General Data Protection Regulation) for EU users, **CCPA** (California Consumer Privacy Act) for California residents, **GCC Data Protection Laws** for users in Gulf Cooperation Council countries, and **UK Data Protection Act** for UK users.",
    ],
    contentAr: [
      'مويدي ("نحن" أو "لنا") ملتزمة بحماية خصوصيتك وضمان أمان معلوماتك الشخصية. توضح سياسة الخصوصية هذه كيفية جمعنا لمعلوماتك واستخدامها والكشف عنها وحمايتها عند استخدامك لمنصة إدارة المواعيد عبر واتساب والخدمات ذات الصلة.',
      "**تنطبق هذه السياسة على:** أصحاب الأعمال والمسؤولين الذين يستخدمون مويدي، المستخدمين النهائيين الذين يحجزون المواعيد من خلال مويدي، وزوار موقعنا الإلكتروني.",
      "**الولايات القضائية والامتثال:** نعمل عالمياً مع التركيز على منطقة دول مجلس التعاون الخليجي (المملكة العربية السعودية، الإمارات، قطر، الكويت، البحرين، عُمان)، المملكة المتحدة، ونخدم العملاء في جميع أنحاء العالم.",
      "نلتزم بـ **GDPR** (اللائحة العامة لحماية البيانات) لمستخدمي الاتحاد الأوروبي، **CCPA** (قانون خصوصية المستهلك في كاليفورنيا) لسكان كاليفورنيا، **قوانين حماية البيانات في دول الخليج** للمستخدمين في دول مجلس التعاون الخليجي، و**قانون حماية البيانات في المملكة المتحدة** لمستخدمي المملكة المتحدة.",
    ],
  },
  {
    id: "information-we-collect",
    icon: <Users className="w-5 h-5" />,
    titleEn: "Information We Collect",
    titleAr: "المعلومات التي نجمعها",
    contentEn: [
      "**Account Information:** Full name and email address, password (encrypted and hashed), business name and industry type, contact information (phone number, business address), operating hours and service offerings.",
      "**Business Data:** Service descriptions and pricing, staff member information, WhatsApp Business account details, appointment schedules and availability.",
      "**Payment Information:** Payment method details (processed securely by Stripe), billing address and VAT/Tax registration, transaction history. Note: We do not store full credit card numbers.",
      "**Usage Data:** Device information (type, operating system, browser), IP address and location data, pages visited and features used, time spent on platform, referral sources.",
      "**Communication Data:** Conversation transcripts between businesses and customers, voice recordings (when using AI voice receptionist feature), message metadata (timestamps, read receipts), media files shared through conversations.",
    ],
    contentAr: [
      "**معلومات الحساب:** الاسم الكامل وعنوان البريد الإلكتروني، كلمة المرور (مشفرة ومحمية)، اسم النشاط ونوع الصناعة، معلومات الاتصال (رقم الهاتف، عنوان النشاط)، ساعات العمل والخدمات المقدمة.",
      "**بيانات النشاط:** أوصاف الخدمات والأسعار، معلومات أعضاء الفريق، تفاصيل حساب واتساب بزنس، جداول المواعيد والتوفر.",
      "**معلومات الدفع:** تفاصيل طريقة الدفع (تتم معالجتها بأمان عبر Stripe)، عنوان الفوترة ورقم تسجيل ضريبة القيمة المضافة، سجل المعاملات. ملاحظة: لا نقوم بتخزين أرقام بطاقات الائتمان الكاملة.",
      "**بيانات الاستخدام:** معلومات الجهاز (النوع، نظام التشغيل، المتصفح)، عنوان IP وبيانات الموقع، الصفحات التي تمت زيارتها والميزات المستخدمة، الوقت المستغرق على المنصة، مصادر الإحالة.",
      "**بيانات الاتصالات:** نصوص المحادثات بين الشركات والعملاء، التسجيلات الصوتية (عند استخدام ميزة موظفة الاستقبال الصوتية الذكية)، البيانات الوصفية للرسائل (الطوابع الزمنية، إيصالات القراءة)، ملفات الوسائط المشتركة عبر المحادثات.",
    ],
  },
  {
    id: "how-we-use-information",
    icon: <RefreshCw className="w-5 h-5" />,
    titleEn: "How We Use Your Information",
    titleAr: "كيف نستخدم معلوماتك",
    contentEn: [
      "**Service Delivery:** Provide and maintain our appointment management platform, process bookings and manage schedules, handle payments and invoicing, enable WhatsApp Business integration, provide AI-powered features.",
      "**Account & Security:** Create and manage user accounts, authenticate users and prevent unauthorized access, detect and prevent fraud, abuse, and security incidents, conduct security audits.",
      "**Communication:** Send appointment confirmations and reminders, provide customer support and respond to inquiries, send transactional emails, deliver service updates and important notices.",
      "**Analytics & Improvement:** Analyze platform usage and user behavior, improve features and develop new functionality, conduct A/B testing and performance optimization.",
      "**Marketing (With Consent):** Send promotional offers and feature announcements, personalize marketing communications, conduct market research and surveys. You can opt-out anytime via email preferences.",
    ],
    contentAr: [
      "**تقديم الخدمة:** توفير وصيانة منصة إدارة المواعيد الخاصة بنا، معالجة الحجوزات وإدارة الجداول، معالجة المدفوعات والفوترة، تمكين تكامل واتساب بزنس، توفير الميزات المدعومة بالذكاء الاصطناعي.",
      "**الحساب والأمان:** إنشاء وإدارة حسابات المستخدمين، مصادقة المستخدمين ومنع الوصول غير المصرح به، اكتشاف ومنع الاحتيال والإساءة والحوادث الأمنية، إجراء عمليات التدقيق الأمني.",
      "**الاتصالات:** إرسال تأكيدات المواعيد والتذكيرات، تقديم دعم العملاء والرد على الاستفسارات، إرسال رسائل البريد الإلكتروني التعاملية، تقديم تحديثات الخدمة والإشعارات المهمة.",
      "**التحليلات والتحسين:** تحليل استخدام المنصة وسلوك المستخدم، تحسين الميزات وتطوير وظائف جديدة، إجراء اختبارات A/B وتحسين الأداء.",
      "**التسويق (بالموافقة):** إرسال العروض الترويجية وإعلانات الميزات، تخصيص الاتصالات التسويقية، إجراء أبحاث السوق والاستبيانات. يمكنك إلغاء الاشتراك في أي وقت عبر تفضيلات البريد الإلكتروني.",
    ],
  },
  {
    id: "information-sharing",
    icon: <Globe className="w-5 h-5" />,
    titleEn: "Information Sharing & Disclosure",
    titleAr: "مشاركة المعلومات والإفصاح",
    contentEn: [
      "**Third-Party Service Providers:** Stripe (payment processing, PCI-DSS compliant), Twilio (SMS and communication services), ElevenLabs (voice AI processing), Google Analytics (anonymized website usage).",
      "**Business Transfers:** In the event of merger, acquisition, or sale of assets, your information may be transferred. You will be notified via email and prominent website notice.",
      "**Legal Requirements:** We may disclose information to comply with court orders or legal processes, enforce our Terms of Service, protect rights and safety of Mawidi and users.",
      "**B2B Context:** Mawidi is a B2B platform. Your business customers' data is processed on your behalf. You remain the data controller for your customer data.",
      "**We Never Sell Your Data:** We do not and will never sell your personal information to third parties or share data for third-party marketing without your consent.",
    ],
    contentAr: [
      "**مزودو الخدمات من الأطراف الثالثة:** Stripe (معالجة الدفع، متوافق مع PCI-DSS)، Twilio (خدمات الرسائل القصيرة والاتصالات)، ElevenLabs (معالجة الصوت الذكي)، Google Analytics (استخدام الموقع المجهول).",
      "**التحويلات التجارية:** في حالة الاندماج أو الاستحواذ أو بيع الأصول، قد يتم نقل معلوماتك. سيتم إخطارك عبر البريد الإلكتروني وإشعار بارز على الموقع.",
      "**المتطلبات القانونية:** قد نكشف عن المعلومات للامتثال لأوامر المحكمة أو الإجراءات القانونية، إنفاذ شروط الخدمة، حماية حقوق وسلامة مويدي والمستخدمين.",
      "**سياق B2B:** مويدي هي منصة B2B. يتم معالجة بيانات عملاء عملك نيابة عنك. تبقى أنت المتحكم في البيانات لبيانات عملائك.",
      "**لا نبيع بياناتك أبداً:** لا نفعل ولن نفعل أبداً بيع معلوماتك الشخصية لأطراف ثالثة أو مشاركة البيانات للتسويق من الأطراف الثالثة بدون موافقتك.",
    ],
  },
  {
    id: "user-rights",
    icon: <Shield className="w-5 h-5" />,
    titleEn: "Your Rights & Choices",
    titleAr: "حقوقك وخياراتك",
    contentEn: [
      '**Right to Access (GDPR Art. 15, CCPA):** Request a copy of all personal data we hold about you. Email privacy@mawidi.com with subject "Data Access Request". We respond within 30 days.',
      "**Right to Rectification (GDPR Art. 16):** Correct inaccurate or incomplete personal information. Update directly in your account settings or contact support.",
      "**Right to Erasure (GDPR Art. 17, CCPA):** Request deletion of your personal data. Account deletion removes all associated data permanently within 30 days.",
      "**Right to Data Portability (GDPR Art. 20):** Receive your data in a structured, machine-readable format. Manual export available via support request.",
      "**Right to Object (GDPR Art. 21):** Object to processing for direct marketing purposes. Unsubscribe from marketing emails or contact privacy@mawidi.com.",
    ],
    contentAr: [
      '**الحق في الوصول (GDPR المادة 15، CCPA):** طلب نسخة من جميع البيانات الشخصية التي نحتفظ بها عنك. أرسل بريداً إلكترونياً إلى privacy@mawidi.com مع الموضوع "طلب الوصول إلى البيانات". سنرد خلال 30 يوماً.',
      "**الحق في التصحيح (GDPR المادة 16):** تصحيح المعلومات الشخصية غير الدقيقة أو غير الكاملة. التحديث مباشرة في إعدادات حسابك أو الاتصال بالدعم.",
      "**الحق في المحو (GDPR المادة 17، CCPA):** طلب حذف بياناتك الشخصية. حذف الحساب يزيل جميع البيانات المرتبطة بشكل دائم خلال 30 يوماً.",
      "**الحق في قابلية نقل البيانات (GDPR المادة 20):** تلقي بياناتك بتنسيق منظم وقابل للقراءة آلياً. التصدير اليدوي متاح عبر طلب الدعم.",
      "**الحق في الاعتراض (GDPR المادة 21):** الاعتراض على المعالجة لأغراض التسويق المباشر. إلغاء الاشتراك في رسائل البريد الإلكتروني التسويقية أو الاتصال بـ privacy@mawidi.com.",
    ],
  },
  {
    id: "data-security",
    icon: <Lock className="w-5 h-5" />,
    titleEn: "Data Security",
    titleAr: "أمان البيانات",
    contentEn: [
      "**Encryption:** All data transmitted using TLS 1.3 encryption. Database encryption using AES-256. Password hashing with bcrypt (industry standard).",
      "**Access Controls:** Multi-factor authentication (MFA) available, strong password requirements enforced, role-based access control (RBAC), regular access reviews and audits.",
      "**Infrastructure Security:** Regular security updates and patches, vulnerability scanning and penetration testing, DDoS protection and rate limiting, SOC 2 Type II compliant hosting.",
      "**Data Retention:** Active accounts retain data as long as account is active. Deleted accounts have data permanently removed within 30 days, backups within 90 days.",
      "**Your Responsibility:** Keep your password confidential, enable two-factor authentication, use secure networks for sensitive operations, report security concerns to security@mawidi.com.",
    ],
    contentAr: [
      "**التشفير:** جميع البيانات المرسلة باستخدام تشفير TLS 1.3. تشفير قاعدة البيانات باستخدام AES-256. تجزئة كلمة المرور باستخدام bcrypt (معيار الصناعة).",
      "**ضوابط الوصول:** المصادقة متعددة العوامل (MFA) متاحة، متطلبات كلمة مرور قوية مفروضة، التحكم في الوصول على أساس الأدوار (RBAC)، مراجعات وصول منتظمة وعمليات تدقيق.",
      "**أمان البنية التحتية:** تحديثات وإصلاحات أمان منتظمة، فحص الثغرات واختبار الاختراق، حماية DDoS والحد من المعدل، استضافة متوافقة مع SOC 2 Type II.",
      "**الاحتفاظ بالبيانات:** الحسابات النشطة تحتفظ بالبيانات طالما أن الحساب نشط. الحسابات المحذوفة يتم حذف بياناتها بشكل دائم خلال 30 يوماً، النسخ الاحتياطية خلال 90 يوماً.",
      "**مسؤوليتك:** احتفظ بكلمة المرور الخاصة بك سرية، تمكين المصادقة الثنائية، استخدم شبكات آمنة للعمليات الحساسة، الإبلاغ عن المخاوف الأمنية إلى security@mawidi.com.",
    ],
  },
  {
    id: "cookies",
    icon: <Cookie className="w-5 h-5" />,
    titleEn: "Cookies & Tracking",
    titleAr: "ملفات تعريف الارتباط والتتبع",
    contentEn: [
      "**Essential Cookies (Always Active):** Required for platform functionality, authentication and session management, security features. Cannot be disabled.",
      "**Analytics Cookies (With Consent):** Google Analytics tracks website usage and performance with anonymized IP addresses. You can opt-out via cookie consent banner or browser settings.",
      "**Preference Cookies (With Consent):** Language selection (Arabic/English), theme preferences (dark/light mode), dashboard customizations.",
      "**Third-Party Cookies:** Google Analytics (website analytics), Stripe (payment processing session management). We do not use social media tracking pixels or third-party advertising networks.",
      "**Managing Cookies:** Cookie consent banner appears on first visit. You can accept all, reject non-essential, or customize your preferences. We respect browser Do Not Track signals.",
    ],
    contentAr: [
      "**ملفات تعريف الارتباط الأساسية (نشطة دائماً):** مطلوبة لوظائف المنصة، المصادقة وإدارة الجلسة، ميزات الأمان. لا يمكن تعطيلها.",
      "**ملفات تعريف الارتباط التحليلية (بالموافقة):** Google Analytics يتتبع استخدام الموقع والأداء مع عناوين IP مجهولة. يمكنك إلغاء الاشتراك عبر لافتة موافقة ملفات تعريف الارتباط أو إعدادات المتصفح.",
      "**ملفات تعريف الارتباط للتفضيلات (بالموافقة):** اختيار اللغة (العربية/الإنجليزية)، تفضيلات المظهر (الوضع الداكن/الفاتح)، تخصيصات لوحة التحكم.",
      "**ملفات تعريف الارتباط من الأطراف الثالثة:** Google Analytics (تحليلات الموقع)، Stripe (إدارة جلسة معالجة الدفع). لا نستخدم بكسلات تتبع وسائل التواصل الاجتماعي أو شبكات الإعلانات من الأطراف الثالثة.",
      "**إدارة ملفات تعريف الارتباط:** تظهر لافتة موافقة ملفات تعريف الارتباط في الزيارة الأولى. يمكنك قبول الكل، رفض غير الأساسية، أو تخصيص تفضيلاتك. نحترم إشارات عدم التتبع للمتصفح.",
    ],
  },
  {
    id: "international-transfers",
    icon: <MapPin className="w-5 h-5" />,
    titleEn: "International Data Transfers",
    titleAr: "نقل البيانات الدولية",
    contentEn: [
      "**Data Storage Locations:** Cloud infrastructure providers (AWS, Google Cloud, or Azure). Servers located in EU (Ireland/Germany), UK, and/or USA. All providers meet GDPR and international compliance standards.",
      "**Cross-Border Transfers:** We comply with GDPR requirements for international transfers. Standard Contractual Clauses (SCCs) in place with all US providers.",
      "**Third-Party Processors:** Stripe (US-based, GDPR and PCI-DSS compliant), Twilio (US-based, GDPR compliant), ElevenLabs (voice data processed temporarily), Google (global infrastructure, GDPR compliant).",
      "**Your Rights:** You have the right to be informed about where your data is transferred, object to transfers to specific countries, and request that data remain in your jurisdiction.",
      "**Data Localization:** We are working on data localization options for customers who require data storage exclusively in GCC region or EU-only data processing.",
    ],
    contentAr: [
      "**مواقع تخزين البيانات:** مزودو البنية التحتية السحابية (AWS، Google Cloud، أو Azure). الخوادم الموجودة في الاتحاد الأوروبي (أيرلندا/ألمانيا)، المملكة المتحدة، و/أو الولايات المتحدة الأمريكية. جميع المزودين يستوفون معايير GDPR والامتثال الدولية.",
      "**نقل البيانات عبر الحدود:** نلتزم بمتطلبات GDPR للنقل الدولي. البنود التعاقدية القياسية (SCCs) معمول بها مع جميع المزودين الأمريكيين.",
      "**معالجو الأطراف الثالثة:** Stripe (مقرها الولايات المتحدة، متوافق مع GDPR وPCI-DSS)، Twilio (مقرها الولايات المتحدة، متوافق مع GDPR)، ElevenLabs (تتم معالجة بيانات الصوت مؤقتاً)، Google (بنية تحتية عالمية، متوافق مع GDPR).",
      "**حقوقك:** لديك الحق في أن يتم إعلامك بمكان نقل بياناتك، الاعتراض على النقل إلى بلدان محددة، وطلب بقاء البيانات في ولايتك القضائية.",
      "**توطين البيانات:** نحن نعمل على خيارات توطين البيانات للعملاء الذين يحتاجون إلى تخزين البيانات حصرياً في منطقة دول الخليج أو معالجة البيانات في الاتحاد الأوروبي فقط.",
    ],
  },
  {
    id: "childrens-privacy",
    icon: <Baby className="w-5 h-5" />,
    titleEn: "Children's Privacy",
    titleAr: "خصوصية الأطفال",
    contentEn: [
      "**Minimum Age:** 13 years old in most jurisdictions, 16 years old in EU/EEA countries (GDPR requirement), 18 years old for business account creation.",
      "**Business Use Context:** Mawidi is a B2B platform designed for business owners, professional service providers, and business administrators. We do not target children with our marketing.",
      "**Parental Consent:** If your business serves minors (under 18), you are responsible for obtaining parental consent and complying with COPPA and local laws.",
      "**If We Discover Child Information:** We will delete the information immediately, close any accounts created, and take steps to prevent future collection.",
      '**How to Report:** If you believe a child has provided information to us, email privacy@mawidi.com with subject "Child Privacy Concern".',
    ],
    contentAr: [
      "**الحد الأدنى للعمر:** 13 عاماً في معظم الولايات القضائية، 16 عاماً في دول الاتحاد الأوروبي/المنطقة الاقتصادية الأوروبية (متطلبات GDPR)، 18 عاماً لإنشاء حساب تجاري.",
      "**سياق الاستخدام التجاري:** مويدي هي منصة B2B مصممة لأصحاب الأعمال ومزودي الخدمات المهنية ومسؤولي الأعمال. نحن لا نستهدف الأطفال بتسويقنا.",
      "**موافقة الوالدين:** إذا كان عملك يخدم القصّر (أقل من 18 عاماً)، أنت مسؤول عن الحصول على موافقة الوالدين والامتثال لـ COPPA والقوانين المحلية.",
      "**إذا اكتشفنا معلومات الطفل:** سنحذف المعلومات على الفور، نغلق أي حسابات تم إنشاؤها، ونتخذ خطوات لمنع الجمع في المستقبل.",
      '**كيفية الإبلاغ:** إذا كنت تعتقد أن طفلاً قد قدم معلومات لنا، أرسل بريداً إلكترونياً إلى privacy@mawidi.com مع الموضوع "قلق بشأن خصوصية الطفل".',
    ],
  },
  {
    id: "changes-to-policy",
    icon: <RefreshCw className="w-5 h-5" />,
    titleEn: "Changes to This Policy",
    titleAr: "التغييرات على هذه السياسة",
    contentEn: [
      "**How We Update:** We may update this Privacy Policy to reflect changes in our business practices, new features, legal requirements, or user feedback.",
      "**Material Changes:** For significant changes affecting your rights, we will send email notification at least 30 days before changes take effect, display a prominent website banner, and show in-app notifications.",
      '**Minor Changes:** For non-material changes (typos, clarifications), we will update the "Last Modified" date. Changes take effect immediately.',
      "**Your Options:** If you disagree with changes, you can email us with concerns, request data deletion before changes take effect, or close your account within the 30-day notice period.",
      "**Version History:** Current version: January 2025. We maintain archives of previous privacy policy versions available upon request.",
    ],
    contentAr: [
      "**كيف نقوم بالتحديث:** قد نقوم بتحديث سياسة الخصوصية هذه لتعكس التغييرات في ممارساتنا التجارية، الميزات الجديدة، المتطلبات القانونية، أو ملاحظات المستخدمين.",
      "**التغييرات المادية:** للتغييرات الكبيرة التي تؤثر على حقوقك، سنرسل إخطار بريد إلكتروني قبل 30 يوماً على الأقل من دخول التغييرات حيز التنفيذ، ونعرض لافتة بارزة على الموقع، ونظهر إشعارات داخل التطبيق.",
      '**التغييرات الطفيفة:** للتغييرات غير المادية (الأخطاء المطبعية، التوضيحات)، سنقوم بتحديث تاريخ "آخر تعديل". التغييرات تدخل حيز التنفيذ فوراً.',
      "**خياراتك:** إذا لم توافق على التغييرات، يمكنك مراسلتنا بالمخاوف، طلب حذف البيانات قبل دخول التغييرات حيز التنفيذ، أو إغلاق حسابك خلال فترة الإشعار لمدة 30 يوماً.",
      "**تاريخ الإصدارات:** الإصدار الحالي: يناير 2025. نحتفظ بأرشيف إصدارات سياسة الخصوصية السابقة المتاحة عند الطلب.",
    ],
  },
  {
    id: "contact",
    icon: <Mail className="w-5 h-5" />,
    titleEn: "Contact Us",
    titleAr: "اتصل بنا",
    contentEn: [
      "**Privacy Team:** Email privacy@mawidi.com. Response time: Within 3 business days for acknowledgment, 30 days for full response.",
      "**Security Issues:** Email security@mawidi.com for urgent security matters only. Response time: Within 24 hours.",
      "**Data Protection Officer (DPO):** Email dpo@mawidi.com for GDPR-related inquiries.",
      "**Regulatory Authorities:** If not satisfied with our response, you can lodge a complaint with your local data protection authority. UK: ICO (ico.org.uk), EU: Find your authority at edpb.europa.eu.",
      "**Response Timeline:** Acknowledgment within 3 business days, simple requests within 14 days, complex requests within 30 days (45 days if exceptionally complex).",
    ],
    contentAr: [
      "**فريق الخصوصية:** البريد الإلكتروني privacy@mawidi.com. وقت الرد: خلال 3 أيام عمل للإقرار، 30 يوماً للرد الكامل.",
      "**مشاكل الأمان:** البريد الإلكتروني security@mawidi.com للمسائل الأمنية العاجلة فقط. وقت الرد: خلال 24 ساعة.",
      "**مسؤول حماية البيانات (DPO):** البريد الإلكتروني dpo@mawidi.com للاستفسارات المتعلقة بـ GDPR.",
      "**السلطات التنظيمية:** إذا لم تكن راضياً عن ردنا، يمكنك تقديم شكوى إلى سلطة حماية البيانات المحلية. المملكة المتحدة: ICO (ico.org.uk)، الاتحاد الأوروبي: ابحث عن سلطتك على edpb.europa.eu.",
      "**الجدول الزمني للرد:** الإقرار خلال 3 أيام عمل، الطلبات البسيطة خلال 14 يوماً، الطلبات المعقدة خلال 30 يوماً (45 يوماً إذا كانت معقدة للغاية).",
    ],
  },
];

export default function PrivacyPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  const dict = UI[params.lang];
  const [activeSection, setActiveSection] = useState<string>("introduction");

  // Update active section based on scroll position
  useEffect(() => {
    const handleScroll = () => {
      const sections = PRIVACY_SECTIONS.map((s) =>
        document.getElementById(s.id),
      );
      const scrollPosition = window.scrollY + 150;

      for (let i = sections.length - 1; i >= 0; i--) {
        const section = sections[i];
        if (section && section.offsetTop <= scrollPosition) {
          setActiveSection(PRIVACY_SECTIONS[i].id);
          break;
        }
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "start" });
      setActiveSection(id);
    }
  };

  // Render content with bold text support
  const renderContent = (text: string) => {
    const parts = text.split(/(\*\*[^*]+\*\*)/g);
    return parts.map((part, i) => {
      if (part.startsWith("**") && part.endsWith("**")) {
        return (
          <strong key={i} className="text-[#1E293B]">
            {part.slice(2, -2)}
          </strong>
        );
      }
      return part;
    });
  };

  return (
    <main
      dir={dict.dir}
      className="min-h-screen bg-white"
      style={{
        fontFamily: isAr
          ? "IBM Plex Sans Arabic, sans-serif"
          : "Plus Jakarta Sans, Inter, sans-serif",
      }}
    >
      {/* Subtle Grid Background */}
      <div className="fixed inset-0 pointer-events-none">
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage:
              "linear-gradient(#10B981 1px, transparent 1px), linear-gradient(90deg, #10B981 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />
      </div>

      {/* ═══════════════════════════════════════════════════════════════════════════
          HERO SECTION - Editorial Style
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-8">
            <span className="text-[#10B981] font-mono text-sm tracking-wider">
              01
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm uppercase tracking-widest">
              {isAr ? "الخصوصية" : "Privacy"}
            </span>
          </div>

          <div className="flex items-center gap-6 mb-8">
            <div className="w-20 h-20 bg-[#10B981]/10 flex items-center justify-center">
              <Shield className="w-10 h-10 text-[#10B981]" />
            </div>
            <div>
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] leading-[1.1]">
                {isAr ? (
                  <>
                    سياسة
                    <br />
                    <span className="text-[#10B981]">الخصوصية</span>
                  </>
                ) : (
                  <>
                    Privacy
                    <br />
                    <span className="text-[#10B981]">Policy</span>
                  </>
                )}
              </h1>
            </div>
          </div>

          <p className="text-xl text-[#64748B] max-w-2xl leading-relaxed mb-8">
            {isAr
              ? "نحن ملتزمون بحماية خصوصيتك وشفافية ممارسات البيانات لدينا. اقرأ كيف نجمع ونستخدم ونحمي معلوماتك."
              : "We are committed to protecting your privacy and being transparent about our data practices. Learn how we collect, use, and protect your information."}
          </p>

          <div className="flex items-center gap-6 text-sm text-[#64748B]">
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 bg-[#10B981]" />
              <span>
                {isAr ? "آخر تحديث" : "Last Updated"}: {LAST_UPDATED}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 bg-[#10B981]" />
              <span>{isAr ? "متوافق مع GDPR" : "GDPR Compliant"}</span>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          TL;DR SUMMARY
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-16 bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-8">
            <span className="text-[#10B981] font-mono text-sm tracking-wider">
              02
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm uppercase tracking-widest">
              {isAr ? "ملخص سريع" : "Quick Summary"}
            </span>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {/* What We Do */}
            <div className="bg-white p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 bg-[#10B981]/10 flex items-center justify-center">
                  <span className="text-[#10B981] text-xl">✓</span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B]">
                  {isAr ? "ما نفعله" : "What We Do"}
                </h3>
              </div>
              <ul className="space-y-3">
                {[
                  isAr
                    ? "نحمي بياناتك بتشفير على مستوى الصناعة"
                    : "Protect your data with industry-standard encryption",
                  isAr
                    ? "نمنحك السيطرة الكاملة على معلوماتك"
                    : "Give you full control over your information",
                  isAr
                    ? "نلتزم بـ GDPR، CCPA، وقوانين دول الخليج"
                    : "Comply with GDPR, CCPA, and GCC laws",
                  isAr
                    ? "نستخدم البيانات فقط لتقديم خدماتنا"
                    : "Use data only to provide our services",
                ].map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* What We Don't Do */}
            <div className="bg-white p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 bg-red-50 flex items-center justify-center">
                  <span className="text-red-500 text-xl">✕</span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B]">
                  {isAr ? "ما لا نفعله" : "What We Don't Do"}
                </h3>
              </div>
              <ul className="space-y-3">
                {[
                  isAr
                    ? "لا نبيع بياناتك الشخصية أبداً"
                    : "Never sell your personal data",
                  isAr
                    ? "لا نشارك معلوماتك للتسويق دون موافقتك"
                    : "Never share your info for marketing without consent",
                  isAr
                    ? "لا نستخدم بياناتك لأغراض غير مرتبطة بخدماتنا"
                    : "Never use your data for unrelated purposes",
                  isAr
                    ? "لا نحتفظ بالبيانات أطول من اللازم"
                    : "Never keep data longer than necessary",
                ].map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm">
                    <div className="w-1.5 h-1.5 bg-red-500 mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          MAIN CONTENT WITH SIDEBAR
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <span className="text-[#10B981] font-mono text-sm tracking-wider">
              03
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm uppercase tracking-widest">
              {isAr ? "السياسة الكاملة" : "Full Policy"}
            </span>
          </div>

          <div className="grid lg:grid-cols-4 gap-8">
            {/* Sticky Sidebar Navigation */}
            <aside className="lg:col-span-1">
              <div className="sticky top-24 bg-white p-6 border border-slate-200">
                <div className="flex items-center gap-3 mb-6">
                  <Globe className="w-5 h-5 text-[#10B981]" />
                  <h2 className="font-bold text-[#1E293B]">
                    {isAr ? "المحتويات" : "Contents"}
                  </h2>
                </div>
                <nav className="space-y-1">
                  {PRIVACY_SECTIONS.map((section, idx) => (
                    <button
                      key={section.id}
                      onClick={() => scrollToSection(section.id)}
                      className={`w-full text-left px-3 py-2 text-sm transition-all flex items-center gap-3 ${
                        activeSection === section.id
                          ? "bg-[#10B981] text-white font-semibold"
                          : "text-[#64748B] hover:bg-[#FAFAFA] hover:text-[#1E293B]"
                      }`}
                    >
                      <span className="font-mono text-xs opacity-60">
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                      <span className="truncate">
                        {isAr ? section.titleAr : section.titleEn}
                      </span>
                    </button>
                  ))}
                </nav>
              </div>
            </aside>

            {/* Main Content */}
            <div className="lg:col-span-3 space-y-8">
              {PRIVACY_SECTIONS.map((section, sectionIdx) => (
                <article
                  key={section.id}
                  id={section.id}
                  className="group bg-white p-8 border border-slate-200 scroll-mt-24"
                >
                  {/* Section Header */}
                  <div className="flex items-center gap-4 mb-6">
                    <span className="text-[#10B981] font-mono text-sm">
                      {String(sectionIdx + 1).padStart(2, "0")}
                    </span>
                    <div className="w-10 h-10 bg-[#10B981]/10 flex items-center justify-center text-[#10B981]">
                      {section.icon}
                    </div>
                    <h2 className="text-2xl font-bold text-[#1E293B]">
                      {isAr ? section.titleAr : section.titleEn}
                    </h2>
                  </div>

                  {/* Section Content */}
                  <div className="space-y-4">
                    {(isAr ? section.contentAr : section.contentEn).map(
                      (paragraph, idx) => (
                        <p key={idx} className="text-[#64748B] leading-relaxed">
                          {renderContent(paragraph)}
                        </p>
                      ),
                    )}
                  </div>

                  {/* Hover underline */}
                  <div className="w-0 group-hover:w-16 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          CTA SECTION
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12 justify-center">
            <span className="text-[#10B981] font-mono text-sm tracking-wider">
              04
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm uppercase tracking-widest">
              {isAr ? "تواصل معنا" : "Get in Touch"}
            </span>
          </div>

          <div className="max-w-3xl mx-auto text-center">
            <div className="w-20 h-20 bg-[#10B981]/10 flex items-center justify-center mx-auto mb-8">
              <Bell className="w-10 h-10 text-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
              {isAr ? "أسئلة حول خصوصيتك؟" : "Questions About Your Privacy?"}
            </h2>
            <p className="text-xl text-[#64748B] mb-10">
              {isAr
                ? "نحن هنا للمساعدة. اتصل بفريق الخصوصية لدينا في أي وقت."
                : "We're here to help. Contact our privacy team anytime."}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="mailto:privacy@mawidi.com"
                className="group relative px-10 py-5 bg-[#10B981] text-white font-bold overflow-hidden"
              >
                <span className="relative z-10 flex items-center justify-center gap-2">
                  <Mail className="w-5 h-5" />
                  {isAr ? "راسل فريق الخصوصية" : "Email Privacy Team"}
                </span>
                <div className="absolute inset-0 bg-[#059669] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </a>
              <Link
                href={`/${params.lang}/contact`}
                className="px-10 py-5 border-2 border-[#1E293B] text-[#1E293B] font-bold hover:bg-[#1E293B] hover:text-white transition-colors"
              >
                {isAr ? "صفحة الاتصال" : "Contact Page"}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          RELATED POLICIES
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12 justify-center">
            <span className="text-[#10B981] font-mono text-sm tracking-wider">
              05
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm uppercase tracking-widest">
              {isAr ? "سياسات ذات صلة" : "Related Policies"}
            </span>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                href: `/${params.lang}/terms`,
                icon: <FileText className="w-8 h-8" />,
                titleEn: "Terms of Service",
                titleAr: "شروط الخدمة",
              },
              {
                href: `/${params.lang}/cookies`,
                icon: <Cookie className="w-8 h-8" />,
                titleEn: "Cookie Policy",
                titleAr: "سياسة ملفات تعريف الارتباط",
              },
              {
                href: `/${params.lang}/help`,
                icon: <Users className="w-8 h-8" />,
                titleEn: "Help Center",
                titleAr: "مركز المساعدة",
              },
            ].map((item, idx) => (
              <Link
                key={idx}
                href={item.href}
                className="group bg-white p-8 text-center hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="w-16 h-16 bg-[#10B981]/10 flex items-center justify-center mx-auto mb-4 text-[#10B981] group-hover:bg-[#10B981] group-hover:text-white transition-colors">
                  {item.icon}
                </div>
                <h3 className="font-bold text-[#1E293B] group-hover:text-[#10B981] transition-colors">
                  {isAr ? item.titleAr : item.titleEn}
                </h3>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 mx-auto transition-all duration-300" />
              </Link>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}
