import { useState, useEffect } from 'react'
import { Moon, Sun } from 'lucide-react'
import HeroSection from './components/HeroSection.jsx'

function App() {
  const [dark, setDark] = useState(() => {
    const stored = localStorage.getItem('theme')
    if (stored === 'dark' || stored === 'light') return stored === 'dark'
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  })

  useEffect(() => {
    const root = document.documentElement
    if (dark) {
      root.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      root.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }
  }, [dark])

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-neutral-900">
      <button
        type="button"
        onClick={() => setDark((d) => !d)}
        className="fixed top-4 right-4 z-[100] rounded-lg border border-neutral-200 bg-white/90 p-2.5 text-neutral-700 shadow-lg backdrop-blur-sm transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800/90 dark:text-neutral-200 dark:hover:bg-neutral-700"
        aria-label={dark ? 'Hellmodus' : 'Dark Mode'}
      >
        {dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
      </button>
      <HeroSection />
      <section className="relative z-40 min-h-[60vh] px-4 py-20 md:px-8 md:py-28">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="text-2xl font-semibold text-neutral-800 dark:text-neutral-100 sm:text-3xl md:text-4xl">
            What happens next
          </h2>
          <p className="mt-4 text-neutral-600 dark:text-neutral-400">
            Scroll down to explore more. This section makes the page scrollable.
          </p>
        </div>
      </section>
    </div>
  )
}

export default App
