'use client'

import { useEffect } from 'react'
import ParticleBackground from '@/components/ParticleBackground'
import Hero from '@/components/Hero'
import About from '@/components/About'
import Contact from '@/components/Contact'

export default function Home() {
  useEffect(() => {
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1,
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible')
          }
        })
      },
      observerOptions
    )

    const elements = document.querySelectorAll('.scroll-reveal')
    elements.forEach((el) => observer.observe(el))

    return () => observer.disconnect()
  }, [])

  return (
    <main className="relative min-h-screen">
      <ParticleBackground />
      <Hero />
      <About />
      <Contact />
      <footer className="py-8 text-center text-muted text-sm relative z-10">
        <p>© {new Date().getFullYear()} GeekBrain.io. All rights reserved.</p>
      </footer>
    </main>
  )
}