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

import { Helmet } from 'react-helmet-async'
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'

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">
        <Helmet>
          <title>Service Not Found | Queue North Technologies</title>
          <meta name="description" content="The service page you are looking for does not exist." />
        </Helmet>
        <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>
    )
  }

  const serviceTitle = `${service.name} | Queue North Technologies`
  const serviceDesc = service.shortDesc || `Learn about ${service.name} from Queue North Technologies.`
  const serviceUrl = `https://queuenorth.com/services/${service.id}`

  const serviceDetailLd = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: service.name,
    description: service.shortDesc,
    provider: {
      '@type': 'Organization',
      name: 'Queue North Technologies',
      url: 'https://queuenorth.com',
    },
    areaServed: {
      '@type': 'Place',
      name: 'United States',
    },
  }

  return (
    <>
      <Helmet>
        <title>{serviceTitle}</title>
        <meta name="description" content={serviceDesc} />
        <meta property="og:title" content={serviceTitle} />
        <meta property="og:description" content={serviceDesc} />
        <meta property="og:url" content={serviceUrl} />
        <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(serviceDetailLd)}</script>
      </Helmet>
      {/* Page Hero */}
      <section className="bg-background py-16 md: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">{service.name}</h1>
            {service.image && (
              <div className="relative mb-8 rounded-xl overflow-hidden">
                <img
                  src={service.image}
                  alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
                    : service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
                    : 'Network engineer with laptop configuring infrastructure'}
                  className="w-full h-64 md:h-80 object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
              </div>
            )}
            <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <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 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">
                      <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <span className="text-lg 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">
                      <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                      </div>
                      <span className="text-lg text-text">{item}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right Column - Sidebar */}
            <div className="lg:col-span-1">
              <Card className="sticky top-24">
                <CardHeader>
                  <CardTitle className="text-primary-navy">Quick Info</CardTitle>
                </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" 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