"use client";

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

const navLinks = [
  { label: "صفحه اصلی", href: "/" },
  { label: "محصولات", href: "/products" },
  { label: "مقالات", href: "/blog" },
  { label: "درباره ما", href: "/about" },
  { label: "تماس با ما", href: "/contact" },
];

export default function Header() {
  const pathname = usePathname();
  const [scrolledPast, setScrolledPast] = useState(false);
  const canBeTransparent = pathname === "/";
  const scrolled = !canBeTransparent || scrolledPast;

  useEffect(() => {
    if (!canBeTransparent) return;
    function onScroll() {
      setScrolledPast(window.scrollY > 20);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [canBeTransparent]);

  return (
    <header className="fixed inset-x-0 top-0 z-50">
      <div className="bg-secondary text-white">
        <Container className="flex h-11 items-center justify-between text-sm">
          <a
            href="tel:09104067935"
            className="flex items-center gap-2 text-white/90 hover:text-accent transition-colors"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="shrink-0">
              <path
                d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"
                fill="currentColor"
              />
            </svg>
            <span dir="ltr">09104067935</span>
          </a>
          <div className="flex items-center gap-4">
            <a href="#" aria-label="تلگرام" className="text-white/90 hover:text-accent transition-colors">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path
                  d="M21.5 3.5 2.8 10.9c-1 .4-1 1.7.1 2l4.7 1.5 1.8 5.6c.2.6 1 .8 1.4.3l2.5-2.7 4.9 3.6c.6.5 1.6.1 1.8-.6l3-15.6c.2-1-.7-1.8-1.5-1.5z"
                  fill="currentColor"
                />
              </svg>
            </a>
            <a href="#" aria-label="واتساپ" className="text-white/90 hover:text-accent transition-colors">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path
                  d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2Zm0 18.2a8.1 8.1 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8 1-.2.2-.3.2-.5.1a6.7 6.7 0 0 1-2-1.2 7.4 7.4 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.5l.4-.4c.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2s.9 2.6 1.1 2.8c.1.2 1.9 3 4.7 4.1.7.3 1.2.4 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.2-.3-.2-.5-.3Z"
                  fill="currentColor"
                />
              </svg>
            </a>
            <a href="#" aria-label="ایمیل" className="text-white/90 hover:text-accent transition-colors">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path
                  d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v.2l8 5.4 8-5.4V6H4Zm16 12V8.6l-7.4 5a1 1 0 0 1-1.2 0L4 8.6V18h16Z"
                  fill="currentColor"
                />
              </svg>
            </a>
          </div>
        </Container>
      </div>

      <div
        className={`border-b transition-all duration-300 ${
          scrolled
            ? "bg-white/95 backdrop-blur border-black/5 shadow-sm"
            : "bg-white/10 backdrop-blur-md border-white/10"
        }`}
      >
        <Container className="flex h-20 items-center justify-between">
          <Link href="/" className="shrink-0">
            <Image
              src={scrolled ? "/images/logo-wordmark.png" : "/images/footer-logo.png"}
              alt="آراد آریسمان"
              width={140}
              height={40}
              className="h-10 w-auto"
              priority
            />
          </Link>

          <nav className="hidden lg:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className={`text-[15px] font-medium transition-colors ${
                  scrolled
                    ? "text-secondary/80 hover:text-primary"
                    : "text-white/90 hover:text-accent"
                }`}
              >
                {link.label}
              </Link>
            ))}
          </nav>

          <a
            href="#"
            className={`flex items-center gap-2 rounded-full border px-5 py-2.5 text-[15px] font-medium transition-colors ${
              scrolled
                ? "border-primary/20 text-primary hover:bg-primary hover:text-white"
                : "border-white/40 text-white hover:bg-white/10"
            }`}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path
                d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z"
                fill="currentColor"
              />
            </svg>
            ورود
          </a>
        </Container>
      </div>
    </header>
  );
}
