import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Filter } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function GalleryPage() {
  const projects = [
    {
      title: "Complete Electrical Panel Upgrade",
      category: "Electrical",
      location: "San Francisco, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "200-amp electrical panel upgrade with new circuits and safety features.",
    },
    {
      title: "Master Bathroom Plumbing Renovation",
      category: "Plumbing",
      location: "Oakland, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Complete bathroom plumbing overhaul with new fixtures and piping.",
    },
    {
      title: "Exterior House Painting",
      category: "Painting",
      location: "San Jose, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Full exterior house painting with premium weather-resistant paint.",
    },
    {
      title: "Living Room Drywall & Texture",
      category: "Drywall",
      location: "Palo Alto, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "New drywall installation with custom texture finish in living area.",
    },
    {
      title: "Kitchen Backsplash Tile Work",
      category: "Tile",
      location: "Berkeley, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Custom subway tile backsplash with decorative accent border.",
    },
    {
      title: "Privacy Fence Installation",
      category: "Fencing",
      location: "San Francisco, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "6-foot cedar privacy fence with matching gate installation.",
    },
    {
      title: "Concrete Retaining Wall",
      category: "Retaining Wall",
      location: "Fremont, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Decorative concrete retaining wall with integrated drainage system.",
    },
    {
      title: "Bathroom Tile Renovation",
      category: "Tile",
      location: "Hayward, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Complete bathroom tile renovation including shower and floor.",
    },
    {
      title: "Interior Painting Project",
      category: "Painting",
      location: "Mountain View, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Multi-room interior painting with custom color scheme.",
    },
    {
      title: "Electrical Wiring for Addition",
      category: "Electrical",
      location: "Sunnyvale, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Complete electrical wiring for new room addition with modern outlets.",
    },
    {
      title: "Stone Retaining Wall",
      category: "Retaining Wall",
      location: "Santa Clara, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Natural stone retaining wall with terraced landscaping design.",
    },
    {
      title: "Chain Link Fence Installation",
      category: "Fencing",
      location: "San Mateo, CA",
      image: "/placeholder.svg?height=400&width=600",
      description: "Commercial-grade chain link fencing with security gate access.",
    },
  ]

  const categories = ["All", "Electrical", "Plumbing", "Painting", "Drywall", "Tile", "Fencing", "Retaining Wall"]

  return (
    <div className="min-h-screen">
      {/* Navigation */}
      <nav className="bg-white shadow-sm border-b sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Link href="/" className="text-2xl font-bold text-orange-600">
                G De Leon Construction
              </Link>
            </div>
            <div className="hidden md:flex space-x-8">
              <Link href="/" className="text-gray-700 hover:text-orange-600 font-medium">
                Home
              </Link>
              <Link href="/about" className="text-gray-700 hover:text-orange-600 font-medium">
                About
              </Link>
              <Link href="/services" className="text-gray-700 hover:text-orange-600 font-medium">
                Services
              </Link>
              <Link href="/gallery" className="text-orange-600 font-medium">
                Gallery
              </Link>
              <Link href="/contact" className="text-gray-700 hover:text-orange-600 font-medium">
                Contact
              </Link>
              <Link href="/portal/login" className="text-orange-600 hover:text-orange-700 font-medium">
                Client Portal
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="bg-gradient-to-r from-gray-50 to-gray-100 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <Badge className="mb-4 bg-orange-100 text-orange-600 hover:bg-orange-200">200+ Projects Completed</Badge>
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Project Gallery</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Explore our portfolio of completed projects showcasing quality craftsmanship and attention to detail
              across residential and commercial construction throughout the Bay Area.
            </p>
          </div>
        </div>
      </section>

      {/* Filter Section */}
      <section className="py-8 bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Filter className="h-5 w-5 text-gray-500" />
              <span className="text-gray-700 font-medium">Filter by category:</span>
            </div>
            <div className="flex flex-wrap gap-2">
              {categories.map((category) => (
                <Button
                  key={category}
                  variant={category === "All" ? "default" : "outline"}
                  size="sm"
                  className={category === "All" ? "bg-orange-600 hover:bg-orange-700" : ""}
                >
                  {category}
                </Button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery Grid */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {projects.map((project, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow overflow-hidden group cursor-pointer">
                <div className="relative overflow-hidden">
                  <Image
                    src={project.image || "/placeholder.svg"}
                    alt={project.title}
                    width={600}
                    height={400}
                    className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-4 left-4">
                    <Badge className="bg-orange-600 text-white">{project.category}</Badge>
                  </div>
                </div>
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{project.title}</h3>
                  <p className="text-sm text-orange-600 mb-3">{project.location}</p>
                  <p className="text-gray-600 text-sm">{project.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Track Record</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Numbers that speak to our experience and commitment to excellence.
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="text-4xl font-bold text-orange-600 mb-2">200+</div>
              <div className="text-gray-600">Projects Completed</div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-orange-600 mb-2">20+</div>
              <div className="text-gray-600">Years Experience</div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-orange-600 mb-2">100%</div>
              <div className="text-gray-600">Client Satisfaction</div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-orange-600 mb-2">50+</div>
              <div className="text-gray-600">Repeat Clients</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-orange-600 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Add Your Project to Our Gallery?</h2>
          <p className="text-xl mb-8 text-orange-100 max-w-2xl mx-auto">
            Let's discuss your construction project and create something amazing together. Contact us today for a free
            consultation and quote.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" className="bg-white text-orange-600 hover:bg-gray-100">
              <Link href="/contact">
                Start Your Project <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
            <Button
              asChild
              variant="outline"
              size="lg"
              className="border-white text-white hover:bg-white hover:text-orange-600 bg-transparent"
            >
              <Link href="/services">View Services</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <p className="text-gray-400">&copy; 2024 G De Leon Construction. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}