planpost-offer-landing/src/components/Header.tsx

"use client";
import Link from "next/link";
import Image from "next/image";
import { Menu } from "lucide-react";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
import { useState } from "react";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
      <Link href="/">
        <div className="flex items-center bg-white py-3 pr-6 pl-5 shadow-sm rounded-r-2xl">
          <Image src="/planpost.png" alt="Logo" width={24} height={24} />
          <span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
            PlanPost AI
          </span>
        </div>
      </Link>

      {/* Desktop Menu */}
      <ul className="hidden md:flex space-x-16 px-8 pt-5 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="/#feature" className="hover:text-purple-600">
            Feature
          </Link>
        </li>
        <li>
          <Link href="/#pricingSection" className="hover:text-purple-600">
            Pricing
          </Link>
        </li>
        <li>
          <Link href="/contact" className="hover:text-purple-600">
            Contact
          </Link>
        </li>
      </ul>

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

      {/* Mobile Menu with Sheet Component */}
      <div className="md:hidden">
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
          <SheetTrigger asChild>
            <button className="text-gray-800 focus:outline-none mt-2">
              <Menu className="w-8 h-8" />
              <span className="sr-only">Open menu</span>
            </button>
          </SheetTrigger>
          <SheetContent side="right" className="w-[300px] sm:w-[350px] p-0">
            <div className="flex flex-col h-full">
              <div className="p-6">
                <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
                <div className="flex items-center mb-8">
                  <Image
                    src="/planpost.png"
                    alt="Logo"
                    width={24}
                    height={24}
                  />
                  <span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
                    PlanPost AI
                  </span>
                </div>
                <ul className="flex flex-col space-y-6 text-gray-800 font-medium">
                  <li>
                    <Link
                      href="/"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Home
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/#feature"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Feature
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/#pricingSection"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Pricing
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/contact"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Contact
                    </Link>
                  </li>
                </ul>
              </div>

              <div className="mt-auto p-6 border-t border-gray-200">
                <div className="flex flex-col space-y-4">
                  <Link
                    href="https://dashboard.planpostai.com/"
                    className="w-full"
                    onClick={handleClose}
                  >
                    <button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
                      Log in
                    </button>
                  </Link>
                  <Link
                    href="https://dashboard.planpostai.com/"
                    className="w-full"
                    onClick={handleClose}
                  >
                    <button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
                      Sign Up
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </nav>
  );
}