/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/Header.tsx
 * Description: Sticky site header with desktop navigation, mobile menu, and locale switcher (light theme)
 */

"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Logo from "@/components/Logo";
import LocaleSwitcher from "@/components/LocaleSwitcher";

interface NavStrings {
  home: string;
  about: string;
  founders: string;
  services: string;
  security: string;
  industries: string;
  apps: string;
  contact: string;
  cta: string;
  openMenu: string;
  closeMenu: string;
  switchLocale: string;
}

export default function Header({
  locale,
  nav,
}: {
  locale: "fr" | "en";
  nav: NavStrings;
}) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname() ?? "";

  const links = [
    { href: `/${locale}/about`, label: nav.about },
    { href: `/${locale}/founders`, label: nav.founders },
    { href: `/${locale}/services`, label: nav.services },
    { href: `/${locale}/security`, label: nav.security },
    { href: `/${locale}/industries`, label: nav.industries },
    { href: `/${locale}/apps`, label: nav.apps },
    { href: `/${locale}/contact`, label: nav.contact },
  ];

  return (
    <header className="sticky top-0 z-50 border-b border-line bg-paper/90 backdrop-blur-md">
      <div className="mx-auto flex h-[68px] w-full max-w-6xl items-center justify-between px-5 sm:px-8">
        <Link href={`/${locale}`} aria-label={nav.home} onClick={() => setOpen(false)}>
          <Logo />
        </Link>

        <nav className="hidden items-center gap-1 lg:flex" aria-label="Main">
          {links.map((link) => {
            const active = pathname.startsWith(link.href);
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`rounded-full px-3.5 py-1.5 text-sm transition-colors ${
                  active
                    ? "bg-accent-soft text-accent-strong"
                    : "text-ink-soft hover:text-ink"
                }`}
                aria-current={active ? "page" : undefined}
              >
                {link.label}
              </Link>
            );
          })}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <LocaleSwitcher locale={locale} label={nav.switchLocale} />
          <Link
            href={`/${locale}/contact`}
            className="rounded-full bg-ink px-4.5 py-2 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
          >
            {nav.cta}
          </Link>
        </div>

        <div className="flex items-center gap-3 lg:hidden">
          <LocaleSwitcher locale={locale} label={nav.switchLocale} />
          <button
            type="button"
            onClick={() => setOpen(!open)}
            aria-expanded={open}
            aria-label={open ? nav.closeMenu : nav.openMenu}
            className="flex h-9 w-9 items-center justify-center rounded-lg border border-line-strong text-ink"
          >
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
              {open ? (
                <path d="M4 4l10 10M14 4L4 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              ) : (
                <path d="M2 5h14M2 9h14M2 13h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              )}
            </svg>
          </button>
        </div>
      </div>

      {open ? (
        <nav
          className="border-t border-line bg-paper px-5 pb-6 pt-3 lg:hidden"
          aria-label="Mobile"
        >
          <ul className="flex flex-col">
            {links.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  onClick={() => setOpen(false)}
                  className="block rounded-lg px-2 py-3 text-base text-ink-soft hover:bg-paper-2 hover:text-ink"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
          <Link
            href={`/${locale}/contact`}
            onClick={() => setOpen(false)}
            className="mt-3 block rounded-full bg-ink px-4 py-2.5 text-center text-sm font-medium text-paper"
          >
            {nav.cta}
          </Link>
        </nav>
      ) : null}
    </header>
  );
}