import React, { useEffect } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { Header } from './Header'
import { Footer } from './Footer'

export const SiteLayout: React.FC = () => {
  const location = useLocation()
  const isHome = location.pathname === '/'

  useEffect(() => {
    if (location.hash) {
      const id = decodeURIComponent(location.hash.replace('#', ''))
      const target = document.getElementById(id)
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
        return
      }
    }

    window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
  }, [location.pathname, location.hash])

  return (
    <div className="min-h-screen bg-[var(--tf-bg)] text-[var(--tf-text)]">
      {isHome ? null : <Header />}
      <main id="main" className="bg-[var(--tf-bg)]">
        <Outlet />
      </main>
      {isHome ? null : <Footer />}
    </div>
  )
}