import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Search, ShoppingCart, Wrench, Users, Star, Phone, MapPin, Clock } from "lucide-react"
import Link from "next/link"
import Header from "@/components/layout/header"
import { getFeaturedProducts } from "@/lib/products"
import ProductCard from "@/components/store/product-card"

export default function HomePage() {
  const featuredProducts = getFeaturedProducts().slice(0, 4)

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      <Header />

      {/* Hero Section */}
      <section className="bg-gradient-to-l from-[var(--main-color)]/10 to-[var(--main-color)]/5 py-20">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-6xl font-bold text-[var(--dark-color)] mb-6 text-balance">
            كل ما تحتاجه في عالم السباكة
          </h2>
          <p className="text-xl text-[var(--parg-color)] mb-8 max-w-2xl mx-auto text-pretty">
            خامات عالية الجودة، خدمات صيانة احترافية، وسباكين معتمدين - كل شيء في مكان واحد
          </p>
          <div className="flex flex-col md:flex-row gap-4 justify-center items-center max-w-md mx-auto">
            <div className="relative flex-1 w-full">
              <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[var(--parg-color)] h-4 w-4" />
              <Input
                placeholder="ابحث عن المنتجات أو الخدمات..."
                className="pr-10 text-right border-[var(--border-color)]"
              />
            </div>
            <Button
              size="lg"
              className="bg-[var(--main-color)] text-[var(--dark-color)] hover:bg-[var(--main-color)]/90 w-full md:w-auto font-medium"
            >
              بحث
            </Button>
          </div>
        </div>
      </section>

      {/* Services Overview */}
      <section className="py-16 bg-[var(--white-color)]">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-bold text-center text-[var(--dark-color)] mb-12">خدماتنا المتميزة</h3>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow border-[var(--border-color)]">
              <CardHeader>
                <div className="mx-auto w-16 h-16 bg-[var(--main-color)]/10 rounded-full flex items-center justify-center mb-4">
                  <ShoppingCart className="h-8 w-8 text-[var(--main-color)]" />
                </div>
                <CardTitle className="text-xl text-[var(--dark-color)]">متجر الخامات</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base text-[var(--parg-color)] mb-4">
                  أفضل خامات السباكة بأسعار تنافسية مع ضمان الجودة والتوصيل السريع
                </CardDescription>
                <Link href="/store">
                  <Button
                    variant="outline"
                    className="border-[var(--main-color)] text-[var(--main-color)] hover:bg-[var(--main-color)] hover:text-[var(--dark-color)] bg-transparent"
                  >
                    تصفح المنتجات
                  </Button>
                </Link>
              </CardContent>
            </Card>

            <Card className="text-center hover:shadow-lg transition-shadow border-[var(--border-color)]">
              <CardHeader>
                <div className="mx-auto w-16 h-16 bg-[var(--name-item)]/10 rounded-full flex items-center justify-center mb-4">
                  <Wrench className="h-8 w-8 text-[var(--name-item)]" />
                </div>
                <CardTitle className="text-xl text-[var(--dark-color)]">خدمات الصيانة</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base text-[var(--parg-color)] mb-4">
                  خدمات صيانة شاملة على يد أمهر السباكين المعتمدين في جميع المناطق
                </CardDescription>
                <Link href="/services">
                  <Button
                    variant="outline"
                    className="border-[var(--name-item)] text-[var(--name-item)] hover:bg-[var(--name-item)] hover:text-white bg-transparent"
                  >
                    احجز خدمة
                  </Button>
                </Link>
              </CardContent>
            </Card>

            <Card className="text-center hover:shadow-lg transition-shadow border-[var(--border-color)]">
              <CardHeader>
                <div className="mx-auto w-16 h-16 bg-[var(--dark-red)]/10 rounded-full flex items-center justify-center mb-4">
                  <Users className="h-8 w-8 text-[var(--dark-red)]" />
                </div>
                <CardTitle className="text-xl text-[var(--dark-color)]">شبكة السباكين</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base text-[var(--parg-color)] mb-4">
                  انضم لشبكة السباكين المحترفين واحصل على فرص عمل مستمرة
                </CardDescription>
                <Link href="/register?role=plumber">
                  <Button
                    variant="outline"
                    className="border-[var(--dark-red)] text-[var(--dark-red)] hover:bg-[var(--dark-red)] hover:text-white bg-transparent"
                  >
                    انضم الآن
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Featured Products */}
      <section className="py-16 bg-[var(--bg-color)]">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center mb-12">
            <h3 className="text-3xl font-bold text-[var(--dark-color)]">المنتجات المميزة</h3>
            <Link href="/store">
              <Button
                variant="outline"
                className="border-[var(--main-color)] text-[var(--main-color)] hover:bg-[var(--main-color)] hover:text-[var(--dark-color)] bg-transparent"
              >
                عرض الكل
              </Button>
            </Link>
          </div>
          <div className="grid md:grid-cols-4 gap-6">
            {featuredProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-16 bg-[var(--white-color)]">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-bold text-center text-[var(--dark-color)] mb-12">لماذا تختارنا؟</h3>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="mx-auto w-16 h-16 bg-[var(--main-color)]/10 rounded-full flex items-center justify-center mb-4">
                <Clock className="h-8 w-8 text-[var(--main-color)]" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-[var(--dark-color)]">خدمة 24/7</h4>
              <p className="text-[var(--parg-color)]">نحن متاحون على مدار الساعة لخدمتك في حالات الطوارئ</p>
            </div>
            <div className="text-center">
              <div className="mx-auto w-16 h-16 bg-[var(--name-item)]/10 rounded-full flex items-center justify-center mb-4">
                <Star className="h-8 w-8 text-[var(--name-item)]" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-[var(--dark-color)]">جودة مضمونة</h4>
              <p className="text-[var(--parg-color)]">جميع منتجاتنا وخدماتنا مضمونة بأعلى معايير الجودة</p>
            </div>
            <div className="text-center">
              <div className="mx-auto w-16 h-16 bg-[var(--dark-red)]/10 rounded-full flex items-center justify-center mb-4">
                <MapPin className="h-8 w-8 text-[var(--dark-red)]" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-[var(--dark-color)]">تغطية شاملة</h4>
              <p className="text-[var(--parg-color)]">نغطي جميع المناطق بفريق من أمهر السباكين المعتمدين</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[var(--dark-color)] text-[var(--white-color)] py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Wrench className="h-6 w-6 text-[var(--main-color)]" />
                <h4 className="text-xl font-bold">سباكة متكاملة</h4>
              </div>
              <p className="text-[var(--p-color)] mb-4">
                شريكك الموثوق في عالم السباكة - خامات عالية الجودة وخدمات احترافية
              </p>
              <div className="flex items-center gap-2 text-[var(--p-color)]">
                <Phone className="h-4 w-4" />
                <span>920001234</span>
              </div>
            </div>
            <div>
              <h5 className="font-semibold mb-4">روابط سريعة</h5>
              <ul className="space-y-2 text-[var(--p-color)]">
                <li>
                  <Link href="/store" className="hover:text-[var(--main-color)] transition-colors">
                    المتجر
                  </Link>
                </li>
                <li>
                  <Link href="/services" className="hover:text-[var(--main-color)] transition-colors">
                    الخدمات
                  </Link>
                </li>
                <li>
                  <Link href="/plumbers" className="hover:text-[var(--main-color)] transition-colors">
                    السباكين
                  </Link>
                </li>
                <li>
                  <Link href="/about" className="hover:text-[var(--main-color)] transition-colors">
                    من نحن
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-4">خدمات العملاء</h5>
              <ul className="space-y-2 text-[var(--p-color)]">
                <li>
                  <Link href="/support" className="hover:text-[var(--main-color)] transition-colors">
                    الدعم الفني
                  </Link>
                </li>
                <li>
                  <Link href="/warranty" className="hover:text-[var(--main-color)] transition-colors">
                    الضمان
                  </Link>
                </li>
                <li>
                  <Link href="/returns" className="hover:text-[var(--main-color)] transition-colors">
                    الإرجاع والاستبدال
                  </Link>
                </li>
                <li>
                  <Link href="/faq" className="hover:text-[var(--main-color)] transition-colors">
                    الأسئلة الشائعة
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-4">تابعنا</h5>
              <p className="text-[var(--p-color)] mb-4">اشترك في نشرتنا البريدية للحصول على أحدث العروض</p>
              <div className="flex gap-2">
                <Input
                  placeholder="البريد الإلكتروني"
                  className="bg-[var(--parg-color)] border-[var(--border-color)] text-[var(--white-color)] placeholder:text-[var(--p-color)]"
                />
                <Button
                  size="sm"
                  className="bg-[var(--main-color)] text-[var(--dark-color)] hover:bg-[var(--main-color)]/90 font-medium"
                >
                  اشتراك
                </Button>
              </div>
            </div>
          </div>
          <div className="border-t border-[var(--border-color)] mt-8 pt-8 text-center text-[var(--p-color)]">
            <p>&copy; 2024 سباكة متكاملة. جميع الحقوق محفوظة.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}