import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './home';
import Admin from './admin';
import Login from './login';
import PostDetail from './PostDetail';

function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => setIsOpen(!isOpen);
  const closeMenu = () => setIsOpen(false);

  return (
    <div className="navbar-container">
      <nav className="navbar">
        {/* Logo */}
        <Link to="/" className="nav-logo" onClick={closeMenu}>
          Josemi Blog 
        </Link>

        {/* Botón Burger Animado */}
        {/* Si isOpen es true, se añade la clase 'active' para activar la animación CSS */}
        <button 
          className={`burger-btn ${isOpen ? 'active' : ''}`} 
          onClick={toggleMenu} 
          aria-label="Toggle menu"
        >
          {/* Las 3 líneas que formarán el icono */}
          <span className="burger-line"></span>
          <span className="burger-line"></span>
          <span className="burger-line"></span>
        </button>

        {/* Menú Lateral (Drawer) */}
        <div className={`nav-links ${isOpen ? 'open' : ''}`}>
          <Link to="/" onClick={closeMenu}>Inicio</Link>
          <Link to="/login" onClick={closeMenu}>Login</Link>
          <Link to="/admin" className="admin-btn-nav" onClick={closeMenu}>Admin</Link>
        </div>

        {/* Capa oscura al abrir el menú */}
        {isOpen && <div className="menu-overlay" onClick={closeMenu}></div>}
      </nav>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-content">
        <div>
          <h3>Josemi Blog</h3>
          <p>Recursos y artículos técnicos sobre desarrollo.</p>
        </div>
        <div>
          <h3>Navegación</h3>
          <Link to="/" style={{color:'#94a3b8', textDecoration:'none', display:'block', marginBottom:'10px'}}>Inicio</Link>
          <Link to="/admin" style={{color:'#94a3b8', textDecoration:'none', display:'block'}}>Admin</Link>
        </div>
        <div>
          <h3>Contacto</h3>
          <p>Huelva, España 🇪🇸</p>
        </div>
      </div>
      <div style={{textAlign:'center', marginTop:'40px', paddingTop:'20px', borderTop:'1px solid #1e293b'}}>
        © 2026 Josemi Blog. Todos los derechos reservados.
      </div>
    </footer>
  );
}

export default function App() {
  return (
    <Router>
      <Navbar />
      <main style={{ flex: 1 }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/admin" element={<Admin />} />
          <Route path="/post/:slug" element={<PostDetail />} />
        </Routes>
      </main>
      <Footer />
    </Router>
  );
}