"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Cpu,
  Wrench,
  Users,
  BookOpen,
  Zap,
  BarChart3,
  MessageSquare,
  ShoppingCart,
  Star,
  LayoutGrid,
  ArrowRight,
} from "lucide-react"

const services = [
  {
    title: "PC Builder",
    description: "Plan your custom PC with our interactive builder. Add components by category, stay within budget, and get real-time compatibility checks before you buy.",
    href: "/builder",
    icon: Wrench,
    color: "text-blue-600 dark:text-blue-400",
    bg: "bg-blue-500/10 dark:bg-blue-500/20 border-blue-200 dark:border-blue-800",
  },
  {
    title: "Community Builds",
    description: "Browse, like, and share builds from the community. Discover popular configurations and get inspiration for Gaming, Office, and Academic setups.",
    href: "/builds",
    icon: Users,
    color: "text-purple-600 dark:text-purple-400",
    bg: "bg-purple-500/10 dark:bg-purple-500/20 border-purple-200 dark:border-purple-800",
  },
  {
    title: "Build Guides",
    description: "Step-by-step tutorials and guides—from PC assembly to part selection. Beginner-friendly with difficulty levels and estimated costs.",
    href: "/guides",
    icon: BookOpen,
    color: "text-amber-600 dark:text-amber-400",
    bg: "bg-amber-500/10 dark:bg-amber-500/20 border-amber-200 dark:border-amber-800",
  },
  {
    title: "Compatibility Checker",
    description: "Smart compatibility checking: CPU–motherboard sockets, RAM type, PSU wattage, GPU–case fit, and more. Warnings and errors before you commit.",
    href: "/builder",
    icon: Zap,
    color: "text-emerald-600 dark:text-emerald-400",
    bg: "bg-emerald-500/10 dark:bg-emerald-500/20 border-emerald-200 dark:border-emerald-800",
  },
  {
    title: "Compare Builds",
    description: "Side-by-side comparison of builds or components. Compare prices, specs, and performance to choose the best option.",
    href: "/compare",
    icon: BarChart3,
    color: "text-slate-600 dark:text-slate-400",
    bg: "bg-slate-500/10 dark:bg-slate-500/20 border-slate-200 dark:border-slate-700",
  },
  {
    title: "Purchase & Checkout",
    description: "Get purchase options and summary for your build. Export or send build details for buying from retailers.",
    href: "/purchase",
    icon: ShoppingCart,
    color: "text-blue-600 dark:text-blue-400",
    bg: "bg-blue-500/10 dark:bg-blue-500/20 border-blue-200 dark:border-blue-800",
  },
  {
    title: "Expert Recommendations",
    description: "CSP and graph-based algorithms suggest optimal components for your budget, use case, and performance needs. Upgrade paths and alternatives.",
    href: "/builder",
    icon: Star,
    color: "text-yellow-600 dark:text-yellow-400",
    bg: "bg-yellow-500/10 dark:bg-yellow-500/20 border-yellow-200 dark:border-yellow-800",
  },
  {
    title: "Support & Help",
    description: "Submit tickets, browse FAQs, and get help with troubleshooting, build problems, delivery, or general questions.",
    href: "/support",
    icon: MessageSquare,
    color: "text-indigo-600 dark:text-indigo-400",
    bg: "bg-indigo-500/10 dark:bg-indigo-500/20 border-indigo-200 dark:border-indigo-800",
  },
]

export default function ServicesPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
      <div className="container mx-auto px-4 py-12 max-w-5xl">
        <div className="text-center mb-14">
          <div className="inline-flex items-center justify-center rounded-xl bg-slate-200/80 dark:bg-slate-700/50 p-3 mb-4">
            <LayoutGrid className="h-10 w-10 text-slate-700 dark:text-slate-300" />
          </div>
          <h1 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-3">
            Our Services
          </h1>
          <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto text-lg">
            Everything you need to plan, build, and manage your custom PC—compatibility, community, guides, and support.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-2 gap-6">
          {services.map((service) => {
            const Icon = service.icon
            return (
              <Card
                key={service.title}
                className={`overflow-hidden border ${service.bg} hover:shadow-lg transition-all duration-200 group`}
              >
                <CardHeader className="pb-2">
                  <div className="flex items-start justify-between gap-4">
                    <div className={`rounded-lg p-2.5 ${service.bg} border`}>
                      <Icon className={`h-6 w-6 ${service.color}`} />
                    </div>
                    <Button variant="ghost" size="sm" className="shrink-0 -mr-2" asChild>
                      <Link href={service.href} className="group/link">
                        <span className="sr-only">Open {service.title}</span>
                        <ArrowRight className="h-4 w-4 group-hover/link:translate-x-1 transition-transform" />
                      </Link>
                    </Button>
                  </div>
                  <CardTitle className="text-xl mt-2">{service.title}</CardTitle>
                  <CardDescription className="text-slate-600 dark:text-slate-400">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="pt-0">
                  <Button asChild className="w-full sm:w-auto">
                    <Link href={service.href}>
                      {service.title === "Compatibility Checker" || service.title === "Expert Recommendations"
                        ? "Open in Builder"
                        : `Go to ${service.title}`}
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            )
          })}
        </div>

        <div className="mt-16 text-center">
          <p className="text-slate-600 dark:text-slate-400 mb-4">
            Gaming · Office · Academic — we support every build type.
          </p>
          <Button size="lg" asChild>
            <Link href="/builder">
              <Cpu className="mr-2 h-5 w-5" />
              Start Building
            </Link>
          </Button>
        </div>
      </div>
    </div>
  )
}