import { categories, getFeaturedProducts, getOnSaleProducts } from "@/lib/products"
import ProductCard from "@/components/store/product-card"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import Link from "next/link"

export default function StorePage() {
  const featuredProducts = getFeaturedProducts()
  const saleProducts = getOnSaleProducts()

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[var(--main-color)] to-[var(--main-color)]/80 text-[var(--dark-color)] 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>
          <Button size="lg" variant="secondary" className="bg-white text-[var(--dark-color)] hover:bg-gray-100">
            تصفح المنتجات
          </Button>
        </div>
      </section>

      <div className="container mx-auto px-4 py-12">
        {/* 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">
            {categories.map((category) => (
              <Link key={category.id} href={`/store/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>

        {/* Featured Products */}
        <section className="mb-16">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-3xl font-bold text-[var(--dark-color)]">المنتجات المميزة</h2>
            <Link href="/store/products">
              <Button variant="outline">عرض الكل</Button>
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </section>

        {/* Sale Products */}
        {saleProducts.length > 0 && (
          <section>
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-3xl font-bold text-[var(--dark-color)]">عروض خاصة</h2>
              <Link href="/store/products?sale=true">
                <Button variant="outline" className="text-[var(--dark-red)] border-[var(--dark-red)] bg-transparent">
                  عرض جميع العروض
                </Button>
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {saleProducts.slice(0, 6).map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          </section>
        )}
      </div>
    </div>
  )
}