import {
  Users, Bot, Trophy, Gift, MessageCircle, Globe, ShieldCheck, Zap, Crown, Star,
} from "lucide-react";
import { DownloadButtons } from "@/components/DownloadButtons";
import { Logo } from "@/components/Logo";
import { BRAND } from "@/lib/site";

const FEATURES = [
  { icon: Users, title: "حکم ۴ نفره آنلاین", desc: "با بازیکن‌های واقعی از سراسر ایران، دونفره و تیمی بازی کن." },
  { icon: Bot, title: "بازی با هوش مصنوعی", desc: "آفلاین و بدون اینترنت، با ربات‌های هوشمند تمرین کن." },
  { icon: Trophy, title: "لیگ و رتبه‌بندی", desc: "از لیگ مبتدی تا استاد بالا برو و در جدول قهرمانان بدرخش." },
  { icon: Gift, title: "جایزه‌های روزانه", desc: "هر روز سکه بگیر، دستاورد باز کن و جوایز ویژه ببر." },
  { icon: MessageCircle, title: "چت و شکلک", desc: "سر میز با هم‌تیمی و حریف کل‌کل کن؛ استیکرهای فارسی." },
  { icon: Globe, title: "همه‌جا در دسترس", desc: "اندروید، آیفون و مرورگر — پیشرفتت همه‌جا همگام می‌شود." },
];

const STEPS = [
  { n: "۱", title: "وارد شو", desc: "با شماره موبایل ثبت‌نام کن — سریع و رایگان." },
  { n: "۲", title: "میز انتخاب کن", desc: "بازی سریع آنلاین، اتاق خصوصی با دوستان، یا بازی با کامپیوتر." },
  { n: "۳", title: "حکم بزن و ببر", desc: "حاکم شو، خال حکم را انتخاب کن و حریف را کُت کن!" },
];

const STATS = [
  { icon: Zap, label: "بازی سریع", value: "زیر ۱۵ ثانیه شروع" },
  { icon: ShieldCheck, label: "بدون تقلب", value: "سرور منصف و امن" },
  { icon: Crown, label: "کاملاً رایگان", value: "بدون اجبار خرید" },
];

export default function Home() {
  return (
    <>
      {/* Hero */}
      <section className="felt card-pattern relative overflow-hidden">
        {/* decorative card suits floating in the backdrop */}
        <span className="suit pointer-events-none absolute right-[6%] top-16 text-8xl">♠</span>
        <span className="suit pointer-events-none absolute left-[8%] top-40 text-7xl">♥</span>
        <span className="suit pointer-events-none absolute left-[14%] bottom-12 text-6xl">♦</span>
        <span className="suit pointer-events-none absolute right-[12%] bottom-20 text-7xl">♣</span>

        <div className="mx-auto max-w-6xl px-4 py-16 text-center sm:py-24">
          {/* card-fan brand mark */}
          <div className="relative mx-auto mb-8 grid h-40 w-40 place-items-center sm:h-48 sm:w-48">
            <div className="gold-halo absolute inset-0 rounded-full" />
            <div className="float-y relative">
              <Logo size={160} glow />
            </div>
          </div>

          <span className="inline-flex items-center gap-1.5 rounded-full glass px-3 py-1 text-xs text-gold-soft">
            <Star size={13} /> بازی حکمِ ایرانی، حرفه‌ای‌تر از همیشه
          </span>
          <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-black leading-tight sm:text-6xl">
            <span className="gold-text">{BRAND.nameFa}</span>
            <br />
            بازی حکم آنلاین با دوستان
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-base leading-8 text-cream/70 sm:text-lg">
            {BRAND.descFa}
          </p>
          <div className="mt-9 flex justify-center">
            <DownloadButtons variant="hero" />
          </div>

          <div className="mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3">
            {STATS.map((s) => (
              <div key={s.label} className="glass rounded-2xl px-4 py-4 transition hover:border-gold/40">
                <s.icon className="mx-auto text-teal" size={22} />
                <div className="mt-2 text-sm font-bold text-cream">{s.label}</div>
                <div className="text-xs text-cream/55">{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="mx-auto max-w-6xl px-4 py-16">
        <h2 className="text-center text-3xl font-black sm:text-4xl">
          چرا <span className="gold-text">برگ وسط</span>؟
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-center text-cream/60">
          همهٔ چیزی که یک بازی حکم بی‌نقص لازم دارد، در یک اپ.
        </p>
        <div className="rule-gold mx-auto mt-6 max-w-xs" />
        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((f) => (
            <div key={f.title} className="glass rounded-2xl p-6 transition hover:border-gold/40">
              <f.icon className="text-gold" size={28} />
              <h3 className="mt-4 text-lg font-bold text-cream">{f.title}</h3>
              <p className="mt-2 text-sm leading-7 text-cream/65">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How to play */}
      <section className="mx-auto max-w-6xl px-4 py-16">
        <div className="glass rounded-3xl p-8 sm:p-12">
          <h2 className="text-center text-3xl font-black sm:text-4xl">در ۳ قدم شروع کن</h2>
          <div className="mt-10 grid gap-6 sm:grid-cols-3">
            {STEPS.map((s) => (
              <div key={s.n} className="text-center">
                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full btn-gold text-2xl font-black">
                  {s.n}
                </div>
                <h3 className="mt-4 text-lg font-bold text-cream">{s.title}</h3>
                <p className="mt-2 text-sm leading-7 text-cream/65">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="mx-auto max-w-4xl px-4 py-16 text-center">
        <div className="mx-auto mb-6 w-fit">
          <Logo size={64} glow />
        </div>
        <h2 className="text-3xl font-black sm:text-4xl">
          همین حالا <span className="gold-text">حکم</span> را شروع کن
        </h2>
        <p className="mx-auto mt-3 max-w-lg text-cream/65">
          رایگان روی مرورگر بازی کن یا اپ را روی گوشی‌ات نصب کن.
        </p>
        <div className="mt-8 flex justify-center">
          <DownloadButtons variant="full" />
        </div>
      </section>
    </>
  );
}