43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import { useParams, Link } from 'react-router-dom'
|
||
import { useRef, useEffect } from 'react'
|
||
import servicePages from '../data/servicePages'
|
||
import { useNavFix } from '../hooks/useNavFix'
|
||
|
||
const serviceSlugs = Object.keys(servicePages)
|
||
|
||
export default function ServiceDetail() {
|
||
const { slug } = useParams()
|
||
const ref = useRef(null)
|
||
useNavFix(ref)
|
||
|
||
// Debug: log what we're looking up
|
||
console.log('ServiceDetail: slug=%s, available=%d keys, found=%s', slug, serviceSlugs.length, slug ? (slug in servicePages) : false)
|
||
|
||
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>
|
||
)
|
||
}
|
||
|
||
export { serviceSlugs }
|