student-web-if-development-kit/groups/ACAAB/src/components/Header.tsx

import { useState, type MouseEvent } from 'react';
import { Search, Menu, X, ChevronDown, Globe } from 'lucide-react';
import { useLang } from '../context/LanguageContext';

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const { lang, t, toggleLang } = useLang();

  const navLinks = [
    { label: t.nav.tentangKami, hasDropdown: true, href: '#' },
    { label: t.nav.program, hasDropdown: true, href: '#' },
    { label: t.nav.sdm, hasDropdown: false, href: '#' },
    { label: t.nav.fasilitas, hasDropdown: false, href: '#' },
    { label: t.nav.karyaAgenda, hasDropdown: false, href: '#achievement-grid-section' },
    { label: t.nav.kontak, hasDropdown: false, href: '#kontak' },
  ];

  const handleSmoothScroll = (e: MouseEvent<HTMLAnchorElement>, href: string) => {
    if (href.startsWith('#') && href.length > 1) {
      e.preventDefault();
      const target = document.querySelector(href);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        setIsOpen(false);
      }
    }
  };

  return (
    <>
      <div id="nav-wrapper" className="fixed top-0 left-0 right-0 z-50 border-b border-slate-200 bg-white">
        {/* Top Dark Bar */}
        <div className="bg-untan-navy text-white py-4 lg:py-6 relative overflow-hidden hidden md:block">
          <div className="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
            <div className="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right" style={{ overflow: 'hidden', maxHeight: '100%' }}>
              01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001 01101011 01100001
            </div>
            <div className="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
          </div>

          <div className="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
            <a href="#" className="flex items-center gap-4 group">
              <div className="relative w-16 h-16 lg:w-20 lg:h-20 flex items-center justify-center shrink-0">
                <img
                  src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
                  alt="Logo UNTAN"
                  className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10"
                />
              </div>
              <div className="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
                <span className="text-xl lg:text-3xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
                <span className="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS TANJUNGPURA</span>
              </div>
            </a>

            <div className="hidden lg:flex items-center gap-5">
              <div className="flex items-center gap-3 text-sm">
                <a
                  href="https://satu.untan.ac.id"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-untan-yellow transition-colors font-medium"
                >
                  {t.nav.satuUntan}
                </a>
              </div>
              <div className="pl-5 border-l border-white/20 flex items-center gap-3">
                {/* Bilingual Toggle */}
                <button
                  id="lang-toggle"
                  onClick={toggleLang}
                  aria-label={lang === 'id' ? 'Switch to English' : 'Ganti ke Bahasa Indonesia'}
                  className="flex items-center gap-1.5 text-xs font-bold hover:text-untan-yellow transition-colors px-2 py-1 rounded hover:bg-white/10"
                >
                  <Globe size={14} className="opacity-80" />
                  <span className={lang === 'id' ? 'text-untan-yellow' : 'text-white/60'}>ID</span>
                  <span className="text-white/30">|</span>
                  <span className={lang === 'en' ? 'text-untan-yellow' : 'text-white/60'}>EN</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Yellow Nav Bar */}
        <nav className="bg-untan-yellow shadow-md border-t border-white/20 relative" id="main-nav" aria-label="Navigasi utama">
          <div className="container mx-auto px-4 lg:px-6 flex items-center justify-between lg:justify-center w-full py-0 lg:py-2">

            {/* Mobile: Logo */}
            <div className="flex items-center gap-2 lg:hidden py-3">
              <img
                src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
                alt="Logo UNTAN"
                className="w-10 h-10 object-contain"
              />
              <div className="flex flex-col text-slate-800">
                <span className="text-base font-bold tracking-widest leading-none font-sans uppercase">INFORMATIKA</span>
                <span className="text-[8px] tracking-[0.15em] uppercase font-sans">UNTAN Pontianak</span>
              </div>
            </div>

            {/* Desktop Menu */}
            <div className="hidden lg:flex items-center justify-center w-full gap-1">
              {navLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  onClick={(e) => handleSmoothScroll(e, link.href)}
                  className="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
                >
                  <span>{link.label}</span>
                  {link.hasDropdown && <ChevronDown size={12} className="opacity-70" />}
                </a>
              ))}
            </div>

            {/* Mobile right: lang toggle + hamburger */}
            <div className="flex items-center gap-1 lg:hidden">
              <button
                id="lang-toggle-mobile"
                onClick={toggleLang}
                aria-label={lang === 'id' ? 'Switch to English' : 'Ganti ke Bahasa Indonesia'}
                className="flex items-center gap-1 text-[11px] font-bold text-slate-800 px-2 py-1 rounded hover:bg-black/10 transition-colors"
              >
                <Globe size={13} />
                <span>{lang.toUpperCase()}</span>
              </button>
              <button
                className="w-10 h-10 flex items-center justify-center text-slate-800 rounded-sm hover:bg-black/10 transition-colors"
                onClick={() => setIsOpen((prev) => !prev)}
                aria-label="Toggle menu"
                aria-expanded={isOpen}
              >
                {isOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>

          {/* Mobile Dropdown Menu */}
          <div
            className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'}`}
          >
            <div className="bg-untan-yellow border-t border-black/10 flex flex-col px-4 pb-4 pt-2 gap-1">
              {navLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  onClick={(e) => handleSmoothScroll(e, link.href)}
                  className="w-full text-left px-4 py-3 text-sm font-bold text-slate-800 hover:bg-black/5 rounded-sm transition-colors uppercase tracking-wide flex items-center justify-between"
                >
                  {link.label}
                  {link.hasDropdown && <ChevronDown size={14} className="opacity-50" />}
                </a>
              ))}
            </div>
          </div>
        </nav>
      </div>

      {/* Spacer */}
      <div className="h-[72px] lg:h-[190px]"></div>
    </>
  );
}