"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { ArrowUpRight, Menu, X } from "lucide-react";
import { useI18n } from "@/lib/i18n/context";
import { LanguageSwitch } from "@/components/common/LanguageSwitch";

export function Header() {
  const { language } = useI18n();
  const isDe = language === "de";
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 w-full bg-[#F6F9FF]/95 backdrop-blur-md border-b border-[#E2E8F0]">
      <div className="max-w-[1440px] mx-auto px-3 sm:px-6 md:px-8 h-16 sm:h-24 md:h-28 flex items-center justify-between gap-2 border-x border-[#E2E8F0] relative">
        {/* Brand / Logo */}
        <Link href={`/${language}`} className="flex min-w-0 items-center gap-2 sm:gap-3 group shrink">
          <div className="w-10 h-10 sm:w-16 sm:h-16 md:w-24 md:h-24 bg-white border-2 border-black p-1 sm:p-1.5 overflow-hidden flex items-center justify-center transition-transform group-hover:scale-95 shrink-0">
            <Image
              src="/app-icon-original.png"
              alt="ScanReceipts logo"
              width={96}
              height={96}
              className="w-full h-full object-contain"
              priority
            />
          </div>
          <div className="flex flex-col min-w-0">
            <div className="flex items-center gap-1.5 sm:gap-2">
              <span className="font-display font-black text-base sm:text-2xl md:text-3xl tracking-tight text-black leading-none whitespace-nowrap">
                SCAN
              </span>
              <span className="font-mono text-[9px] sm:text-xs md:text-sm bg-black text-white px-1 sm:px-1.5 md:px-2 py-0.5 font-bold uppercase tracking-wider whitespace-nowrap">
                RECEIPTS
              </span>
            </div>
            <span className="hidden md:block font-mono text-[11px] uppercase tracking-caps text-[#475569] font-medium mt-1 whitespace-nowrap">
              Instant AI OCR to Excel (.xlsx)
            </span>
          </div>
        </Link>

        {/* Desktop Nav */}
        <nav className="hidden xl:flex items-center gap-5 2xl:gap-8 font-mono text-xs uppercase tracking-caps text-[#475569] shrink-0">
          <a href="#features" className="hover:text-black transition-colors">
            {isDe ? "Features" : "Features"}
          </a>
          <a href="#app" className="hover:text-black transition-colors">
            App
          </a>
          <a href="#workflow" className="hover:text-black transition-colors">
            {isDe ? "Workflow" : "Workflow"}
          </a>
          <a href="#comparison" className="hover:text-black transition-colors">
            {isDe ? "Vergleich" : "Comparison"}
          </a>
          <a href="#pricing" className="hover:text-black transition-colors">
            {isDe ? "Tarife" : "Pricing"}
          </a>
          <a href="#faq" className="hover:text-black transition-colors">
            {isDe ? "FAQ" : "FAQ"}
          </a>
          <Link href={`/${language}/blog`} className="hover:text-black transition-colors">
            Blog
          </Link>
        </nav>

        {/* Actions */}
        <div className="flex items-center gap-1.5 sm:gap-3 md:gap-4 shrink-0">
          <div className="hidden md:block">
            <LanguageSwitch />
          </div>

          {/* Login */}
          <Link
            href="/auth/login"
            className="hidden md:inline-flex min-h-10 items-center font-mono text-xs uppercase tracking-caps text-black hover:text-[#475569] font-medium transition-colors px-2 py-1.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
          >
            {isDe ? "Anmelden" : "Log In"}
          </Link>

          {/* Sign Up / Open Dashboard */}
          <Link
            href="/auth/signup"
            className="flex min-h-10 items-center gap-1 sm:gap-1.5 bg-black text-white font-mono text-[10px] sm:text-xs uppercase tracking-caps px-2.5 py-1.5 sm:px-4 sm:py-2 md:px-5 md:py-2.5 hover:bg-[#334155] transition-all group font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black whitespace-nowrap"
          >
            <span>{isDe ? "App öffnen" : "Launch App"}</span>
            <ArrowUpRight className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
          </Link>

          {/* Mobile menu toggle */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="xl:hidden p-1.5 sm:p-2 border border-[#E2E8F0] hover:border-black text-black shrink-0"
            aria-label="Toggle Menu"
          >
            {mobileMenuOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
          </button>
        </div>
      </div>

      {/* Mobile Navigation Drawer */}
      {mobileMenuOpen && (
        <div className="xl:hidden bg-white border-b border-[#E2E8F0] px-4 sm:px-6 py-6 space-y-4 animate-fade-in font-mono text-xs uppercase tracking-caps">
          <a
            href="#features"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            {isDe ? "Funktionen" : "Features"}
          </a>
          <a
            href="#workflow"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            {isDe ? "Workflow" : "Workflow"}
          </a>
          <a
            href="#app"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            App
          </a>
          <a
            href="#comparison"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            {isDe ? "Vergleich" : "Comparison"}
          </a>
          <a
            href="#pricing"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            {isDe ? "Tarife" : "Pricing"}
          </a>
          <a
            href="#faq"
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black border-b border-[#F1F5F9]"
          >
            FAQ
          </a>
          <Link
            href={`/${language}/blog`}
            onClick={() => setMobileMenuOpen(false)}
            className="block py-2 text-[#475569] hover:text-black"
          >
            Blog
          </Link>

          <div className="md:hidden pt-2">
            <LanguageSwitch />
          </div>

          <div className="pt-2 flex flex-col gap-2">
            <Link
              href="/auth/login"
              onClick={() => setMobileMenuOpen(false)}
              className="w-full py-2.5 text-center border border-[#E2E8F0] font-mono text-xs uppercase text-black"
            >
              {isDe ? "Anmelden" : "Log In"}
            </Link>
            <Link
              href="/auth/signup"
              onClick={() => setMobileMenuOpen(false)}
              className="w-full py-2.5 text-center bg-black text-white font-mono text-xs uppercase"
            >
              {isDe ? "Kostenlos starten" : "Start Free"}
            </Link>
          </div>
        </div>
      )}
    </header>
  );
}
