'use client'

import Link from 'next/link'
import { useState } from 'react'
import { useLanguage } from '@/lib/LanguageContext'
import LanguageSelector from './LanguageSelector'

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { language, setLanguage, t, isRTL } = useLanguage()

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-100">
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className={`flex items-center justify-between h-16 ${isRTL ? 'flex-row-reverse' : ''}`}>
          {/* Logo */}
          <Link href="/" className={`flex items-center space-x-2 ${isRTL ? 'space-x-reverse' : ''}`}>
            <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">B</span>
            </div>
            <span className="font-semibold text-xl text-slate-900">BreakPilot</span>
          </Link>

          {/* Desktop Navigation */}
          <div className={`hidden md:flex items-center space-x-8 ${isRTL ? 'space-x-reverse' : ''}`}>
            <Link href="/#pricing" className="text-slate-600 hover:text-slate-900 transition-colors">
              {t('nav_pricing')}
            </Link>
            <Link href="/#features" className="text-slate-600 hover:text-slate-900 transition-colors">
              {t('nav_features')}
            </Link>
            <Link href="/foerderantrag" className="text-slate-600 hover:text-slate-900 transition-colors">
              {t('nav_foerderantrag')}
            </Link>
            <Link href="/faq" className="text-slate-600 hover:text-slate-900 transition-colors">
              {t('nav_faq')}
            </Link>
            <Link
              href={process.env.NEXT_PUBLIC_APP_URL + '/login'}
              className="text-slate-600 hover:text-slate-900 transition-colors"
            >
              {t('nav_login')}
            </Link>
            <LanguageSelector
              currentLanguage={language}
              onLanguageChange={setLanguage}
              compact
            />
            <Link
              href="#pricing"
              className="bg-primary-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors btn-press"
            >
              {t('nav_trial')}
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label="Menu"
          >
            <svg className="w-6 h-6 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              {mobileMenuOpen ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden py-4 border-t border-slate-100">
            <div className={`flex flex-col space-y-4 ${isRTL ? 'items-end' : 'items-start'}`}>
              <Link href="/#pricing" className="text-slate-600 hover:text-slate-900">
                {t('nav_pricing')}
              </Link>
              <Link href="/#features" className="text-slate-600 hover:text-slate-900">
                {t('nav_features')}
              </Link>
              <Link href="/foerderantrag" className="text-slate-600 hover:text-slate-900">
                {t('nav_foerderantrag')}
              </Link>
              <Link href="/faq" className="text-slate-600 hover:text-slate-900">
                {t('nav_faq')}
              </Link>
              <Link href={process.env.NEXT_PUBLIC_APP_URL + '/login'} className="text-slate-600 hover:text-slate-900">
                {t('nav_login')}
              </Link>
              <LanguageSelector
                currentLanguage={language}
                onLanguageChange={setLanguage}
              />
              <Link
                href="#pricing"
                className="bg-primary-600 text-white px-4 py-2 rounded-lg font-medium text-center w-full"
              >
                {t('nav_trial')}
              </Link>
            </div>
          </div>
        )}
      </nav>
    </header>
  )
}