'use client'

import Link from 'next/link'
import { ArrowRight } from 'lucide-react'

const services = [
  {
    title: 'IT Infrastructure Consulting',
    description: 'Strategic planning and optimization of enterprise IT environments',
    icon: '🏗️'
  },
  {
    title: 'System Integration',
    description: 'Seamless integration of complex technology systems and platforms',
    icon: '🔗'
  },
  {
    title: 'Hardware Supply',
    description: 'Enterprise-grade hardware solutions from leading vendors',
    icon: '⚙️'
  },
  {
    title: 'Software Licensing',
    description: 'Comprehensive licensing strategies and management',
    icon: '📜'
  },
  {
    title: 'Deployment and Configuration',
    description: 'Expert installation and configuration of enterprise solutions',
    icon: '🚀'
  },
  {
    title: 'Technical Support',
    description: '24/7 dedicated support for your IT infrastructure',
    icon: '💬'
  }
]

export default function Services() {
  return (
    <section className="py-20 px-6 md:px-12 lg:px-20 bg-zinc-950">
      <div className="max-w-6xl mx-auto">
        <div className="mb-16">
          <Link 
            href="/" 
            className="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors mb-6"
          >
            ← Back to Home
          </Link>
          <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-indigo-50 mb-4 text-balance">
            Our Services
          </h1>
          <p className="text-lg text-indigo-100/70 max-w-2xl">
            Comprehensive IT solutions tailored to meet your enterprise needs
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <div
              key={index}
              className="group backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/8 hover:border-indigo-400/30 transition-all duration-300 hover:shadow-xl hover:shadow-indigo-600/20"
            >
              <div className="text-5xl mb-4">{service.icon}</div>
              <h3 className="text-xl font-semibold text-indigo-50 mb-3 group-hover:text-indigo-300 transition-colors">
                {service.title}
              </h3>
              <p className="text-indigo-100/70 leading-relaxed mb-4">
                {service.description}
              </p>
              <div className="flex items-center text-indigo-400 group-hover:text-indigo-300 transition-colors opacity-0 group-hover:opacity-100">
                <span className="text-sm font-medium">Learn more</span>
                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 text-center">
          <p className="text-indigo-100/60 mb-6">Ready to transform your IT infrastructure?</p>
          <Link
            href="/contacts"
            className="inline-flex items-center gap-2 rounded-full bg-indigo-600 px-8 py-3 text-white font-medium hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 transition-colors"
          >
            Contact Us
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </div>
    </section>
  )
}