"use client";

import Link from "next/link";
import { useState } from "react";
import { Menu, X } from "lucide-react";
import { LanguageSwitcher } from "@/components/shared/language-switcher";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import type { Locale } from "@/lib/i18n/config";

export function MarketingNav() {
  const [open, setOpen] = useState(false);
  const t = useTranslations();
  const locale = useLocale();

  return (
    <header className="sticky top-0 z-30 border-b border-ink-100 bg-white/80 backdrop-blur">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 md:px-6">
        <Link href={`/${locale}`} className="flex items-center gap-2">
          <div className="h-6 w-6 rounded-lg bg-brand-600" />
          <span className="text-base font-semibold">Tidyly</span>
        </Link>

        <nav className="hidden items-center gap-8 md:flex">
          <Link href={`/${locale}#features`} className="text-sm text-ink-600 hover:text-ink-900">
            {t("marketing.features.title")}
          </Link>
          <Link href={`/${locale}#pricing`} className="text-sm text-ink-600 hover:text-ink-900">
            {t("nav.pricing")}
          </Link>
          <Link href={`/${locale}#faq`} className="text-sm text-ink-600 hover:text-ink-900">
            {t("marketing.faq.title")}
          </Link>
        </nav>

        <div className="hidden items-center gap-2 md:flex">
          <LanguageSwitcher currentLocale={locale as Locale} />
          <Link
            href={`/${locale}/login`}
            className="rounded-xl px-3 py-2 text-sm font-medium text-ink-700 hover:bg-ink-100"
          >
            {t("nav.login")}
          </Link>
          <Link
            href={`/${locale}/register`}
            className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
          >
            {t("nav.getStarted")}
          </Link>
        </div>

        <button className="p-2 md:hidden" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {open && (
        <div className="border-t border-ink-100 px-4 py-4 md:hidden">
          <div className="flex flex-col gap-3">
            <Link href={`/${locale}#features`} onClick={() => setOpen(false)} className="text-sm text-ink-700">
              {t("marketing.features.title")}
            </Link>
            <Link href={`/${locale}#pricing`} onClick={() => setOpen(false)} className="text-sm text-ink-700">
              {t("nav.pricing")}
            </Link>
            <div className="flex items-center justify-between pt-2">
              <LanguageSwitcher currentLocale={locale as Locale} />
              <div className="flex gap-2">
                <Link href={`/${locale}/login`} className="rounded-xl px-3 py-2 text-sm font-medium text-ink-700">
                  {t("nav.login")}
                </Link>
                <Link
                  href={`/${locale}/register`}
                  className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white"
                >
                  {t("nav.getStarted")}
                </Link>
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}