import { Helmet } from 'react-helmet-async'
import { services } from '@/data/services'
import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network } from 'lucide-react'
import { Link } from 'react-router-dom'

const serviceLd = {
  '@context': 'https://schema.org',
  '@type': 'Service',
  serviceType: 'Business Communications and IT Services',
  provider: {
    '@type': 'Organization',
    name: 'Queue North Technologies',
    url: 'https://queuenorth.com',
  },
  areaServed: {
    '@type': 'Place',
    name: 'United States',
  },
}

const Services = () => {
  return (
    <>
      <Helmet>
        <title>Business Phone, UCaaS & IT Services | Queue North Technologies</title>
        <meta name="description" content="Explore Queue North Technologies services: unified communications, contact center, managed IT support, consulting & training, infrastructure cabling, wireless access, and local networking." />
        <meta property="og:title" content="Business Phone, UCaaS & IT Services | Queue North Technologies" />
        <meta property="og:description" content="Unified communications, contact center, managed IT support, consulting, cabling, wireless, and networking solutions." />
        <meta property="og:url" content="https://queuenorth.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
        <meta property="og:site_name" content="Queue North Technologies" />
        <script type="application/ld+json">{JSON.stringify(serviceLd)}</script>
      </Helmet>
      {/* Page Hero */}
      <section className="bg-background py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
            <p className="text-xl text-soft-text max-w-3xl">
              Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
            </p>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="bg-background py-16">
        <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-6">
            {services.map((service) => (
              <div key={service.id} className="group">
                <div className="rounded-md overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
                  <div className="p-6">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="h-12 w-12 rounded-md bg-section-alt flex items-center justify-center flex-shrink-0">
                        {service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
                        {service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
                      </div>
                      <h2 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
                        {service.name}
                      </h2>
                    </div>
                    <p className="text-soft-text mb-4">{service.shortDesc}</p>
                    <div className="space-y-2 mb-4">
                      {service.benefits.slice(0, 3).map((benefit, index) => (
                        <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
                          <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
                            <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                            </svg>
                          </div>
                          <span>{benefit}</span>
                        </div>
                      ))}
                    </div>
                    <Link to={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
                      Learn more
                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
              Don't see exactly what you're looking for? We can help you find the right solution.
            </p>
            <Link
              to="/contact"
              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
            >
              Request Consultation
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

export default Services