"use client";

import { useState } from "react";
import {
  Home,
  ShoppingCart,
  Edit,
  Globe,
  User,
  Bell,
  Moon,
  Sun,
  ArrowLeft,
  TrendingUp,
  Wallet,
  Package,
  Plus,
  Search,
  ChevronLeft,
  Check,
  Star,
  Crown,
  Sparkles,
  CreditCard,
  Download,
  Settings as SettingsIcon,
  Eye,
  Lock,
  Link,
} from "lucide-react";
import {
  userSites,
  storeStats,
  walletTransactions,
  plans,
  templates,
  faNum,
  faMoney,
  faToman,
  toFa,
} from "@/lib/site-saz-data";
import { todayShamsi } from "@/lib/fa-utils";
import { useTheme } from "./ThemeProvider";

type MobilePage = "home" | "store" | "edit" | "domain" | "profile";

export function MobileApp() {
  const { theme, toggle } = useTheme();
  const [page, setPage] = useState<MobilePage>("home");

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-200 to-slate-300 dark:from-slate-900 dark:to-slate-950 flex items-center justify-center p-4 sm:p-6">
      {/* Phone frame mockup */}
      <div className="phone-frame w-full max-w-[400px] h-[800px] max-h-[90vh] flex flex-col">
        <div className="phone-screen flex flex-col">
          {/* Status bar */}
          <div className="h-7 flex items-center justify-between px-6 text-[11px] font-bold text-slate-900 dark:text-white bg-white dark:bg-slate-900">
            <span>{toFa(10)}:{toFa(24)}</span>
            <div className="absolute top-1.5 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-900 dark:bg-slate-800 rounded-full" />
            <div className="flex items-center gap-1">
              <span>۵G</span>
              <span>٪{toFa(86)}</span>
              <div className="w-5 h-2.5 rounded-sm border border-slate-900 dark:border-white relative">
                <div className="absolute inset-0.5 rounded-sm bg-slate-900 dark:bg-white" style={{ width: "80%" }} />
              </div>
            </div>
          </div>

          {/* App header */}
          <header className="bg-white dark:bg-slate-900 px-4 py-3 flex items-center justify-between border-b border-slate-100 dark:border-slate-800">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black text-xs">س</div>
              <div className="leading-none">
                <div className="text-xs font-bold text-slate-900 dark:text-white">سایت‌ساز پرو</div>
                <div className="text-[9px] text-violet-600 dark:text-violet-400">اپ مدیریت</div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <button
                onClick={toggle}
                className="h-9 w-9 rounded-full flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
              >
                {theme === "light" ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
              </button>
              <button className="relative h-9 w-9 rounded-full flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                <Bell className="w-4 h-4" />
                <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-rose-500" />
              </button>
              <div className="w-9 h-9 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-bold text-xs">س</div>
            </div>
          </header>

          {/* Scrollable content */}
          <div className="flex-1 overflow-y-auto scroll-persian bg-slate-50 dark:bg-slate-950 pb-20">
            {page === "home" && <MobileHome onNavigate={setPage} />}
            {page === "store" && <MobileStore />}
            {page === "edit" && <MobileEdit />}
            {page === "domain" && <MobileDomain />}
            {page === "profile" && <MobileProfile onNavigate={setPage} />}
          </div>

          {/* Bottom navigation - sticky */}
          <nav className="sticky bottom-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-lg border-t border-slate-100 dark:border-slate-800 px-2 py-2">
            <div className="grid grid-cols-5 gap-1">
              {[
                { id: "home", label: "خانه", icon: Home },
                { id: "store", label: "فروشگاه", icon: ShoppingCart },
                { id: "edit", label: "ویرایش", icon: Edit, primary: true },
                { id: "domain", label: "دامنه", icon: Globe },
                { id: "profile", label: "پروفایل", icon: User },
              ].map((n) => {
                const active = page === n.id;
                return (
                  <button
                    key={n.id}
                    onClick={() => setPage(n.id as MobilePage)}
                    className="flex flex-col items-center gap-0.5 py-1.5 transition-base"
                  >
                    {n.primary ? (
                      <div className={`w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center -mt-3 shadow-violet ${active ? "scale-110" : ""} transition-base`}>
                        <n.icon className="w-5 h-5 text-white" />
                      </div>
                    ) : (
                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${active ? "bg-violet-100 dark:bg-violet-900/40" : ""}`}>
                        <n.icon className={`w-5 h-5 ${active ? "text-violet-600 dark:text-violet-400" : "text-slate-400"}`} />
                      </div>
                    )}
                    <span className={`text-[10px] font-bold ${active ? "text-violet-600 dark:text-violet-400" : "text-slate-400"}`}>
                      {n.label}
                    </span>
                  </button>
                );
              })}
            </div>
          </nav>
        </div>
      </div>

      {/* Info card next to phone (desktop only) */}
      <div className="hidden lg:block max-w-xs mr-8">
        <div className="space-y-3">
          <div className="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-soft border border-slate-100 dark:border-slate-700">
            <div className="flex items-center gap-2 mb-2">
              <div className="w-9 h-9 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center">
                <Sparkles className="w-5 h-5 text-violet-600 dark:text-violet-400" />
              </div>
              <h3 className="font-bold text-slate-900 dark:text-white">اپ موبایل PWA</h3>
            </div>
            <p className="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
              پنل کاربری سایت‌ساز پرو به صورت وب‌اپ پیشرفته (PWA) با ظاهر شبیه اپلیکیشن نیتیو. منوی پایین ثابت، هدر شناور، کارت‌های بزرگ و آنیمیشن‌های روان.
            </p>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-soft border border-slate-100 dark:border-slate-700">
            <div className="flex items-center gap-2 mb-3">
              <Check className="w-5 h-5 text-emerald-500" />
              <h3 className="font-bold text-slate-900 dark:text-white">ویژگی‌های موبایل</h3>
            </div>
            <ul className="space-y-2 text-sm text-slate-600 dark:text-slate-300">
              {[
                "نصب روی خانه موبایل",
                "کار آفلاین با کش",
                "اعلان‌های Push",
                "حالت تاریک/روشن",
                "تمام سایزها و iPhone/Android",
              ].map((f, i) => (
                <li key={i} className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-violet-500" />
                  {f}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Mobile Home
// ============================================================
function MobileHome({ onNavigate }: { onNavigate: (p: MobilePage) => void }) {
  return (
    <div className="p-4 space-y-4">
      {/* Greeting */}
      <div>
        <h1 className="text-2xl font-black text-slate-900 dark:text-white">سلام سارا</h1>
        <p className="text-sm text-slate-400">گوشه‌ای از دنیای شما در اینجا منتظره</p>
      </div>

      {/* CTA card */}
      <button
        onClick={() => onNavigate("edit")}
        className="w-full rounded-2xl bg-gradient-to-br from-violet-600 to-fuchsia-500 p-5 text-white relative overflow-hidden active:scale-95 transition-base"
      >
        <div className="absolute inset-0 bg-dotted opacity-30" />
        <div className="absolute -top-5 -left-5 w-24 h-24 bg-white/10 rounded-full blur-xl" />
        <div className="relative flex items-center gap-4">
          <div className="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur flex items-center justify-center">
            <Plus className="w-7 h-7" />
          </div>
          <div className="text-right flex-1">
            <div className="font-black text-lg mb-0.5">سایت جدید بساز</div>
            <div className="text-xs text-white/80">در ۵ کلیک یک سایت حرفه‌ای</div>
          </div>
          <ChevronLeft className="w-5 h-5" />
        </div>
      </button>

      {/* Stats */}
      <div className="grid grid-cols-2 gap-3">
        {[
          { label: "بازدید امروز", value: faNum(1240), color: "violet", icon: Eye },
          { label: "فروش امروز", value: faNum(8), color: "emerald", icon: TrendingUp },
          { label: "کیف پول", value: faMoney(450000), color: "amber", icon: Wallet },
          { label: "سفارش‌ها", value: faNum(156), color: "sky", icon: Package },
        ].map((s, i) => (
          <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
            <div className={`w-10 h-10 rounded-xl bg-${s.color}-100 dark:bg-${s.color}-900/30 flex items-center justify-center mb-2.5`}>
              <s.icon className={`w-5 h-5 text-${s.color}-600 dark:text-${s.color}-400`} />
            </div>
            <div className="text-xl font-black text-slate-900 dark:text-white mb-0.5">{s.value}</div>
            <div className="text-[11px] text-slate-400">{s.label}</div>
          </div>
        ))}
      </div>

      {/* My sites */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <h3 className="font-black text-slate-900 dark:text-white">سایت‌های من</h3>
          <button className="text-xs font-bold text-violet-600 dark:text-violet-400">همه</button>
        </div>
        <div className="space-y-3">
          {userSites.slice(0, 3).map((s) => (
            <div key={s.id} className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
              <div className="flex items-center gap-3 p-3">
                <div
                  className="w-14 h-14 rounded-xl flex items-center justify-center text-white font-black text-lg shrink-0"
                  style={{ background: `linear-gradient(135deg, ${s.accentColor}, ${s.accentColor}88)` }}
                >
                  {s.name.charAt(0)}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="font-bold text-sm text-slate-900 dark:text-white truncate">{s.name}</div>
                  <div className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">{s.customDomain || s.url}</div>
                  <div className="flex items-center gap-1.5 mt-1">
                    <div className={`w-1.5 h-1.5 rounded-full ${s.status === "active" ? "bg-emerald-500" : "bg-amber-500"}`} />
                    <span className="text-[10px] text-slate-500">{s.status === "active" ? "فعال" : "پیش‌نویس"}</span>
                  </div>
                </div>
                <button className="h-9 w-9 rounded-xl bg-violet-50 dark:bg-violet-950/40 flex items-center justify-center">
                  <Edit className="w-4 h-4 text-violet-600 dark:text-violet-400" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Quick actions */}
      <div>
        <h3 className="font-black text-slate-900 dark:text-white mb-3">دسترسی سریع</h3>
        <div className="grid grid-cols-4 gap-2">
          {[
            { icon: Wallet, label: "کیف پول", color: "amber" },
            { icon: Package, label: "محصولات", color: "violet" },
            { icon: Globe, label: "دامنه", color: "emerald" },
            { icon: Download, label: "بکاپ", color: "sky" },
          ].map((a, i) => (
            <button
              key={i}
              className="bg-white dark:bg-slate-900 rounded-2xl p-3 flex flex-col items-center gap-1.5 border border-slate-100 dark:border-slate-800 active:scale-95 transition-base"
            >
              <div className={`w-10 h-10 rounded-xl bg-${a.color}-100 dark:bg-${a.color}-900/30 flex items-center justify-center`}>
                <a.icon className={`w-5 h-5 text-${a.color}-600 dark:text-${a.color}-400`} />
              </div>
              <span className="text-[10px] font-bold text-slate-600 dark:text-slate-300">{a.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Mobile Store
// ============================================================
function MobileStore() {
  return (
    <div className="p-4 space-y-4">
      <div className="flex items-center gap-2">
        <h1 className="text-2xl font-black text-slate-900 dark:text-white">فروشگاه</h1>
        <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 font-bold">طلا زرین</span>
      </div>

      {/* Sales summary card */}
      <div className="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-500 p-5 text-white relative overflow-hidden">
        <div className="absolute -top-10 -left-10 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
        <div className="relative">
          <div className="text-sm text-white/80 mb-1">درآمد این ماه</div>
          <div className="text-3xl font-black mb-3">{faNum(12800000)} ت</div>
          <div className="flex items-center gap-2 text-xs">
            <div className="px-2 py-1 rounded-full bg-white/20 backdrop-blur flex items-center gap-1">
              <TrendingUp className="w-3 h-3" />
              +۱۲٪
            </div>
            <span className="text-white/80">{faNum(20)} فروش</span>
          </div>
        </div>
      </div>

      {/* Mini stats */}
      <div className="grid grid-cols-3 gap-2">
        {[
          { label: "سفارش‌های جدید", value: faNum(8), color: "violet" },
          { label: "در حال ارسال", value: faNum(5), color: "amber" },
          { label: "تکمیل شده", value: faNum(143), color: "emerald" },
        ].map((s, i) => (
          <div key={i} className={`bg-${s.color}-50 dark:bg-${s.color}-950/30 rounded-xl p-3 text-center`}>
            <div className={`text-xl font-black text-${s.color}-600 dark:text-${s.color}-400`}>{s.value}</div>
            <div className="text-[10px] text-slate-500 mt-0.5">{s.label}</div>
          </div>
        ))}
      </div>

      {/* Recent orders */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <h3 className="font-black text-slate-900 dark:text-white">سفارش‌های اخیر</h3>
          <button className="text-xs font-bold text-violet-600 dark:text-violet-400">همه</button>
        </div>
        <div className="space-y-2">
          {storeStats.recentOrders.slice(0, 4).map((o) => (
            <div key={o.id} className="bg-white dark:bg-slate-900 rounded-xl p-3 flex items-center gap-3 border border-slate-100 dark:border-slate-800">
              <div className="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center text-violet-600 dark:text-violet-400 font-black text-sm">
                #{toFa(o.id)}
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-bold text-xs text-slate-900 dark:text-white truncate">{o.customer}</div>
                <div className="text-[10px] text-slate-400 truncate">{o.product}</div>
              </div>
              <div className="text-left">
                <div className="font-bold text-xs text-slate-900 dark:text-white">{faMoney(o.amount)}</div>
                <div className={`text-[10px] ${
                  o.status === "completed" ? "text-emerald-600" :
                  o.status === "processing" ? "text-sky-600" : "text-amber-600"
                }`}>
                  {o.status === "completed" ? "تکمیل" : o.status === "processing" ? "در حال" : "در انتظار"}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Mobile Edit
// ============================================================
function MobileEdit() {
  return (
    <div className="p-4 space-y-4">
      <h1 className="text-2xl font-black text-slate-900 dark:text-white">ویرایش سایت</h1>

      {/* Site selector */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
        <div className="text-xs text-slate-400 mb-2">سایت انتخابی</div>
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-white font-black text-lg">ط</div>
          <div className="flex-1">
            <div className="font-bold text-sm text-slate-900 dark:text-white">طلا و جواهر زرین</div>
            <div className="text-[10px] text-slate-400 font-mono" dir="ltr">zarringold.ir</div>
          </div>
          <button className="text-xs font-bold text-violet-600">تغییر</button>
        </div>
      </div>

      {/* Quick edit options */}
      <div className="space-y-2">
        {[
          { icon: Edit, label: "ویرایش با المنتور", color: "violet", desc: "ویرایش بصری صفحات" },
          { icon: Package, label: "مدیریت محصولات", color: "amber", desc: "افزودن و ویرایش محصول" },
          { icon: Eye, label: "مشاهده سایت", color: "emerald", desc: "بازدید پیش‌نمایش" },
          { icon: SettingsIcon, label: "تنظیمات سایت", color: "sky", desc: "پیکربندی ووکامرس" },
          { icon: Download, label: "دریافت بکاپ", color: "rose", desc: "پشتیبان‌گیری کامل" },
        ].map((a, i) => (
          <button
            key={i}
            className="w-full bg-white dark:bg-slate-900 rounded-2xl p-4 flex items-center gap-3 border border-slate-100 dark:border-slate-800 active:scale-98 transition-base text-right"
          >
            <div className={`w-11 h-11 rounded-xl bg-${a.color}-100 dark:bg-${a.color}-900/30 flex items-center justify-center`}>
              <a.icon className={`w-5 h-5 text-${a.color}-600 dark:text-${a.color}-400`} />
            </div>
            <div className="flex-1">
              <div className="font-bold text-sm text-slate-900 dark:text-white">{a.label}</div>
              <div className="text-[11px] text-slate-400">{a.desc}</div>
            </div>
            <ChevronLeft className="w-4 h-4 text-slate-400" />
          </button>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// Mobile Domain
// ============================================================
function MobileDomain() {
  return (
    <div className="p-4 space-y-4">
      <h1 className="text-2xl font-black text-slate-900 dark:text-white">دامنه</h1>

      {/* Current domain */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
        <div className="flex items-center gap-2 mb-2">
          <Globe className="w-4 h-4 text-violet-600" />
          <span className="text-sm font-bold text-slate-900 dark:text-white">دامنه فعلی</span>
        </div>
        <div className="font-mono text-sm text-slate-900 dark:text-white mb-3" dir="ltr">zarringold.ir</div>
        <div className="flex items-center gap-2 text-xs">
          <div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
          <span className="text-emerald-600 font-bold">فعال</span>
          <span className="text-slate-400">•</span>
          <span className="text-slate-400 flex items-center gap-1">
            <Lock className="w-3 h-3" />
            SSL فعال
          </span>
        </div>
      </div>

      {/* Add domain button */}
      <button className="w-full h-12 rounded-2xl bg-violet-600 text-white font-bold text-sm flex items-center justify-center gap-2 shadow-violet active:scale-95 transition-base">
        <Plus className="w-5 h-5" />
        افزودن دامنه جدید
      </button>

      {/* SSL info */}
      <div className="bg-emerald-50 dark:bg-emerald-950/30 rounded-2xl p-4 border border-emerald-100 dark:border-emerald-900/50">
        <div className="flex items-center gap-2 mb-2">
          <Lock className="w-5 h-5 text-emerald-600" />
          <h3 className="font-bold text-slate-900 dark:text-white text-sm">گواهی SSL</h3>
        </div>
        <div className="grid grid-cols-2 gap-2 text-xs">
          <div>
            <div className="text-slate-400">نوع</div>
            <div className="font-bold text-slate-900 dark:text-white">Let's Encrypt</div>
          </div>
          <div>
            <div className="text-slate-400">انقضا</div>
            <div className="font-bold text-slate-900 dark:text-white">۹۰ روز</div>
          </div>
        </div>
      </div>

      {/* Subdomains */}
      <div>
        <h3 className="font-black text-slate-900 dark:text-white mb-3">سایر دامنه‌ها</h3>
        <div className="space-y-2">
          {[
            { d: "aramishdecor.sitesaz.pro", status: "فعال", color: "emerald" },
            { d: "zarrin-gold.sitesaz.pro", status: "فعال", color: "emerald" },
            { d: "new-shop.sitesaz.pro", status: "در انتظار", color: "amber" },
          ].map((s, i) => (
            <div key={i} className="bg-white dark:bg-slate-900 rounded-xl p-3 border border-slate-100 dark:border-slate-800 flex items-center justify-between">
              <div>
                <div className="font-mono text-xs text-slate-900 dark:text-white" dir="ltr">{s.d}</div>
                <div className="flex items-center gap-1 mt-1">
                  <div className={`w-1.5 h-1.5 rounded-full bg-${s.color}-500`} />
                  <span className={`text-[10px] font-bold text-${s.color}-600`}>{s.status}</span>
                </div>
              </div>
              <Link className="w-4 h-4 text-slate-400" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Mobile Profile
// ============================================================
function MobileProfile({ onNavigate }: { onNavigate: (p: MobilePage) => void }) {
  return (
    <div className="p-4 space-y-4">
      {/* Profile card */}
      <div className="bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-2xl p-5 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-dotted opacity-20" />
        <div className="relative flex items-center gap-4">
          <div className="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur flex items-center justify-center text-white font-black text-2xl">س</div>
          <div className="flex-1">
            <div className="font-black text-lg">سارا احمدی</div>
            <div className="text-xs text-white/80">09123456789</div>
            <div className="flex items-center gap-1 mt-1.5">
              <Crown className="w-3.5 h-3.5 text-amber-300" />
              <span className="text-xs font-bold">پلن حرفه‌ای</span>
            </div>
          </div>
        </div>
      </div>

      {/* Wallet */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
              <Wallet className="w-5 h-5 text-amber-600" />
            </div>
            <div>
              <div className="text-xs text-slate-400">موجودی کیف پول</div>
              <div className="font-black text-lg text-slate-900 dark:text-white">{faMoney(450000)}</div>
            </div>
          </div>
          <button className="h-9 px-3 rounded-lg bg-violet-600 text-white text-xs font-bold">شارژ</button>
        </div>
      </div>

      {/* Menu items */}
      <div className="space-y-2">
        {[
          { icon: CreditCard, label: "اشتراک و پلن", sub: "مدیریت پلن و تمدید", color: "violet" },
          { icon: Package, label: "محصولات", sub: "مدیریت محصولات فروشگاه", color: "amber" },
          { icon: Globe, label: "دامنه‌ها", sub: "مدیریت دامنه‌های سایت", color: "emerald" },
          { icon: Bell, label: "اعلان‌ها", sub: "تنظیمات اعلان و پیامک", color: "rose" },
          { icon: SettingsIcon, label: "تنظیمات", sub: "پروفایل و امنیت", color: "sky" },
        ].map((m, i) => (
          <button
            key={i}
            className="w-full bg-white dark:bg-slate-900 rounded-2xl p-3 flex items-center gap-3 border border-slate-100 dark:border-slate-800 active:scale-98 transition-base text-right"
          >
            <div className={`w-10 h-10 rounded-xl bg-${m.color}-100 dark:bg-${m.color}-900/30 flex items-center justify-center`}>
              <m.icon className={`w-5 h-5 text-${m.color}-600 dark:text-${m.color}-400`} />
            </div>
            <div className="flex-1">
              <div className="font-bold text-sm text-slate-900 dark:text-white">{m.label}</div>
              <div className="text-[11px] text-slate-400">{m.sub}</div>
            </div>
            <ChevronLeft className="w-4 h-4 text-slate-400" />
          </button>
        ))}
      </div>

      {/* Logout */}
      <button className="w-full h-12 rounded-2xl border border-rose-200 dark:border-rose-900 text-rose-600 text-sm font-bold flex items-center justify-center gap-2 hover:bg-rose-50 dark:hover:bg-rose-950/30 transition-base">
        خروج از حساب
      </button>
    </div>
  );
}