import { useState } from "react";
import { Link } from "react-router-dom";
import logo from "../assets/images/logo.jpg";
import "./Header.css";

const Header = () => {
  const [open, setOpen] = useState(false);
  const [openSub, setOpenSub] = useState(null);

  const toggleSub = (menu) => {
    setOpenSub(openSub === menu ? null : menu);
  };

  const closeMenu = () => {
    setOpen(false);
    setOpenSub(null);
  };

  return (
    <>
      {/* TOP BAR */}
      <div className="topbar">
        <span>✉ contacto@vieticasoft.com</span>
        <span>📱 +51 954 756 036</span>
      </div>

      <header className="header">
        {/* LOGO */}
        <div className="header-left">
          <Link to="/" onClick={closeMenu}>
            <img src={logo} alt="VIETICASOFT" className="logo-img" />
          </Link>
        </div>

        {/* NAV */}
        <nav className={`nav ${open ? "open" : ""}`}>
          <Link to="/" onClick={closeMenu}>Inicio</Link>

          {/* NOSOTROS */}
          <div className="nav-item">
            <button
              className="nav-btn"
              onClick={() => toggleSub("nosotros")}
            >
              Nosotros
            </button>

            {openSub === "nosotros" && (
              <div className="dropdown mobile">
                <Link to="/nosotros" onClick={closeMenu}>Empresa</Link>
                <Link to="/clientes" onClick={closeMenu}>Nuestros Clientes</Link>
                <Link to="/rubros" onClick={closeMenu}>Rubros</Link>
              </div>
            )}
          </div>

          {/* TIENDA */}
          <div className="nav-item">
            <button
              className="nav-btn"
              onClick={() => toggleSub("tienda")}
            >
              Tienda
            </button>

            {openSub === "tienda" && (
              <div className="dropdown mobile">
                <Link to="/catalogo-pos" onClick={closeMenu}>Equipos</Link>
                <Link to="/combos" onClick={closeMenu}>Combos</Link>
                <Link to="/planes" onClick={closeMenu}>Planes</Link>
              </div>
            )}
          </div>

          <Link to="/blog" onClick={closeMenu}>Blog</Link>
          <Link to="/soporte" onClick={closeMenu}>Soporte</Link>
        </nav>

        {/* BOTÓN MOBILE */}
        <button
          className="menu-btn"
          onClick={() => {
            setOpen(!open);
            setOpenSub(null);
          }}
        >
          {open ? "✕" : "☰"}
        </button>
      </header>
    </>
  );
};

export default Header;
