// 돼지엄마 — Home, Board list screens
const D = window.EDU_DATA;

// ───────── HOME FEED ─────────
function HomeScreen({ onNav, onPost, onSearch, onBell, t }) {
  const [hotIdx, setHotIdx] = useState(0);
  const heroRef = useRef(null);

  useEffect(() => {
    const id = setInterval(() => setHotIdx((i) => (i + 1) % D.hotIssues.length), 4500);
    return () => clearInterval(id);
  }, []);

  const tone = t.tone; // toss | danggn
  const cur = D.hotIssues[hotIdx];

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar showLogo badge="3" onSearch={onSearch} onBell={onBell} />

      {/* Hero carousel */}
      <div style={{ padding: '12px 16px 0' }}>
        <div ref={heroRef} style={{
          background: tone === 'danggn'
            ? `linear-gradient(135deg, ${cur.tone === 'red' ? '#FFEDE6' : cur.tone === 'blue' ? '#E8EFFF' : cur.tone === 'orange' ? '#FFF1EA' : '#E0F7EF'} 0%, var(--c-bg-primary) 100%)`
            : 'var(--c-bg-primary)',
          borderRadius: 'var(--card-radius)', padding: 18,
          boxShadow: 'var(--card-shadow)', border: 'var(--card-border, none)',
          minHeight: 142, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          position: 'relative', overflow: 'hidden',
          transition: 'background .4s',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <span style={{
              fontSize: 11, fontWeight: 700, padding: '3px 8px', borderRadius: 4,
              background: cur.tone === 'red' ? 'var(--c-danger)' : cur.tone === 'blue' ? 'var(--c-primary)' : cur.tone === 'orange' ? 'var(--c-secondary)' : 'var(--c-verified)',
              color: '#fff', letterSpacing: '0.02em',
            }}>{cur.tag}</span>
            <span style={{ fontSize: 11, color: 'var(--c-text-tertiary)', fontWeight: 600 }}>오늘의 핫이슈</span>
          </div>
          <div onClick={() => onPost(cur.id)} style={{ cursor: 'pointer' }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--c-text-primary)', lineHeight: 1.4, letterSpacing: '-0.02em', marginBottom: 10, textWrap: 'pretty' }}>
              {cur.title}
            </div>
            <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>{cur.meta}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
            <Stats like={cur.stats.like} comment={cur.stats.comment} view={cur.stats.view} />
            <div style={{ display: 'flex', gap: 4 }}>
              {D.hotIssues.map((_, i) => (
                <div key={i} style={{
                  width: i === hotIdx ? 16 : 5, height: 5, borderRadius: 3,
                  background: i === hotIdx ? 'var(--c-primary)' : 'var(--c-border)',
                  transition: 'all .3s',
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Recommended */}
      <SectionHeader icon="📚" title="강남구 고2 학부모님께 추천" action="더보기" onAction={() => onNav('board')} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {D.recommendedPosts.map((p) => (
          <Card key={p.id} onClick={() => onPost(p.id)} padding={14}>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{
                width: 72, height: 72, borderRadius: 10, background: p.thumbColor,
                display: 'grid', placeItems: 'center', fontSize: 28, flexShrink: 0,
              }}>{p.thumb}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-text-primary)', lineHeight: 1.35, marginBottom: 4, letterSpacing: '-0.02em', textWrap: 'pretty' }}>
                  {p.title}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--c-text-sub)', lineHeight: 1.4, marginBottom: 8, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}>
                  {p.preview}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <AuthorLine author={p.author} verified={p.verified} senior={p.senior} honor={p.honor} badgeEmphasis={t.badgeEmphasis} />
                </div>
                <div style={{ marginTop: 6 }}>
                  <Stats like={p.stats.like} comment={p.stats.comment} />
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* Events */}
      <SectionHeader icon="📅" title="이번 주 박람회·설명회" action="전체" />
      <div style={{ padding: '0 16px', overflowX: 'auto', display: 'flex', gap: 10, paddingBottom: 4, scrollbarWidth: 'none' }}>
        {D.events.map((e) => (
          <div key={e.id} style={{
            minWidth: 180, background: 'var(--c-bg-primary)',
            borderRadius: 'var(--card-radius)', padding: 14, boxShadow: 'var(--card-shadow)', border: 'var(--card-border, none)',
            display: 'flex', flexDirection: 'column', gap: 6, cursor: 'pointer',
          }}>
            <span style={{
              alignSelf: 'flex-start', fontSize: 10.5, fontWeight: 700, padding: '3px 7px', borderRadius: 4,
              background: e.tag === '오프라인' ? 'rgba(44,91,255,.10)' : 'rgba(0,200,150,.12)',
              color: e.tag === '오프라인' ? 'var(--c-primary)' : 'var(--c-verified)',
            }}>{e.tag}</span>
            <div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.35, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>{e.title}</div>
            <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>{e.date} · {e.place}</div>
          </div>
        ))}
      </div>

      {/* Discussions */}
      <SectionHeader icon="💬" title="활발한 토론" action="더보기" onAction={() => onNav('board')} />
      <div style={{ padding: '0 16px' }}>
        <Card padding={0}>
          {D.discussions.map((d, i) => (
            <div key={d.id} onClick={() => onPost(d.id)} style={{
              padding: '14px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--c-border-soft)',
              display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
            }}>
              {d.hot && <span style={{ fontSize: 14 }}>🔥</span>}
              <div style={{ flex: 1, fontSize: 14, fontWeight: 500, color: 'var(--c-text-primary)', lineHeight: 1.4, letterSpacing: '-0.01em', textWrap: 'pretty' }}>{d.title}</div>
              <div style={{ fontSize: 12, color: 'var(--c-text-sub)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{d.comments}</div>
            </div>
          ))}
        </Card>
      </div>

      {/* Consultants */}
      <SectionHeader icon="⭐" title="추천 컨설턴트" action="전체" onAction={() => onNav('consult')} />
      <div style={{ padding: '0 16px', overflowX: 'auto', display: 'flex', gap: 10, paddingBottom: 24, scrollbarWidth: 'none' }}>
        {D.consultants.map((c) => (
          <div key={c.id} style={{
            minWidth: 180, background: 'var(--c-bg-primary)',
            borderRadius: 'var(--card-radius)', padding: 14, boxShadow: 'var(--card-shadow)', border: 'var(--card-border, none)',
            display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8, cursor: 'pointer',
          }}>
            <Avatar initial={c.avatar} bg={c.avatarBg} size={48} />
            <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--c-text-primary)' }}>{c.name}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {c.tags.slice(0, 2).map((tg, i) => (
                <Badge key={i} kind="expert" label={tg} emphasis={t.badgeEmphasis} size="xs" />
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--c-text-sub)' }}>
              <span style={{ color: '#FFB700' }}>★</span>
              <span style={{ fontWeight: 700, color: 'var(--c-text-primary)' }}>{c.rating}</span>
              <span>({c.reviews})</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── BOARD LIST ─────────
function BoardScreen({ onPost, onNew, t }) {
  const [cat, setCat] = useState('admit');

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="게시판" />

      {/* Category tabs */}
      <div style={{
        background: 'var(--c-bg-primary)', borderBottom: '1px solid var(--c-border)',
        display: 'flex', overflowX: 'auto', padding: '0 8px', position: 'sticky', top: 52, zIndex: 9,
        scrollbarWidth: 'none',
      }}>
        {D.boardCategories.map((c) => (
          <button key={c.id} onClick={() => setCat(c.id)} style={{
            padding: '12px 14px', border: 0, background: 'transparent', cursor: 'pointer',
            fontSize: 14, fontWeight: cat === c.id ? 700 : 500,
            color: cat === c.id ? 'var(--c-text-primary)' : 'var(--c-text-sub)',
            borderBottom: cat === c.id ? '2px solid var(--c-primary)' : '2px solid transparent',
            whiteSpace: 'nowrap', letterSpacing: '-0.01em',
          }}>{c.label}</button>
        ))}
      </div>

      {/* Sort row */}
      <div style={{ padding: '12px 16px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>전체 <span style={{ fontWeight: 700, color: 'var(--c-text-primary)' }}>1,247</span>개</div>
        <button style={{ border: 0, background: 'transparent', fontSize: 12.5, color: 'var(--c-text-sub)', display: 'flex', alignItems: 'center', gap: 2, cursor: 'pointer' }}>
          최신순 <Icon name="chevR" size={12} />
        </button>
      </div>

      {/* Posts */}
      <div style={{ padding: '4px 16px 100px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {D.boardPosts.map((p) => (
          <Card key={p.id} onClick={() => onPost(p.id)} padding={14}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 6 }}>
              {p.pinned && <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--c-text-sub)', padding: '2px 6px', background: 'var(--c-bg-secondary)', borderRadius: 4 }}>📌 공지</span>}
              {!p.pinned && <span style={{
                fontSize: 11, fontWeight: 600, padding: '2px 6px', borderRadius: 4,
                background: p.tag === '합격기' ? 'rgba(255,184,0,.16)' : p.tag === '학습' ? 'rgba(0,200,150,.12)' : 'rgba(44,91,255,.10)',
                color: p.tag === '합격기' ? '#A77A00' : p.tag === '학습' ? 'var(--c-verified)' : 'var(--c-primary)',
              }}>{p.tag}</span>}
              {p.hot && <Badge kind="hot" emphasis="strong" size="xs" />}
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--c-text-primary)', lineHeight: 1.4, marginBottom: 8, letterSpacing: '-0.02em', textWrap: 'pretty' }}>
              {p.title}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 6 }}>
              <AuthorLine author={p.author} verified={p.verified} senior={p.senior} honor={p.honor} meta={p.meta} badgeEmphasis={t.badgeEmphasis} />
              <Stats like={p.stats.like} comment={p.stats.comment} view={p.stats.view} />
            </div>
          </Card>
        ))}
      </div>

      {/* FAB */}
      <button onClick={onNew} style={{
        position: 'fixed', right: 'max(16px, calc(50vw - 188px))', bottom: 80,
        width: 56, height: 56, borderRadius: 28, border: 0, cursor: 'pointer',
        background: 'var(--c-primary)', color: '#fff',
        boxShadow: '0 4px 16px rgba(44,91,255,.35)',
        display: 'grid', placeItems: 'center',
        zIndex: 8,
      }}>
        <Icon name="plus" size={24} stroke={2.4} />
      </button>
    </div>
  );
}

Object.assign(window, { HomeScreen, BoardScreen });