"use client"

import Link from "next/link"
import { Languages } from "lucide-react"
import { Button } from "@/components/ui/button"

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/50 bg-background/80 backdrop-blur-lg">
      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
        <div className="flex items-center gap-2">
          <div className="flex size-8 items-center justify-center rounded-lg bg-primary">
            <Languages className="size-4 text-primary-foreground" />
          </div>
          <span className="text-base font-semibold tracking-tight text-foreground">
            Office Translator
          </span>
        </div>

        <nav className="hidden items-center gap-1 md:flex">
          <a
            href="#pricing"
            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
          >
            Pricing
          </a>
          <a
            href="#faq"
            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
          >
            FAQ
          </a>
          <a
            href="/docs"
            target="_blank"
            rel="noreferrer"
            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
          >
            API Docs
          </a>
          <div className="mx-2 h-4 w-px bg-border" />
          <Button variant="outline" size="sm" asChild>
            <Link href="/dashboard">Login</Link>
          </Button>
        </nav>

        <div className="md:hidden">
          <Button variant="outline" size="sm" asChild>
            <Link href="/dashboard">Login</Link>
          </Button>
        </div>
      </div>
    </header>
  )
}
