import "./index.css"
import { useEffect, useRef, useState } from "react"
import { SectionNav } from "./components/SectionNav"
import { Header } from "./components/sections/Header"
import { Work } from "./components/sections/Work"
import { Connect } from "./components/sections/Connect"
import { sections } from "./data/portfolio"

export function App() {
  const [activeSection, setActiveSection] = useState("")
  const sectionsRef = useRef<(HTMLElement | null)[]>([])

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in-up")
            setActiveSection(entry.target.id)
          }
        })
      },
      { threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
    )

    sectionsRef.current.forEach((section) => {
      if (section) observer.observe(section)
    })

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



  return (
    <div className="min-h-screen dark:bg-background text-foreground relative">
      <SectionNav sections={sections} activeSection={activeSection} />

      <main>
        <div className="max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
          <Header sectionRef={(el) => (sectionsRef.current[0] = el)} />
        </div>
        <Work sectionRef={(el) => (sectionsRef.current[1] = el)} />
        <Connect sectionRef={(el) => (sectionsRef.current[2] = el)} />
      </main>
    </div>
  )
}

export default App