/* Sidebar widgets — trending tags, conferences, curators, newsletter */

window.Sidebar = function Sidebar({ onTagClick, activeTag }) {
  return (
    <aside className="sidebar">
      <div className="newsletter">
        <div className="h">📬 Weekly Digest</div>
        <div className="title">매주 화요일, 큐레이션된 5선</div>
        <div className="desc">중·일·미·한 4개 지역의 게임 렌더링·테크아트 소식을 한국어 요약으로 메일함에.</div>
        <form onSubmit={(e) => { e.preventDefault(); alert("구독 완료!"); }}>
          <input type="email" placeholder="you@studio.com" required />
          <button type="submit">SUBSCRIBE</button>
        </form>
        <div className="stats">
          <span><strong>4,217</strong> 구독자</span>
          <span><strong>87</strong> 호 발행</span>
        </div>
      </div>

      <div className="side-card">
        <div className="head">
          <span className="title"># 트렌딩 태그</span>
          <span className="meta">7-DAY</span>
        </div>
        <div className="body">
          <ul className="trending-list">
            {window.TRENDING_TAGS.map((t, i) => {
              const meta = window.TAGS_META[t.tag] || {};
              const isActive = activeTag === t.tag;
              return (
                <li key={t.tag} onClick={() => onTagClick(t.tag)} style={{ color: isActive ? "var(--primary)" : undefined }}>
                  <span className="rank">{String(i+1).padStart(2, "0")}</span>
                  <span className="name">
                    <span className="swatch" style={{ background: meta.color, width: 6, height: 6, borderRadius: "50%", display: "inline-block" }}></span>
                    {t.tag}
                  </span>
                  <span className="count">{t.count}</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>

      <div className="side-card">
        <div className="head">
          <span className="title">📅 컨퍼런스 일정</span>
          <span className="meta">2026</span>
        </div>
        <div className="body">
          <ul className="conf-list">
            {window.UPCOMING_CONFS.map((c) => (
              <li key={c.name} className={c.status === "soon" ? "soon" : ""}>
                <span className="pip" style={{ background: c.color }}></span>
                <div>
                  <div className="name">{c.name} {c.status === "soon" && <span style={{ color: "var(--accent)", fontSize: 10, marginLeft: 6 }}>● 임박</span>}</div>
                  <div className="meta">{c.where}<span className="dot">·</span>{c.when}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="side-card">
        <div className="head">
          <span className="title">⚡ 큐레이터 / 기여자</span>
          <span className="meta">TOP 5</span>
        </div>
        <div className="body">
          <ul className="curator-list">
            {window.CURATORS.map((c) => (
              <li key={c.handle}>
                <div className="avatar">{c.name.slice(0, 1)}</div>
                <div className="info">
                  <div className="name">{c.name} <span style={{ color: "var(--fg-3)", fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 400 }}>@{c.handle}</span></div>
                  <div className="role">{c.role}</div>
                </div>
                <div className="pts">{c.points.toLocaleString()}</div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="side-card">
        <div className="head">
          <span className="title">📡 RSS / API</span>
        </div>
        <div className="body">
          <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 10, lineHeight: 1.5 }}>
            전체 피드 또는 지역별 피드를 RSS로 구독하세요.
          </div>
          <div style={{ display: "grid", gap: 5, fontFamily: "var(--mono)", fontSize: 11 }}>
            {[
              { lbl: "/feed.xml", desc: "전체" },
              { lbl: "/feed/kr.xml", desc: "🇰🇷 한국" },
              { lbl: "/feed/jp.xml", desc: "🇯🇵 일본" },
              { lbl: "/feed/cn.xml", desc: "🇨🇳 중국" },
              { lbl: "/feed/us.xml", desc: "🇺🇸 미국/EN" },
            ].map((r) => (
              <a key={r.lbl} style={{ display: "flex", justifyContent: "space-between", padding: "5px 8px", background: "var(--bg-3)", borderRadius: 3, color: "var(--fg-2)", cursor: "pointer", border: "1px solid var(--line)" }}>
                <span style={{ color: "var(--upvote)" }}>{r.lbl}</span>
                <span style={{ color: "var(--fg-3)" }}>{r.desc}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </aside>
  );
};