import Layout from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import { useLanguage } from "@/contexts/LanguageContext";
import { Link } from "wouter";
import { Shield, Eye, Lock, Database, Globe, UserCheck, Mail, ArrowLeft, ArrowRight } from "lucide-react";

function SectionCard({
  icon,
  title,
  children,
}: {
  icon: React.ReactNode;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-6 mb-6">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-10 h-10 rounded-lg bg-teal/10 flex items-center justify-center text-teal shrink-0">
          {icon}
        </div>
        <h2 className="font-heading font-semibold text-navy text-lg">{title}</h2>
      </div>
      <div className="text-gray-600 text-sm leading-relaxed space-y-3">{children}</div>
    </div>
  );
}

export default function PrivacyPolicy() {
  const { lang } = useLanguage();
  const isAr = lang === "ar";
  const BackArrow = isAr ? ArrowRight : ArrowLeft;

  return (
    <Layout>
      <SEOHead
        title={isAr ? "سياسة الخصوصية | الزار" : "Privacy Policy | Alzar FZE"}
        description={isAr ? "سياسة الخصوصية لشركة الزار. تعرف على كيفية جمع واستخدام وحماية معلوماتك الشخصية." : "Privacy Policy for Alzar FZE. Learn how we collect, use, and protect your personal information."}
        canonical="https://www.alzarfze.com/privacy-policy"
        noindex={false}
        breadcrumbs={[
          { name: isAr ? "الرئيسية" : "Home", url: "https://www.alzarfze.com" },
          { name: isAr ? "سياسة الخصوصية" : "Privacy Policy", url: "https://www.alzarfze.com/privacy-policy" },
        ]}
      />

      <div className="bg-warm-white min-h-screen">
        {/* Header */}
        <div className="bg-navy text-white py-12">
          <div className="container">
            <Link href="/" className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors mb-4 text-sm">
              <BackArrow className="w-4 h-4" />
              {isAr ? "العودة إلى الرئيسية" : "Back to Home"}
            </Link>
            <div className="flex items-center gap-3 mb-3">
              <Shield className="w-8 h-8 text-teal" />
              <h1 className="font-heading font-bold text-3xl">
                {isAr ? "سياسة الخصوصية" : "Privacy Policy"}
              </h1>
            </div>
            <p className="text-white/60 text-sm">
              {isAr ? "آخر تحديث: فبراير 2026" : "Last updated: February 2026"}
            </p>
          </div>
        </div>

        {/* Content */}
        <div className="container py-10 max-w-3xl">
          {/* Introduction */}
          <div className="bg-teal/5 border border-teal/20 rounded-xl p-6 mb-8">
            <p className="text-gray-700 text-sm leading-relaxed">
              {isAr
                ? "تلتزم شركة الزار (\"الشركة\"، \"نحن\") بحماية خصوصيتك. توضح سياسة الخصوصية هذه كيفية جمع واستخدام وحماية المعلومات الشخصية التي تقدمها عند استخدام موقعنا الإلكتروني alzarfze.com."
                : "Alzar FZE (\"the Company\", \"we\", \"us\") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, and safeguard personal information you provide when using our website alzarfze.com."}
            </p>
          </div>

          <SectionCard icon={<Database className="w-5 h-5" />} title={isAr ? "المعلومات التي نجمعها" : "Information We Collect"}>
            <p>
              {isAr
                ? "نجمع المعلومات التالية عندما تتواصل معنا عبر نموذج الاتصال أو البريد الإلكتروني:"
                : "We collect the following information when you contact us through our contact form or email:"}
            </p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "الاسم الكامل" : "Full name"}</li>
              <li>{isAr ? "عنوان البريد الإلكتروني" : "Email address"}</li>
              <li>{isAr ? "اسم الشركة (اختياري)" : "Company name (optional)"}</li>
              <li>{isAr ? "القطاع الصناعي (اختياري)" : "Industry sector (optional)"}</li>
              <li>{isAr ? "محتوى الرسالة" : "Message content"}</li>
            </ul>
            <p>
              {isAr
                ? "كما نجمع تلقائياً بيانات استخدام مجهولة الهوية من خلال Google Analytics (عند موافقتك)، بما في ذلك نوع المتصفح وصفحات الزيارة ومدة الجلسة."
                : "We also automatically collect anonymized usage data through Google Analytics (with your consent), including browser type, pages visited, and session duration."}
            </p>
          </SectionCard>

          <SectionCard icon={<Eye className="w-5 h-5" />} title={isAr ? "كيف نستخدم معلوماتك" : "How We Use Your Information"}>
            <p>{isAr ? "نستخدم المعلومات التي نجمعها للأغراض التالية:" : "We use the information we collect for the following purposes:"}</p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "الرد على استفساراتك وطلبات عروض الأسعار" : "Responding to your inquiries and quote requests"}</li>
              <li>{isAr ? "تقديم المعلومات الفنية والاستشارات الهندسية" : "Providing technical information and engineering consulting"}</li>
              <li>{isAr ? "تحسين محتوى وأداء موقعنا الإلكتروني" : "Improving our website content and performance"}</li>
              <li>{isAr ? "الامتثال للمتطلبات القانونية" : "Complying with legal requirements"}</li>
            </ul>
            <p>
              {isAr
                ? "لا نستخدم معلوماتك لأغراض تسويقية غير مرغوب فيها ولا نبيع بياناتك الشخصية لأطراف ثالثة."
                : "We do not use your information for unsolicited marketing purposes and we do not sell your personal data to third parties."}
            </p>
          </SectionCard>

          <SectionCard icon={<Lock className="w-5 h-5" />} title={isAr ? "أمان البيانات" : "Data Security"}>
            <p>
              {isAr
                ? "نتخذ إجراءات أمنية معقولة لحماية معلوماتك الشخصية من الوصول غير المصرح به أو التغيير أو الإفصاح أو التدمير. تشمل هذه الإجراءات:"
                : "We implement reasonable security measures to protect your personal information from unauthorized access, alteration, disclosure, or destruction. These measures include:"}
            </p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "تشفير SSL/TLS لجميع عمليات نقل البيانات" : "SSL/TLS encryption for all data transmissions"}</li>
              <li>{isAr ? "تخزين آمن للبيانات مع ضوابط وصول محدودة" : "Secure data storage with restricted access controls"}</li>
              <li>{isAr ? "مراجعة دورية لممارسات الأمان" : "Regular review of security practices"}</li>
            </ul>
          </SectionCard>

          <SectionCard icon={<Globe className="w-5 h-5" />} title={isAr ? "ملفات تعريف الارتباط" : "Cookies"}>
            <p>
              {isAr
                ? "يستخدم موقعنا ملفات تعريف الارتباط لتحسين تجربتك. يمكنك التحكم في تفضيلات ملفات تعريف الارتباط من خلال شريط الموافقة عند زيارتك الأولى أو عبر إعدادات ملفات تعريف الارتباط في تذييل الصفحة."
                : "Our website uses cookies to enhance your experience. You can control your cookie preferences through the consent banner on your first visit or via the Cookie Settings link in the footer."}
            </p>
            <p>
              {isAr ? (
                <>لمزيد من التفاصيل، يرجى مراجعة <Link href="/cookie-policy" className="text-teal hover:underline">سياسة ملفات تعريف الارتباط</Link>.</>
              ) : (
                <>For more details, please review our <Link href="/cookie-policy" className="text-teal hover:underline">Cookie Policy</Link>.</>
              )}
            </p>
          </SectionCard>

          <SectionCard icon={<UserCheck className="w-5 h-5" />} title={isAr ? "حقوقك" : "Your Rights"}>
            <p>{isAr ? "لديك الحقوق التالية فيما يتعلق ببياناتك الشخصية:" : "You have the following rights regarding your personal data:"}</p>
            <ul className="list-disc ps-5 space-y-1">
              <li><strong>{isAr ? "الوصول:" : "Access:"}</strong> {isAr ? "طلب نسخة من البيانات الشخصية التي نحتفظ بها عنك" : "Request a copy of the personal data we hold about you"}</li>
              <li><strong>{isAr ? "التصحيح:" : "Correction:"}</strong> {isAr ? "طلب تصحيح أي بيانات غير دقيقة" : "Request correction of any inaccurate data"}</li>
              <li><strong>{isAr ? "الحذف:" : "Deletion:"}</strong> {isAr ? "طلب حذف بياناتك الشخصية" : "Request deletion of your personal data"}</li>
              <li><strong>{isAr ? "الاعتراض:" : "Objection:"}</strong> {isAr ? "الاعتراض على معالجة بياناتك لأغراض معينة" : "Object to processing of your data for certain purposes"}</li>
            </ul>
            <p>
              {isAr
                ? "لممارسة أي من هذه الحقوق، يرجى التواصل معنا عبر البريد الإلكتروني على العنوان أدناه."
                : "To exercise any of these rights, please contact us via email at the address below."}
            </p>
          </SectionCard>

          <SectionCard icon={<Shield className="w-5 h-5" />} title={isAr ? "الاحتفاظ بالبيانات" : "Data Retention"}>
            <p>
              {isAr
                ? "نحتفظ ببيانات نموذج الاتصال لمدة لا تتجاوز 24 شهراً من تاريخ الإرسال، أو حتى يتم حل الاستفسار، أيهما أطول. يتم حذف بيانات التحليلات المجهولة الهوية وفقاً لسياسات الاحتفاظ الخاصة بـ Google Analytics."
                : "We retain contact form data for no longer than 24 months from the date of submission, or until the inquiry is resolved, whichever is longer. Anonymized analytics data is deleted according to Google Analytics retention policies."}
            </p>
          </SectionCard>

          <SectionCard icon={<Globe className="w-5 h-5" />} title={isAr ? "روابط الطرف الثالث" : "Third-Party Links"}>
            <p>
              {isAr
                ? "قد يحتوي موقعنا على روابط لمواقع شركائنا والشركات المصنعة. لسنا مسؤولين عن ممارسات الخصوصية لهذه المواقع الخارجية. نشجعك على مراجعة سياسات الخصوصية الخاصة بها."
                : "Our website may contain links to our partners' and manufacturers' websites. We are not responsible for the privacy practices of these external sites. We encourage you to review their respective privacy policies."}
            </p>
          </SectionCard>

          <SectionCard icon={<Mail className="w-5 h-5" />} title={isAr ? "اتصل بنا" : "Contact Us"}>
            <p>
              {isAr
                ? "إذا كانت لديك أي أسئلة حول سياسة الخصوصية هذه أو ممارسات البيانات الخاصة بنا، يرجى التواصل معنا:"
                : "If you have any questions about this Privacy Policy or our data practices, please contact us:"}
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mt-2">
              <p className="font-semibold text-navy">{isAr ? "الزار" : "Alzar FZE"}</p>
              <p>{isAr ? "LOB #21، الدوار السادس، ميناء جبل علي" : "LOB #21, 6th Roundabout, Mina Jebel Ali"}</p>
              <p>{isAr ? "المنطقة الحرة لجبل علي، دبي، الإمارات العربية المتحدة" : "Jebel Ali Free Zone, Dubai, UAE"}</p>
              <p className="mt-2">
                <span dir="ltr">info@alzarfze.com</span> | <span dir="ltr">+971 4 881 4928</span>
              </p>
            </div>
          </SectionCard>

          {/* Update notice */}
          <div className="text-center text-xs text-gray-400 mt-8 pb-4">
            {isAr
              ? "قد نقوم بتحديث سياسة الخصوصية هذه من وقت لآخر. سيتم نشر أي تغييرات على هذه الصفحة مع تاريخ التحديث."
              : "We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated date."}
          </div>
        </div>
      </div>
    </Layout>
  );
}
