import { useState } from "react"
import styles from "./HomeNav.module.css"
import { FaBars, FaChevronDown } from "react-icons/fa";

export default function HomeNav() {
  const [navOpen, setNavOpen] = useState(false)

  const toggleNav = () => setNavOpen((prev) => !prev)

  return (
    <nav className={styles.nav}>
      <div
        className={`inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brandGradient text-white shadow-glow cursor-pointer ${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
        onClick={toggleNav}
        aria-label="Toggle navigation"
        aria-expanded={navOpen}
      >
        <FaBars />
      </div>

      <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
        <li id="nav-logo" className={styles.logo}>
          <span>vontor.cz</span>
        </li>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="#portfolio">Portfolio</a>
        </li>
        <li className={styles.hasSubmenu}>
          <details>
            <summary>
              Services
              <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-brandGradient text-white ml-2 shadow-glow">
                <FaChevronDown className={styles.caret} aria-hidden="true" />
              </span>
            </summary>
            <ul className={styles.submenu}>
              <li><a href="#web">Web development</a></li>
              <li><a href="#integration">Integrations</a></li>
              <li><a href="#support">Support</a></li>
            </ul>
          </details>
        </li>
        <li>
          <a href="#contactme-form">Contact me</a>
        </li>
      </ul>
    </nav>
  )
}
