// Header — fixed nav (logo left, menu + CTA right)
// 전 페이지 공용. props:
//   active     — 'home' | 'service' | 'case'
//   onCtaClick — 있으면 CTA가 이걸 호출, 없으면 랜딩 #cta로 이동
const HOME_HREF = '/';

const Header = ({ onCtaClick, active = 'home', theme = 'dark' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

    const navItems = [
    { label: '서비스', href: 'service.html', key: 'service' },
    { label: '성과 사례', href: 'case.html', key: 'case' },
  ];

  const handleCta = () => {
    setMenuOpen(false);
    if (onCtaClick) onCtaClick();
    else window.location.href = HOME_HREF + '#cta';
  };

  // 스크롤 상태이거나 모바일 메뉴가 열려 있으면 어두운 글자 / 흰 배경
    const solid = scrolled || menuOpen;
  // 밝은 배경 페이지(홈)는 스크롤 전에도 어두운 글자
  const darkText = solid || theme === 'light';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: solid ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0)',
      backdropFilter: solid ? 'saturate(180%) blur(14px)' : 'none',
      WebkitBackdropFilter: solid ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: solid ? '0.5px solid var(--line-100)' : '0.5px solid transparent',
      transition: 'background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease'
    }}>
      <div style={{
        height: '4.75rem', paddingInline: 'var(--header-pad)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        {/* Logo */}
        <a href={HOME_HREF}
          onClick={(e) => {
            if (active === 'home') {
              e.preventDefault();
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }
          }}
          style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
          <img src={`assets/sync-on-mark.png?v=${window.ASSET_VER}`} alt="Sync-On"
            style={{ height: '2.25rem', width: 'auto', display: 'block' }} />
          <span style={{
            fontWeight: 700, fontSize: '1.1875rem',
            color: darkText ? 'var(--navy-800)' : '#fff',
            letterSpacing: '-0.02em',
            transition: 'color .2s ease'
          }}>
            Sync-On
          </span>
        </a>

        {/* 데스크탑 — nav + CTA */}
        <div className="only-desktop" style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
          <nav style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
            {navItems.map((it) => {
              const isActive = it.key === active;
              const base = isActive
                ? 'var(--orange-500)'
: (darkText ? 'var(--ink-700)' : 'rgba(255,255,255,0.82)');
const hover = isActive ? 'var(--orange-500)' : (darkText ? 'var(--navy-800)' : '#fff');
              return (
                <a key={it.href} href={it.href} style={{
                  fontSize: '0.9375rem', fontWeight: isActive ? 700 : 500, color: base,
                  transition: 'color .15s ease', position: 'relative',
                  paddingBottom: '0.25rem'
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = hover}
                onMouseLeave={(e) => e.currentTarget.style.color = base}>
                  {it.label}
                  {isActive &&
                    <span style={{
                      position: 'absolute', left: 0, right: 0, bottom: '-0.125rem', height: '0.125rem',
                      background: 'var(--orange-500)', borderRadius: '0.125rem'
                    }} />
                  }
                </a>);
            })}
          </nav>

                    <button className="btn btn-orange btn-header" onClick={handleCta}>
            7일 무료 대행 신청
          </button>
        </div>

        {/* 모바일 — 햄버거 버튼 */}
        <button className="only-mobile" aria-label="메뉴" onClick={() => setMenuOpen(v => !v)}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            width: '2.5rem', height: '2.5rem', padding: '0.5rem', display: 'grid', placeItems: 'center'
          }}>
          <div style={{ width: '1.375rem', height: '1rem', position: 'relative' }}>
            {[0, 1, 2].map((i) => {
              const c = darkText ? 'var(--navy-800)' : '#fff';
              const base = {
                position: 'absolute', left: 0, width: '1.375rem', height: '0.125rem',
                borderRadius: '0.125rem', background: c,
                transition: 'transform .25s ease, opacity .2s ease, top .25s ease'
              };
              const top = i === 0 ? '0rem' : i === 1 ? '0.4375rem' : '0.875rem';
              let style = { ...base, top };
              if (menuOpen && i === 0) style = { ...base, top: '0.4375rem', transform: 'rotate(45deg)' };
              if (menuOpen && i === 1) style = { ...base, top: '0.4375rem', opacity: 0 };
              if (menuOpen && i === 2) style = { ...base, top: '0.4375rem', transform: 'rotate(-45deg)' };
              return <span key={i} style={style} />;
            })}
          </div>
        </button>
      </div>

      {/* 모바일 슬라이드 메뉴 */}
      <div className="only-mobile" style={{
        overflow: 'hidden',
        maxHeight: menuOpen ? '20rem' : 0,
        transition: 'max-height .3s ease',
        background: 'rgba(255,255,255,0.98)',
        backdropFilter: 'saturate(180%) blur(14px)',
        WebkitBackdropFilter: 'saturate(180%) blur(14px)',
        borderBottom: menuOpen ? '0.5px solid var(--line-100)' : 'none'
      }}>
        <div style={{
          paddingInline: 'var(--header-pad)', paddingTop: '0.5rem', paddingBottom: '1.25rem',
          display: 'flex', flexDirection: 'column', gap: '0.25rem'
        }}>
          {navItems.map((it) => {
            const isActive = it.key === active;
            return (
              <a key={it.href} href={it.href} onClick={() => setMenuOpen(false)} style={{
                fontSize: '1.0625rem', fontWeight: isActive ? 700 : 500,
                color: isActive ? 'var(--orange-500)' : 'var(--navy-800)',
                padding: '0.875rem 0.25rem', borderBottom: '0.5px solid var(--line-100)'
              }}>{it.label}</a>);
          })}
                    <button className="btn btn-orange btn-menu" onClick={handleCta} style={{ marginTop: '0.875rem', width: '100%' }}>
            7일 무료 대행 신청
          </button>
        </div>
      </div>
    </header>);
};

window.Header = Header;