import { useParams, Link } from 'react-router-dom'
import { useRef, useEffect } from 'react'
import servicePages from '../data/servicePages'
import { useNavFix } from '../hooks/useNavFix'

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

  const page = slug ? servicePages[slug] : null

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

  if (!page) {
    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: '#FA2D39' }}>← Back to Services</Link>
      </div>
    )
  }

  return (
    <div ref={ref}>
      <div dangerouslySetInnerHTML={{ __html: page.html }} />
    </div>
  )
}
