"use client";

import Link from "next/link";
import {
  Wallet,
  Users,
  Calendar,
  CheckCircle,
  ShoppingCart,
  Building,
  Package,
  MapPin,
  Clock,
  BarChart3,
  Bell,
  Shield,
  CreditCard,
  Zap,
} from "lucide-react";
import { motion } from "framer-motion";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import Container from "@/components/shared/Container";
import AnimateOnScroll from "@/components/shared/AnimateOnScroll";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { staggerContainer, staggerItem } from "@/lib/animations";
import { content } from "@/lib/content";

const modules = [
  {
    icon: Wallet,
    title: "الإدارة المالية",
    description: "قيد مزدوج، فواتير، أقساط، وتقارير مالية شاملة",
  },
  {
    icon: Users,
    title: "إدارة اللاعبين",
    description: "ملفات شاملة لكل لاعب مع تاريخ كامل",
  },
  {
    icon: Calendar,
    title: "البرامج التدريبية",
    description: "إنشاء وإدارة برامج تدريبية بمستويات متعددة",
  },
  {
    icon: Users,
    title: "المجموعات",
    description: "تنظيم اللاعبين في مجموعات مع جدولة تلقائية",
  },
  {
    icon: CheckCircle,
    title: "الحضور والغياب",
    description: "تسجيل آلي مع تنبيهات وتقارير فورية",
  },
  {
    icon: ShoppingCart,
    title: "نقاط البيع",
    description: "بيع وتحصيل وإدارة مخزون في شاشة واحدة",
  },
  {
    icon: Package,
    title: "المخزون",
    description: "تتبع المنتجات والمشتريات وحركة المخزون",
  },
  {
    icon: Building,
    title: "إدارة المنشآت",
    description: "حجز وجدولة وتخصيص الملاعب والقاعات",
  },
  {
    icon: Clock,
    title: "الجدولة",
    description: "جدولة ذكية للحصص مع كشف التعارضات",
  },
  {
    icon: BarChart3,
    title: "التقارير",
    description: "تقارير تفصيلية وإحصائيات لحظية لكل الأقسام",
  },
  {
    icon: Bell,
    title: "الإشعارات",
    description: "تنبيهات ذكية عبر التطبيق والإيميل والرسائل",
  },
  {
    icon: Shield,
    title: "الأدوار والصلاحيات",
    description: "تحكم كامل في صلاحيات كل مستخدم",
  },
  {
    icon: CreditCard,
    title: "المحافظ الإلكترونية",
    description: "محفظة لكل لاعب مع تتبع الرصيد والحركات",
  },
  {
    icon: Zap,
    title: "التسعير الذكي",
    description: "قواعد تسعير مرنة وخصومات تلقائية حسب الشروط",
  },
];

export default function FeaturesPage() {
  return (
    <>
      <Navbar />
      <main className="min-h-screen">
        {/* Hero */}
        <section className="pt-24 pb-16 bg-gradient-to-b from-sky-50/50 to-white">
          <Container className="text-center">
            <AnimateOnScroll>
              <Badge className="bg-sky-100 text-sky-700 px-3 py-1 text-xs mb-4">
                ١٤ وحدة
              </Badge>
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-navy-800">
                كل ما تحتاجه في منصة واحدة
              </h1>
              <p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
                {content.ar.modules.sectionSubtitle}
              </p>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Modules Grid */}
        <section className="py-16">
          <Container>
            <motion.div
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.1 }}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6"
            >
              {modules.map((module) => {
                const Icon = module.icon;
                return (
                  <motion.div
                    key={module.title}
                    variants={staggerItem}
                    className="group rounded-xl border border-slate-200 bg-white p-5 lg:p-6 hover:shadow-md hover:border-sky-200 transition-all"
                  >
                    <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-sky-50 group-hover:bg-sky-100 transition-colors mb-4">
                      <Icon className="h-5 w-5 text-sky-600" />
                    </div>
                    <h3 className="text-base font-bold text-navy-800 mb-1.5">
                      {module.title}
                    </h3>
                    <p className="text-sm text-slate-600 leading-relaxed">
                      {module.description}
                    </p>
                  </motion.div>
                );
              })}
            </motion.div>
          </Container>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-navy-800">
          <Container className="text-center">
            <AnimateOnScroll>
              <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">
                {content.ar.cta.headline}
              </h2>
              <p className="text-slate-300 mb-8 max-w-xl mx-auto">
                {content.ar.cta.subheadline}
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <Link
                  href="/contact"
                  className="inline-flex items-center justify-center rounded-lg bg-sky-500 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-sky-600 hover:shadow-md active:scale-[0.98]"
                >
                  {content.ar.cta.ctaPrimary}
                </Link>
                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center rounded-lg border border-white/20 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/20"
                >
                  {content.ar.cta.ctaSecondary}
                </Link>
              </div>
            </AnimateOnScroll>
          </Container>
        </section>
      </main>
      <Footer />
    </>
  );
}
