'use client';
import Link from 'next/link';
import React, { useState } from 'react';

const Header: React.FC = () => {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <header className="fixed top-0 left-0 w-full h-16 sm:h-20 bg-white/60 border-b border-[#9B9B9B4D] backdrop-blur-[47px] z-[1000] flex items-center font-sans">
        <div className="flex justify-between items-center w-full px-4 sm:px-6 lg:px-[100px]">
          {/* Logo Section */}
          <div className="flex items-center gap-2 sm:gap-4 shrink-0">
            <a href="/">
              <img 
                src="/logo.svg" 
                alt="Logo" 
                width={200} 
                height={60} 
                className="w-[130px] sm:w-[160px] lg:w-[200px] h-auto object-contain" 
              />
            </a>
          </div>

          {/* Navigation Section - Desktop Only */}
          <nav className="flex items-center gap-4 xl:gap-8 max-lg:hidden h-full">
            <a href="/sharedwebhosting" className="text-[14px] xl:text-[15px] font-medium text-brand-dark hover:text-black transition-colors duration-200 whitespace-nowrap">Shared Web Hosting</a>

            {/* Pro Hosting Dropdown */}
            <div className="relative group h-full flex items-center">
              <button className="text-[14px] xl:text-[15px] font-medium text-brand-dark group-hover:text-black transition-colors duration-200 flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 whitespace-nowrap">
                Pro Hosting
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" className="opacity-60 group-hover:rotate-180 transition-transform duration-300">
                  <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>

              {/* Dropdown Menu */}
              <div className="absolute top-full left-1/2 -translate-x-1/2 pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2 pointer-events-none group-hover:pointer-events-auto">
                <div className="bg-white border border-[#9B9B9B33] rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.08)] p-2 min-w-[260px]">
                  <div className="grid gap-1">
                    <a href="/wordpress-hosting" className="flex items-center gap-3 p-3 rounded-xl hover:bg-[#6D28D908] group/item transition-all duration-200">
                      <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 group-hover/item:bg-blue-100 transition-colors shrink-0">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /></svg>
                      </div>
                      <div>
                        <div className="text-[14px] font-semibold text-gray-900">WordPress Hosting</div>
                        <div className="text-[12px] text-gray-500">Optimized for performance</div>
                      </div>
                    </a>
                    <a href="/email-hosting" className="flex items-center gap-3 p-3 rounded-xl hover:bg-[#6D28D908] group/item transition-all duration-200">
                      <div className="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center text-orange-600 group-hover/item:bg-orange-100 transition-colors shrink-0">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
                      </div>
                      <div>
                        <div className="text-[14px] font-semibold text-gray-900">Email Hosting</div>
                        <div className="text-[12px] text-gray-500">Business email solutions</div>
                      </div>
                    </a>
                    <a href="/managed-dedicated-servers" className="flex items-center gap-3 p-3 rounded-xl hover:bg-[#6D28D908] group/item transition-all duration-200">
                      <div className="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center text-purple-600 group-hover/item:bg-purple-100 transition-colors shrink-0">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2" /><rect x="2" y="14" width="20" height="8" rx="2" ry="2" /><line x1="6" y1="6" x2="6.01" y2="6" /><line x1="6" y1="18" x2="6.01" y2="18" /></svg>
                      </div>
                      <div>
                        <div className="text-[14px] font-semibold text-gray-900">Managed Dedicated Servers</div>
                        <div className="text-[12px] text-gray-500">Maximum power & control</div>
                      </div>
                    </a>
                    <a href="/vpshosting" className="flex items-center gap-3 p-3 rounded-xl hover:bg-[#6D28D908] group/item transition-all duration-200">
                      <div className="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-600 group-hover/item:bg-emerald-100 transition-colors shrink-0">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
                      </div>
                      <div>
                        <div className="text-[14px] font-semibold text-gray-900">VPS Hosting</div>
                        <div className="text-[12px] text-gray-500">Scalable virtual servers</div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <a href="/reseller-hosting" className="text-[14px] xl:text-[15px] font-medium text-brand-dark hover:text-black transition-colors duration-200 whitespace-nowrap">Reseller Hosting</a>
            <a href="/domainregistration" className="text-[14px] xl:text-[15px] font-medium text-brand-dark hover:text-black transition-colors duration-200 whitespace-nowrap">Domain Registration</a>
          </nav>

          {/* Action Section */}
          <div className="flex items-center gap-2 sm:gap-3 lg:gap-7 shrink-0">
            <Link href="/login" className="text-[14px] xl:text-[15px] font-medium text-brand-dark hover:text-black transition-colors duration-200 hidden lg:block">Login</Link>
            
            <button className="bg-[#FFCE1A] text-black rounded-full px-3 sm:px-4 lg:px-6 py-1.5 sm:py-2 lg:py-3 text-[13px] sm:text-[14px] lg:text-[15px] font-semibold flex items-center gap-1.5 sm:gap-2 hover:bg-[#6D28D9] hover:text-white hover:-translate-y-0.5 transition-all duration-300 shadow-none hover:shadow-none active:translate-y-0 cursor-pointer group whitespace-nowrap">
              Order Now
              <span className="bg-black group-hover:bg-white w-4 h-4 sm:w-5 sm:h-5 rounded-full flex items-center justify-center transition-colors duration-300 shrink-0">
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="sm:w-3.5 sm:h-3.5">
                  <path d="M5.25 10.5L8.75 7L5.25 3.5" className="stroke-white group-hover:stroke-[#6D28D9] transition-colors duration-300" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </button>

            {/* Hamburger - Mobile Only */}
            <button
              className="lg:hidden flex flex-col gap-[4px] sm:gap-1.5 p-1.5 sm:p-2 cursor-pointer rounded-md hover:bg-gray-100/50 transition-colors"
              onClick={() => setMobileOpen(true)}
              aria-label="Open menu"
            >
              <span className="w-5 sm:w-6 h-0.5 bg-brand-dark rounded-full block" />
              <span className="w-5 sm:w-6 h-0.5 bg-brand-dark rounded-full block" />
              <span className="w-3.5 sm:w-4 h-0.5 bg-brand-dark rounded-full block" />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Drawer Overlay */}
      {mobileOpen && (
        <div className="fixed inset-0 z-[2000] lg:hidden">
          {/* Backdrop */}
          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onClick={() => setMobileOpen(false)} />

          {/* Drawer */}
          <div className="absolute top-0 right-0 h-full w-[85vw] sm:w-[80vw] max-w-[320px] bg-white shadow-2xl flex flex-col p-5 sm:p-6 pt-6 sm:pt-8 overflow-y-auto transform transition-transform">
            {/* Close Button */}
            <button className="self-end mb-6 sm:mb-8 p-2 rounded-full hover:bg-gray-100 transition-colors text-brand-dark" onClick={() => setMobileOpen(false)} aria-label="Close menu">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M18 6L6 18M6 6l12 12" />
              </svg>
            </button>

            {/* Nav Links */}
            <nav className="flex flex-col gap-1">
              <a href="/sharedwebhosting" className="text-[15px] sm:text-base font-semibold text-brand-dark hover:text-[#7F00FF] py-2.5 sm:py-3 px-3 rounded-xl hover:bg-purple-50 transition-all" onClick={() => setMobileOpen(false)}>Shared Web Hosting</a>
              <div className="py-1 px-3">
                <p className="text-[11px] sm:text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 mt-1 sm:mt-2">Pro Hosting</p>
                <div className="flex flex-col gap-1 pl-2">
                  <a href="/wordpress-hosting" className="text-[13px] sm:text-sm font-medium text-brand-dark hover:text-[#7F00FF] py-2 rounded-lg hover:bg-purple-50 px-2 transition-all" onClick={() => setMobileOpen(false)}>WordPress Hosting</a>
                  <a href="/email-hosting" className="text-[13px] sm:text-sm font-medium text-brand-dark hover:text-[#7F00FF] py-2 rounded-lg hover:bg-purple-50 px-2 transition-all" onClick={() => setMobileOpen(false)}>Email Hosting</a>
                  <a href="/managed-dedicated-servers" className="text-[13px] sm:text-sm font-medium text-brand-dark hover:text-[#7F00FF] py-2 rounded-lg hover:bg-purple-50 px-2 transition-all" onClick={() => setMobileOpen(false)}>Managed Dedicated Servers</a>
                  <a href="/vpshosting" className="text-[13px] sm:text-sm font-medium text-brand-dark hover:text-[#7F00FF] py-2 rounded-lg hover:bg-purple-50 px-2 transition-all" onClick={() => setMobileOpen(false)}>VPS Hosting</a>
                </div>
              </div>
              <a href="/reseller-hosting" className="text-[15px] sm:text-base font-semibold text-brand-dark hover:text-[#7F00FF] py-2.5 sm:py-3 px-3 rounded-xl hover:bg-purple-50 transition-all" onClick={() => setMobileOpen(false)}>Reseller Hosting</a>
              <a href="/domainregistration" className="text-[15px] sm:text-base font-semibold text-brand-dark hover:text-[#7F00FF] py-2.5 sm:py-3 px-3 rounded-xl hover:bg-purple-50 transition-all" onClick={() => setMobileOpen(false)}>Domain Registration</a>
            </nav>

            <div className="mt-auto pt-6 sm:pt-8 border-t border-gray-100 flex flex-col gap-3">
              <a href="#" className="text-center text-[15px] sm:text-base font-medium text-brand-dark hover:text-[#7F00FF] py-2.5 sm:py-3 transition-colors">Login</a>
              <button className="bg-[#FFCE1A] text-black rounded-full py-2.5 sm:py-3 text-[15px] sm:text-base font-bold transition-all hover:bg-[#6D28D9] hover:text-white">Order Now</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Header;