import { useEffect, useState } from "react"
import { ArrowUpRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Logo } from "@/components/ui/logo"

export function Header() {
  const [scrolled, setScrolled] = useState(false)

  // 스크롤 시 헤더를 반투명 블러 배경으로 전환
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 40)
    window.addEventListener("scroll", handleScroll, { passive: true })
    handleScroll()
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-40 safe-t safe-x transition-all duration-300 ${
        scrolled ? "py-4 bg-white/80 backdrop-blur-xl border-b border-line" : "py-6 bg-transparent border-b border-transparent"
      }`}
    >
      <div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
        <a href="#">
          <Logo />
        </a>

        <nav className="hidden md:flex items-center gap-8 text-[15px] font-semibold text-ink-soft">
          {NAV_LINKS.map(({ href, label }) => (
            <a key={href} href={href} className="hover:text-ink transition-colors">
              {label}
            </a>
          ))}
        </nav>

        <Button href="#contact-section" size="pill" className="gap-1.5">
          <span>상담 신청</span>
          <ArrowUpRight className="w-4 h-4" />
        </Button>
      </div>
    </header>
  )
}

const NAV_LINKS = [
  { href: "#how-it-works", label: "협상 데모" },
  { href: "#how-it-works-demo", label: "이용 가이드" },
  { href: "#comparison", label: "도입 전후 비교" },
  { href: "#faq", label: "자주 묻는 질문" },
]