import { serviceCategories, getEmergencyServices } from "@/lib/services"
import ServiceCard from "@/components/services/service-card"
import Header from "@/components/layout/header"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import Link from "next/link"
import { Phone, Clock, Shield, Users } from "lucide-react"

export default function ServicesPage() {
  const emergencyServices = getEmergencyServices()

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

      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[var(--name-item)] to-[var(--name-item)]/80 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">خدمات السباكة الاحترافية</h1>
          <p className="text-xl mb-8 max-w-2xl mx-auto">خدمات سباكة شاملة على يد أمهر الفنيين المعتمدين</p>
          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="bg-[var(--main-color)] text-[var(--dark-color)] hover:bg-[var(--main-color)]/90"
            >
              احجز خدمة عادية
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-[var(--name-item)] bg-transparent"
            >
              <Phone className="w-5 h-5 ml-2" />
              طوارئ: 920001234
            </Button>
          </div>
        </div>
      </section>

      <div className="container mx-auto px-4 py-12">
        {/* Emergency Services */}
        {emergencyServices.length > 0 && (
          <section className="mb-16">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-[var(--dark-color)] mb-4">خدمات الطوارئ</h2>
              <p className="text-[var(--parg-color)] text-lg">متاحة 24/7 للحالات العاجلة</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
              {emergencyServices.map((service) => (
                <ServiceCard key={service.id} service={service} />
              ))}
            </div>
            <div className="text-center">
              <div className="inline-flex items-center gap-2 bg-[var(--dark-red)]/10 text-[var(--dark-red)] px-4 py-2 rounded-lg">
                <Phone className="w-5 h-5" />
                <span className="font-semibold">للطوارئ: 920001234</span>
              </div>
            </div>
          </section>
        )}

        {/* Service Categories */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold text-[var(--dark-color)] mb-8 text-center">فئات الخدمات</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {serviceCategories.map((category) => (
              <Link key={category.id} href={`/services/categories/${category.id}`}>
                <Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer border-[var(--border-color)]">
                  <div className="relative overflow-hidden">
                    <Image
                      src={category.image || "/placeholder.svg"}
                      alt={category.name}
                      width={400}
                      height={200}
                      className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-semibold text-[var(--dark-color)] mb-2 group-hover:text-[var(--name-item)] transition-colors">
                      {category.name}
                    </h3>
                    <p className="text-[var(--parg-color)]">{category.description}</p>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </section>

        {/* Why Choose Our Services */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold text-[var(--dark-color)] mb-12 text-center">لماذا تختار خدماتنا؟</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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>
              <h3 className="text-lg font-semibold mb-2 text-[var(--dark-color)]">سرعة الاستجابة</h3>
              <p className="text-[var(--parg-color)] text-sm">وصول سريع خلال 30 دقيقة للطوارئ</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">
                <Users className="h-8 w-8 text-[var(--name-item)]" />
              </div>
              <h3 className="text-lg font-semibold mb-2 text-[var(--dark-color)]">فنيون معتمدون</h3>
              <p className="text-[var(--parg-color)] text-sm">جميع السباكين معتمدون ومدربون</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">
                <Shield className="h-8 w-8 text-[var(--dark-red)]" />
              </div>
              <h3 className="text-lg font-semibold mb-2 text-[var(--dark-color)]">ضمان الجودة</h3>
              <p className="text-[var(--parg-color)] text-sm">ضمان شامل على جميع الأعمال</p>
            </div>

            <div className="text-center">
              <div className="mx-auto w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mb-4">
                <Phone className="h-8 w-8 text-green-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2 text-[var(--dark-color)]">دعم مستمر</h3>
              <p className="text-[var(--parg-color)] text-sm">خدمة عملاء متاحة 24/7</p>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="text-center bg-[var(--main-color)]/10 rounded-2xl p-12">
          <h2 className="text-3xl font-bold text-[var(--dark-color)] mb-4">هل تحتاج خدمة سباكة؟</h2>
          <p className="text-[var(--parg-color)] text-lg mb-8 max-w-2xl mx-auto">
            احجز الآن واحصل على خدمة احترافية بأفضل الأسعار
          </p>
          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <Link href="/services/book">
              <Button
                size="lg"
                className="bg-[var(--main-color)] text-[var(--dark-color)] hover:bg-[var(--main-color)]/90"
              >
                احجز خدمة الآن
              </Button>
            </Link>
            <Link href="/services/emergency">
              <Button
                size="lg"
                variant="outline"
                className="border-[var(--dark-red)] text-[var(--dark-red)] hover:bg-[var(--dark-red)] hover:text-white bg-transparent"
              >
                <Phone className="w-5 h-5 ml-2" />
                اتصال طوارئ
              </Button>
            </Link>
          </div>
        </section>
      </div>
    </div>
  )
}