import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";

export function MarketingNav() {
  return (
    <header className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/80 backdrop-blur">
      <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2 text-slate-100">
          <Image
            src="/brandlxft-logo.png"
            alt="BrandLxft"
            width={28}
            height={28}
            className="rounded"
          />
          <span className="text-lg font-semibold">BrandLxft</span>
        </Link>
        <nav className="hidden items-center gap-6 text-sm text-slate-400 md:flex">
          <a href="#features" className="hover:text-slate-100">Features</a>
          <Link href="/what-makes-us-different" className="hover:text-slate-100">What makes us different</Link>
          <Link href="/startup" className="hover:text-slate-100">Startups</Link>
          <Link href="/why-it-matters" className="hover:text-slate-100">Why it matters</Link>
          <Link href="/demo" className="hover:text-slate-100">Live demos</Link>
        </nav>
        <div className="flex items-center gap-2">
          <Link href="/demo">
            <Button variant="outline" className="hidden sm:inline-flex">Try a demo</Button>
          </Link>
          <Link href="/login">
            <Button variant="ghost">Log In</Button>
          </Link>
          <Link href="/signup">
            <Button>Build My Business Brain</Button>
          </Link>
        </div>
      </div>
    </header>
  );
}