import { Link } from "@tanstack/react-router";
import { Logo } from "./Logo";
import { Button } from "@/components/ui/button";
import { ShoppingBag } from "lucide-react";
import { LovableMark } from "./LovableMark";

export function Header() {
  return (
    <>
      <div className="bg-gradient-to-r from-primary to-[oklch(0.68_0.2_295)] text-primary-foreground text-xs sm:text-sm py-2 px-4 text-center flex items-center justify-center gap-2">
        <LovableMark size={14} gradient={false} className="text-white" />
        <span>Launch Offer — মাত্র ৳350 এ 205 Lovable Credits, instant delivery</span>
      </div>
      <header className="sticky top-0 z-40 bg-background/80 backdrop-blur-md border-b border-border">
        <div className="container max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
          <Logo />
          <nav className="hidden md:flex items-center gap-7 text-sm font-medium text-muted-foreground">
            <Link to="/" className="hover:text-primary transition-colors" activeOptions={{ exact: true }} activeProps={{ className: "text-primary" }}>Home</Link>
            <a href="/#packages" className="hover:text-primary transition-colors">Packages</a>
            <a href="/#how-it-works" className="hover:text-primary transition-colors">How it works</a>
            <a href="/#faq" className="hover:text-primary transition-colors">FAQ</a>
          </nav>
          <div className="flex items-center gap-2">
            <Button asChild size="sm" className="bg-gradient-to-r from-primary to-[oklch(0.68_0.2_295)] text-primary-foreground shadow-md hover:opacity-90">
              <a href="/#packages"><ShoppingBag className="size-4 mr-1" /> Order Now</a>
            </Button>
          </div>
        </div>
      </header>
    </>
  );
}