import type { Metadata } from "next";
import { SITE, LANGS, type Lang } from "@/lib/config";
import { getCanonicalUrl, getAlternateUrls, getAppBaseUrl } from "@/lib/url";
import HighIntentCTA from "@/components/cta/HighIntentCTA";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

const pageContent = {
  en: {
    title: "Security & Compliance",
    subtitle:
      "Enterprise-grade security to protect your data and your patients",
    heroDescription:
      "Mawidi is built with security at its core. We implement industry-leading practices to ensure your data and your patients' information is always protected.",
    sections: {
      dataProtection: {
        title: "Data Protection",
        items: [
          {
            title: "End-to-End Encryption",
            description:
              "All data in transit is encrypted using TLS 1.3. Data at rest is encrypted using AES-256.",
            icon: "🔐",
          },
          {
            title: "Data Residency",
            description:
              "Your data is stored in secure data centers within the GCC region, ensuring compliance with local data protection laws.",
            icon: "🌍",
          },
          {
            title: "Regular Backups",
            description:
              "Automated daily backups with point-in-time recovery. Your data is never lost.",
            icon: "💾",
          },
          {
            title: "Data Isolation",
            description:
              "Multi-tenant architecture with strict logical separation between customer data.",
            icon: "🔒",
          },
        ],
      },
      compliance: {
        title: "Compliance & Certifications",
        items: [
          {
            title: "PDPL Compliant",
            description:
              "Fully compliant with Saudi Arabia's Personal Data Protection Law (PDPL) requirements.",
            icon: "📋",
          },
          {
            title: "GDPR Ready",
            description:
              "Our data handling practices meet European GDPR standards for international operations.",
            icon: "🇪🇺",
          },
          {
            title: "WhatsApp Business Verified",
            description:
              "Official WhatsApp Business API partner with verified business accounts.",
            icon: "✅",
          },
          {
            title: "PCI-DSS Compliant",
            description:
              "Payment card data is handled by PCI-DSS certified payment processors.",
            icon: "💳",
          },
        ],
      },
      security: {
        title: "Security Measures",
        items: [
          {
            title: "Rate Limiting & DDoS Protection",
            description:
              "Built-in protection against brute force attacks and distributed denial of service attacks.",
            icon: "🛡️",
          },
          {
            title: "CSRF Protection",
            description:
              "Cross-site request forgery protection on all forms and API endpoints.",
            icon: "🔗",
          },
          {
            title: "Content Security Policy",
            description:
              "Strict CSP headers prevent XSS attacks and unauthorized code execution.",
            icon: "📝",
          },
          {
            title: "Regular Security Audits",
            description:
              "Continuous vulnerability scanning and periodic penetration testing.",
            icon: "🔍",
          },
        ],
      },
      access: {
        title: "Access Control",
        items: [
          {
            title: "Role-Based Access",
            description:
              "Fine-grained permissions ensure staff only access what they need.",
            icon: "👥",
          },
          {
            title: "OTP Authentication",
            description:
              "Secure one-time password authentication for all user logins.",
            icon: "📱",
          },
          {
            title: "Session Management",
            description:
              "Secure session handling with automatic timeout and forced re-authentication.",
            icon: "⏱️",
          },
          {
            title: "Audit Logging",
            description:
              "Complete audit trail of all actions for compliance and accountability.",
            icon: "📊",
          },
        ],
      },
    },
    cta: {
      title: "Have Security Questions?",
      subtitle:
        "Our security team is ready to discuss your specific requirements",
    },
    contact: {
      title: "Security Contact",
      description:
        "For security concerns or to report vulnerabilities, please contact our security team.",
      email: "security@mawidi.com",
    },
  },
  ar: {
    title: "الأمان والامتثال",
    subtitle: "أمان على مستوى المؤسسات لحماية بياناتك وبيانات مرضاك",
    heroDescription:
      "بُني موعدي مع الأمان في صميمه. ننفذ أفضل الممارسات الرائدة في الصناعة لضمان حماية بياناتك ومعلومات مرضاك دائمًا.",
    sections: {
      dataProtection: {
        title: "حماية البيانات",
        items: [
          {
            title: "تشفير من طرف لطرف",
            description:
              "جميع البيانات أثناء النقل مشفرة باستخدام TLS 1.3. البيانات المخزنة مشفرة باستخدام AES-256.",
            icon: "🔐",
          },
          {
            title: "موقع تخزين البيانات",
            description:
              "يتم تخزين بياناتك في مراكز بيانات آمنة داخل منطقة الخليج، مما يضمن الامتثال لقوانين حماية البيانات المحلية.",
            icon: "🌍",
          },
          {
            title: "نسخ احتياطي منتظم",
            description:
              "نسخ احتياطي يومي تلقائي مع استرداد نقطة زمنية. بياناتك لن تضيع أبداً.",
            icon: "💾",
          },
          {
            title: "عزل البيانات",
            description:
              "بنية متعددة المستأجرين مع فصل منطقي صارم بين بيانات العملاء.",
            icon: "🔒",
          },
        ],
      },
      compliance: {
        title: "الامتثال والشهادات",
        items: [
          {
            title: "متوافق مع PDPL",
            description:
              "متوافق بالكامل مع متطلبات نظام حماية البيانات الشخصية في المملكة العربية السعودية.",
            icon: "📋",
          },
          {
            title: "جاهز لـ GDPR",
            description:
              "ممارسات معالجة البيانات لدينا تلبي معايير GDPR الأوروبية للعمليات الدولية.",
            icon: "🇪🇺",
          },
          {
            title: "واتساب بيزنس معتمد",
            description:
              "شريك رسمي لواجهة برمجة تطبيقات واتساب بيزنس مع حسابات أعمال موثقة.",
            icon: "✅",
          },
          {
            title: "متوافق مع PCI-DSS",
            description:
              "يتم التعامل مع بيانات بطاقات الدفع من قبل معالجات دفع معتمدة من PCI-DSS.",
            icon: "💳",
          },
        ],
      },
      security: {
        title: "إجراءات الأمان",
        items: [
          {
            title: "الحماية من الهجمات",
            description:
              "حماية مدمجة ضد هجمات القوة الغاشمة وهجمات الحرمان من الخدمة الموزعة.",
            icon: "🛡️",
          },
          {
            title: "حماية CSRF",
            description:
              "حماية من تزوير الطلبات عبر المواقع على جميع النماذج ونقاط API.",
            icon: "🔗",
          },
          {
            title: "سياسة أمان المحتوى",
            description:
              "رؤوس CSP صارمة تمنع هجمات XSS وتنفيذ الكود غير المصرح به.",
            icon: "📝",
          },
          {
            title: "تدقيقات أمنية دورية",
            description: "فحص مستمر للثغرات واختبار اختراق دوري.",
            icon: "🔍",
          },
        ],
      },
      access: {
        title: "التحكم في الوصول",
        items: [
          {
            title: "صلاحيات حسب الدور",
            description: "أذونات دقيقة تضمن وصول الموظفين فقط لما يحتاجونه.",
            icon: "👥",
          },
          {
            title: "المصادقة بكلمة مرور لمرة واحدة",
            description:
              "مصادقة آمنة بكلمة مرور لمرة واحدة لجميع تسجيلات الدخول.",
            icon: "📱",
          },
          {
            title: "إدارة الجلسات",
            description:
              "معالجة آمنة للجلسات مع انتهاء تلقائي وإعادة مصادقة إجبارية.",
            icon: "⏱️",
          },
          {
            title: "سجل التدقيق",
            description: "سجل تدقيق كامل لجميع الإجراءات للامتثال والمساءلة.",
            icon: "📊",
          },
        ],
      },
    },
    cta: {
      title: "هل لديك أسئلة حول الأمان؟",
      subtitle: "فريق الأمان لدينا مستعد لمناقشة متطلباتك الخاصة",
    },
    contact: {
      title: "تواصل الأمان",
      description:
        "لمخاوف الأمان أو الإبلاغ عن الثغرات، يرجى الاتصال بفريق الأمان لدينا.",
      email: "security@mawidi.com",
    },
  },
};

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const content = pageContent[params.lang];
  const baseUrl = getAppBaseUrl();

  return {
    title: content.title,
    description: content.subtitle,
    alternates: {
      languages: getAlternateUrls("/security"),
      canonical: getCanonicalUrl(params.lang, "/security"),
    },
    openGraph: {
      title: `${content.title} | ${SITE.brand}`,
      description: content.subtitle,
      url: `${baseUrl}/${params.lang}/security`,
      siteName: SITE.brand,
      type: "website",
    },
  };
}

export default function SecurityPage({ params }: { params: { lang: Lang } }) {
  const { lang } = params;
  const content = pageContent[lang];
  const isAr = lang === "ar";

  return (
    <div className="bg-white dark:bg-slate-900">
      {/* Hero Section */}
      <section className="relative py-20 px-6 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "radial-gradient(circle at 2px 2px, rgba(16, 185, 129, 0.4) 1px, transparent 0)",
              backgroundSize: "32px 32px",
            }}
          />
        </div>

        <div className="relative max-w-5xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-brand-green/20 text-brand-green rounded-full mb-6">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
              />
            </svg>
            <span className="font-medium">
              {isAr
                ? "حماية على مستوى المؤسسات"
                : "Enterprise-Grade Protection"}
            </span>
          </div>

          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            {content.title}
          </h1>
          <p className="text-xl text-slate-300 max-w-3xl mx-auto mb-8">
            {content.heroDescription}
          </p>

          <div className="flex flex-wrap justify-center gap-6 text-sm">
            <div className="flex items-center gap-2">
              <svg
                className="w-5 h-5 text-brand-green"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clipRule="evenodd"
                />
              </svg>
              <span>{isAr ? "TLS 1.3 تشفير" : "TLS 1.3 Encryption"}</span>
            </div>
            <div className="flex items-center gap-2">
              <svg
                className="w-5 h-5 text-brand-green"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clipRule="evenodd"
                />
              </svg>
              <span>{isAr ? "متوافق مع PDPL" : "PDPL Compliant"}</span>
            </div>
            <div className="flex items-center gap-2">
              <svg
                className="w-5 h-5 text-brand-green"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clipRule="evenodd"
                />
              </svg>
              <span>{isAr ? "بيانات في الخليج" : "GCC Data Residency"}</span>
            </div>
          </div>
        </div>
      </section>

      {/* Security Sections */}
      {Object.entries(content.sections).map(([key, section], sectionIndex) => (
        <section
          key={key}
          className={`py-16 px-6 ${sectionIndex % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-slate-50 dark:bg-slate-800"}`}
        >
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center gap-4 mb-8">
              <span className="text-brand-green font-mono text-sm">
                {String(sectionIndex + 1).padStart(2, "0")}
              </span>
              <div className="w-8 h-px bg-brand-green" />
              <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
                {section.title}
              </h2>
            </div>

            <div className="grid md:grid-cols-2 gap-6">
              {section.items.map((item, itemIndex) => (
                <div
                  key={itemIndex}
                  className="group p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl hover:border-brand-green dark:hover:border-brand-green transition-colors"
                >
                  <div className="flex items-start gap-4">
                    <span className="text-3xl">{item.icon}</span>
                    <div>
                      <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2 group-hover:text-brand-green transition-colors">
                        {item.title}
                      </h3>
                      <p className="text-slate-600 dark:text-slate-400">
                        {item.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* Security Contact */}
      <section className="py-12 px-6 bg-slate-900 text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-2xl font-bold mb-4">{content.contact.title}</h3>
          <p className="text-slate-300 mb-4">{content.contact.description}</p>
          <a
            href={`mailto:${content.contact.email}`}
            className="inline-flex items-center gap-2 text-brand-green hover:text-brand-greenHover font-medium"
          >
            <svg
              className="w-5 h-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
            {content.contact.email}
          </a>
        </div>
      </section>

      {/* CTA Section */}
      <section className="max-w-4xl mx-auto px-4 py-16">
        <HighIntentCTA
          lang={lang}
          variant="section"
          showDemo={true}
          showWhatsApp={true}
          showCall={true}
          title={content.cta.title}
          subtitle={content.cta.subtitle}
        />
      </section>
    </div>
  );
}