"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X } from "lucide-react";
import { LanguageToggle } from "@/components/language-toggle";
import type { Locale } from "@/lib/i18n";

interface NavbarProps {
  locale: Locale;
}

export function Navbar({ locale }: NavbarProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const isRTL = locale === "ar";

  const content = {
    en: { product: "Product", showcase: "Showcase", howItWorks: "How It Works", pricing: "Pricing", getStarted: "Get Started" },
    ar: { product: "المنتج", showcase: "الأقسام", howItWorks: "كيف يعمل", pricing: "الأسعار", getStarted: "ابدأ الآن" }
  };

  const t = content[locale];

  const links = [
    { label: t.product, href: "#showcase" },
    { label: t.showcase, href: "#showcase" },
    { label: t.howItWorks, href: "#how-it-works" },
    { label: t.pricing, href: "#pricing" }
  ];

  return (
    <nav className="fixed top-0 left-0 right-0 z-50" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-gradient-to-b from-void-black/90 to-void-black/60 backdrop-blur-xl border-b border-white/[0.03]" />
      <div className="container-custom relative">
        <div className="flex items-center justify-between h-16 md:h-20">
          {/* Logo */}
          <a href="#" className="flex items-center gap-2.5 group">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-electric-cyan to-soft-emerald flex items-center justify-center transition-transform group-hover:scale-105">
              <span className="font-space-grotesk font-bold text-void-black text-sm">W</span>
            </div>
            <span className="font-space-grotesk font-bold text-warm-white text-lg tracking-tight">
              WakeL <span className="text-electric-cyan">AI</span>
            </span>
          </a>

          {/* Desktop Links */}
          <div className={`hidden md:flex items-center gap-8 ${isRTL ? "mr-auto ml-12" : "ml-auto mr-12"}`}>
            {links.map((link, i) => (
              <a
                key={i}
                href={link.href}
                className="text-sm text-muted-white hover:text-warm-white transition-colors font-inter-tight"
              >
                {link.label}
              </a>
            ))}
          </div>

          {/* Desktop CTA + Language */}
          <div className="hidden md:flex items-center gap-3">
            <LanguageToggle locale={locale} />
            <motion.a
              href="https://wakelai.com/login"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="px-5 py-2.5 rounded-lg bg-electric-cyan text-void-black font-semibold text-sm hover:bg-electric-cyan/90 transition-all font-space-grotesk"
            >
              {t.getStarted}
            </motion.a>
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className="md:hidden p-2 text-muted-white hover:text-warm-white"
            aria-label="Toggle menu"
          >
            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden border-t border-white/[0.03] bg-void-black/95 backdrop-blur-xl"
          >
            <div className="container-custom py-6 space-y-4">
              {links.map((link, i) => (
                <a
                  key={i}
                  href={link.href}
                  onClick={() => setMobileOpen(false)}
                  className="block text-lg text-muted-white hover:text-warm-white transition-colors font-inter-tight"
                >
                  {link.label}
                </a>
              ))}
              <div className="pt-4 flex items-center gap-3">
                <LanguageToggle locale={locale} />
                <a
                  href="https://wakelai.com/login"
                  onClick={() => setMobileOpen(false)}
                  className="px-5 py-2.5 rounded-lg bg-electric-cyan text-void-black font-semibold text-sm hover:bg-electric-cyan/90 transition-all font-space-grotesk"
                >
                  {t.getStarted}
                </a>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}