import Link from "next/link";
import { ArrowLeft, Check, BarChart3, ShoppingCart, Package, Users, Receipt, Shield, Smartphone, Headphones, Play } from "lucide-react";

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-slate-50">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-white font-bold text-lg">ر</div>
            <span className="font-bold text-xl text-slate-900">راصد ERP</span>
          </Link>
          <nav className="hidden md:flex items-center gap-7 text-sm font-medium text-slate-700">
            <a href="#features" className="hover:text-brand-600">المميزات</a>
            <a href="#pricing" className="hover:text-brand-600">الأسعار</a>
            <a href="#support" className="hover:text-brand-600">الدعم</a>
            <Link href="/demo" className="hover:text-brand-600">تجربة مجانية</Link>
          </nav>
          <div className="flex items-center gap-2">
            <Link href="/login" className="btn-ghost hidden sm:inline-flex">تسجيل دخول</Link>
            <Link href="/register" className="btn-primary">ابدأ مجاناً</Link>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 text-center">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-medium mb-6">
          <span className="w-2 h-2 rounded-full bg-brand-500 animate-pulse" />
          نظام سحابي - يعمل من أي مكان
        </div>
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-tight">
          نظام <span className="text-brand-600">راصد</span> لإدارة شركتك
          <br /> بكل سهولة وذكاء
        </h1>
        <p className="mt-6 text-lg sm:text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
          حل متكامل لإدارة المبيعات، المخزون، الفواتير، والعملاء - مصمم خصيصاً للشركات الصغيرة والمتوسطة.
          ابدأ مجاناً خلال دقيقة واحدة.
        </p>
        <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
          <Link href="/demo" className="btn-primary text-base px-6 py-3">
            <Play className="w-4 h-4" />
            تجربة Demo مجانية
          </Link>
          <Link href="/register" className="btn-secondary text-base px-6 py-3">
            إنشاء حساب
            <ArrowLeft className="w-4 h-4" />
          </Link>
        </div>
        <p className="mt-4 text-sm text-slate-500">✓ بدون بطاقة ائتمان  ✓ 14 يوم تجربة مجانية  ✓ دعم فني بالعربية</p>
      </section>

      {/* Features */}
      <section id="features" className="bg-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900">كل ما تحتاجه في مكان واحد</h2>
            <p className="mt-3 text-lg text-slate-600">ميزات متكاملة تنمو مع أعمالك</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              { icon: ShoppingCart, title: "المبيعات والكاشير", desc: "نقطة بيع سريعة، فواتير ضريبية، مرتجعات، عروض أسعار" },
              { icon: Package, title: "المخزون والمنتجات", desc: "إدارة ذكية للمخزون، تنبيهات الحد الأدنى، جرد دوري" },
              { icon: Users, title: "العملاء والموردين", desc: "سجل كامل، أرصدة، تاريخ معاملات، متابعة التحصيلات" },
              { icon: Receipt, title: "الفواتير والمدفوعات", desc: "فواتير ضريبية، دفعات نقدية/فيزا/شيك، طباعة احترافية" },
              { icon: BarChart3, title: "تقارير ذكية", desc: "تقارير مبيعات، أرباح، مخزون، أداء الكاشيرين، رسوم بيانية" },
              { icon: Shield, title: "صلاحيات متقدمة", desc: "أدوار جاهزة (مالك، مدير، محاسب، كاشير) + تخصيص كامل" },
              { icon: Smartphone, title: "يعمل من الموبايل", desc: "متجاوب 100%، يعمل على الموبايل واللابتوب بدون تنصيب" },
              { icon: Package, title: "باركود سريع", desc: "مسح باركود، طباعة ملصقات، إنشاء باركود تلقائي" },
              { icon: Headphones, title: "دعم فني متميز", desc: "دعم بالعربية عبر واتساب وبريد على مدار الساعة" },
            ].map((f, i) => (
              <div key={i} className="card p-6 hover:shadow-lg transition">
                <div className="w-11 h-11 rounded-lg bg-brand-50 text-brand-600 flex items-center justify-center mb-4">
                  <f.icon className="w-5 h-5" />
                </div>
                <h3 className="font-semibold text-slate-900 mb-2">{f.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900">باقات بسيطة وشفافة</h2>
            <p className="mt-3 text-lg text-slate-600">ابدأ مجاناً، وادفع فقط عندما تنمو</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {[
              { name: "تجربة مجانية", price: "0", desc: "14 يوم كامل", features: ["كل المميزات", "حتى 100 منتج", "مستخدم واحد", "دعم بالبريد"], cta: "ابدأ الآن", highlight: false },
              { name: "الباقة الأساسية", price: "299", desc: "شهرياً", features: ["منتجات غير محدودة", "3 مستخدمين", "فواتير ضريبية", "دعم واتساب"], cta: "اشترك الآن", highlight: false },
              { name: "الباقة المتقدمة", price: "599", desc: "شهرياً", features: ["كل شيء غير محدود", "مستخدمين غير محدود", "تقارير متقدمة", "دعم أولوية 24/7", "API مخصص"], cta: "اشترك الآن", highlight: true },
            ].map((p, i) => (
              <div key={i} className={`card p-7 ${p.highlight ? "ring-2 ring-brand-500 shadow-xl" : ""}`}>
                {p.highlight && <div className="badge bg-brand-500 text-white mb-3">الأكثر شعبية</div>}
                <h3 className="text-xl font-bold text-slate-900">{p.name}</h3>
                <div className="mt-3 flex items-baseline gap-1">
                  <span className="text-4xl font-extrabold text-slate-900">{p.price}</span>
                  <span className="text-slate-500">ج.م / {p.desc}</span>
                </div>
                <ul className="mt-5 space-y-2.5 text-sm">
                  {p.features.map((f, j) => (
                    <li key={j} className="flex items-center gap-2 text-slate-700">
                      <Check className="w-4 h-4 text-emerald-500 flex-shrink-0" />
                      {f}
                    </li>
                  ))}
                </ul>
                <Link href="/register" className={`mt-6 w-full ${p.highlight ? "btn-primary" : "btn-secondary"}`}>
                  {p.cta}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section id="support" className="bg-gradient-to-br from-brand-600 to-brand-800 py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
          <h2 className="text-3xl font-bold">جاهز للبدء؟</h2>
          <p className="mt-3 text-brand-100 text-lg">انضم لآلاف أصحاب الأعمال الذين يستخدمون راصد</p>
          <div className="mt-7 flex flex-col sm:flex-row items-center justify-center gap-3">
            <Link href="/demo" className="bg-white text-brand-700 hover:bg-brand-50 btn">
              <Play className="w-4 h-4" />
              جرّب النظام الآن (Demo)
            </Link>
            <a href="https://wa.me/201000000000" className="bg-emerald-500 hover:bg-emerald-600 text-white btn">
              <Headphones className="w-4 h-4" />
              تواصل عبر واتساب
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm">
          <p>© 2026 راصد ERP. جميع الحقوق محفوظة.</p>
          <div className="mt-3 flex items-center justify-center gap-5">
            <Link href="/demo" className="hover:text-white">تجربة مجانية</Link>
            <Link href="/login" className="hover:text-white">تسجيل دخول</Link>
            <a href="#" className="hover:text-white">سياسة الخصوصية</a>
            <a href="mailto:support@rased-erp.com" className="hover:text-white">الدعم</a>
          </div>
        </div>
      </footer>
    </div>
  );
}