/* 모모, 테리 — shared components */

function PlayIcon() {
  return (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>);
}
function Arrow({ style }) {
  return (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={style}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
}
function DownloadIcon({ style, size = 15 }) {
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={style}><path d="M12 3v11m0 0-4.5-4.5M12 14l4.5-4.5M5 20h14"/></svg>);
}

/* striped image placeholder */
function Ph({ label, style, className = '' }) {
  return (
    <div className={'ph ' + className} style={style}>
      <span>{label}</span>
    </div>
  );
}

/* character round avatar — real image on a soft ring */
function Char({ who, size = 64, bg, style }) {
  const c = (window.CHARS || {})[who] || {};
  return (
    <div className="char" style={{ width: size, height: size, background: bg || 'var(--primary-tint)',
        border: '2px solid #fff', borderRadius: '50%', overflow: 'hidden',
        flex: 'none', boxShadow: 'var(--shadow-sm)', ...style }} title={who}>
      <img src={typeof c.img === 'function' ? c.img() : c.img} alt={who} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%' }} />
    </div>
  );
}

/* character round avatar placeholder (legacy fallback) */
function Face({ name, size = 56, color, style }) {
  const initial = name ? name[0] : '?';
  return (
    <div className="face" style={{ width: size, height: size, fontSize: size * 0.34, background: color || 'var(--primary)', ...style }} title={name}>
      {initial}
    </div>
  );
}

function Header({ route, go, onBurger, onLogout }) {
  const items = [
    { id: 'home', label: '홈' },
    { id: 'materials', label: '수업지원자료' },
    { id: 'family', label: '확장수업' },
    { id: 'about', label: '모모테리 소개' },
  ];
  return (
    <header className="header">
      <div className="wrap header-in">
        <a className="logo" href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <img className="logo-img" src="assets/logo-full.png" alt="모모, 테리" />
        </a>
        <nav className="nav">
          {items.map((it) => (
            <a key={it.id} href="#" className={route === it.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(it.id); }}>{it.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <button className="btn btn-primary btn-sm" onClick={() => go('materials')}>수업자료 보기</button>
          {onLogout ? (
            <button className="icon-logout-btn" onClick={onLogout} aria-label="로그아웃" title="로그아웃">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>
            </button>
          ) : (
            <button className="btn btn-ghost btn-sm" onClick={() => go('login')}>로그인</button>
          )}
          <button className="burger" onClick={onBurger} aria-label="메뉴">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileNav({ open, route, go, onLogout }) {
  const items = [
    { id: 'home', label: '홈' },
    { id: 'materials', label: '수업지원자료' },
    { id: 'family', label: '확장수업' },
    { id: 'about', label: '모모테리 소개' },
  ];
  return (
    <div className={'mobile-nav' + (open ? ' open' : '')}>
      {items.map((it) => (
        <a key={it.id} href="#" className={route === it.id ? 'active' : ''}
           onClick={(e) => { e.preventDefault(); go(it.id); }}>{it.label}</a>
      ))}
      {onLogout ? (
        <a href="#" onClick={(e) => { e.preventDefault(); onLogout(); }}>로그아웃</a>
      ) : (
        <a href="#" onClick={(e) => { e.preventDefault(); go('login'); }}>로그인</a>
      )}
    </div>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col" style={{ maxWidth: 260 }}>
            <a className="logo" href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ marginBottom: 14 }}>
              <img className="logo-img" src="assets/logo-full.png" alt="모모, 테리" />
            </a>
            <p style={{ color: 'var(--muted)', fontSize: 14, fontWeight: 600 }}>
              1~2세 발달을 돕는 모모·테리의 수업·확장수업 통합 콘텐츠
            </p>
          </div>
          <div className="footer-col">
            <h5>콘텐츠</h5>
            <a href="#" onClick={(e) => { e.preventDefault(); go('materials'); }}>수업지원자료</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go('family'); }}>확장수업자료</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>주제별 콘텐츠</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>주간 오디오</a>
          </div>
          <div className="footer-col">
            <h5>안내</h5>
            <a href="#" onClick={(e) => e.preventDefault()}>이용 방법</a>
            <a href="#" onClick={(e) => e.preventDefault()}>자주 묻는 질문</a>
            <a href="#" onClick={(e) => e.preventDefault()}>교사 인증</a>
            <a href="#" onClick={(e) => e.preventDefault()}>문의하기</a>
            <a href="admin.html">관리자 페이지</a>
          </div>
          <div className="footer-col">
            <h5>모모테리</h5>
            <a href="#" onClick={(e) => { e.preventDefault(); go('about'); }}>소개</a>
            <a href="#" onClick={(e) => e.preventDefault()}>공지사항</a>
            <a href="#" onClick={(e) => e.preventDefault()}>이용약관</a>
            <a href="#" onClick={(e) => e.preventDefault()}>개인정보처리방침</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 모모, 테리. 본 사이트는 예시 프로토타입입니다.</span>
          <span>고객센터 1500-0000 · 평일 09:00–18:00</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PlayIcon, Arrow, DownloadIcon, Ph, Face, Char, Header, MobileNav, Footer });