src/components/layout/BodyClass.tsx

'use client'

import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

/**
 * Toggles global body classes based on the current route to mirror
 * the static design (homepage uses the background image).
 */
export function BodyClass() {
  const pathname = usePathname()

  useEffect(() => {
    const isHome = pathname === '/'
    if (isHome) {
      document.body.classList.add('image')
    } else {
      document.body.classList.remove('image')
    }

    return () => {
      document.body.classList.remove('image')
    }
  }, [pathname])

  return null
}