"use client"

import { useState } from "react"
import { useNavigate } from "react-router-dom"
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"

const Header = () => {
  const navigate = useNavigate()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isSolusiOpen, setIsSolusiOpen] = useState(false)
  const [isProdukOpen, setIsProdukOpen] = useState(false)

  return (
    <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
      <nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
        {/* Logo */}
        <div className="flex-shrink-0">
          <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
        </div>

        {/* Desktop Navigation */}
        <div className="hidden lg:flex items-center space-x-8">
          <button
            onClick={() => navigate("/")}
            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
          >
            Beranda
          </button>

          {/* Produk Dropdown */}
          <div className="relative">
            <button
              onClick={() => setIsProdukOpen(!isProdukOpen)}
              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
            >
              Produk
              <svg
                stroke="currentColor"
                fill="currentColor"
                strokeWidth="0"
                viewBox="0 0 448 512"
                className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
                height="1em"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
              </svg>
            </button>

            {isProdukOpen && (
              <ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
                <li className="px-5 py-2 hover:text-[#5a55ff]">
                  <a href="#produk1" className="text-[#212121]">
                    Produk 1
                  </a>
                </li>
                <li className="px-5 py-2 hover:text-[#5a55ff]">
                  <a href="#produk2" className="text-[#212121]">
                    Produk 2
                  </a>
                </li>
              </ul>
            )}
          </div>

          {/* Solusi Dropdown - Desktop */}
          <div className="relative">
            <button
              onClick={() => setIsSolusiOpen(!isSolusiOpen)}
              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
            >
              Produk
              <svg
                stroke="currentColor"
                fill="currentColor"
                strokeWidth="0"
                viewBox="0 0 448 512"
                className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
                height="1em"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
              </svg>
            </button>

            {isSolusiOpen && (
              <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
                <div className="bg-customRed rounded-xl p-8">
                  <div className="flex justify-center gap-8">
                    {/* Personal */}
                    <button
                      onClick={() => navigate("/SolusiPersonal")}
                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                    >
                      <img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
                      <div className="text-left">
                        <h3 className="font-medium text-base">Personal</h3>
                        <p className="text-xs text-customBlack">
                          Solusi efisien <br /> kebutuhan personal
                        </p>
                      </div>
                    </button>

                    {/* Startup */}
                    <button
                      onClick={() => navigate("/SolusiStartup")}
                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                    >
                      <img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
                      <div className="text-left">
                        <h3 className="font-medium text-base">Startup</h3>
                        <p className="text-xs text-customBlack">
                          Dukungan penuh <br /> untuk bisnis Startup
                        </p>
                      </div>
                    </button>

                    {/* Corporate */}
                    <button
                      onClick={() => navigate("/SolusiCorporate")}
                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                    >
                      <img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
                      <div className="text-left">
                        <h3 className="font-medium text-base">Corporate Business</h3>
                        <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>

          <button
            onClick={() => navigate("/Contact")}
            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
          >
            Hubungi Kami
          </button>
        </div>

        {/* Search Bar */}
        <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
          <div className="relative w-full">
            <input
              type="text"
              placeholder="Pencarian..."
              className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
            />
            <button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
              <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Konsultasi Button */}
        <button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
          Konsultasi Gratis
        </button>

        {/* Mobile Menu Button */}
        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
            <div className="flex flex-col">
              <button
                onClick={() => navigate("/")}
                className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
              >
                Beranda
              </button>

              <div className="relative">
                <button
                  onClick={() => setIsProdukOpen(!isProdukOpen)}
                  className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
                >
                  Produk
                  <img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
                </button>
                {isProdukOpen && (
                  <div className="bg-[#DC0168] px-5 py-4">
                    <div className="space-y-3">
                      <a href="#produk1" className="block p-4 bg-white rounded-lg">
                        Produk 1
                      </a>
                      <a href="#produk2" className="block p-4 bg-white rounded-lg">
                        Produk 2
                      </a>
                    </div>
                  </div>
                )}
              </div>

              <div className="relative">
                <button
                  onClick={() => setIsSolusiOpen(!isSolusiOpen)}
                  className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
                >
                  Solusi
                  <img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
                </button>
                {isSolusiOpen && (
                  <div className="bg-[#DC0168] px-5 py-4">
                    <div className="space-y-3">
                      <button
                        onClick={() => navigate("/SolusiPersonal")}
                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
                      >
                        <img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
                        <div className="text-left">
                          <h3 className="font-medium text-base">Personal</h3>
                          <p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
                        </div>
                      </button>

                      <button
                        onClick={() => navigate("/SolusiStartup")}
                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
                      >
                        <img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
                        <div className="text-left">
                          <h3 className="font-medium text-base">Startup</h3>
                          <p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
                        </div>
                      </button>

                      <button
                        onClick={() => navigate("/SolusiCorporate")}
                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
                      >
                        <img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
                        <div className="text-left">
                          <h3 className="font-medium text-base">Corporate Business</h3>
                          <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                        </div>
                      </button>
                    </div>
                  </div>
                )}
              </div>

              <button
                onClick={() => navigate("/Contact")}
                className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
              >
                Hubungi Kami
              </button>

              <div className="p-5">
                <div className="relative">
                  <input
                    type="text"
                    placeholder="Pencarian..."
                    className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
                  />
                  <button className="absolute right-4 top-1/2 -translate-y-1/2">
                    <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
                  </button>
                </div>
              </div>

              <div className="p-5 pt-0">
                <button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
                  Konsultasi Gratis
                </button>
              </div>
            </div>
          </div>
        )}
      </nav>
    </header>
  )
}

export default Header