"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";


import ScrollProgress from "@/components/common/ScrollProgress";

export default function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  const pathname = usePathname();

  const isActive = (href: string) => {
    return pathname === href || pathname.startsWith(`${href}/`);
  };

  return (
    <header
      className="
        sticky
        top-0
        z-[999]
        w-full
        border-b
        border-[#eee8f2]
        bg-[#fbf8ff]/95
        backdrop-blur-md
      "
    >
      <ScrollProgress />
      <div className="mx-auto flex h-[76px] w-full max-w-[1180px] items-center justify-between px-5 sm:px-6 lg:px-0">

        {/* Logo */}
        <Link href="/" className="flex shrink-0 items-center">
          <Image
            src="/images/common/shepays-logo.png"
            alt="ShePays"
            width={174}
            height={45}
            priority
            className="h-auto w-[145px] sm:w-[160px] lg:w-[134px]"
            />
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden items-center gap-7 xl:flex">
          <Link
            href="/upi"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/upi")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            UPI
          </Link>

          <Link
            href="/product"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/product")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            Product
          </Link>

          <Link
            href="/tools"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/tools")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            Tools
          </Link>

          <Link
            href="/app"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/app")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            App
          </Link>

          <Link
            href="/company"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/company")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            Company
          </Link>

          <Link
            href="/partners"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/partners")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            Partners
          </Link>

          <Link
            href="/contact"
            className={`
              relative
              text-[14px]
              font-semibold
              transition-colors
              duration-300
              hover:text-black

              after:absolute
              after:left-0
              after:-bottom-[8px]
              after:h-[2px]
              after:w-full
              after:origin-left
              after:bg-gradient-to-r
              after:from-[#9d18cf]
              after:via-[#d91b9b]
              after:to-[#ff5b2d]
              after:transition-transform
              after:duration-300
              after:ease-out

              ${
                isActive("/contact")
                  ? "text-black after:scale-x-100"
                  : "text-[#574a62] after:scale-x-0 hover:after:scale-x-100"
              }
            `}
          >
            Contact
          </Link>
        </nav>

        {/* Desktop Right Side */}
        <div className="hidden items-center gap-4 xl:flex">

          {/* Email */}
          <a
            href="mailto:support@shepays.com"
            className="flex h-[36px] items-center gap-2 rounded-full border border-[#e4dce8] px-4 text-[11px] tracking-[0.04em] text-[#5d5065] hover:border-[#E5007E]"
          >
            <span className="h-[6px] w-[6px] rounded-full bg-[#16bd5c]" />

            <span>support@shepays.com</span>
          </a>

          {/* Get in touch */}
          <Link
            href="/contact"
            className="whitespace-nowrap text-[13px] font-semibold text-[#574a62] transition hover:text-black"
          >
            Get in touch
          </Link>

          {/* CTA */}
          <Link
            href="/#get-started"
            className="flex h-[48px] items-center justify-center whitespace-nowrap rounded-full bg-gradient-to-r from-[#9d18cf] to-[#f00084] px-7 text-[14px] font-bold text-white shadow-[0_12px_30px_rgba(219,0,137,0.18)] transition duration-300 hover:scale-[1.03]"
          >
            Get ShePays
          </Link>
        </div>

        {/* Tablet / Mobile Actions */}
        <div className="flex items-center gap-3 xl:hidden">

          <Link
            href="/#get-started"
            className="hidden h-[42px] items-center justify-center rounded-full bg-gradient-to-r from-[#9d18cf] to-[#f00084] px-5 text-[13px] font-bold text-white sm:flex"
          >
            Get ShePays
          </Link>

          {/* Hamburger */}
          <button
            type="button"
            onClick={() => setMenuOpen(!menuOpen)}
            className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e5ddea]"
            aria-label="Toggle navigation"
            aria-expanded={menuOpen}
          >
            <span className="flex w-[18px] flex-col gap-[4px]">
              <span
                className={`block h-[2px] w-full bg-[#382d40] transition ${
                  menuOpen ? "translate-y-[6px] rotate-45" : ""
                }`}
              />
              <span
                className={`block h-[2px] w-full bg-[#382d40] transition ${
                  menuOpen ? "opacity-0" : ""
                }`}
              />
              <span
                className={`block h-[2px] w-full bg-[#382d40] transition ${
                  menuOpen ? "-translate-y-[6px] -rotate-45" : ""
                }`}
              />
            </span>
          </button>
        </div>
      </div>

      {/* Mobile / Tablet Menu */}
      <div
        className={`overflow-hidden border-t border-[#eee8f2] bg-[#fbf8ff] transition-all duration-300 xl:hidden ${
          menuOpen
            ? "max-h-[650px] opacity-100"
            : "max-h-0 border-t-0 opacity-0"
        }`}
      >
        <nav className="mx-auto flex max-w-[1180px] flex-col px-5 py-5 sm:px-6">
          <MobileLink href="/upi" onClick={() => setMenuOpen(false)}>
            UPI
          </MobileLink>

          <MobileLink href="/product" onClick={() => setMenuOpen(false)}>
            Product
          </MobileLink>

          <MobileLink href="/tools" onClick={() => setMenuOpen(false)}>
            Tools
          </MobileLink>

          <MobileLink href="/app" onClick={() => setMenuOpen(false)}>
            App
          </MobileLink>

          <MobileLink href="/company" onClick={() => setMenuOpen(false)}>
            Company
          </MobileLink>

          <MobileLink href="/partners" onClick={() => setMenuOpen(false)}>
            Partners
          </MobileLink>

          <MobileLink href="/contact" onClick={() => setMenuOpen(false)}>
            Contact
          </MobileLink>

          <div className="mt-4 border-t border-[#e8e0ec] pt-5">
            <a
              href="mailto:support@shepays.com"
              className="flex w-fit items-center gap-2 rounded-full border border-[#e4dce8] px-4 py-2 text-[12px] text-[#5d5065]"
            >
              <span className="h-[6px] w-[6px] rounded-full bg-[#16bd5c]" />
              support@shepays.com
            </a>

            <Link
              href="/contact"
              onClick={() => setMenuOpen(false)}
              className="mt-5 block text-[14px] font-semibold text-[#574a62]"
            >
              Get in touch
            </Link>

            <Link
              href="/#get-started"
              onClick={() => setMenuOpen(false)}
              className="mt-5 flex h-[46px] w-full items-center justify-center rounded-full bg-gradient-to-r from-[#9d18cf] to-[#f00084] text-[14px] font-bold text-white sm:hidden"
            >
              Get ShePays
            </Link>
          </div>
        </nav>
      </div>
    </header>
  );
}

function MobileLink({
  href,
  children,
  onClick,
}: {
  href: string;
  children: React.ReactNode;
  onClick: () => void;
}) {
  return (
    <Link
      href={href}
      onClick={onClick}
      className="border-b border-[#eee8f2] py-3 text-[15px] font-semibold text-[#574a62]"
    >
      {children}
    </Link>
  );
}