import { Button } from "@/components/ui/button";
import logo from "@/assets/tailtrails-logo.png";

const Header = () => {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border/50">
      <div className="container mx-auto px-6 h-16 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <img src={logo} alt="TailTrails" className="h-10 w-auto" />
          <span className="font-display text-xl font-semibold text-foreground">
            TailTrails
          </span>
        </div>
        
        <nav className="hidden md:flex items-center gap-8">
          <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors font-body">
            Features
          </a>
          <a href="#how-it-works" className="text-muted-foreground hover:text-foreground transition-colors font-body">
            How It Works
          </a>
          {/* <a href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors font-body">
            Reviews
          </a> */}
        </nav>

        <div className="flex items-center gap-3">
          <Button variant="ghost" size="sm" asChild>
            <a href="https://app.tailtrails.club" target="_blank" rel="noopener noreferrer">
              Log In
            </a>
          </Button>
          <Button variant="default" size="sm" asChild>
            <a href="https://app.tailtrails.club/signup" target="_blank" rel="noopener noreferrer">
              Get Started
            </a>
          </Button>
        </div>
      </div>
    </header>
  );
};

export default Header;