"use client";

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

export default function Header() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <nav className="flex items-center justify-between pr-8 absolute z-50 w-full">
      <div className="flex items-center bg-white py-3 pr-6 pl-12 shadow-sm rounded-r-2xl">
        <Image
          src="/assets/images/logo.webp"
          alt="Logo"
          width={24}
          height={24}
        />
        <span className="ml-1 text-2xl font-bold text-[#ff256d]">
          PlanPost AI
        </span>
      </div>

      {/* Desktop Menu */}
      <ul className="hidden md:flex space-x-16 px-8 pt-8 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
        <li>
          <Link href="#" className="hover:text-purple-600">
            Home
          </Link>
        </li>
        <li>
          <Link href="#" className="hover:text-purple-600">
            Feature
          </Link>
        </li>
        <li>
          <Link href="#" className="hover:text-purple-600">
            Pricing
          </Link>
        </li>
        <li>
          <Link href="#" className="hover:text-purple-600">
            Contact
          </Link>
        </li>
      </ul>

      {/* Login & Sign Up Buttons */}
      <div className="hidden md:flex space-x-4">
        <button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
          Log in
        </button>
        <button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
          Sign Up
        </button>
      </div>

      {/* Mobile Menu Button */}
      <div className="md:hidden">
        <button
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          className="text-gray-800 focus:outline-none"
        >
          <svg
            className="w-8 h-8"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4 6h16M4 12h16m-7 6h7"
            ></path>
          </svg>
        </button>
      </div>

      {/* Mobile Navigation */}
      {isMobileMenuOpen && (
        <div className="absolute top-16 left-0 w-full bg-white shadow-lg p-6 md:hidden">
          <ul className="flex flex-col space-y-4 text-gray-800 font-medium">
            <li>
              <Link
                href="#"
                className="hover:text-purple-600"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Home
              </Link>
            </li>
            <li>
              <Link
                href="#"
                className="hover:text-purple-600"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Feature
              </Link>
            </li>
            <li>
              <Link
                href="#"
                className="hover:text-purple-600"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Pricing
              </Link>
            </li>
            <li>
              <Link
                href="#"
                className="hover:text-purple-600"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Contact
              </Link>
            </li>
          </ul>
        </div>
      )}
    </nav>
  );
}