"use client";

import { useState } from "react";
import {
  Sparkles,
  Zap,
  Globe,
  Shield,
  CreditCard,
  Wand2,
  Check,
  ArrowLeft,
  Star,
  Menu,
  X,
  ChevronDown,
  LayoutTemplate,
  Smartphone,
  Server,
  Layers,
  Plug,
  Palette,
  Clock,
} from "lucide-react";
import { ViewId } from "@/app/page";
import { plans, templates, faqs, faToman, faNum, toFa } from "@/lib/site-saz-data";
import { useTheme } from "./ThemeProvider";
import { Moon, Sun } from "lucide-react";

export function Landing({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const { theme, toggle } = useTheme();

  return (
    <div className="min-h-screen flex flex-col">
      {/* ===== Header ===== */}
      <header className="sticky top-0 z-50 bg-white/85 dark:bg-slate-900/85 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          {/* Logo */}
          <div className="flex items-center gap-2.5">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black text-lg shadow-violet">
              س
            </div>
            <div className="leading-none">
              <div className="font-black text-lg text-slate-900 dark:text-white">سایت‌ساز پرو</div>
              <div className="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">SiteSaz Pro</div>
            </div>
          </div>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-1">
            {[
              { l: "ویژگی‌ها", t: "features" },
              { l: "قالب‌ها", t: "templates" },
              { l: "قیمت‌گذاری", t: "pricing" },
              { l: "سوالات", t: "faq" },
            ].map((n) => (
              <a
                key={n.t}
                href={`#${n.t}`}
                className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-950/40 rounded-lg transition-base"
              >
                {n.l}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <button
              onClick={toggle}
              className="h-10 w-10 rounded-lg flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-base"
              aria-label="تغییر تم"
            >
              {theme === "light" ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
            </button>
            <button className="hidden sm:inline-flex h-10 px-4 items-center text-sm font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-base">
              ورود
            </button>
            <button
              onClick={() => onNavigate("wizard")}
              className="h-10 px-4 sm:px-5 rounded-lg bg-violet-600 hover:bg-violet-700 text-white text-sm font-semibold inline-flex items-center gap-1.5 shadow-violet transition-base"
            >
              <Sparkles className="w-4 h-4" />
              ساخت سایت
            </button>
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="md:hidden h-10 w-10 rounded-lg flex items-center justify-center text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
            >
              {menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>

        {/* Mobile menu */}
        {menuOpen && (
          <div className="md:hidden border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-3 space-y-1">
            {[
              { l: "ویژگی‌ها", t: "features" },
              { l: "قالب‌ها", t: "templates" },
              { l: "قیمت‌گذاری", t: "pricing" },
              { l: "سوالات", t: "faq" },
            ].map((n) => (
              <a
                key={n.t}
                href={`#${n.t}`}
                onClick={() => setMenuOpen(false)}
                className="block px-3 py-2.5 rounded-lg text-slate-700 dark:text-slate-200 hover:bg-violet-50 dark:hover:bg-violet-950/40 font-medium"
              >
                {n.l}
              </a>
            ))}
          </div>
        )}
      </header>

      {/* ===== Hero ===== */}
      <section className="relative overflow-hidden bg-gradient-to-b from-violet-50 via-white to-white dark:from-violet-950/30 dark:via-slate-900 dark:to-slate-900">
        <div className="absolute inset-0 bg-dotted opacity-60 dark:opacity-20 pointer-events-none" />
        {/* Decorative blobs */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-violet-300/30 dark:bg-violet-700/20 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute top-40 -right-32 w-[28rem] h-[28rem] bg-fuchsia-300/20 dark:bg-fuchsia-800/20 rounded-full blur-3xl pointer-events-none" />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-24 grid lg:grid-cols-2 gap-12 items-center">
          {/* Right column (text - RTL primary) */}
          <div className="text-center lg:text-right">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300 text-xs font-semibold mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-500 opacity-75" />
                <span className="relative inline-flex rounded-full h-2 w-2 bg-violet-600" />
              </span>
              اولین سایت‌ساز وردپرسی چندمنظوره فارسی
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black leading-tight text-slate-900 dark:text-white mb-5">
              سایت حرفه‌ای خود را
              <br />
              در <span className="text-gradient-violet">۵ کلیک</span> بسازید
            </h1>

            <p className="text-lg text-slate-600 dark:text-slate-300 mb-8 max-w-xl mx-auto lg:mx-0 leading-relaxed">
              پلتفرم کامل ساخت سایت بر پایه وردپرس، سازگار با المنتور، ووکامرس، دیجیتس و کیف پول ووکامرس. قالب‌های آماده فارسی، پنل مدیریت راست‌چین و دامنه اختصاصی.
            </p>

            <div className="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start mb-10">
              <button
                onClick={() => onNavigate("wizard")}
                className="h-14 px-7 rounded-xl bg-violet-600 hover:bg-violet-700 text-white font-bold inline-flex items-center justify-center gap-2 shadow-violet transition-base hover:scale-[1.02]"
              >
                <Wand2 className="w-5 h-5" />
                شروع ساخت سایت - رایگان
                <ArrowLeft className="w-4 h-4" />
              </button>
              <button
                onClick={() => onNavigate("templates")}
                className="h-14 px-7 rounded-xl bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-bold inline-flex items-center justify-center gap-2 hover:border-violet-300 dark:hover:border-violet-700 transition-base"
              >
                <LayoutTemplate className="w-5 h-5" />
                مشاهده قالب‌ها
              </button>
            </div>

            {/* Social proof */}
            <div className="flex items-center gap-6 justify-center lg:justify-start">
              <div>
                <div className="text-2xl font-black text-slate-900 dark:text-white">{faNum(12400)}+</div>
                <div className="text-xs text-slate-500 dark:text-slate-400">سایت ساخته‌شده</div>
              </div>
              <div className="w-px h-10 bg-slate-200 dark:bg-slate-700" />
              <div>
                <div className="text-2xl font-black text-slate-900 dark:text-white">{faNum(8)}+</div>
                <div className="text-xs text-slate-500 dark:text-slate-400">قالب آماده</div>
              </div>
              <div className="w-px h-10 bg-slate-200 dark:bg-slate-700" />
              <div>
                <div className="flex items-center gap-1">
                  <span className="text-2xl font-black text-slate-900 dark:text-white">{toFa(4.9)}</span>
                  <Star className="w-4 h-4 fill-amber-400 text-amber-400" />
                </div>
                <div className="text-xs text-slate-500 dark:text-slate-400">رضایت کاربران</div>
              </div>
            </div>
          </div>

          {/* Left column - visual */}
          <div className="relative">
            {/* Wizard preview card */}
            <div className="relative bg-white dark:bg-slate-800 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-700 overflow-hidden rotate-[-2deg] hover:rotate-0 transition-transform duration-500">
              {/* Card header */}
              <div className="flex items-center gap-1.5 px-4 py-3 border-b border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-900">
                <div className="w-3 h-3 rounded-full bg-rose-400" />
                <div className="w-3 h-3 rounded-full bg-amber-400" />
                <div className="w-3 h-3 rounded-full bg-emerald-400" />
                <div className="flex-1 text-center text-xs text-slate-400 font-mono">
                  wizard.sitesaz.pro
                </div>
              </div>
              {/* Stepper */}
              <div className="px-6 py-5 border-b border-slate-100 dark:border-slate-700">
                <div className="flex items-center justify-between">
                  {["نوع سایت", "اطلاعات", "قالب", "دامنه", "راه‌اندازی"].map((s, i) => (
                    <div key={s} className="flex items-center gap-2 flex-1">
                      <div
                        className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${
                          i < 2
                            ? "bg-violet-600 text-white"
                            : i === 2
                              ? "bg-violet-100 dark:bg-violet-900 text-violet-600 dark:text-violet-300 ring-2 ring-violet-400"
                              : "bg-slate-100 dark:bg-slate-700 text-slate-400"
                        }`}
                      >
                        {i < 2 ? <Check className="w-4 h-4" /> : toFa(i + 1)}
                      </div>
                      <span className="text-[10px] text-slate-500 dark:text-slate-400 hidden sm:block whitespace-nowrap">{s}</span>
                      {i < 4 && <div className={`flex-1 h-0.5 mx-1 rounded-full ${i < 2 ? "bg-violet-600" : "bg-slate-200 dark:bg-slate-700"}`} />}
                    </div>
                  ))}
                </div>
              </div>
              {/* Content - template grid mini */}
              <div className="p-5">
                <div className="text-sm font-bold mb-3 text-slate-900 dark:text-white">قالب خود را انتخاب کنید</div>
                <div className="grid grid-cols-2 gap-3">
                  {templates.slice(0, 4).map((t, i) => (
                    <div
                      key={t.id}
                      className={`relative rounded-xl overflow-hidden border-2 transition-base ${
                        i === 0 ? "border-violet-500" : "border-slate-100 dark:border-slate-700"
                      }`}
                    >
                      <div
                        className="aspect-[4/3] flex items-center justify-center text-white text-2xl"
                        style={{ background: `linear-gradient(135deg, ${t.accentColor}, ${t.accentColor}AA)` }}
                      >
                        {t.name.charAt(0)}
                      </div>
                      <div className="p-2">
                        <div className="text-[11px] font-semibold text-slate-700 dark:text-slate-200 truncate">{t.name}</div>
                        <div className="text-[10px] text-slate-400">{t.category === "shop" ? "فروشگاهی" : t.category === "corporate" ? "شرکتی" : "سایر"}</div>
                      </div>
                      {i === 0 && (
                        <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-violet-600 flex items-center justify-center">
                          <Check className="w-3 h-3 text-white" />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
                <button
                  onClick={() => onNavigate("wizard")}
                  className="w-full mt-4 h-11 rounded-xl bg-violet-600 hover:bg-violet-700 text-white text-sm font-bold flex items-center justify-center gap-2 transition-base"
                >
                  ادامه - انتخاب قالب
                  <ArrowLeft className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Floating mini cards */}
            <div className="absolute -top-6 -right-6 bg-white dark:bg-slate-800 rounded-2xl shadow-violet p-3 border border-slate-100 dark:border-slate-700 animate-float">
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
                  <Globe className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                </div>
                <div>
                  <div className="text-xs font-bold text-slate-700 dark:text-slate-200">دامنه فعال شد</div>
                  <div className="text-[10px] text-slate-500">zarringold.ir</div>
                </div>
              </div>
            </div>
            <div className="absolute -bottom-5 -left-5 bg-white dark:bg-slate-800 rounded-2xl shadow-violet p-3 border border-slate-100 dark:border-slate-700 animate-float" style={{ animationDelay: "1.5s" }}>
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-violet-600 dark:text-violet-400" />
                </div>
                <div>
                  <div className="text-xs font-bold text-slate-700 dark:text-slate-200">سایت آماده!</div>
                  <div className="text-[10px] text-slate-500">در ۴۵ ثانیه</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Logos / Compatibility strip ===== */}
      <section className="bg-white dark:bg-slate-900 border-y border-slate-100 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
          <div className="text-center text-xs font-semibold text-slate-500 dark:text-slate-400 mb-5">
            کاملاً سازگار با افزونه‌های محبوب وردپرس
          </div>
          <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
            {[
              { name: "Elementor", icon: Layers },
              { name: "WooCommerce", icon: CreditCard },
              { name: "Digits - OTP", icon: Smartphone },
              { name: "کیف پول ووکامرس", icon: CreditCard },
              { name: "Yoast SEO", icon: Plug },
              { name: "WPML", icon: Globe },
            ].map((p) => (
              <div key={p.name} className="flex items-center gap-2 opacity-60 hover:opacity-100 transition-base">
                <p.icon className="w-5 h-5 text-slate-700 dark:text-slate-300" />
                <span className="font-bold text-slate-700 dark:text-slate-300">{p.name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Features ===== */}
      <section id="features" className="py-20 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="text-center max-w-2xl mx-auto mb-14">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300 text-xs font-semibold mb-4">
              <Zap className="w-3.5 h-3.5" />
              امکانات حرفه‌ای
            </div>
            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white mb-4">
              همه چیز برای ساخت سایت حرفه‌ای
            </h2>
            <p className="text-slate-600 dark:text-slate-400">
              از ثبت‌نام با موبایل تا دامنه اختصاصی و فروشگاه آنلاین - همه در یک پلتفرم
            </p>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {[
              { icon: Wand2, color: "violet", title: "ویزارد ۵ کلیکی هوشمند", desc: "از انتخاب نوع سایت تا راه‌اندازی کامل در ۵ مرحله ساده. تمام کارهای فنی خودکار است." },
              { icon: LayoutTemplate, color: "fuchsia", title: "۸+ قالب آماده فارسی", desc: "قالب‌های فروشگاهی (طلا، میوه، موبایل، ابزار) و شرکتی با گرافیک اختصاصی." },
              { icon: Globe, color: "emerald", title: "دامنه اختصاصی + SSL", desc: "ساب‌دامنه رایگان + امکان افزودن دامنه شخصی با راهنمای DNS و SSL خودکار." },
              { icon: CreditCard, color: "amber", title: "کیف پول و اشتراک", desc: "شارژ کیف پول، خرید و تمدید اشتراک، پرداخت با درگاه‌های ایرانی." },
              { icon: Smartphone, color: "sky", title: "اپ موبایل PWA", desc: "پنل کاربری به صورت وب‌اپ شبیه اپلیکیشن نیتیو با منوی پایین و حالت آفلاین." },
              { icon: Shield, color: "rose", title: "امنیت و بکاپ", desc: "گواهی SSL رایگان، بکاپ روزانه، ایزوله‌سازی سایت‌ها و دیوار امنیتی." },
              { icon: Palette, color: "teal", title: "تم روشن/تاریک", desc: "تم اختصاصی فارسی راست‌چین با فونت وزیر/ایران‌سنس، حالت روشن و تاریک." },
              { icon: Clock, color: "indigo", title: "تقویم شمسی کامل", desc: "تمام تاریخ‌ها به شمسی، نمودارها، گزارش‌ها و تاریخ‌های اشتراک شمسی." },
              { icon: Server, color: "violet", title: "بهینه و پرسرعت", desc: "کش چندلایه، CDN، فشرده‌سازی خودکار و لود سریع حتی با حجم زیاد." },
            ].map((f, i) => (
              <div
                key={i}
                className="group bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-100 dark:border-slate-800 shadow-soft hover:shadow-violet hover:-translate-y-1 transition-base"
              >
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 bg-${f.color}-100 dark:bg-${f.color}-900/30 text-${f.color}-600 dark:text-${f.color}-400 group-hover:scale-110 transition-base`}>
                  <f.icon className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-lg text-slate-900 dark:text-white mb-2">{f.title}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Templates showcase ===== */}
      <section id="templates" className="py-20 bg-white dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-12">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-fuchsia-100 dark:bg-fuchsia-900/40 text-fuchsia-700 dark:text-fuchsia-300 text-xs font-semibold mb-4">
                <LayoutTemplate className="w-3.5 h-3.5" />
                کتابخانه قالب‌ها
              </div>
              <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white mb-2">
                قالب‌های آماده برای هر کسب‌وکار
              </h2>
              <p className="text-slate-600 dark:text-slate-400">قالب‌های فارسی بر پایه المنتور - آماده برای استفاده</p>
            </div>
            <button
              onClick={() => onNavigate("templates")}
              className="h-11 px-5 rounded-xl border-2 border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 font-semibold text-sm hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-base inline-flex items-center gap-2 self-start"
            >
              مشاهده تمام قالب‌ها
              <ArrowLeft className="w-4 h-4" />
            </button>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {templates.slice(0, 8).map((t) => (
              <div key={t.id} className="group rounded-2xl overflow-hidden bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 shadow-soft hover:shadow-violet transition-base">
                <div className="relative aspect-[4/5] overflow-hidden" style={{ background: `linear-gradient(160deg, ${t.accentColor}, ${t.accentColor}CC 60%, ${t.accentColor}88)` }}>
                  <div className="absolute inset-0 bg-dotted opacity-30" />
                  <div className="absolute inset-0 flex items-center justify-center text-white">
                    <div className="text-center px-4">
                      <div className="text-5xl font-black mb-2 drop-shadow">{t.name.charAt(0)}</div>
                      <div className="text-xs opacity-90 font-medium px-3 py-1 rounded-full bg-white/20 backdrop-blur inline-block">
                        {t.category === "shop" ? "فروشگاهی" : t.category === "corporate" ? "شرکتی" : t.category === "food" ? "خوراک" : t.category === "tech" ? "تکنولوژی" : t.category === "medical" ? "پزشکی" : "وبلاگ"}
                      </div>
                    </div>
                  </div>
                  <div className="absolute top-3 right-3 flex items-center gap-1">
                    {t.isPro ? (
                      <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-400 text-amber-950">پرمیوم</span>
                    ) : (
                      <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-400 text-emerald-950">رایگان</span>
                    )}
                  </div>
                  <div className="absolute bottom-0 inset-x-0 p-3 bg-gradient-to-t from-black/50 to-transparent">
                    <div className="flex items-center justify-between text-white">
                      <div className="flex items-center gap-1 text-xs">
                        <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
                        {toFa(t.rating)}
                      </div>
                      <div className="text-xs">{faNum(t.downloads)} دانلود</div>
                    </div>
                  </div>
                </div>
                <div className="p-4">
                  <h3 className="font-bold text-sm text-slate-900 dark:text-white mb-1">{t.name}</h3>
                  <p className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 mb-3">{t.description}</p>
                  <button
                    onClick={() => onNavigate("wizard")}
                    className="w-full h-9 rounded-lg bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 text-xs font-bold hover:bg-violet-100 dark:hover:bg-violet-900/40 transition-base"
                  >
                    استفاده از این قالب
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Pricing ===== */}
      <section id="pricing" className="py-20 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="text-center max-w-2xl mx-auto mb-14">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 text-xs font-semibold mb-4">
              <CreditCard className="w-3.5 h-3.5" />
              پلن‌های اشتراک
            </div>
            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white mb-4">
              پلن مناسب کسب‌وکار خود انتخاب کنید
            </h2>
            <p className="text-slate-600 dark:text-slate-400">بدون هزینه پنهان. هر زمان ارتقا یا لغو کنید. شارژ کیف پول برای پرداخت‌های راحت.</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
            {plans.map((p) => (
              <div
                key={p.id}
                className={`relative rounded-2xl p-6 border transition-base ${
                  p.highlighted
                    ? "bg-white dark:bg-slate-900 border-violet-500 shadow-violet lg:scale-105"
                    : "bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-800 shadow-soft hover:border-violet-300"
                }`}
              >
                {p.badge && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-violet-600 text-white text-xs font-bold shadow-violet">
                    {p.badge}
                  </div>
                )}
                <div className="flex items-center gap-2 mb-1">
                  <div className="w-3 h-3 rounded-full" style={{ background: p.color }} />
                  <h3 className="font-black text-xl text-slate-900 dark:text-white">{p.name}</h3>
                </div>
                <p className="text-xs text-slate-500 dark:text-slate-400 mb-4 min-h-[2.5em]">{p.description}</p>
                <div className="mb-6">
                  {p.price === 0 ? (
                    <div className="text-2xl font-black text-slate-900 dark:text-white">{p.period}</div>
                  ) : (
                    <div className="flex items-baseline gap-1">
                      <span className="text-3xl font-black text-slate-900 dark:text-white">{faNum(p.price)}</span>
                      <span className="text-sm text-slate-500">تومان / {p.period}</span>
                    </div>
                  )}
                </div>
                <button
                  onClick={() => onNavigate("wizard")}
                  className={`w-full h-11 rounded-xl font-bold text-sm transition-base ${
                    p.highlighted
                      ? "bg-violet-600 hover:bg-violet-700 text-white shadow-violet"
                      : "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-violet-100 dark:hover:bg-violet-900/40"
                  }`}
                >
                  {p.price === 0 ? "تماس با فروش" : "شروع با این پلن"}
                </button>
                <ul className="mt-6 space-y-2.5">
                  {p.features.slice(0, 7).map((f, i) => (
                    <li key={i} className="flex items-start gap-2 text-xs">
                      {f.included ? (
                        <Check className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                      ) : (
                        <X className="w-4 h-4 text-slate-300 dark:text-slate-600 shrink-0 mt-0.5" />
                      )}
                      <span className={f.included ? "text-slate-700 dark:text-slate-200" : "text-slate-400 dark:text-slate-500 line-through"}>
                        {f.label}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section id="faq" className="py-20 bg-white dark:bg-slate-900">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white mb-3">سوالات متداول</h2>
            <p className="text-slate-600 dark:text-slate-400">هر چیزی که باید قبل از شروع بدانید</p>
          </div>
          <div className="space-y-3">
            {faqs.map((f, i) => (
              <FAQItem key={i} q={f.q} a={f.a} />
            ))}
          </div>
        </div>
      </section>

      {/* ===== CTA banner ===== */}
      <section className="py-16 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-5xl mx-auto px-4 sm:px-6">
          <div className="relative rounded-3xl bg-gradient-to-br from-violet-600 to-fuchsia-600 p-10 sm:p-14 overflow-hidden">
            <div className="absolute inset-0 bg-dotted opacity-30" />
            <div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl" />
            <div className="absolute -bottom-10 -right-10 w-52 h-52 bg-fuchsia-300/20 rounded-full blur-2xl" />
            <div className="relative text-center text-white">
              <h2 className="text-3xl sm:text-4xl font-black mb-4">آماده ساخت سایت حرفه‌ای خود هستید؟</h2>
              <p className="text-white/90 mb-8 max-w-xl mx-auto">همین حالا شروع کنید. در کمتر از ۵ دقیقه سایت شما آماده است.</p>
              <button
                onClick={() => onNavigate("wizard")}
                className="h-14 px-8 rounded-xl bg-white text-violet-700 font-black inline-flex items-center gap-2 hover:scale-[1.03] transition-base shadow-2xl"
              >
                <Wand2 className="w-5 h-5" />
                شروع رایگان
                <ArrowLeft className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Footer ===== */}
      <footer className="bg-slate-900 text-slate-400 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-14">
          <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-8 mb-10">
            <div className="lg:col-span-2">
              <div className="flex items-center gap-2.5 mb-4">
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black text-lg">س</div>
                <div className="font-black text-white text-lg">سایت‌ساز پرو</div>
              </div>
              <p className="text-sm leading-relaxed max-w-xs">
                پلتفرم ساخت سایت وردپرسی چندمنظوره فارسی، سازگار با المننتور، ووکامرس و دیجیتس.
              </p>
            </div>
            <div>
              <h4 className="font-bold text-white mb-3 text-sm">پلتفرم</h4>
              <ul className="space-y-2 text-sm">
                <li><a className="hover:text-violet-400 transition-base" href="#features">ویژگی‌ها</a></li>
                <li><a className="hover:text-violet-400 transition-base" href="#templates">قالب‌ها</a></li>
                <li><a className="hover:text-violet-400 transition-base" href="#pricing">قیمت‌گذاری</a></li>
                <li><button onClick={() => onNavigate("wizard")} className="hover:text-violet-400 transition-base">ویزارد دمو</button></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold text-white mb-3 text-sm">پنل‌ها</h4>
              <ul className="space-y-2 text-sm">
                <li><button onClick={() => onNavigate("user")} className="hover:text-violet-400 transition-base">پنل کاربری</button></li>
                <li><button onClick={() => onNavigate("admin")} className="hover:text-violet-400 transition-base">پنل سوپرادمین</button></li>
                <li><button onClick={() => onNavigate("mobile")} className="hover:text-violet-400 transition-base">اپ موبایل</button></li>
                <li><button onClick={() => onNavigate("templates")} className="hover:text-violet-400 transition-base">گالری قالب</button></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold text-white mb-3 text-sm">پشتیبانی</h4>
              <ul className="space-y-2 text-sm">
                <li><a className="hover:text-violet-400 transition-base" href="#faq">سوالات متداول</a></li>
                <li><a className="hover:text-violet-400 transition-base" href="#">مرکز راهنما</a></li>
                <li><a className="hover:text-violet-400 transition-base" href="#">تماس با ما</a></li>
                <li><a className="hover:text-violet-400 transition-base" href="#">بلاگ</a></li>
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
            <div>© {toFa(1403)} سایت‌ساز پرو - تمامی حقوق محفوظ است.</div>
            <div className="flex items-center gap-4">
              <a href="#" className="hover:text-violet-400">قوانین و مقررات</a>
              <a href="#" className="hover:text-violet-400">حریم خصوصی</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

function FAQItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between gap-4 p-5 text-right"
      >
        <span className="font-bold text-slate-900 dark:text-white">{q}</span>
        <ChevronDown className={`w-5 h-5 text-violet-600 dark:text-violet-400 shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
      </button>
      {open && (
        <div className="px-5 pb-5 text-sm text-slate-600 dark:text-slate-300 leading-relaxed">{a}</div>
      )}
    </div>
  );
}