function Community() {
  const { t } = useLang();
  const cards = t.community.cards;

  const decor = [
    { icon: IconStar,     tint: 'bg-hanyang-50 text-hanyang-700' },
    { icon: IconBook,     tint: 'bg-gold-50 text-gold-700' },
    { icon: IconQuestion, tint: 'bg-ink-900 text-white' },
  ];

  return (
    <Section id="community" toneNav="02 Community"
             eyebrow={t.community.eyebrow}
             title={t.community.title}
             sub={t.community.sub}>
      <div className="grid md:grid-cols-3 gap-5">
        {cards.map((c, i) => (
          <Card key={i} className="p-6 flex flex-col gap-5 hover:shadow-card-lg transition-shadow group">
            <div className={cx('h-11 w-11 rounded-xl grid place-items-center', decor[i].tint)}>
              {React.createElement(decor[i].icon, { size: 22 })}
            </div>
            <TriBadge ko={c.tag} zh={c.tag2} en={c.tag3}/>
            <div>
              <h3 className="text-[20px] font-extrabold text-ink-900 tracking-tight">{c.title}</h3>
              <p className="mt-2 text-[14.5px] leading-relaxed text-ink-500">{c.body}</p>
            </div>

            {/* tiny mock */}
            <div className="mt-auto pt-4 border-t border-ink-100">
              {i === 0 && <ReviewStrip/>}
              {i === 1 && <ExamStrip/>}
              {i === 2 && <QnaStrip/>}
            </div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function ReviewStrip() {
  return (
    <div className="space-y-2">
      {[{n:'재무관리', s:4.1},{n:'조직행동론', s:4.5},{n:'데이터사이언스', s:3.8}].map((r,i)=>(
        <div key={i} className="flex items-center justify-between gap-3 text-[12px]">
          <div className="font-semibold text-ink-700 truncate">{r.n}</div>
          <div className="flex items-center gap-1 text-gold-600">
            <IconStar size={12}/>
            <span className="tabular-nums font-bold text-ink-800">{r.s.toFixed(1)}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function ExamStrip() {
  return (
    <div className="flex flex-wrap gap-1.5">
      {['2024-2 중간','2024-1 기말','2023-2 퀴즈','출제경향','핵심개념','풀이'].map((t,i)=>(
        <span key={i} className="px-2 py-0.5 text-[11px] font-semibold rounded-md bg-gold-50 text-gold-800 border border-gold-200">{t}</span>
      ))}
    </div>
  );
}

function QnaStrip() {
  return (
    <div className="space-y-2">
      <div className="flex items-start gap-2">
        <div className="mt-0.5 h-4 w-4 shrink-0 rounded-full bg-hanyang-600 text-white grid place-items-center text-[9px] font-bold">Q</div>
        <div className="text-[12px] text-ink-700">레버리지 효과 계산식이 헷갈려요…</div>
      </div>
      <div className="flex items-start gap-2">
        <div className="mt-0.5 h-4 w-4 shrink-0 rounded-full bg-gold-500 text-hanyang-900 grid place-items-center text-[9px] font-bold">A</div>
        <div className="text-[12px] text-ink-600">AI + 선배 답변이 <span className="font-semibold text-ink-800">12초</span> 안에 도착했어요.</div>
      </div>
    </div>
  );
}

Object.assign(window, { Community });