Services Grid

'use client'

import { motion } from 'framer-motion'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Code,
  Palette,
  Rocket,
  Shield,
  Zap,
  Users,
  BarChart3,
  Settings,
} from 'lucide-react'

const services = [
  {
    icon: Code,
    title: 'Web Development',
    description:
      'Build modern, responsive websites with cutting-edge technologies and best practices.',
    features: ['React & Next.js', 'TypeScript', 'Performance Optimized'],
    iconColor: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
  },
  {
    icon: Palette,
    title: 'UI/UX Design',
    description:
      'Create beautiful, intuitive interfaces that users love and convert.',
    features: ['User Research', 'Wireframing', 'Prototyping'],
    iconColor: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
  },
  {
    icon: Rocket,
    title: 'Product Strategy',
    description:
      'Plan and execute product roadmaps that align with business goals.',
    features: ['Market Analysis', 'MVP Planning', 'Go-to-Market'],
    iconColor: 'text-orange-500',
    bgColor: 'bg-orange-500/10',
  },
  {
    icon: Shield,
    title: 'Security & Compliance',
    description:
      'Protect your application with enterprise-grade security measures.',
    features: ['Data Encryption', 'GDPR Compliant', 'Security Audits'],
    iconColor: 'text-green-500',
    bgColor: 'bg-green-500/10',
  },
  {
    icon: Zap,
    title: 'Performance',
    description:
      'Optimize your applications for speed, reliability, and scalability.',
    features: ['Code Splitting', 'Caching', 'CDN Integration'],
    iconColor: 'text-yellow-500',
    bgColor: 'bg-yellow-500/10',
  },
  {
    icon: Users,
    title: 'Team Collaboration',
    description:
      'Tools and workflows that enable seamless team communication.',
    features: ['Real-time Sync', 'Version Control', 'Comments'],
    iconColor: 'text-indigo-500',
    bgColor: 'bg-indigo-500/10',
  },
  {
    icon: BarChart3,
    title: 'Analytics & Insights',
    description:
      'Track, measure, and analyze your application performance metrics.',
    features: ['Custom Dashboards', 'Real-time Data', 'Reports'],
    iconColor: 'text-pink-500',
    bgColor: 'bg-pink-500/10',
  },
  {
    icon: Settings,
    title: 'API Integration',
    description:
      'Connect with any third-party service through our flexible API.',
    features: ['RESTful APIs', 'Webhooks', 'Documentation'],
    iconColor: 'text-slate-500',
    bgColor: 'bg-slate-500/10',
  },
]

export function ServicesGridBlock() {
  return (
    <section className="w-full bg-background px-4 py-16 md:py-24">
      <div className="mx-auto max-w-7xl">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-12 text-center md:mb-16"
        >
          <Badge className="mb-4" variant="secondary">
            What We Offer
          </Badge>
          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl">
            Complete Solutions for Your Business
          </h2>
          <p className="mx-auto max-w-2xl text-base text-muted-foreground md:text-lg">
            Everything you need to build, launch, and scale your digital
            products with confidence
          </p>
        </motion.div>

        {/* Services Grid */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 md:gap-6">
          {services.map((service, index) => {
            const Icon = service.icon
            
            return (
              <motion.div
                key={service.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1, duration: 0.5 }}
                whileHover={{ y: -5 }}
              >
                <Card className="group relative h-full overflow-hidden border-border/50 bg-card p-4 transition-all hover:border-primary/50 hover:shadow-xl md:p-6">
                  {/* Gradient overlay */}
                  <motion.div
                    className={`absolute inset-0 ${service.bgColor} opacity-0 transition-opacity duration-500 group-hover:opacity-100`}
                  />

                  <div className="relative z-10">
                    {/* Icon */}
                    <motion.div
                      transition={{ duration: 0.6 }}
                      className="mb-4"
                    >
                      <div className={`w-fit rounded-xl ${service.bgColor} p-3`}>
                        <Icon className={`h-6 w-6 ${service.iconColor} md:h-7 md:w-7`} />
                      </div>
                    </motion.div>

                    {/* Content */}
                    <h3 className="mb-2 text-lg font-semibold md:text-xl">
                      {service.title}
                    </h3>
                    <p className="mb-4 text-sm text-muted-foreground">
                      {service.description}
                    </p>

                    {/* Features */}
                    <ul className="mb-4 space-y-1.5">
                      {service.features.map((feature, idx) => (
                        <motion.li
                          key={feature}
                          initial={{ opacity: 0, x: -10 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ delay: 0.5 + idx * 0.1 }}
                          className="flex items-center gap-2 text-xs text-muted-foreground"
                        >
                          <div className={`h-1 w-1 rounded-full bg-primary`} />
                          {feature}
                        </motion.li>
                      ))}
                    </ul>

                    {/* CTA */}
                    <Button
                      variant="ghost"
                      size="sm"
                      className="group/btn w-full text-xs md:text-sm"
                    >
                      Learn More
                      <motion.span
                        className="ml-2"
                        animate={{ x: [0, 3, 0] }}
                        transition={{
                          repeat: Infinity,
                          duration: 1.5,
                          ease: 'easeInOut',
                        }}
                      >
                        →
                      </motion.span>
                    </Button>
                  </div>
                </Card>
              </motion.div>
            )
          })}
        </div>

        {/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1, duration: 0.5 }}
          className="mt-12 text-center md:mt-16"
        >
          <p className="mb-4 text-sm text-muted-foreground md:text-base">
            Need a custom solution?
          </p>
          <Button size="lg">
            Contact Our Team
          </Button>
        </motion.div>
      </div>
    </section>
  )
}