import { useParams, Link } from 'react-router-dom'
import { useEffect, useRef } from 'react'
import { useNavFix } from '../hooks/useNavFix'
import services from '../data/services.json'
import { BRAND_PRIMARY } from '../config'
import ServiceBreadcrumb from '../components/sections/ServiceBreadcrumb'
import ServiceImage from '../components/sections/ServiceImage'
import ServiceBody from '../components/sections/ServiceBody'
import ServiceSidebar from '../components/sections/ServiceSidebar'

export default function ServiceDetail() {
  const { slug } = useParams()
  const ref = useRef(null)
  useNavFix(ref)

  const service = slug ? services.find(s => s.slug === slug) : null

  useEffect(() => {
    window.scrollTo(0, 0)
    if (service) {
      document.title = service.title + ' – Profen Engineering'
    }
  }, [slug, service])

  if (!service) {
    return (
      <div style={{ padding: '120px 24px', textAlign: 'center' }}>
        <h1>Service Not Found</h1>
        <p>The service you're looking for doesn't exist.</p>
        <Link to="/service" style={{ color: BRAND_PRIMARY }}>← Back to Services</Link>
      </div>
    )
  }

  return (
    <div ref={ref}>
      <ServiceBreadcrumb title={service.title} />
      <div className="rakar-fluid">
        <div className="builder-page-wrapper">
          <div data-elementor-type="wp-page" data-elementor-id={service.postId} className={`elementor elementor-${service.postId}`}>
            <div className="elementor-element elementor-element-9a85ca6 e-flex e-con-boxed e-con e-parent" data-id="9a85ca6" data-element_type="container" data-e-type="container">
              <div className="e-con-inner">
                <div className="elementor-element elementor-element-cf1beee e-con-full e-flex e-con e-child" data-id="cf1beee" data-element_type="container" data-e-type="container">
                  <ServiceImage
                    src={service.image}
                    srcSet={service.imageSrcset}
                    width={service.imageWidth}
                    height={service.imageHeight}
                    alt={service.title}
                  />
                  <ServiceBody blocks={service.contentBlocks} />
                </div>
                <div className="elementor-element elementor-element-839957a e-con-full e-flex e-con e-child" data-id="839957a" data-element_type="container" data-e-type="container">
                  <ServiceSidebar activeSlug={slug} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
