"use client"

import { useState } from "react"
import { Menu, X, Globe, Phone } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useLanguage } from "@/contexts/language-context"

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

  const languages = [
    { code: "en" as const, name: "English" },
    { code: "uz" as const, name: "O'zbekcha" },
    { code: "ru" as const, name: "Русский" },
  ]

  return (
    <header className="sticky top-0 z-50 bg-background border-b border-border">
      <div className="bg-slate-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between text-sm">
          <div className="flex items-center gap-2">
            <Phone size={16} />
            <span>+998 (71) 200-01-02</span>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-1 hover:text-primary transition-colors">
                <Globe size={16} />
                {language.toUpperCase()}
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="bg-slate-800 border-slate-700">
              {languages.map((lang) => (
                <DropdownMenuItem
                  key={lang.code}
                  onClick={() => setLanguage(lang.code)}
                  className="cursor-pointer hover:bg-slate-700 text-white"
                >
                  {lang.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-sm">D</span>
          </div>
          <span className="font-bold text-lg text-foreground">Dwatt</span>
        </div>

        <div className="hidden md:flex items-center gap-8">
          <a href="#features" className="text-foreground hover:text-primary transition-colors">
            {t.nav.features}
          </a>
          <a href="#pricing" className="text-foreground hover:text-primary transition-colors">
            {t.nav.pricing}
          </a>
          <a href="#faq" className="text-foreground hover:text-primary transition-colors">
            {t.nav.faq}
          </a>
        </div>

        <div className="hidden md:flex items-center gap-4">
          <Button variant="outline" className="border-border bg-transparent">
            {t.nav.login}
          </Button>
          <Button className="bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
        </div>

        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden">
          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </nav>

      {mobileMenuOpen && (
        <div className="md:hidden border-t border-border bg-background">
          <div className="px-4 py-4 space-y-4">
            <a href="#features" className="block text-foreground hover:text-primary">
              {t.nav.features}
            </a>
            <a href="#pricing" className="block text-foreground hover:text-primary">
              {t.nav.pricing}
            </a>
            <a href="#faq" className="block text-foreground hover:text-primary">
              {t.nav.faq}
            </a>
            <div className="flex gap-2 pt-4 border-t border-border">
              <Button variant="outline" className="flex-1 bg-transparent">
                {t.nav.login}
              </Button>
              <Button className="flex-1 bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
            </div>
          </div>
        </div>
      )}
    </header>
  )
}