[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/ [ Home ]
File: Header.jsx
Action: file_editor create /app/frontend/src/components/Header.jsx --file-text "import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useLanguage } from '../contexts/LanguageContext';
import LanguageSwitcher from './LanguageSwitcher';
import { Button } from './ui/button';
import { Menu, X, Phone, Mail, Facebook, Twitter, Instagram, Linkedin, Youtube } from 'lucide-react';
import mockData from '../mockData';

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const { t } = useLanguage();
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navigation = [
    { name_id: 'Beranda', name_en: 'Home', path: '/' },
    { name_id: 'Tentang Kami', name_en: 'About Us', path: '/#about' },
    { name_id: 'Program', name_en: 'Programs', path: '/#programs' },
    { name_id: 'Berita', name_en: 'News', path: '/#news' },
    { name_id: 'Kontak', name_en: 'Contact', path: '/#contact' },
  ];

  const isActive = (path) => {
    if (path === '/') return location.pathname === '/';
    return location.hash === path.replace('/', '');
  };

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
      isScrolled ? 'bg-white shadow-md' : 'bg-white/95 backdrop-blur-sm'
    }`}>
      {/* Top Bar */}
      <div className=\"bg-gradient-to-r from-emerald-700 to-teal-600 text-white py-2\">
        <div className=\"container mx-auto px-4\">
          <div className=\"flex flex-col md:flex-row justify-between items-center text-sm\">
            <div className=\"flex items-center gap-4 mb-2 md:mb-0\">
              <a href={`tel:${mockData.contact.phone}`} className=\"flex items-center gap-2 hover:text-emerald-100 transition-colors\">
                <Phone className=\"h-3.5 w-3.5\" />
                {mockData.contact.phone}
              </a>
              <a href={`mailto:${mockData.contact.email}`} className=\"flex items-center gap-2 hover:text-emerald-100 transition-colors\">
                <Mail className=\"h-3.5 w-3.5\" />
                {mockData.contact.email}
              </a>
            </div>
            <div className=\"flex items-center gap-3\">
              <a href={mockData.contact.socialMedia.facebook} target=\"_blank\" rel=\"noopener noreferrer\" className=\"hover:text-emerald-100 transition-colors\">
                <Facebook className=\"h-4 w-4\" />
              </a>
              <a href={mockData.contact.socialMedia.twitter} target=\"_blank\" rel=\"noopener noreferrer\" className=\"hover:text-emerald-100 transition-colors\">
                <Twitter className=\"h-4 w-4\" />
              </a>
              <a href={mockData.contact.socialMedia.instagram} target=\"_blank\" rel=\"noopener noreferrer\" className=\"hover:text-emerald-100 transition-colors\">
                <Instagram className=\"h-4 w-4\" />
              </a>
              <a href={mockData.contact.socialMedia.linkedin} target=\"_blank\" rel=\"noopener noreferrer\" className=\"hover:text-emerald-100 transition-colors\">
                <Linkedin className=\"h-4 w-4\" />
              </a>
              <a href={mockData.contact.socialMedia.youtube} target=\"_blank\" rel=\"noopener noreferrer\" className=\"hover:text-emerald-100 transition-colors\">
                <Youtube className=\"h-4 w-4\" />
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Main Navigation */}
      <div className=\"container mx-auto px-4\">
        <nav className=\"flex items-center justify-between py-4\">
          {/* Logo */}
          <Link to=\"/\" className=\"flex items-center gap-3\">
            <div className=\"w-12 h-12 bg-gradient-to-br from-emerald-600 to-teal-500 rounded-lg flex items-center justify-center shadow-lg\">
              <span className=\"text-white font-bold text-xl\">AF</span>
            </div>
            <div className=\"hidden md:block\">
              <h1 className=\"text-xl font-bold text-gray-900\">
                {t('Akademi Farmasi', 'Pharmacy Academy')}
              </h1>
              <p className=\"text-xs text-gray-600\">{t('Bandung', 'Bandung')}</p>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <div className=\"hidden lg:flex items-center gap-8\">
            {navigation.map((item) => (
              <a
                key={item.path}
                href={item.path}
                className={`text-sm font-medium transition-colors hover:text-emerald-600 ${
                  isActive(item.path) ? 'text-emerald-600' : 'text-gray-700'
                }`}
              >
                {t(item.name_id, item.name_en)}
              </a>
            ))}
            <LanguageSwitcher />
            <Button asChild className=\"bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-700 hover:to-teal-600\">
              <Link to=\"/admin/login\">{t('Login Admin', 'Admin Login')}</Link>
            </Button>
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className=\"lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors\"
          >
            {isOpen ? <X className=\"h-6 w-6\" /> : <Menu className=\"h-6 w-6\" />}
          </button>
        </nav>

        {/* Mobile Navigation */}
        {isOpen && (
          <div className=\"lg:hidden py-4 border-t animate-in slide-in-from-top-5\">
            <div className=\"flex flex-col gap-4\">
              {navigation.map((item) => (
                <a
                  key={item.path}
                  href={item.path}
                  onClick={() => setIsOpen(false)}
                  className={`text-sm font-medium transition-colors hover:text-emerald-600 ${
                    isActive(item.path) ? 'text-emerald-600' : 'text-gray-700'
                  }`}
                >
                  {t(item.name_id, item.name_en)}
                </a>
              ))}
              <div className=\"flex items-center gap-4 pt-2 border-t\">
                <LanguageSwitcher />
                <Button asChild size=\"sm\" className=\"bg-gradient-to-r from-emerald-600 to-teal-500\">
                  <Link to=\"/admin/login\">{t('Login Admin', 'Admin Login')}</Link>
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;
"
Observation: Create successful: /app/frontend/src/components/Header.jsx