import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';

function Navbar() {
    const { pathname } = useLocation();
    const [menuOpen, setMenuOpen] = useState(false);

    const linkStyle = (path) => ({
        color: pathname === path ? '#fff' : '#888',
        textDecoration: 'none',
        fontSize: '1em',
        letterSpacing: '0.05em',
        borderBottom: pathname === path ? '1px solid #fff' : '1px solid transparent',
        padding: '2px 0',
        lineHeight: '1.2',
        transition: 'color 0.15s',
    });

    const mobileLinkStyle = (path) => ({
        color: pathname === path ? '#fff' : '#888',
        textDecoration: 'none',
        fontSize: '1.1em',
        letterSpacing: '0.05em',
        padding: '12px 24px',
        borderBottom: '1px solid #222',
        display: 'block',
        width: '100%',
        boxSizing: 'border-box',
        transition: 'color 0.15s',
    });

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

    return (
        <nav style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            backgroundColor: '#1a1a1a',
            borderBottom: '1px solid #333',
            zIndex: 1000,
        }}>
            {/* Main row */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '14px 24px',
            }}>
                <Link to="/" style={{ textDecoration: 'none', color: '#f0f0f0', fontSize: '1.2em', lineHeight: '1.2' }} onClick={closeMenu}>
                    MonKEYS
                </Link>

                {/* Desktop links */}
                <div className="navbar-links">
                    <Link to="/" style={linkStyle('/')}>Home</Link>
                    <Link to="/type" style={linkStyle('/type')}>Type</Link>
                    <Link to="/leaderboard" style={linkStyle('/leaderboard')}>Leaderboard</Link>
                    <Link to="/credits" style={linkStyle('/credits')}>Credits</Link>
                    <a href="https://sistav.com" style={linkStyle('')}>← sistav.com</a>
                </div>

                {/* Hamburger button (mobile only) */}
                <button
                    className="navbar-hamburger"
                    onClick={() => setMenuOpen((o) => !o)}
                    aria-label="Toggle menu"
                >
                    {menuOpen ? '✕' : '☰'}
                </button>
            </div>

            {/* Mobile dropdown — inside <nav> so no top-offset needed */}
            {menuOpen && (
                <div className="navbar-mobile-menu">
                    <Link to="/" style={mobileLinkStyle('/')} onClick={closeMenu}>Home</Link>
                    <Link to="/type" style={mobileLinkStyle('/type')} onClick={closeMenu}>Type</Link>
                    <Link to="/leaderboard" style={mobileLinkStyle('/leaderboard')} onClick={closeMenu}>Leaderboard</Link>
                    <Link to="/credits" style={mobileLinkStyle('/credits')} onClick={closeMenu}>Credits</Link>
                    <a href="https://sistav.com" style={{ ...mobileLinkStyle(''), color: '#888', borderBottom: 'none' }}>
                        ← sistav.com
                    </a>
                </div>
            )}
        </nav>
    );
}

export default Navbar;
