import Link from "next/link"
import Image from "next/image"
import { Search, ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function SiteHeader() {
  return (
    <header className="border-b bg-card">
      <div className="container mx-auto px-4">
        {/* Top bar with logo and utility links */}
        <div className="flex items-center justify-between py-4">
          <Link href="/" className="flex items-center">
            <Image src="/logo.png" alt="Paper Presents" width={280} height={50} className="h-12 w-auto" priority />
          </Link>

          <nav className="hidden md:flex items-center gap-6">
            <Link href="/our-promise" className="text-sm hover:text-primary transition-colors">
              Our Promise
            </Link>
            <Link href="/faq" className="text-sm hover:text-primary transition-colors">
              FAQ
            </Link>
            <Link href="/about" className="text-sm hover:text-primary transition-colors">
              About Us
            </Link>
            <Link href="/contact" className="text-sm hover:text-primary transition-colors">
              Contact Us
            </Link>
          </nav>

          <div className="flex items-center gap-4">
            <div className="hidden md:flex items-center gap-2">
              <Input type="search" placeholder="Search..." className="w-48" />
              <Button size="icon" variant="ghost">
                <Search className="h-4 w-4" />
              </Button>
            </div>
            <Button size="icon" variant="ghost" className="relative">
              <ShoppingCart className="h-5 w-5" />
              <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center">
                0
              </span>
            </Button>
          </div>
        </div>

        {/* Main navigation */}
        <nav className="border-t py-3">
          <ul className="flex flex-wrap items-center justify-center gap-6 text-sm">
            <li></li>

            <li>
              <Link href="/our-cards" className="hover:text-primary transition-colors font-medium">
                Our Cards
              </Link>
            </li>
            <li className="text-muted-foreground">|</li>
            <li>
              <Link href="/your-occasions" className="hover:text-primary transition-colors font-medium">
                Your Occasions
              </Link>
            </li>
            <li className="text-muted-foreground">|</li>
            <li>
              <Link href="/custom-cards" className="hover:text-primary transition-colors font-medium">
                Custom Cards
              </Link>
            </li>
            <li className="text-muted-foreground">|</li>
            <li>
              <Link href="/wholesale" className="hover:text-primary transition-colors font-medium">
                Wholesale Orders
              </Link>
            </li>
            <li className="ml-auto">
              <Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground">
                <Link href="/checkout">Checkout</Link>
              </Button>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}