import SEO from '@/components/SEO'
import { buildBreadcrumbLd } from '@/lib/seo'
import { services } from '@/data/services'
import { ArrowRight, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Layers, CheckCircle2, ShieldCheck, PhoneCall } 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 iconMap = {
  'message-circle': MessageCircle,
  'users': Users,
  'life-buoy': LifeBuoy,
  'graduation-cap': GraduationCap,
  'link': LinkIcon,
  'wifi': Wifi,
  'network': Network,
}

const serviceAccentStyles = [
  {
    card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50',
    iconWrap: 'bg-sky-50',
    icon: 'text-primary-blue',
    link: 'text-primary-blue hover:text-primary-navy',
  },
  {
    card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50',
    iconWrap: 'bg-teal-50',
    icon: 'text-teal-600',
    link: 'text-teal-700 hover:text-primary-navy',
  },
  {
    card: 'border-t-[3px] border-t-cyan-400 hover:border-cyan-400/60',
    iconWrap: 'bg-cyan-50',
    icon: 'text-cyan-600',
    link: 'text-cyan-700 hover:text-primary-navy',
  },
  {
    card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60',
    iconWrap: 'bg-amber-50',
    icon: 'text-amber-600',
    link: 'text-amber-700 hover:text-primary-navy',
  },
]

const serviceHighlights = [
  { label: 'Discovery first', icon: CheckCircle2 },
  { label: 'Vendor-neutral guidance', icon: ShieldCheck },
  { label: 'Deployment and support', icon: PhoneCall },
]

const Services = () => {
  return (
    <>
      <SEO
        title="Communications & IT Services | Queue North"
        description="Unified communications, contact center, managed IT support, consulting, cabling, wireless access, and local networking for growing businesses."
        url="https://queuenorth.com/services"
        jsonLd={[serviceLd, buildBreadcrumbLd([{ name: 'Services', path: '/services' }])]}
      />

      {/* Hero */}
      <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
        <div className="absolute inset-0 -z-10">
          <img
            src="/assets/hero-tech.webp"
            alt="Queue North technician working inside a communications rack"
            className="h-full w-full object-cover object-center"
            loading="eager"
            fetchPriority="high"
            decoding="async"
          />
          <div className="absolute inset-0 bg-primary-navy/75" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/90 to-primary-navy/35" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
              <Layers className="h-4 w-4" aria-hidden="true" />
              What We Do
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
              Everything your business communications needs.
            </h1>
            <p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
              From phone systems to full network infrastructure — designed, deployed, and supported by one accountable team.
            </p>
            <div className="flex flex-col sm:flex-row gap-3">
              <Link
                to="/contact#contact-form"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
              >
                Get a Free Quote
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <Link
                to="/support"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
              >
                Existing Client? Get Support
              </Link>
            </div>
            <div className="mt-10 grid grid-cols-1 gap-3 sm:grid-cols-3">
              {serviceHighlights.map((item) => {
                const Icon = item.icon
                return (
                  <div key={item.label} className="flex items-center gap-2 rounded-md border border-white/15 bg-white/10 px-3 py-2 text-sm font-semibold text-white/85">
                    <Icon className="h-4 w-4 text-primary-cyan" aria-hidden="true" />
                    {item.label}
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <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 className="mb-10 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-primary-navy">Services built around the whole environment</h2>
              <p className="mt-3 max-w-2xl text-lg text-soft-text">
                Choose a starting point below, or bring us the messy version and we will map the practical path forward.
              </p>
            </div>
            <Link
              to="/contact#contact-form"
              className="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-primary-navy/20 px-4 text-sm font-semibold text-primary-navy hover:border-primary-blue hover:text-primary-blue transition-colors"
            >
              Talk through options
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service, index) => {
              const Icon = iconMap[service.icon]
              const accent = serviceAccentStyles[index % serviceAccentStyles.length]

              return (
                <div key={service.id} className={`group flex h-full flex-col rounded-md border border-border bg-white p-6 shadow-sm hover:shadow-md transition-all ${accent.card}`}>
                  <div className="mb-5 flex items-center gap-4">
                    <div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md ${accent.iconWrap}`}>
                      {Icon && <Icon className={`h-6 w-6 ${accent.icon}`} aria-hidden="true" />}
                    </div>
                    <h2 className="text-left text-xl font-semibold text-primary-navy">{service.name}</h2>
                  </div>
                  <p className="text-soft-text text-sm leading-relaxed flex-1 mb-5">{service.homeDesc}</p>
                  {service.idealFor?.[0] && (
                    <p className="mb-6 rounded-md bg-section-alt px-3 py-2 text-xs font-semibold text-primary-navy">
                      Best fit: {service.idealFor[0]}
                    </p>
                  )}
                  <Link
                    to={`/services/${service.id}`}
                    className={`inline-flex items-center gap-1.5 text-sm font-semibold transition-colors ${accent.link}`}
                    aria-label={`Learn more about ${service.name}`}
                  >
                    Learn more
                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
                  </Link>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-md bg-primary-navy px-6 py-10 text-white shadow-md sm:px-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:px-10">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-3">Not sure where to start?</h2>
              <p className="max-w-2xl text-white/75">
                Tell us what you're trying to fix. We'll help you identify the right service path before you spend a dollar.
              </p>
            </div>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
              <Link
                to="/contact#contact-form"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
              >
                Schedule a Consultation
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <a
                href="tel:+13217308020"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
              >
                Call (321) 730-8020
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default Services
