import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Monitor, Utensils, Rocket, Layout, Settings, RefreshCw } from "lucide-react";

const services = [
  {
    title: "Website Design",
    description: "Custom, modern designs tailored to your brand identity and business goals.",
    icon: Monitor,
  },
  {
    title: "Business Websites",
    description: "Professional corporate sites that build trust and convert visitors into clients.",
    icon: Rocket,
  },
  {
    title: "Restaurant & Café",
    description: "Specialized layouts with menu integration and online reservation capabilities.",
    icon: Utensils,
  },
  {
    title: "Landing Pages",
    description: "High-converting single pages designed specifically for your marketing campaigns.",
    icon: Layout,
  },
  {
    title: "Maintenance",
    description: "Ongoing support, security updates, and performance optimization for your site.",
    icon: Settings,
  },
  {
    title: "Website Redesign",
    description: "Give your outdated website a modern makeover to improve UX and SEO.",
    icon: RefreshCw,
  },
];

export function Services() {
  return (
    <section className="relative py-24 overflow-hidden bg-white">
      {/* Subtle Grid Pattern */}
      <div className="absolute inset-0 -z-10 opacity-[0.05]">
        <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '30px 30px' }} />
      </div>

      <Container>
        <div className="text-center max-w-3xl mx-auto mb-20">
          <Heading className="text-4xl md:text-5xl mb-4 text-neutral-900 font-bold">Our Services</Heading>
          <Subheading className="text-lg text-neutral-600 font-medium">
            Everything you need to establish a powerful online presence and grow your business.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <Card key={index} className="group relative overflow-hidden border-neutral-200 bg-white hover:border-primary/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-2">
              <CardHeader className="relative z-10">
                <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary transition-colors duration-500">
                  <service.icon className="w-7 h-7 text-primary group-hover:text-white" />
                </div>
                <CardTitle className="text-2xl mb-3 text-neutral-900 font-bold">{service.title}</CardTitle>
                <CardDescription className="text-base text-neutral-600 leading-relaxed font-medium">
                  {service.description}
                </CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}