import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import BrandMark from './BrandMark';
import { IconChevron } from './Icons';

const NAV_ITEMS = [
  { id: 'today', to: '/saju/today', label: '오늘의 운세' },
  { id: 'match', to: '/saju/compatibility', label: '궁합보기' },
  { id: 'saju', to: '/saju/result', label: '사주풀이' },
  { id: 'me', to: '/saju/me', label: '상담안내' },
];

function pathToCurrent(pathname) {
  if (pathname.startsWith('/saju/today')) return 'today';
  if (pathname.startsWith('/saju/compatibility')) return 'match';
  if (pathname.startsWith('/saju/result')) return 'saju';
  if (pathname.startsWith('/saju/me')) return 'me';
  return 'home';
}

export default function DesktopHeader() {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const current = pathToCurrent(pathname);

  return (
    <header style={{
      position: 'sticky', top: 10, zIndex: 40,
      width: 'calc(100% - 72px)', maxWidth: 1368, height: 68,
      margin: '10px auto 0',
      background: 'rgba(251,247,239,0.88)',
      border: '1px solid rgba(31,42,68,0.13)',
      borderRadius: 999,
      display: 'flex', alignItems: 'center', padding: '0 22px 0 28px',
      backdropFilter: 'blur(18px) saturate(150%)',
      WebkitBackdropFilter: 'blur(18px) saturate(150%)',
      boxShadow: '0 8px 24px rgba(31,42,68,0.06), inset 0 1px 0 rgba(255,255,255,0.75)',
    }}>
      <button onClick={() => navigate('/saju')} style={{
        background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 12,
        padding: 0, minWidth: 220,
      }}>
        <BrandMark size={40} />
        <span className="font-title" style={{
          fontSize: 26, color: '#1F2A44', letterSpacing: '-0.03em', lineHeight: 1,
        }}>호령사주</span>
      </button>

      <nav aria-label="사주 메뉴" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 24, flex: 1,
      }}>
        {NAV_ITEMS.map((item) => {
          const active = item.id === current;
          return (
            <button key={item.id} onClick={() => navigate(item.to)}
              aria-current={active ? 'page' : undefined}
              style={{
                background: active ? 'rgba(31,42,68,0.07)' : 'transparent',
                border: 'none',
                borderRadius: active ? 18 : 0,
                padding: active ? '11px 24px' : '11px 10px',
                color: active ? '#1F2A44' : '#202638',
                fontSize: 16,
                fontWeight: active ? 800 : 700,
                letterSpacing: '-0.03em',
              }}>
              {item.label}
            </button>
          );
        })}
      </nav>

      <button onClick={() => navigate('/saju')} style={{
        padding: '13px 22px 13px 26px',
        borderRadius: 999,
        background: '#1F2A44',
        color: '#F7F2E8',
        border: '1px solid rgba(212,175,55,0.5)',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        fontSize: 14,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        boxShadow: '0 6px 18px rgba(31,42,68,0.18), inset 0 1px 0 rgba(212,175,55,0.3)',
        whiteSpace: 'nowrap',
      }}>
        사주풀이 시작하기
        <IconChevron dir="right" size={14} color="#E8C76B" />
      </button>
    </header>
  );
}