"use client";

import { Button } from "@/components/ui/button";
import { Sparkles } from "lucide-react";

const links = [
  { label: "How it works", href: "#how-it-works" },
  { label: "What's included", href: "#whats-included" },
  { label: "Pricing", href: "#pricing" },
  { label: "FAQ", href: "#faq" },
  { label: "Team", href: "#team" },
];

export default function NavbarLogoLeft() {
  return (
    <header className="w-full border-b border-border bg-background">
      <div className="container mx-auto flex items-center justify-between gap-6 px-6 py-4">
        <a href="#" className="flex items-center gap-2 text-foreground font-bold text-2xl">
          <Sparkles className="w-[30px] h-[30px] text-primary" />
          <span>
            Beautiful{" "}
            <span className="bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">
              Possibilities
            </span>
          </span>
        </a>
        <nav className="hidden md:flex items-center gap-6">
          {links.map((l) => (
            <a
              key={l.label}
              href={l.href}
              className="text-base font-semibold text-muted-foreground hover:text-foreground transition-colors"
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
            <a href="https://admin.beautiful-possibilities.com">Sign in</a>
          </Button>
          <Button size="sm">Get free site review</Button>
        </div>
      </div>
    </header>
  );
}