'use client'

import { useState } from 'react'
import Link from 'next/link'
import { motion, AnimatePresence } from 'framer-motion'

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false)
  const [openDropdown, setOpenDropdown] = useState<string | null>(null)

  const toggleDropdown = (dropdown: string) => {
    setOpenDropdown(openDropdown === dropdown ? null : dropdown)
  }

  return (
    <nav className="nav">
      <div className="nav-container">
        <Link href="/" className="nav-logo">
          doing-it
        </Link>
        
        {/* Desktop Menu */}
        <div className="nav-menu">
          <Link href="/" className="nav-link">
            Startseite
          </Link>
          
          {/* Quereinsteiger Dropdown */}
          <div 
            className="nav-dropdown"
            onMouseEnter={() => setOpenDropdown('quereinsteiger')}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <button className="nav-link nav-dropdown-toggle">
              Quereinsteiger
            </button>
            <AnimatePresence>
              {openDropdown === 'quereinsteiger' && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="nav-dropdown-menu"
                >
                  <Link href="/quereinsteiger/lernpfad-finder" className="nav-dropdown-link">
                    Lernpfadfinder
                  </Link>
                  <Link href="/unternehmen/tools/it-checkliste" className="nav-dropdown-link">
                    Checkliste
                  </Link>
                  <Link href="/quereinsteiger/coming-soon" className="nav-dropdown-link">
                    Coming soon
                  </Link>
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          {/* Unternehmen Dropdown */}
          <div 
            className="nav-dropdown"
            onMouseEnter={() => setOpenDropdown('unternehmen')}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <button className="nav-link nav-dropdown-toggle">
              Unternehmen
            </button>
            <AnimatePresence>
              {openDropdown === 'unternehmen' && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="nav-dropdown-menu"
                >
                  <Link href="/unternehmen/it-infrastrukturanalyse" className="nav-dropdown-link">
                    IT-Analyse
                  </Link>
                  <Link href="/unternehmen/schulungsthemen" className="nav-dropdown-link">
                    Mitarbeiter-Schulungen
                  </Link>
                  <Link href="/unternehmen/tools/schulungsbedarf" className="nav-dropdown-link">
                    Bedarfsrechner
                  </Link>
                  <Link href="/unternehmen/coming-soon" className="nav-dropdown-link">
                    Coming soon
                  </Link>
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          <Link href="/quereinsteiger/kurse" className="nav-link">
            Kurskatalog
          </Link>

          <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link">
            Wiki
          </a>

          {/* Projekte Dropdown */}
          <div 
            className="nav-dropdown"
            onMouseEnter={() => setOpenDropdown('projekte')}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <button className="nav-link nav-dropdown-toggle">
              Projekte
            </button>
            <AnimatePresence>
              {openDropdown === 'projekte' && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="nav-dropdown-menu"
                >
                  <Link href="/projekte/youtube-website" className="nav-dropdown-link">
                    YouTube Website
                  </Link>
                  <Link href="/projekte/coming-soon" className="nav-dropdown-link">
                    Coming soon
                  </Link>
                  <Link href="/projekte/coming-soon-2" className="nav-dropdown-link">
                    Coming soon
                  </Link>
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          {/* Socials Dropdown */}
          <div 
            className="nav-dropdown"
            onMouseEnter={() => setOpenDropdown('socials')}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <button className="nav-link nav-dropdown-toggle">
              Socials
            </button>
            <AnimatePresence>
              {openDropdown === 'socials' && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="nav-dropdown-menu"
                >
                  <a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
                    Instagram
                  </a>
                  <a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
                    YouTube
                  </a>
                  <a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
                    TikTok
                  </a>
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          {/* Kontakt Dropdown */}
          <div 
            className="nav-dropdown"
            onMouseEnter={() => setOpenDropdown('kontakt')}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <button className="nav-link nav-dropdown-toggle">
              Kontakt
            </button>
            <AnimatePresence>
              {openDropdown === 'kontakt' && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="nav-dropdown-menu"
                >
                  <Link href="/kontakt" className="nav-dropdown-link">
                    Kontakt
                  </Link>
                  <Link href="/ueber-uns" className="nav-dropdown-link">
                    Über uns
                  </Link>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>

        {/* Mobile Menu Button */}
        <button
          className="nav-toggle"
          onClick={() => setIsOpen(!isOpen)}
          aria-label="Menu"
        >
          <span className={isOpen ? 'open' : ''}></span>
          <span className={isOpen ? 'open' : ''}></span>
          <span className={isOpen ? 'open' : ''}></span>
        </button>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="nav-mobile"
          >
            <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Startseite
            </Link>
            
            <div className="nav-mobile-dropdown">
              <button 
                className="nav-mobile-link nav-mobile-dropdown-toggle"
                onClick={() => toggleDropdown('quereinsteiger-mobile')}
              >
                Quereinsteiger {openDropdown === 'quereinsteiger-mobile' ? '▼' : '▶'}
              </button>
              {openDropdown === 'quereinsteiger-mobile' && (
                <div className="nav-mobile-dropdown-menu">
                  <Link href="/quereinsteiger/lernpfad-finder" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Lernpfadfinder
                  </Link>
                  <Link href="/unternehmen/tools/it-checkliste" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Checkliste
                  </Link>
                  <Link href="/quereinsteiger/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Coming soon
                  </Link>
                </div>
              )}
            </div>

            <div className="nav-mobile-dropdown">
              <button 
                className="nav-mobile-link nav-mobile-dropdown-toggle"
                onClick={() => toggleDropdown('unternehmen-mobile')}
              >
                Unternehmen {openDropdown === 'unternehmen-mobile' ? '▼' : '▶'}
              </button>
              {openDropdown === 'unternehmen-mobile' && (
                <div className="nav-mobile-dropdown-menu">
                  <Link href="/unternehmen/it-infrastrukturanalyse" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    IT-Analyse
                  </Link>
                  <Link href="/unternehmen/schulungsthemen" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Mitarbeiter-Schulungen
                  </Link>
                  <Link href="/unternehmen/tools/schulungsbedarf" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Bedarfsrechner
                  </Link>
                  <Link href="/unternehmen/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Coming soon
                  </Link>
                </div>
              )}
            </div>

            <Link href="/quereinsteiger/kurse" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Kurskatalog
            </Link>

            <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Wiki
            </a>

            <div className="nav-mobile-dropdown">
              <button 
                className="nav-mobile-link nav-mobile-dropdown-toggle"
                onClick={() => toggleDropdown('projekte-mobile')}
              >
                Projekte {openDropdown === 'projekte-mobile' ? '▼' : '▶'}
              </button>
              {openDropdown === 'projekte-mobile' && (
                <div className="nav-mobile-dropdown-menu">
                  <Link href="/projekte/youtube-website" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    YouTube Website
                  </Link>
                  <Link href="/projekte/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Coming soon
                  </Link>
                  <Link href="/projekte/coming-soon-2" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Coming soon
                  </Link>
                </div>
              )}
            </div>

            <div className="nav-mobile-dropdown">
              <button 
                className="nav-mobile-link nav-mobile-dropdown-toggle"
                onClick={() => toggleDropdown('socials-mobile')}
              >
                Socials {openDropdown === 'socials-mobile' ? '▼' : '▶'}
              </button>
              {openDropdown === 'socials-mobile' && (
                <div className="nav-mobile-dropdown-menu">
                  <a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Instagram
                  </a>
                  <a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    YouTube
                  </a>
                  <a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    TikTok
                  </a>
                </div>
              )}
            </div>

            <div className="nav-mobile-dropdown">
              <button 
                className="nav-mobile-link nav-mobile-dropdown-toggle"
                onClick={() => toggleDropdown('kontakt-mobile')}
              >
                Kontakt {openDropdown === 'kontakt-mobile' ? '▼' : '▶'}
              </button>
              {openDropdown === 'kontakt-mobile' && (
                <div className="nav-mobile-dropdown-menu">
                  <Link href="/kontakt" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Kontakt
                  </Link>
                  <Link href="/ueber-uns" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
                    Über uns
                  </Link>
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  )
}
