import React, { useState } from 'react';

const Logo = () => (
    <a href="#home" className="text-2xl font-bold tracking-tight">
        <span className="text-blue-600">E</span>
        <span className="text-red-600">D</span>
        <span className="text-yellow-500">U</span>
        <span className="text-blue-600">R</span>
        <span className="text-green-600">I</span>
        <span className="text-red-600">S</span>
        <span className="text-yellow-500">E</span>
        <span className="text-blue-600">T</span>
    </a>
);

const NavLink: React.FC<{ href: string; children: React.ReactNode; onClick?: () => void }> = ({ href, children, onClick }) => (
    <a
        href={href}
        onClick={onClick}
        className="text-gray-600 hover:text-blue-600 transition-colors duration-300 font-medium px-3 py-2 rounded-md"
    >
        {children}
    </a>
);


const Header: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);

    const navLinks = [
        { href: '#home', text: 'Home' },
        { href: '#about', text: 'Tentang Kami' },
        { href: '#courses', text: 'Kursus & Materi' },
        { href: '#contact', text: 'Kontak' },
    ];

    const closeMenu = () => setIsOpen(false);

    return (
        <header className="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between h-20">
                    <div className="flex-shrink-0">
                        <Logo />
                    </div>
                    <nav className="hidden md:flex items-center space-x-2">
                        {navLinks.map((link) => (
                            <NavLink key={link.href} href={link.href}>{link.text}</NavLink>
                        ))}
                    </nav>
                    <div className="hidden md:block">
                        <a
                            href="#"
                            className="bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg shadow-md hover:bg-blue-700 transition-all duration-300"
                        >
                            Login/Daftar
                        </a>
                    </div>
                    <div className="md:hidden">
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="text-gray-700 hover:text-blue-600 focus:outline-none"
                        >
                            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                {isOpen ? (
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                ) : (
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
                                )}
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            {isOpen && (
                <div className="md:hidden bg-white shadow-lg">
                    <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-center">
                        {navLinks.map((link) => (
                             <NavLink key={link.href} href={link.href} onClick={closeMenu}>{link.text}</NavLink>
                        ))}
                        <a
                            href="#"
                            onClick={closeMenu}
                            className="block w-full text-center bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg shadow-md hover:bg-blue-700 transition-all duration-300 mt-2"
                        >
                            Login/Daftar
                        </a>
                    </div>
                </div>
            )}
        </header>
    );
};

export default Header;