"use client";

import { UI, type Lang } from "@/lib/config";
import { useState, useEffect } from "react";
import { logger } from "@/lib/logger";

// Function to detect currency based on IP/location
function useLocalCurrency() {
  const [currency, setCurrency] = useState("QAR");

  useEffect(() => {
    const detectCountry = async () => {
      try {
        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        if (timezone.includes("Riyadh")) setCurrency("SAR");
        else if (timezone.includes("Dubai")) setCurrency("AED");
        else if (timezone.includes("Qatar")) setCurrency("QAR");
        else if (timezone.includes("Kuwait")) setCurrency("KWD");
        else if (timezone.includes("Muscat")) setCurrency("OMR");
        else if (timezone.includes("Bahrain")) setCurrency("BHD");
      } catch {
        logger.debug("Using default currency", { currency: "QAR" });
      }
    };
    detectCountry();
  }, []);

  return currency;
}

// ==================== KPI Cards Component - Editorial Grid ====================
export function KPICards({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const currency = useLocalCurrency();

  const kpis = [
    {
      label: t.kpiRevenue,
      value: "125,450",
      currency,
      change: "+18%",
      positive: true,
      num: "01",
    },
    {
      label: t.kpiBookings,
      value: "342",
      change: "+12%",
      positive: true,
      num: "02",
    },
    {
      label: t.kpiShowRate,
      value: "87%",
      change: "+5%",
      positive: true,
      num: "03",
    },
    {
      label: t.kpiUtilization,
      value: "76%",
      change: "+8%",
      positive: true,
      num: "04",
    },
    {
      label: t.kpiAOV,
      value: "367",
      currency,
      change: "+3%",
      positive: true,
      num: "05",
    },
    {
      label: t.kpiNewVsReturning,
      value: "65:35",
      change: "Balanced",
      positive: true,
      num: "06",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
      {kpis.map((kpi) => (
        <article
          key={kpi.num}
          className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
        >
          {/* Number and label */}
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {kpi.num}
            </span>
            <h3 className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {kpi.label}
            </h3>
          </div>

          {/* Value */}
          <p className="text-4xl font-bold text-[#1E293B] mb-3">
            {kpi.value}
            {kpi.currency && (
              <span className="text-lg font-normal text-[#64748B] ml-2">
                {kpi.currency}
              </span>
            )}
          </p>

          {/* Change badge */}
          <div className="flex items-center justify-between">
            <span
              className={`text-sm font-semibold ${
                kpi.positive ? "text-[#10B981]" : "text-red-500"
              }`}
            >
              {kpi.change}
            </span>
            {/* Hover underline */}
            <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
          </div>
        </article>
      ))}
    </div>
  );
}

// ==================== Dashboard Widgets Component - Editorial Style ====================
export function DashboardWidgets({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const currency = useLocalCurrency();
  const isAr = lang === "ar";

  const widgets = [
    {
      title: t.dashboardLiveWidget1,
      value: `45,230 ${currency}`,
      subtitle: isAr ? "اليوم مقابل 38,120 أمس" : "Today vs 38,120 yesterday",
      num: "01",
    },
    {
      title: t.dashboardLiveWidget2,
      value: isAr ? "28 حجز" : "28 bookings",
      subtitle: isAr ? "خلال 24 ساعة القادمة" : "Next 24 hours",
      num: "02",
    },
    {
      title: t.dashboardLiveWidget3,
      value: isAr ? "94% متوسط" : "94% avg",
      subtitle: isAr ? "معدل استخدام الموظفين" : "Staff utilization rate",
      num: "03",
    },
    {
      title: t.dashboardLiveWidget4,
      value: isAr ? "12 خدمة" : "12 services",
      subtitle: isAr
        ? "الأفضل أداءً: تصفيف الشعر"
        : "Top performer: Hair Styling",
      num: "04",
    },
  ];

  return (
    <div className="space-y-8">
      {/* Widgets Grid - Editorial Style */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-slate-200">
        {widgets.map((widget) => (
          <article
            key={widget.num}
            className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
          >
            <div className="flex items-center gap-3 mb-4">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {widget.num}
              </span>
              <h3 className="font-semibold text-[#1E293B]">{widget.title}</h3>
            </div>
            <p className="text-3xl font-bold text-[#1E293B] mb-2">
              {widget.value}
            </p>
            <p className="text-sm text-[#64748B] mb-4">{widget.subtitle}</p>
            <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
          </article>
        ))}
      </div>

      {/* Chart Section */}
      <div className="bg-white border border-slate-200 p-8">
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-3">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              05
            </span>
            <h3 className="font-semibold text-[#1E293B]">
              {isAr
                ? "اتجاه الإيرادات (آخر 30 يوم)"
                : "Revenue Trend (Last 30 Days)"}
            </h3>
          </div>
          <div className="flex gap-1">
            {["7D", "30D", "90D", "YTD"].map((period, i) => (
              <button
                key={period}
                className={`px-4 py-2 text-sm font-medium transition-colors ${
                  i === 1
                    ? "bg-[#10B981] text-white"
                    : "text-[#64748B] hover:bg-[#FAFAFA]"
                }`}
              >
                {period}
              </button>
            ))}
          </div>
        </div>

        {/* Bar Chart */}
        <div className="flex items-end justify-between gap-1 h-56">
          {[...Array(30)].map((_, i) => {
            const height = 20 + Math.random() * 80;
            return (
              <div
                key={i}
                className="group/bar relative flex-1 bg-[#10B981]/20 hover:bg-[#10B981] transition-colors cursor-pointer"
                style={{ height: `${height}%` }}
              >
                <div className="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap bg-[#1E293B] text-white text-xs px-2 py-1 opacity-0 group-hover/bar:opacity-100 transition-opacity">
                  {Math.round(height * 100)} {currency}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ==================== Reports Library Component - Editorial Grid ====================
export function ReportsLibrary({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isAr = lang === "ar";

  const reports = [
    { name: t.reportRevenue, num: "01" },
    { name: t.reportBookings, num: "02" },
    { name: t.reportCustomers, num: "03" },
    { name: t.reportStaff, num: "04" },
    { name: t.reportServices, num: "05" },
    { name: t.reportExpenses, num: "06" },
    { name: t.reportPL, num: "07" },
    { name: t.reportMarketing, num: "08" },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
      {reports.map((report) => (
        <article
          key={report.num}
          className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
        >
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {report.num}
            </span>
            <h3 className="font-semibold text-[#1E293B] text-sm">
              {report.name}
            </h3>
          </div>

          <div className="flex gap-2 mt-6">
            <button className="flex-1 px-3 py-2 bg-[#10B981] text-white text-xs font-medium hover:bg-[#059669] transition-colors">
              {isAr ? "عرض" : "View"}
            </button>
            <button className="flex-1 px-3 py-2 border border-[#10B981] text-[#10B981] text-xs font-medium hover:bg-[#10B981]/5 transition-colors">
              {isAr ? "تصدير" : "Export"}
            </button>
          </div>

          <div className="w-0 group-hover:w-full h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
        </article>
      ))}
    </div>
  );
}

// ==================== Expense Tracker Component - Editorial Style ====================
export function ExpenseTracker({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const currency = useLocalCurrency();
  const isAr = lang === "ar";

  const expenses = [
    { category: t.expenseCategory1, amount: 45000, num: "01" },
    { category: t.expenseCategory2, amount: 12000, num: "02" },
    { category: t.expenseCategory3, amount: 8500, num: "03" },
    { category: t.expenseCategory4, amount: 6200, num: "04" },
    { category: t.expenseCategory5, amount: 4800, num: "05" },
    { category: t.expenseCategory6, amount: 3200, num: "06" },
  ];

  const totalExpenses = expenses.reduce((sum, exp) => sum + exp.amount, 0);
  const revenue = 125450;
  const profit = revenue - totalExpenses;
  const profitMargin = ((profit / revenue) * 100).toFixed(1);

  return (
    <div className="space-y-8">
      {/* P&L Summary - Light green tint instead of dark */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200">
        <div className="bg-gradient-to-br from-[#10B981]/[0.08] to-white p-8">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              01
            </span>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "إجمالي الإيرادات" : "Total Revenue"}
            </span>
          </div>
          <p className="text-4xl font-bold text-[#1E293B]">
            {revenue.toLocaleString()}
          </p>
          <p className="text-sm text-[#64748B] mt-1">{currency}</p>
        </div>
        <div className="bg-white p-8">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              02
            </span>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "إجمالي المصروفات" : "Total Expenses"}
            </span>
          </div>
          <p className="text-4xl font-bold text-[#1E293B]">
            {totalExpenses.toLocaleString()}
          </p>
          <p className="text-sm text-[#64748B] mt-1">{currency}</p>
        </div>
        <div className="bg-gradient-to-br from-[#10B981]/[0.08] to-white p-8">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              03
            </span>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "صافي الربح" : "Net Profit"}
            </span>
          </div>
          <p className="text-4xl font-bold text-[#10B981]">
            {profit.toLocaleString()}
          </p>
          <div className="flex items-center gap-2 mt-1">
            <span className="text-sm text-[#64748B]">{currency}</span>
            <span className="text-sm font-semibold text-[#10B981]">
              {profitMargin}% {isAr ? "هامش" : "margin"}
            </span>
          </div>
        </div>
      </div>

      {/* Expense Breakdown */}
      <div className="bg-white border border-slate-200 p-8">
        <div className="flex items-center gap-3 mb-8">
          <span className="text-[#10B981] font-mono text-xs" dir="ltr">
            04
          </span>
          <h3 className="font-semibold text-[#1E293B]">
            {isAr ? "تفصيل المصروفات" : "Expense Breakdown"}
          </h3>
        </div>
        <div className="space-y-5">
          {expenses.map((expense) => {
            const percentage = ((expense.amount / totalExpenses) * 100).toFixed(
              1,
            );
            return (
              <div key={expense.num} className="group">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {expense.num}
                    </span>
                    <span className="text-sm font-medium text-[#1E293B]">
                      {expense.category}
                    </span>
                  </div>
                  <span className="text-sm text-[#64748B]">
                    {expense.amount.toLocaleString()} {currency} ({percentage}%)
                  </span>
                </div>
                <div className="h-2 bg-slate-100 overflow-hidden">
                  <div
                    className="h-full bg-[#10B981] transition-all duration-500 group-hover:bg-[#059669]"
                    style={{ width: `${percentage}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ==================== Owner Digest Preview Component - Editorial Style ====================
export function OwnerDigestPreview({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const [frequency, setFrequency] = useState<"daily" | "weekly">("weekly");
  const [channel, setChannel] = useState<"email" | "whatsapp" | "voice">(
    "email",
  );
  const currency = useLocalCurrency();
  const isAr = lang === "ar";

  const channelContent = {
    email: {
      metrics: [
        {
          label: isAr ? "الإيرادات" : "Revenue",
          value: `125,450 ${currency}`,
          change: "+18%",
        },
        { label: isAr ? "الحجوزات" : "Bookings", value: "342", change: "+12%" },
        {
          label: isAr ? "معدل الحضور" : "Show Rate",
          value: "87%",
          change: "+5%",
        },
        {
          label: isAr ? "عملاء جدد" : "New Customers",
          value: "89",
          change: "+22%",
        },
      ],
      subject: isAr
        ? "ملخص أدائك - الإيرادات ارتفعت 18%"
        : "Your Performance Digest - Revenue Up 18%",
    },
    whatsapp: {
      metrics: [
        {
          label: isAr ? "الرسائل المرسلة" : "Messages Sent",
          value: "1,245",
          change: "+15%",
        },
        {
          label: isAr ? "معدل الرد" : "Reply Rate",
          value: "92%",
          change: "+8%",
        },
        {
          label: isAr ? "حجوزات عبر الدردشة" : "Bookings via Chat",
          value: "186",
          change: "+25%",
        },
        {
          label: isAr ? "متوسط الرد" : "Avg Response",
          value: isAr ? "2 دقيقة" : "2 min",
          change: "-30%",
        },
      ],
      subject: isAr ? "ملخص واتساب: 186 حجز" : "WhatsApp Digest: 186 bookings",
    },
    voice: {
      metrics: [
        {
          label: isAr ? "المكالمات المعالجة" : "Calls Handled",
          value: "487",
          change: "+28%",
        },
        {
          label: isAr ? "حلول الذكاء الاصطناعي" : "AI Resolution",
          value: "73%",
          change: "+15%",
        },
        {
          label: isAr ? "متوسط المكالمة" : "Avg Call Time",
          value: isAr ? "3.2 دقيقة" : "3.2 min",
          change: "-18%",
        },
        { label: isAr ? "الحجوزات" : "Bookings", value: "94", change: "+31%" },
      ],
      subject: isAr
        ? "المساعد الصوتي: 487 مكالمة"
        : "Voice Agent: 487 calls handled",
    },
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
      {/* Settings */}
      <div className="space-y-6">
        {/* Frequency */}
        <div className="bg-white border border-slate-200 p-6">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              01
            </span>
            <h3 className="font-semibold text-[#1E293B]">
              {t.ownerDigestFrequency}
            </h3>
          </div>
          <div className="flex gap-2">
            {(["daily", "weekly"] as const).map((opt) => (
              <button
                key={opt}
                onClick={() => setFrequency(opt)}
                className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
                  frequency === opt
                    ? "bg-[#10B981] text-white"
                    : "bg-[#FAFAFA] text-[#64748B] hover:bg-slate-100"
                }`}
              >
                {opt === "daily" ? t.ownerDigestDaily : t.ownerDigestWeekly}
              </button>
            ))}
          </div>
        </div>

        {/* Channel */}
        <div className="bg-white border border-slate-200 p-6">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              02
            </span>
            <h3 className="font-semibold text-[#1E293B]">
              {t.ownerDigestChannel}
            </h3>
          </div>
          <div className="grid grid-cols-3 gap-2">
            {(
              [
                { value: "email", label: isAr ? "بريد" : "Email" },
                { value: "whatsapp", label: isAr ? "واتساب" : "WhatsApp" },
                { value: "voice", label: isAr ? "صوت" : "Voice" },
              ] as const
            ).map((opt) => (
              <button
                key={opt.value}
                onClick={() => setChannel(opt.value)}
                className={`px-4 py-3 text-sm font-medium transition-colors ${
                  channel === opt.value
                    ? "bg-[#10B981] text-white"
                    : "bg-[#FAFAFA] text-[#64748B] hover:bg-slate-100"
                }`}
              >
                {opt.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Preview */}
      <div className="bg-white border border-slate-200 p-6">
        <div className="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
          <div className="flex items-center gap-3">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              03
            </span>
            <div>
              <h3 className="text-sm font-semibold text-[#1E293B]">
                {channelContent[channel].subject}
              </h3>
              <p className="text-xs text-[#64748B]">
                {frequency === "daily"
                  ? isAr
                    ? "اليوم"
                    : "Today"
                  : isAr
                    ? "هذا الأسبوع"
                    : "This Week"}
              </p>
            </div>
          </div>
          <span className="px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-xs font-medium">
            {frequency === "daily"
              ? isAr
                ? "يومي"
                : "Daily"
              : isAr
                ? "أسبوعي"
                : "Weekly"}
          </span>
        </div>

        <div className="space-y-4">
          {channelContent[channel].metrics.map((metric, i) => (
            <div key={i} className="flex items-center justify-between py-2">
              <span className="text-sm text-[#64748B]">{metric.label}</span>
              <div className="flex items-center gap-3">
                <span className="font-semibold text-[#1E293B]">
                  {metric.value}
                </span>
                <span className="text-xs font-medium text-[#10B981]">
                  {metric.change}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ==================== Roles Manager Component - Editorial Grid ====================
export function RolesManager({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isAr = lang === "ar";

  const roles = [
    {
      name: t.roleOwner,
      permissions: [
        isAr ? "وصول كامل" : "Full Access",
        isAr ? "جميع التقارير" : "All Reports",
        isAr ? "جميع الفروع" : "All Locations",
        isAr ? "الإعدادات" : "Settings",
      ],
      num: "01",
    },
    {
      name: t.roleManager,
      permissions: [
        isAr ? "الحجوزات" : "Bookings",
        isAr ? "التقارير" : "Reports",
        isAr ? "الموظفين" : "Staff",
        isAr ? "فروع محددة" : "Assigned Locations",
      ],
      num: "02",
    },
    {
      name: t.roleReceptionist,
      permissions: [
        isAr ? "الحجوزات" : "Bookings",
        isAr ? "العملاء" : "Customers",
        isAr ? "تقارير أساسية" : "Basic Reports",
        isAr ? "فرع واحد" : "Single Location",
      ],
      num: "03",
    },
    {
      name: t.roleStaff,
      permissions: [
        isAr ? "جدولي الخاص" : "Own Schedule",
        isAr ? "حجوزاتي" : "Own Bookings",
        isAr ? "فرع واحد" : "Single Location",
      ],
      num: "04",
    },
    {
      name: t.roleViewOnly,
      permissions: [
        isAr ? "عرض لوحة التحكم" : "View Dashboards",
        isAr ? "عرض التقارير" : "View Reports",
        isAr ? "بدون صلاحية تعديل" : "No Edit Access",
      ],
      num: "05",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
      {roles.map((role) => (
        <article
          key={role.num}
          className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
        >
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {role.num}
            </span>
            <h3 className="font-semibold text-[#1E293B]">{role.name}</h3>
          </div>

          {/* Square bullets for permissions */}
          <ul className="space-y-2 mb-4">
            {role.permissions.map((perm, i) => (
              <li
                key={i}
                className="flex items-start gap-2 text-sm text-[#64748B]"
              >
                <div className="w-1.5 h-1.5 bg-[#10B981] mt-1.5 flex-shrink-0" />
                {perm}
              </li>
            ))}
          </ul>

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

// ==================== Export Options Component - Editorial Grid ====================
export function ExportOptions({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isAr = lang === "ar";

  const options = [
    {
      title: t.exportCSV,
      description: isAr
        ? "تصدير البيانات الخام لـ Excel, Google Sheets"
        : "Export raw data for Excel, Google Sheets",
      num: "01",
    },
    {
      title: t.exportPDF,
      description: isAr
        ? "تقارير مهنية منسقة"
        : "Professional formatted reports",
      num: "02",
    },
    {
      title: t.scheduleReport,
      description: isAr
        ? "تقارير تلقائية يومية/أسبوعية/شهرية"
        : "Automated daily/weekly/monthly reports",
      num: "03",
    },
    {
      title: t.shareLink,
      description: isAr
        ? "روابط آمنة للقراءة فقط"
        : "Secure read-only links for stakeholders",
      num: "04",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
      {options.map((opt) => (
        <article
          key={opt.num}
          className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors cursor-pointer"
        >
          <div className="flex items-center gap-3 mb-4">
            <span className="text-[#10B981] font-mono text-xs" dir="ltr">
              {opt.num}
            </span>
            <h3 className="font-semibold text-[#1E293B] text-sm">
              {opt.title}
            </h3>
          </div>
          <p className="text-sm text-[#64748B] mb-6">{opt.description}</p>
          <div className="w-0 group-hover:w-full h-0.5 bg-[#10B981] transition-all duration-300" />
        </article>
      ))}
    </div>
  );
}

// ==================== Integrations Component - Editorial Style ====================
export function Integrations({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isAr = lang === "ar";

  const integrations = [
    {
      name: t.integrationPayments,
      examples: "Mada, Visa, Mastercard, Apple Pay, STC Pay",
      status: isAr ? "نشط" : "Active",
      num: "01",
    },
    {
      name: t.integrationCalendar,
      examples: "Google Calendar, Outlook, iCloud",
      status: isAr ? "نشط" : "Active",
      num: "02",
    },
    {
      name: t.integrationAccounting,
      examples: "QuickBooks, Xero, Wave",
      status: isAr ? "قريباً" : "Coming Soon",
      num: "03",
    },
    {
      name: t.integrationEMR,
      examples: isAr
        ? "أنظمة متوافقة مع HL7, FHIR"
        : "HL7, FHIR compatible systems",
      status: isAr ? "قريباً" : "Coming Soon",
      num: "04",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-slate-200">
      {integrations.map((int) => (
        <article
          key={int.num}
          className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
        >
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {int.num}
              </span>
              <h3 className="font-semibold text-[#1E293B]">{int.name}</h3>
            </div>
            <span
              className={`px-3 py-1 text-xs font-medium ${
                int.status === (isAr ? "نشط" : "Active")
                  ? "bg-[#10B981]/10 text-[#10B981]"
                  : "bg-amber-500/10 text-amber-600"
              }`}
            >
              {int.status}
            </span>
          </div>
          <p className="text-sm text-[#64748B] mb-4">{int.examples}</p>
          <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
        </article>
      ))}
    </div>
  );
}

// ==================== FAQ Component - Editorial Style ====================
export function FAQ({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const faqs = [
    { q: t.faqQ1, a: t.faqA1, num: "01" },
    { q: t.faqQ2, a: t.faqA2, num: "02" },
    { q: t.faqQ3, a: t.faqA3, num: "03" },
    { q: t.faqQ4, a: t.faqA4, num: "04" },
    { q: t.faqQ5, a: t.faqA5, num: "05" },
    { q: t.faqQ6, a: t.faqA6, num: "06" },
  ];

  return (
    <div className="space-y-0 border border-slate-200">
      {faqs.map((faq, i) => (
        <div
          key={faq.num}
          className={`bg-white transition-colors ${i !== 0 ? "border-t border-slate-200" : ""}`}
        >
          <button
            onClick={() => setOpenIndex(openIndex === i ? null : i)}
            className="flex w-full items-center justify-between p-6 text-left hover:bg-[#FAFAFA] transition-colors"
          >
            <div className="flex items-center gap-3 pr-4">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                {faq.num}
              </span>
              <span className="font-semibold text-[#1E293B]">{faq.q}</span>
            </div>
            <div
              className={`flex h-6 w-6 flex-shrink-0 items-center justify-center transition-all ${
                openIndex === i
                  ? "bg-[#10B981] text-white"
                  : "bg-slate-100 text-[#64748B]"
              }`}
            >
              <svg
                className={`h-4 w-4 transition-transform duration-200 ${openIndex === i ? "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>
          <div
            className={`overflow-hidden transition-all duration-300 ${openIndex === i ? "max-h-96" : "max-h-0"}`}
          >
            <div className="px-6 pb-6 pt-0">
              <div className="pl-8">
                <p className="text-[#64748B] leading-relaxed">{faq.a}</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
