import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const menuItems = [
    { href: '/', icon: '🏠', title: 'Ana Sayfa', desc: 'Projeye genel bakış' },
    { href: '/canli-yayin', icon: '📹', title: 'Canlı Yayın', desc: 'İnşaatı canlı izleyin' },
    { href: '/haberler', icon: '📰', title: 'Haberler', desc: 'Güncel haberler' },
    { href: '/medya', icon: '📸', title: 'Medya Galerisi', desc: 'Videolar ve fotoğraflar' },
    { href: '/sss', icon: '❓', title: 'Sıkça Sorulan Sorular', desc: 'SSS ve cevaplar' },
    { href: '/belgeler', icon: '📄', title: 'Belgeler', desc: 'Teknik dokümanlar' },
    { href: '/iletisim', icon: '📧', title: 'İletişim', desc: 'Bize ulaşın' },
    { href: 'https://www.ankara.bel.tr/', icon: '🏛️', title: 'Ankara Belediyesi', desc: 'Resmi web sitesi', external: true },
  ];

  return (
    <>
  <header className="fixed top-0 left-0 right-0 z-50 bg-[#003366]/70 backdrop-blur-xl shadow-lg border-b border-[#00B4D8]/40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <Link href="/" className="flex items-center">
              <div className="w-32 h-32">
                <Image
                  src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
                  alt="Ankara Belediyesi Logo"
                  width={128}
                  height={128}
                  className="w-full h-full object-contain"
                />
              </div>
            </Link>

            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="relative flex flex-col items-center justify-center w-14 h-14 rounded-xl bg-linear-to-br from-[#004B87] to-[#00B4D8] hover:shadow-xl transition-all duration-300 transform hover:scale-110 overflow-hidden group"
            >
              <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
              <span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
              <span className={`block w-7 h-0.5 bg-white my-1.5 transition-all duration-300 relative z-10 ${isMenuOpen ? 'opacity-0 scale-0' : ''}`}></span>
              <span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
            </button>
          </div>
        </div>
      </header>

      {/* Full Screen Overlay Menu */}
  <div className={`fixed inset-0 z-60 transition-all duration-500 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
        <div 
          className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          onClick={() => setIsMenuOpen(false)}
        ></div>

        <div className={`absolute top-0 right-0 h-full w-full md:w-[550px] bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] shadow-2xl transform transition-transform duration-500 ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
          
          <div className="relative flex flex-col h-full">
            <div className="flex justify-between items-center p-8 border-b border-white/20">
              <div>
                <h2 className="text-2xl font-bold text-white mb-1">Menü</h2>
                <p className="text-white/70 text-sm">A2 Metro Hattı Projesi</p>
              </div>
              <button
                onClick={() => setIsMenuOpen(false)}
                className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all duration-300 hover:rotate-90"
              >
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <nav className="flex-1 overflow-y-auto p-8 space-y-3">
              {menuItems.map((item, index) => (
                <a
                  key={index}
                  href={item.href}
                  target={item.external ? '_blank' : undefined}
                  rel={item.external ? 'noopener noreferrer' : undefined}
                  onClick={() => !item.external && setIsMenuOpen(false)}
                  className="group block p-5 rounded-2xl bg-white/5 hover:bg-white/15 backdrop-blur-sm border border-white/10 hover:border-white/30 transition-all duration-300 transform hover:scale-105 hover:shadow-xl"
                  style={{ animationDelay: `${index * 50}ms` }}
                >
                  <div className="flex items-center space-x-4">
                    <div className="shrink-0 w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300">
                      {item.icon}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-white group-hover:text-[#00B4D8] transition-colors">
                        {item.title}
                      </h3>
                      <p className="text-sm text-white/70 group-hover:text-white/90 transition-colors">
                        {item.desc}
                      </p>
                    </div>
                    <svg className="w-6 h-6 text-white/50 group-hover:text-white group-hover:translate-x-2 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                </a>
              ))}
            </nav>

            <div className="p-8 border-t border-white/20">
              <div className="flex items-center space-x-4">
                <div className="flex-1">
                  <p className="text-white/70 text-xs mb-2">Sosyal Medya</p>
                  <div className="flex space-x-2">
                    {[
                      { icon: 'M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z', url: 'https://twitter.com/Ankara_BB' },
                      { icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z', url: 'https://www.facebook.com/ankarabb' },
                      { icon: 'M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z M4 2a2 2 0 100 4 2 2 0 000-4z', url: 'https://www.linkedin.com/company/ankara-bb' },
                    ].map((social, i) => (
                      <a
                        key={i}
                        href={social.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
                      >
                        <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                          <path d={social.icon} />
                        </svg>
                      </a>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}