"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { Menu, X, Home, Box, Briefcase, Newspaper } from "lucide-react";

export default function Header() {
  const [open, setOpen] = useState(false);

  return (
    <header className="relative w-full bg-white overflow-hidden">
      <aside
        className={`fixed right-0 top-0 z-50 h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex items-center justify-between border-b border-white/20 p-6">
          <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
            <button className="rounded-full bg-white px-3 py-1">ID</button>
            <button className="px-3 py-1">EN</button>
          </div>

          <button onClick={() => setOpen(false)}>
            <X />
          </button>
        </div>

        <nav className="flex flex-col gap-6 p-6 text-sm font-medium">
          <MenuItem icon={<Home size={18} />} label="Home" />
          <MenuItem icon={<Box size={18} />} label="Product" />
          <MenuItem icon={<Briefcase size={18} />} label="Services" />
          <MenuItem icon={<Newspaper size={18} />} label="News and Services" />
        </nav>
      </aside>

      <div className="container mx-auto flex min-h-[90vh] items-center px-6">
        <div className="flex-1 space-y-6">
          <h1 className="text-4xl font-extrabold leading-tight md:text-6xl">
            <span className="relative inline-block">
              <span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]"></span>
              <span className="relative">Beyond Expectations</span>
            </span>
            <br />
            Build <span className="text-[#966314]">Reputation.</span>
          </h1>

          <Button
            size="lg"
            className="rounded-full bg-[#966314] px-8 py-6 text-base hover:bg-[#7c520f]"
          >
            Contact Us
          </Button>
        </div>

        <div className="relative hidden flex-1 justify-end md:flex">
          <Image
            src="/image/img1.png"
            alt="Illustration"
            width={520}
            height={520}
            className="object-contain"
          />
        </div>
      </div>
    </header>
  );
}

function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
      <span>{label}</span>
      {icon}
    </div>
  );
}