// src/app/page.tsx
'use client'

import { useRouter } from 'next/navigation'
import { ArrowRight, Github, Twitter, Moon, Sun } from 'lucide-react'
import Image from 'next/image'
import byom from '@/app/assets/byom.png'
import { useTheme } from '@/contexts/themecontext'

export default function HomePage() {
  const router = useRouter()
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900' : 'bg-gray-50'} flex flex-col relative`}>
      {/* Theme Toggle Button */}
      <button
        onClick={toggleTheme}
        className={`absolute top-4 right-4 p-2 rounded-lg ${
          theme === 'dark' 
            ? 'bg-gray-800 hover:bg-gray-700' 
            : 'bg-white hover:bg-gray-100'
        } transition-colors shadow-lg`}
        aria-label="Toggle theme"
      >
        {theme === 'dark' ? (
          <Sun className="w-5 h-5 text-yellow-500" />
        ) : (
          <Moon className="w-5 h-5 text-gray-600" />
        )}
      </button>

      {/* Navigation */}
      <nav className="p-4">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="w-32">
            <Image 
              src={byom} 
              alt="BYOM" 
              width={100}
              className={`${theme === 'dark' ? '' : 'invert'} transition-all duration-300`}
            />
          </div>
          <div className="flex gap-4">
            <button 
              onClick={() => router.push('/login')}
              className={`px-4 py-2 rounded-lg ${
                theme === 'dark' 
                  ? 'text-gray-300 hover:text-white' 
                  : 'text-gray-700 hover:text-gray-900'
              } transition-colors`}
            >
              Se connecter
            </button>
            <button 
              onClick={() => router.push('/register')}
              className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
            >
              S&apos;inscrire
            </button>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <main className="flex-1 flex flex-col items-center justify-center px-4 text-center">
        <h1 className={`text-5xl font-bold mb-6 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
          Gérez vos réseaux sociaux <br />
          <span className="text-blue-500">en toute simplicité</span>
        </h1>
        <p className={`text-xl mb-8 max-w-2xl ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
          Planifiez, analysez et optimisez votre présence sur les réseaux sociaux avec notre plateforme tout-en-un.
        </p>
        <div className="flex gap-4">
          <button 
            onClick={() => router.push('/register')}
            className="px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors flex items-center gap-2"
          >
            Commencer gratuitement
            <ArrowRight className="w-4 h-4" />
          </button>
          <button 
            onClick={() => router.push('/demo')}
            className={`px-6 py-3 rounded-lg ${
              theme === 'dark' 
                ? 'bg-gray-800 text-gray-300 hover:bg-gray-700' 
                : 'bg-white text-gray-700 hover:bg-gray-100'
            } transition-colors`}
          >
            Voir la démo
          </button>
        </div>
      </main>

      {/* Footer */}
      <footer className={`p-8 ${theme === 'dark' ? 'border-t border-gray-800' : 'border-t border-gray-200'}`}>
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
            © 2024 BYOM. Tous droits réservés.
          </p>
          <div className="flex gap-4">
            <a href="#" className={`${theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} transition-colors`}>
              <Github className="w-5 h-5" />
            </a>
            <a href="#" className={`${theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} transition-colors`}>
              <Twitter className="w-5 h-5" />
            </a>
          </div>
        </div>
      </footer>
    </div>
  )
}