/**
 * Navbar — 전역 상단 네비게이션.
 *
 * PART III 피봇:
 *  - "Free Report" CTA 완전 제거 (계약 기반 영업 모델로 전환).
 *  - Login 버튼 복원 — 계약 완료된 병원에 별도 발급된 자격 정보로 로그인 (스캐폴딩 단계).
 *  - 주 CTA는 `문의하기` (mailto:contact@o2o.kr) — 모든 리드 단일 채널화.
 *
 * 라우팅 구성:
 *  - 로고 "INFINITH"            → `/`           (홈)
 *  - Product / Use Cases       → `/#solution`, `/#use-cases` 앵커
 *  - Pricing                   → `/pricing?from=header` (유입 추적용 쿼리)
 *  - Login                     → `/login`       (Secondary pill — 계약 병원 전용)
 *  - 문의하기                  → mailto         (Primary pill — 신규 리드)
 *
 * ⚠️ 앵커 링크를 `/#solution` 형태로 쓰는 이유:
 *    단순 `#solution`은 현재 페이지 내부 해시로 해석됩니다.
 *    예컨대 `/pricing`에서 `#solution`을 누르면 /pricing 페이지 내의 #solution을 찾다가 실패합니다.
 *    `/#solution`은 React Router가 홈으로 이동시킨 뒤 브라우저가 해시 스크롤을 처리합니다.
 */
import { Link } from 'react-router';
import { ArrowRight } from 'lucide-react';
import { buildContactMailto } from '../lib/contact';
import { PageContainer } from '@/shared/ui/page-container';

export default function Navbar() {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 border-b border-slate-100 backdrop-blur-md">
      <PageContainer className="h-20 flex items-center justify-between">
        {/* 로고 */}
        <Link to="/" className="flex items-center gap-2">
          <span className="font-serif text-3xl font-black tracking-[0.05em] bg-gradient-to-r from-[#4F1DA1] to-[#021341] bg-clip-text text-transparent">
            INFINITH
          </span>
        </Link>

        {/* 가운데 메뉴 — 랜딩 페이지 섹션 순서 그대로 */}
        <div className="hidden md:flex items-center gap-7 text-sm font-medium text-slate-600">
          <a href="/#home" className="hover:text-primary-900 transition-colors">
            Product
          </a>
          <a href="/#audience" className="hover:text-primary-900 transition-colors">
            Audience
          </a>
          <a href="/#problems" className="hover:text-primary-900 transition-colors">
            Problems
          </a>
          <a href="/#solution" className="hover:text-primary-900 transition-colors">
            Solution
          </a>
          <a href="/#modules" className="hover:text-primary-900 transition-colors">
            Modules
          </a>
          <a href="/#use-cases" className="hover:text-primary-900 transition-colors">
            Use Cases
          </a>
          {/* Pricing 메뉴 임시 비활성
          <Link to="/pricing?from=header" className="hover:text-primary-900 transition-colors">
            Pricing
          </Link>
          */}
        </div>

        {/* 우측 CTA — Login(Secondary) + 문의하기(Primary) */}
        <div className="flex items-center gap-3">
          {/* Login 버튼 임시 비활성
          <Link
            to="/login"
            className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-[#021341] bg-white border border-slate-200 rounded-full hover:bg-slate-50 hover:border-slate-300 transition-colors"
          >
            Login
          </Link>
          */}
          <a
            href={buildContactMailto('도입 문의')}
            className="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold text-white rounded-full transition-all shadow-sm hover:shadow-md bg-gradient-to-r from-[#4F1DA1] to-[#021341] hover:opacity-90"
          >
            문의하기
            <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </PageContainer>
    </nav>
  );
}