Queue-North-Website/src/pages/ServiceDetail.jsx

import SEO from '@/components/SEO'
import { SITE_URL, buildBreadcrumbLd, buildDescription } from '@/lib/seo'
import { useParams } from 'react-router-dom'
import { services } from '@/data/services'
import { Link } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { ArrowLeft, ArrowRight, CheckCircle2, Info, Zap } from 'lucide-react'

const serviceImageAlt = {
  'contact-center': 'Modern contact center operations dashboard and support team',
  'infrastructure-cabling': 'Close-up of network cabling connected to infrastructure equipment',
  'wireless-access': 'Wireless coverage planning map used for enterprise Wi-Fi design',
}

const ServiceDetail = () => {
  const { slug } = useParams()
  const service = services.find(s => s.id === slug)

  if (!service) {
    return (
      <section className="bg-background py-16 md:py-24">
        <SEO
          title="Service Not Found | Queue North"
          description="The service page you are looking for does not exist. Browse the services Queue North provides."
          url="https://queuenorth.com/services"
          noindex
        />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
            <p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
            <Link to="/services" className="text-primary-navy hover:underline">
              Back to Services
            </Link>
          </div>
        </div>
      </section>
    )
  }

  // A service with owner-approved copy carries its own title and description in
  // `page.seo`, and both are emitted verbatim. Everything else composes.
  const serviceTitle = service.page?.seo?.title ?? `${service.name} | Queue North`
  const serviceDesc = buildDescription({
    approved: service.page?.seo?.description,
    parts: [service.shortDesc, 'Delivered by Queue North, a veteran-owned 8x8 and Cisco Certified Partner.'],
  })
  const serviceUrl = `${SITE_URL}/services/${service.id}`
  const serviceBreadcrumbLd = buildBreadcrumbLd([
    { name: 'Services', path: '/services' },
    { name: service.name, path: `/services/${service.id}` },
  ])
  const serviceDetailLd = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: service.name,
    description: service.page?.seo?.description ?? service.shortDesc,
    provider: {
      '@type': 'Organization',
      name: 'Queue North Technologies',
      url: 'https://queuenorth.com',
    },
    areaServed: {
      '@type': 'Place',
      name: 'United States',
    },
  }

  return (
    <>
      <SEO
        title={serviceTitle}
        description={serviceDesc}
        url={serviceUrl}
        jsonLd={[serviceDetailLd, serviceBreadcrumbLd]}
      />
      {/* Page Hero */}
      <section className="relative isolate overflow-hidden bg-primary-navy py-16 md:py-24 text-white">
        <div className="absolute inset-0 -z-10">
          <img
            src={service.image || '/assets/hero-tech.webp'}
            alt={serviceImageAlt[service.id] || `${service.name} service visual`}
            className="h-full w-full object-cover object-center"
            loading="eager"
            fetchPriority="high"
            decoding="async"
          />
          <div className="absolute inset-0 bg-primary-navy/84" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div>
              <Link to="/services" className="mb-5 inline-flex items-center gap-2 text-sm font-semibold text-primary-cyan hover:text-white">
                <ArrowLeft className="h-4 w-4" aria-hidden="true" />
                Services
              </Link>
              <h1 className="text-4xl md:text-5xl font-bold mb-6">{service.name}</h1>
              <p className="text-xl text-white/75 max-w-3xl leading-relaxed">{service.shortDesc}</p>
              <div className="mt-8">
                <Link to="/contact#contact-form" className="inline-flex 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">
                  Request This Service
                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <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="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Left Column - Main Content */}
            <div className="lg:col-span-2">
              <div className="mb-12">
                <h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
                <p className="text-lg text-soft-text mb-6 leading-relaxed">
                  {service.fullDesc}
                </p>
              </div>

              <div className="mb-12">
                <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {service.benefits.map((benefit, index) => (
                    <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
                      <CheckCircle2 className="h-5 w-5 text-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
                      <span className="text-sm font-medium text-text">{benefit}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="mb-12">
                <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {service.idealFor.map((item, index) => (
                    <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
                      <Zap className="h-5 w-5 text-teal-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
                      <span className="text-sm font-medium text-text">{item}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right Column - Sidebar */}
            <div className="lg:col-span-1">
              <Card className="lg:sticky top-24 border-t-[3px] border-t-primary-blue">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <span className="flex h-10 w-10 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
                      <Info className="h-5 w-5" aria-hidden="true" />
                    </span>
                    <CardTitle className="text-primary-navy text-xl">Quick Info</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h3 className="font-semibold text-text mb-2">Service</h3>
                    <p className="text-soft-text">{service.name}</p>
                  </div>
                  <div className="pt-4 border-t border-border">
                    <Link to="/contact#contact-form" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
                      Request This Service
                    </Link>
                  </div>
                  <div className="pt-2">
                    <Link to="/services" className="text-primary-navy hover:underline">
                      ← Back to Services
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default ServiceDetail