// 퍼플리카 자미두수 — 공유 컴포넌트 (Header · Footer · 명반)
(function () {
  const HOME = '/';

  // URL 쿼리 파라미터 헬퍼
  window.getParam = function (key, fallback) {
    const v = new URLSearchParams(window.location.search).get(key);
    return v === null ? fallback : v;
  };

  function Header({ active }) {
    const link = (href, label, key) => (
      <a href={href} className={active === key ? 'active' : ''}>{label}</a>
    );
    return (
      <header className="nav">
        <div className="nav-in">
          <a href={HOME} className="brand">
            <span className="brand-mark">紫</span>
            <span>
              <b>퍼플리카 자미두수</b>
              <span>Purplelica</span>
            </span>
          </a>
          <nav className="nav-links">
            {link(HOME + '#chart', '명반 보기', 'chart')}
            {link('guide.html?id=0', '기초 가이드', 'guide')}
            {link(HOME + '#stars', '14주성', 'stars')}
            {link(HOME + '#daily', '데일리', 'daily')}
          </nav>
        </div>
      </header>
    );
  }

  // 4x4 명반 — 12궁을 시계방향 테두리에 배치
  const POS = [
    [1, 1], [1, 2], [1, 3], [1, 4],
    [2, 4], [3, 4],
    [4, 4], [4, 3], [4, 2], [4, 1],
    [3, 1], [2, 1],
  ];
  function MyeongBan() {
    return (
      <div className="chart" id="chart">
        {window.PALACES.map((pl, i) => (
          <a className="cell" href={'palace.html?id=' + i} key={pl.hanja} style={{ gridColumn: POS[i][1], gridRow: POS[i][0], textDecoration: 'none', color: 'inherit', cursor: 'pointer' }}>
            <div className="cn">{String(i + 1).padStart(2, '0')}</div>
            <div>
              <div className="ck">{pl.ko}<small>{pl.hanja}</small></div>
              <div className="cd">{pl.desc.split('.')[0].split(',')[0]}</div>
            </div>
          </a>
        ))}
        <div className="cell center">
          <div className="lab">命 盤</div>
          <div className="ming">紫微</div>
          <div className="who">퍼플리카 명반</div>
        </div>
      </div>
    );
  }

  function Footer() {
    return (
      <footer className="footer">
        <div className="footer-in">
          <div>
            <div className="fb">
              <span className="brand-mark">紫</span>
              <div>
                <b style={{ fontSize: 16, fontWeight: 800 }}>퍼플리카 자미두수</b>
                <div className="fmeta">별과 궁으로 매일을 읽습니다.</div>
              </div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="fnav" style={{ justifyContent: 'flex-end', marginBottom: 12 }}>
              <a href={HOME}>홈</a>
              <a href="guide.html?id=0">기초 가이드</a>
              <a href={HOME + '#stars'}>14주성</a>
              <a href={HOME + '#daily'}>데일리</a>
            </div>
            <div className="fmeta">PURPLELICA · 紫微斗數 ARCHIVE · © 2026</div>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { PLHeader: Header, PLFooter: Footer, MyeongBan, PL_HOME: HOME });
})();