"use client";

import type { Lang } from "@/lib/config";
import { useState } from "react";

interface ComponentProps {
  lang: Lang;
}

// ══════════════════════════════════════════════════════════════════
// INTEGRATIONS GALLERY - Editorial Grid
// ══════════════════════════════════════════════════════════════════
export function IntegrationsGallery({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const categories = isAr
    ? [
        {
          key: "payments",
          title: "المدفوعات",
          items: [
            { name: "Stripe", status: "متاح" },
            { name: "Apple Pay", status: "متاح" },
            { name: "Google Pay", status: "متاح" },
          ],
        },
        {
          key: "messaging",
          title: "المراسلة",
          items: [
            { name: "WhatsApp Business", status: "متاح" },
            { name: "SMS", status: "متاح" },
            { name: "Email", status: "متاح" },
          ],
        },
        {
          key: "calendars",
          title: "التقاويم",
          items: [
            { name: "Google Calendar", status: "متاح" },
            { name: "Microsoft 365", status: "متاح" },
            { name: "POS/CRM", status: "قريباً" },
          ],
        },
        {
          key: "accounting",
          title: "المحاسبة",
          items: [
            { name: "Xero", status: "متاح" },
            { name: "QuickBooks", status: "متاح" },
          ],
        },
        {
          key: "storage",
          title: "التخزين",
          items: [
            { name: "Google Drive", status: "متاح" },
            { name: "AWS S3", status: "متاح" },
          ],
        },
        {
          key: "analytics",
          title: "التحليلات",
          items: [
            { name: "Google Analytics 4", status: "متاح" },
            { name: "Looker", status: "قريباً" },
            { name: "Power BI", status: "قريباً" },
          ],
        },
        {
          key: "maps",
          title: "الخرائط",
          items: [
            { name: "Google Maps", status: "متاح" },
            { name: "Apple Maps", status: "متاح" },
          ],
        },
        {
          key: "social",
          title: "وسائل التواصل",
          items: [
            { name: "Instagram", status: "متاح" },
            { name: "Facebook", status: "متاح" },
            { name: "TikTok", status: "قريباً" },
          ],
        },
      ]
    : [
        {
          key: "payments",
          title: "Payments",
          items: [
            { name: "Stripe", status: "Available" },
            { name: "Apple Pay", status: "Available" },
            { name: "Google Pay", status: "Available" },
          ],
        },
        {
          key: "messaging",
          title: "Messaging",
          items: [
            { name: "WhatsApp Business", status: "Available" },
            { name: "SMS", status: "Available" },
            { name: "Email", status: "Available" },
          ],
        },
        {
          key: "calendars",
          title: "Calendars & CRM",
          items: [
            { name: "Google Calendar", status: "Available" },
            { name: "Microsoft 365", status: "Available" },
            { name: "POS/CRM", status: "Coming Soon" },
          ],
        },
        {
          key: "accounting",
          title: "Accounting",
          items: [
            { name: "Xero", status: "Available" },
            { name: "QuickBooks", status: "Available" },
          ],
        },
        {
          key: "storage",
          title: "Storage",
          items: [
            { name: "Google Drive", status: "Available" },
            { name: "AWS S3", status: "Available" },
          ],
        },
        {
          key: "analytics",
          title: "Analytics",
          items: [
            { name: "Google Analytics 4", status: "Available" },
            { name: "Looker", status: "Coming Soon" },
            { name: "Power BI", status: "Coming Soon" },
          ],
        },
        {
          key: "maps",
          title: "Maps",
          items: [
            { name: "Google Maps", status: "Available" },
            { name: "Apple Maps", status: "Available" },
          ],
        },
        {
          key: "social",
          title: "Social Media",
          items: [
            { name: "Instagram", status: "Available" },
            { name: "Facebook", status: "Available" },
            { name: "TikTok", status: "Coming Soon" },
          ],
        },
      ];

  const availableText = isAr ? "متاح" : "Available";

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
      {categories.map((category, idx) => (
        <div
          key={category.key}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
        >
          {/* Category header with number */}
          <div className="flex items-center gap-3 mb-6">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {String(idx + 1).padStart(2, "0")}
            </span>
            <h3 className="text-xl font-bold text-[#1E293B]">
              {category.title}
            </h3>
          </div>

          {/* Integration items */}
          <ul className="space-y-3">
            {category.items.map((item) => (
              <li key={item.name} className="flex items-center justify-between">
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                  <span className="text-[#1E293B] text-sm">{item.name}</span>
                </div>
                <span
                  className={`text-xs font-medium px-2 py-0.5 ${
                    item.status === availableText ||
                    item.status === "Available" ||
                    item.status === "متاح"
                      ? "bg-[#10B981]/10 text-[#10B981]"
                      : "bg-slate-100 text-[#64748B]"
                  }`}
                >
                  {item.status === availableText ||
                  item.status === "Available" ||
                  item.status === "متاح"
                    ? "✓"
                    : "○"}
                </span>
              </li>
            ))}
          </ul>

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

// ══════════════════════════════════════════════════════════════════
// API & WEBHOOKS - Editorial Code Display
// ══════════════════════════════════════════════════════════════════
export function APIWebhooks({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const content = isAr
    ? {
        restTitle: "REST API",
        restDesc: "واجهة برمجية كاملة للوصول إلى جميع وظائف المنصة",
        webhooksTitle: "Webhooks",
        webhooksDesc: "استقبال إشعارات فورية عن الأحداث المهمة",
        sdksTitle: "مكتبات SDK",
        sdks: [
          "JavaScript/TypeScript",
          "Python",
          "PHP (قريباً)",
          "Ruby (قريباً)",
        ],
        rateLimitsTitle: "حدود الطلبات",
      }
    : {
        restTitle: "REST API",
        restDesc: "Complete API access to all platform functionality",
        webhooksTitle: "Webhooks",
        webhooksDesc: "Receive real-time notifications about important events",
        sdksTitle: "SDK Libraries",
        sdks: [
          "JavaScript/TypeScript",
          "Python",
          "PHP (Coming Soon)",
          "Ruby (Coming Soon)",
        ],
        rateLimitsTitle: "Rate Limits",
      };

  const apiEndpoints = [
    {
      method: "GET",
      path: "/api/bookings",
      desc: isAr ? "قائمة الحجوزات" : "List bookings",
    },
    {
      method: "POST",
      path: "/api/bookings",
      desc: isAr ? "إنشاء حجز" : "Create booking",
    },
    {
      method: "GET",
      path: "/api/customers",
      desc: isAr ? "قائمة العملاء" : "List customers",
    },
    {
      method: "POST",
      path: "/api/payments",
      desc: isAr ? "معالجة الدفع" : "Process payment",
    },
  ];

  const webhookExample = `{
  "event": "booking.created",
  "timestamp": "2024-09-26T10:30:00Z",
  "data": {
    "booking_id": "bk_abc123",
    "customer_name": "Ahmed",
    "service": "Dental Cleaning",
    "date": "2024-09-28"
  }
}`;

  return (
    <div className="space-y-8">
      {/* Main Grid - REST API & Webhooks */}
      <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
        {/* REST API */}
        <div className="bg-white p-8 lg:p-10">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              A
            </span>
            <h3 className="text-2xl font-bold text-[#1E293B]">
              {content.restTitle}
            </h3>
          </div>
          <p className="text-[#64748B] mb-8">{content.restDesc}</p>

          {/* API Endpoints - Code style */}
          <div className="bg-[#1E293B] p-6 font-mono text-sm space-y-3">
            {apiEndpoints.map((endpoint, idx) => (
              <div key={idx} className="flex items-center gap-3">
                <span
                  className={`px-2 py-0.5 text-xs font-bold ${
                    endpoint.method === "GET"
                      ? "bg-[#10B981]/20 text-[#10B981]"
                      : "bg-blue-500/20 text-blue-400"
                  }`}
                >
                  {endpoint.method}
                </span>
                <span className="text-cyan-400">{endpoint.path}</span>
                <span className="text-slate-500 text-xs ml-auto hidden sm:inline">
                  {endpoint.desc}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Webhooks */}
        <div className="bg-white p-8 lg:p-10">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              B
            </span>
            <h3 className="text-2xl font-bold text-[#1E293B]">
              {content.webhooksTitle}
            </h3>
          </div>
          <p className="text-[#64748B] mb-8">{content.webhooksDesc}</p>

          {/* Webhook example - Code style */}
          <div className="bg-[#1E293B] p-6 font-mono text-sm overflow-x-auto">
            <pre className="text-slate-300 whitespace-pre-wrap">
              {webhookExample}
            </pre>
          </div>
        </div>
      </div>

      {/* Bottom Row - SDKs & Rate Limits */}
      <div className="grid md:grid-cols-2 gap-px bg-slate-200">
        {/* SDKs */}
        <div className="group bg-white p-8">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              C
            </span>
            <h3 className="text-xl font-bold text-[#1E293B]">
              {content.sdksTitle}
            </h3>
          </div>
          <div className="flex flex-wrap gap-2">
            {content.sdks.map((sdk, idx) => (
              <span
                key={sdk}
                className={`px-4 py-2 text-sm font-medium ${
                  idx < 2
                    ? "bg-[#10B981]/10 text-[#10B981] border border-[#10B981]/20"
                    : "bg-slate-100 text-[#64748B]"
                }`}
              >
                {sdk}
              </span>
            ))}
          </div>
          <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
        </div>

        {/* Rate Limits */}
        <div className="group bg-white p-8">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              D
            </span>
            <h3 className="text-xl font-bold text-[#1E293B]">
              {content.rateLimitsTitle}
            </h3>
          </div>
          <div className="space-y-4">
            {[
              { plan: "Free", limit: "1K/hr", width: "25%" },
              { plan: "Pro", limit: "10K/hr", width: "65%" },
              { plan: "Enterprise", limit: "∞", width: "100%" },
            ].map((tier) => (
              <div key={tier.plan} className="flex items-center gap-4">
                <span className="text-sm text-[#64748B] w-24">{tier.plan}</span>
                <div className="flex-1 h-2 bg-slate-100 overflow-hidden">
                  <div
                    className="h-full bg-[#10B981]"
                    style={{ width: tier.width }}
                  />
                </div>
                <span className="text-sm font-mono text-[#1E293B] w-16 text-right">
                  {tier.limit}
                </span>
              </div>
            ))}
          </div>
          <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════
// IDENTITY & ACCESS - Editorial Grid Cards
// ══════════════════════════════════════════════════════════════════
export function IdentityAccess({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const features = isAr
    ? [
        {
          title: "SSO",
          desc: "دخول موحد عبر SAML 2.0 و OIDC",
          items: [
            "تكامل Azure AD",
            "Okta/Auth0",
            "تسجيل دخول Google Workspace",
            "مزودات مخصصة",
          ],
        },
        {
          title: "توفير SCIM",
          desc: "إدارة المستخدمين والمجموعات تلقائياً",
          items: [
            "مزامنة المستخدم",
            "إلغاء التوفير التلقائي",
            "تعيين المجموعات",
            "تحديثات الملف الشخصي",
          ],
        },
        {
          title: "RBAC",
          desc: "تحكم بالوصول على أساس الدور",
          items: [
            "أدوار مخصصة",
            "صلاحيات دقيقة",
            "تسلسل هرمي للموارد",
            "فصل الواجبات",
          ],
        },
        {
          title: "ضوابط الشبكة",
          desc: "قيود الوصول على أساس IP",
          items: [
            "قوائم بيضاء IP",
            "قيود جغرافية",
            "قواعد VPN",
            "مراقبة الجلسات",
          ],
        },
      ]
    : [
        {
          title: "SSO",
          desc: "Single sign-on via SAML 2.0 & OIDC",
          items: [
            "Azure AD integration",
            "Okta/Auth0",
            "Google Workspace login",
            "Custom providers",
          ],
        },
        {
          title: "SCIM Provisioning",
          desc: "Automatic user and group management",
          items: [
            "User sync",
            "Auto de-provisioning",
            "Group assignment",
            "Profile updates",
          ],
        },
        {
          title: "RBAC",
          desc: "Role-based access control",
          items: [
            "Custom roles",
            "Fine-grained permissions",
            "Resource hierarchy",
            "Separation of duties",
          ],
        },
        {
          title: "Network Controls",
          desc: "IP-based access restrictions",
          items: [
            "IP whitelisting",
            "Geo-restrictions",
            "VPN rules",
            "Session monitoring",
          ],
        },
      ];

  return (
    <div className="grid md:grid-cols-2 gap-px bg-slate-200">
      {features.map((feature, idx) => (
        <div
          key={feature.title}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
        >
          {/* Header with number */}
          <div className="flex items-center gap-3 mb-2">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {String(idx + 1).padStart(2, "0")}
            </span>
            <h3 className="text-2xl font-bold text-[#1E293B]">
              {feature.title}
            </h3>
          </div>
          <p className="text-[#64748B] mb-6">{feature.desc}</p>

          {/* Feature list with square bullets */}
          <ul className="space-y-3">
            {feature.items.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                <span className="text-[#1E293B] text-sm">{item}</span>
              </li>
            ))}
          </ul>

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

// ══════════════════════════════════════════════════════════════════
// SECURITY & COMPLIANCE - Editorial Grid
// ══════════════════════════════════════════════════════════════════
export function SecurityCompliance({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const features = isAr
    ? [
        {
          title: "التشفير",
          desc: "TLS 1.3 أثناء النقل، AES-256 أثناء الراحة",
          badge: "معيار الصناعة",
        },
        {
          title: "دورة حياة البيانات",
          desc: "نسخ احتياطية تلقائية، أرشفة، حذف آمن",
          badge: "آلي",
        },
        {
          title: "ضوابط الخصوصية",
          desc: "تقليل البيانات، حق النسيان، قابلية النقل",
          badge: "متوافق مع GDPR",
        },
        {
          title: "الحوكمة",
          desc: "سياسات الاحتفاظ، فترات الاحتفاظ، إدارة الموافقة",
          badge: "قابل للتخصيص",
        },
      ]
    : [
        {
          title: "Encryption",
          desc: "TLS 1.3 in transit, AES-256 at rest",
          badge: "Industry Standard",
        },
        {
          title: "Data Lifecycle",
          desc: "Auto backups, archival, secure deletion",
          badge: "Automated",
        },
        {
          title: "Privacy Controls",
          desc: "Data minimization, right to be forgotten, portability",
          badge: "GDPR Compliant",
        },
        {
          title: "Governance",
          desc: "Retention policies, hold periods, consent management",
          badge: "Customizable",
        },
      ];

  return (
    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
      {features.map((feature, idx) => (
        <div
          key={feature.title}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
        >
          {/* Badge */}
          <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-xs font-bold uppercase tracking-wider mb-4">
            {feature.badge}
          </span>

          {/* Number + Title */}
          <div className="flex items-center gap-3 mb-2">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {String(idx + 1).padStart(2, "0")}
            </span>
            <h3 className="text-xl font-bold text-[#1E293B]">
              {feature.title}
            </h3>
          </div>

          <p className="text-[#64748B] text-sm">{feature.desc}</p>

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

// ══════════════════════════════════════════════════════════════════
// MEDICAL DATA - Editorial with Healthcare accent
// ══════════════════════════════════════════════════════════════════
export function MedicalData({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const features = isAr
    ? [
        {
          title: "وسم حقول PHI",
          desc: "وضع علامة على البيانات الصحية الحساسة",
          items: [
            "تحديد تلقائي",
            "تشفير إضافي",
            "سجلات الوصول",
            "قيود المشاركة",
          ],
        },
        {
          title: "قواعد القنوات",
          desc: "تحكم في ما يمكن إرساله عبر أي قناة",
          items: [
            "لا PHI عبر SMS",
            "واتساب مشفر فقط",
            "قوالب معتمدة",
            "قواعد مخصصة",
          ],
        },
        {
          title: "مسارات التدقيق",
          desc: "سجلات شاملة للوصول والتغيير",
          items: [
            "من وصل إلى ماذا",
            "متى وأين",
            "ما الذي تغير",
            "تصدير للامتثال",
          ],
        },
        {
          title: "دعم BAA/DPA",
          desc: "اتفاقيات الشركاء التجاريين ومعالجة البيانات",
          items: ["قوالب جاهزة", "توقيع آلي", "مراجعة سنوية", "دعم قانوني"],
        },
      ]
    : [
        {
          title: "PHI Field Tagging",
          desc: "Mark sensitive health data",
          items: [
            "Auto-detection",
            "Extra encryption",
            "Access logs",
            "Sharing restrictions",
          ],
        },
        {
          title: "Channel Rules",
          desc: "Control what can be sent over which channel",
          items: [
            "No PHI over SMS",
            "Encrypted WhatsApp only",
            "Approved templates",
            "Custom rules",
          ],
        },
        {
          title: "Audit Trails",
          desc: "Comprehensive access and change logs",
          items: [
            "Who accessed what",
            "When and where",
            "What changed",
            "Export for compliance",
          ],
        },
        {
          title: "BAA/DPA Support",
          desc: "Business Associate and Data Processing Agreements",
          items: [
            "Ready templates",
            "Auto-signing",
            "Annual review",
            "Legal support",
          ],
        },
      ];

  return (
    <div className="grid md:grid-cols-2 gap-px bg-slate-200">
      {features.map((feature, idx) => (
        <div
          key={feature.title}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300 relative"
        >
          {/* Healthcare accent - subtle red cross watermark */}
          <div className="absolute top-4 right-4 opacity-5 pointer-events-none">
            <svg
              className="w-16 h-16 text-red-500"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-3 10h-3v3h-2v-3H8v-2h3V8h2v3h3v2z" />
            </svg>
          </div>

          {/* Header with number */}
          <div className="flex items-center gap-3 mb-2">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {String(idx + 1).padStart(2, "0")}
            </span>
            <h3 className="text-2xl font-bold text-[#1E293B]">
              {feature.title}
            </h3>
          </div>
          <p className="text-[#64748B] mb-6">{feature.desc}</p>

          {/* Feature list with square bullets */}
          <ul className="space-y-3">
            {feature.items.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                <span className="text-[#1E293B] text-sm">{item}</span>
              </li>
            ))}
          </ul>

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

// ══════════════════════════════════════════════════════════════════
// DATA RESIDENCY - Editorial Global Map
// ══════════════════════════════════════════════════════════════════
export function DataResidency({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const regions = isAr
    ? [
        {
          name: "الشرق الأوسط",
          location: "البحرين / دبي",
          status: "متاح",
          flag: "🇦🇪",
        },
        {
          name: "أوروبا",
          location: "فرانكفورت / لندن",
          status: "متاح",
          flag: "🇪🇺",
        },
        {
          name: "أمريكا الشمالية",
          location: "فيرجينيا الشمالية",
          status: "متاح",
          flag: "🇺🇸",
        },
        {
          name: "آسيا والمحيط الهادئ",
          location: "سنغافورة",
          status: "قريباً",
          flag: "🇸🇬",
        },
      ]
    : [
        {
          name: "Middle East",
          location: "Bahrain / Dubai",
          status: "Available",
          flag: "🇦🇪",
        },
        {
          name: "Europe",
          location: "Frankfurt / London",
          status: "Available",
          flag: "🇪🇺",
        },
        {
          name: "North America",
          location: "N. Virginia",
          status: "Available",
          flag: "🇺🇸",
        },
        {
          name: "Asia Pacific",
          location: "Singapore",
          status: "Coming Soon",
          flag: "🇸🇬",
        },
      ];

  const features = isAr
    ? [
        { title: "حدود البيانات", desc: "البيانات لا تغادر المنطقة المحددة" },
        { title: "عزل المستأجرين", desc: "بنية تحتية منفصلة لكل عميل مؤسسي" },
        { title: "خيارات التصدير", desc: "تصدير كامل للبيانات في أي وقت" },
      ]
    : [
        {
          title: "Data Boundaries",
          desc: "Data never leaves specified region",
        },
        {
          title: "Tenant Isolation",
          desc: "Separate infrastructure for each enterprise client",
        },
        { title: "Export Options", desc: "Full data export anytime" },
      ];

  const availableStatus = isAr ? "متاح" : "Available";

  return (
    <div className="space-y-8">
      {/* Region Grid */}
      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
        {regions.map((region, idx) => (
          <div
            key={region.name}
            className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300 text-center"
          >
            {/* Flag */}
            <div className="text-4xl mb-4">{region.flag}</div>

            {/* Number + Name */}
            <div className="flex items-center justify-center gap-2 mb-2">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {String(idx + 1).padStart(2, "0")}
              </span>
              <h3 className="text-lg font-bold text-[#1E293B]">
                {region.name}
              </h3>
            </div>

            <p className="text-sm text-[#64748B] mb-4">{region.location}</p>

            {/* Status badge */}
            <span
              className={`inline-block px-3 py-1 text-xs font-bold ${
                region.status === availableStatus
                  ? "bg-[#10B981]/10 text-[#10B981]"
                  : "bg-slate-100 text-[#64748B]"
              }`}
            >
              {region.status}
            </span>

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

      {/* Features Row */}
      <div className="grid md:grid-cols-3 gap-px bg-slate-200">
        {features.map((feature, idx) => (
          <div
            key={feature.title}
            className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
          >
            <div className="flex items-center gap-3 mb-2">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {String.fromCharCode(65 + idx)}
              </span>
              <h4 className="font-bold text-[#1E293B]">{feature.title}</h4>
            </div>
            <p className="text-sm text-[#64748B]">{feature.desc}</p>
            <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
          </div>
        ))}
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════
// AUDIT & MONITORING - Editorial Grid
// ══════════════════════════════════════════════════════════════════
export function AuditMonitoring({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const features = isAr
    ? [
        {
          title: "تسجيل التدقيق",
          desc: "سجلات غير قابلة للتغيير لجميع الإجراءات",
          items: [
            "تسجيل الدخول/الخروج",
            "تصدير البيانات",
            "تغييرات الصلاحيات",
            "الوصول إلى PHI",
          ],
        },
        {
          title: "بث SIEM",
          desc: "دفق السجلات إلى نظام SIEM الخاص بك",
          items: ["Splunk", "Datadog", "AWS CloudWatch", "Azure Sentinel"],
        },
        {
          title: "حالة الصحة",
          desc: "مراقبة وقت التشغيل والأداء",
          items: [
            "صفحة الحالة",
            "إشعارات الحوادث",
            "مقاييس الأداء",
            "تاريخ وقت التشغيل",
          ],
        },
        {
          title: "ملخصات الأمان",
          desc: "تقارير أمان أسبوعية/شهرية",
          items: [
            "محاولات تسجيل الدخول",
            "نشاط غير عادي",
            "نتائج الامتثال",
            "إجراءات موصى بها",
          ],
        },
      ]
    : [
        {
          title: "Audit Logging",
          desc: "Immutable logs of all actions",
          items: [
            "Login/logout",
            "Data exports",
            "Permission changes",
            "PHI access",
          ],
        },
        {
          title: "SIEM Streaming",
          desc: "Stream logs to your SIEM",
          items: ["Splunk", "Datadog", "AWS CloudWatch", "Azure Sentinel"],
        },
        {
          title: "Health Status",
          desc: "Uptime and performance monitoring",
          items: [
            "Status page",
            "Incident notifications",
            "Performance metrics",
            "Uptime history",
          ],
        },
        {
          title: "Security Digests",
          desc: "Weekly/monthly security reports",
          items: [
            "Login attempts",
            "Unusual activity",
            "Compliance findings",
            "Recommended actions",
          ],
        },
      ];

  return (
    <div className="grid md:grid-cols-2 gap-px bg-slate-200">
      {features.map((feature, idx) => (
        <div
          key={feature.title}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
        >
          {/* Header with number */}
          <div className="flex items-center gap-3 mb-2">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {String(idx + 1).padStart(2, "0")}
            </span>
            <h3 className="text-2xl font-bold text-[#1E293B]">
              {feature.title}
            </h3>
          </div>
          <p className="text-[#64748B] mb-6">{feature.desc}</p>

          {/* Feature list with square bullets */}
          <ul className="space-y-3">
            {feature.items.map((item) => (
              <li key={item} className="flex items-start gap-3">
                <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                <span className="text-[#1E293B] text-sm">{item}</span>
              </li>
            ))}
          </ul>

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

// ══════════════════════════════════════════════════════════════════
// MIGRATION & SUPPORT - Editorial Grid with accent bars
// ══════════════════════════════════════════════════════════════════
export function MigrationSupport({ lang }: ComponentProps) {
  const isAr = lang === "ar";

  const features = isAr
    ? [
        {
          title: "أدوات الاستيراد",
          desc: "استيراد البيانات من الأنظمة الحالية",
          items: [
            "CSV/Excel",
            "قواعد البيانات",
            "منصات أخرى",
            "تنظيف البيانات",
          ],
        },
        {
          title: "خدمات الترحيل",
          desc: "دعم كامل للترحيل من فريقنا",
          items: [
            "تخطيط الترحيل",
            "تنفيذ",
            "تحقق من البيانات",
            "دعم ما بعد الترحيل",
          ],
        },
        {
          title: "البيئات",
          desc: "بيئات منفصلة للتطوير/التجهيز/الإنتاج",
          items: ["Sandbox", "Staging", "Production", "نسخ البيانات"],
        },
        {
          title: "اتفاقيات مستوى الخدمة",
          desc: "دعم مخصص بناءً على خطتك",
          items: [
            "24/7 للمؤسسات",
            "ساعات العمل للمحترفين",
            "مدير نجاح مخصص",
            "سلاك/فرق خاص",
          ],
        },
      ]
    : [
        {
          title: "Import Tools",
          desc: "Import data from existing systems",
          items: ["CSV/Excel", "Databases", "Other platforms", "Data cleaning"],
        },
        {
          title: "Migration Services",
          desc: "Full migration support from our team",
          items: [
            "Migration planning",
            "Execution",
            "Data validation",
            "Post-migration support",
          ],
        },
        {
          title: "Environments",
          desc: "Separate dev/staging/production environments",
          items: ["Sandbox", "Staging", "Production", "Data cloning"],
        },
        {
          title: "Support SLAs",
          desc: "Dedicated support based on your plan",
          items: [
            "24/7 for Enterprise",
            "Business hours for Pro",
            "Dedicated success manager",
            "Private Slack/Teams",
          ],
        },
      ];

  return (
    <div className="grid md:grid-cols-2 gap-px bg-slate-200">
      {features.map((feature, idx) => (
        <div key={feature.title} className="group bg-white overflow-hidden">
          {/* Top accent bar */}
          <div className="h-1 bg-[#10B981]" />

          <div className="p-8 hover:bg-[#FAFAFA] transition-colors duration-300">
            {/* Header with number */}
            <div className="flex items-center gap-3 mb-2">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {String(idx + 1).padStart(2, "0")}
              </span>
              <h3 className="text-2xl font-bold text-[#1E293B]">
                {feature.title}
              </h3>
            </div>
            <p className="text-[#64748B] mb-6">{feature.desc}</p>

            {/* Feature list with square bullets */}
            <ul className="space-y-3">
              {feature.items.map((item) => (
                <li key={item} className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                  <span className="text-[#1E293B] text-sm">{item}</span>
                </li>
              ))}
            </ul>

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

// ══════════════════════════════════════════════════════════════════
// FAQ - Editorial Accordion
// ══════════════════════════════════════════════════════════════════
export function FAQ({ lang }: ComponentProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const isAr = lang === "ar";

  const faqs = isAr
    ? [
        {
          q: "كيف تعمل عملية تأهيل SSO؟",
          a: "نحن ندعم SAML 2.0 و OIDC. يوفر فريقنا التوثيق والدعم الكامل للتكامل مع مزود الهوية الخاص بك.",
        },
        {
          q: "هل يمكنني استضافة Mawidi على البنية التحتية الخاصة بي؟",
          a: "نعم، نقدم خيارات النشر المحلي والسحابة الخاصة للعملاء المؤسسيين مع احتياجات امتثال محددة.",
        },
        {
          q: "ما الشهادات الأمنية التي تمتلكونها؟",
          a: "نحن متوافقون مع SOC 2 Type II، ISO 27001، ومتوافقون مع القانون العام لحماية البيانات. يتم إجراء تقييمات أمنية منتظمة.",
        },
        {
          q: "كم يستغرق الترحيل النموذجي؟",
          a: "تستغرق معظم عمليات الترحيل من 2-4 أسابيع اعتماداً على حجم البيانات والتعقيد. نوفر الدعم الكامل طوال العملية.",
        },
        {
          q: "هل تدعمون إقامة البيانات لدول الخليج؟",
          a: "نعم، نقدم استضافة إقليمية في البحرين ودبي لتلبية متطلبات إقامة البيانات في دول الخليج.",
        },
        {
          q: "ما هي حدود معدل API؟",
          a: "1000 طلب/ساعة للخطط القياسية، 10000 للخطط المحترفة، وغير محدود لعملاء المؤسسات.",
        },
      ]
    : [
        {
          q: "How does SSO onboarding work?",
          a: "We support SAML 2.0 and OIDC. Our team provides complete documentation and support for integrating with your identity provider.",
        },
        {
          q: "Can I host Mawidi on my own infrastructure?",
          a: "Yes, we offer on-premise and private cloud deployment options for enterprise customers with specific compliance needs.",
        },
        {
          q: "What security certifications do you have?",
          a: "We are SOC 2 Type II compliant, ISO 27001 certified, and GDPR compliant. Regular security assessments are conducted.",
        },
        {
          q: "How long does a typical migration take?",
          a: "Most migrations take 2-4 weeks depending on data volume and complexity. We provide full support throughout the process.",
        },
        {
          q: "Do you support data residency for GCC countries?",
          a: "Yes, we offer regional hosting in Bahrain and Dubai to meet GCC data residency requirements.",
        },
        {
          q: "What are the API rate limits?",
          a: "1000 requests/hour for standard plans, 10000 for professional plans, and unlimited for enterprise customers.",
        },
      ];

  return (
    <div className="space-y-px bg-slate-200">
      {faqs.map((faq, index) => (
        <div key={index} className="bg-white">
          <button
            onClick={() => setOpenIndex(openIndex === index ? null : index)}
            className="w-full flex items-start gap-4 p-6 text-left hover:bg-[#FAFAFA] transition-colors duration-300"
          >
            {/* Number */}
            <span className="text-[#10B981] font-mono text-xs pt-1" dir="ltr">
              {String(index + 1).padStart(2, "0")}
            </span>

            {/* Question */}
            <span className="flex-1 font-bold text-[#1E293B] text-lg">
              {faq.q}
            </span>

            {/* Toggle icon */}
            <div
              className={`w-8 h-8 flex items-center justify-center border-2 transition-all duration-300 ${
                openIndex === index
                  ? "bg-[#10B981] border-[#10B981] text-white"
                  : "border-slate-200 text-[#64748B]"
              }`}
            >
              <svg
                className={`w-4 h-4 transition-transform duration-300 ${openIndex === index ? "rotate-180" : ""}`}
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </div>
          </button>

          {/* Answer */}
          <div
            className={`overflow-hidden transition-all duration-300 ${
              openIndex === index ? "max-h-96" : "max-h-0"
            }`}
          >
            <div className="px-6 pb-6 pl-16">
              <p className="text-[#64748B] leading-relaxed">{faq.a}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}