'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)

  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">
            Home
          </Link>
          <Link href="/unternehmen" className="nav-link">
            Für Unternehmen
          </Link>
          <Link href="/quereinsteiger" className="nav-link">
            Für Quereinsteiger
          </Link>
          <Link href="/ueber-uns" className="nav-link">
            Über uns
          </Link>
          <Link href="/wiki" className="nav-link">
            Wiki
          </Link>
          <Link href="/kontakt" className="nav-link">
            Kontakt
          </Link>
          <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
            <span aria-label="LinkedIn">🔗</span>
          </a>
        </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)}>
              Home
            </Link>
            <Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Für Unternehmen
            </Link>
            <Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Für Quereinsteiger
            </Link>
            <Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Über uns
            </Link>
            <Link href="/wiki" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Wiki
            </Link>
            <Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
              Kontakt
            </Link>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  )
}