'use client'

import { useEffect, useState } from 'react'
import { Navbar } from '@/components/portfolio/navbar'
import { Hero } from '@/components/portfolio/hero'
import { About } from '@/components/portfolio/about'
import { Skills } from '@/components/portfolio/skills'
import { Projects } from '@/components/portfolio/projects'
import { Testimonials } from '@/components/portfolio/testimonials'
import { Blog } from '@/components/portfolio/blog'
import { Contact } from '@/components/portfolio/contact'
import { Footer } from '@/components/portfolio/footer'

export default function PortfolioPage() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')

  // Initialise from system preference
  useEffect(() => {
    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null
    const preferred = stored ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
    setTheme(preferred)
    document.documentElement.classList.toggle('dark', preferred === 'dark')
  }, [])

  const toggleTheme = () => {
    const next = theme === 'light' ? 'dark' : 'light'
    setTheme(next)
    document.documentElement.classList.toggle('dark', next === 'dark')
    localStorage.setItem('theme', next)
  }

  return (
    <div className="bg-background text-foreground min-h-screen">
      <Navbar theme={theme} onToggleTheme={toggleTheme} />

      <main>
        <Hero />

        <div className="relative">
          {/* Subtle divider between sections */}
          <About />
          <div className="border-t border-border max-w-5xl mx-auto" />
          <Skills />
          <div className="border-t border-border max-w-5xl mx-auto" />
          <Projects />
          <div className="border-t border-border max-w-5xl mx-auto" />
          <Blog />
          <div className="border-t border-border max-w-5xl mx-auto" />
          <Testimonials />
          <div className="border-t border-border max-w-5xl mx-auto" />
          <Contact />
        </div>
      </main>

      <Footer />
    </div>
  )
}
