window.TrendCard = function TrendCard({ trend, onOpen, saved, onToggleSave, activeTag, onTagClick, read }) {
  const latestAgo = window.timeAgo(trend.latestPublishedAt || trend.latestFetchedAt);

  return (
    <article className={`trend-list-row ${read ? "read" : ""}`}>
      <div className="trend-list-score">
        <div className="value">{trend.score}</div>
      </div>

      <div className="trend-list-body">
        <h3 className="trend-list-title">
          <a onClick={(e) => { e.preventDefault(); onOpen(); }}>{trend.title}</a>
          <span className="trend-domain">({window.urlDomain(trend.primaryUrl)})</span>
        </h3>

        <div className="trend-tags compact">
          {trend.tags.map((t) => {
            const meta = window.TAGS_META[t] || {};
            return (
              <span key={t} className={`tag clickable ${activeTag === t ? "active" : ""}`} onClick={(e) => { e.stopPropagation(); onTagClick(t); }}>
                <span className="swatch" style={{ background: meta.color || "#7c8290" }}></span>
                {t}
              </span>
            );
          })}
        </div>

        <div className="trend-list-meta">
          <span>{trend.regionFlag}</span>
          <span className="dot">·</span>
          <span>{latestAgo}</span>
          <span className="dot">·</span>
          <button className={`save-btn ${saved ? "saved" : ""}`} onClick={onToggleSave} title="Save">
            {saved ? "★ 저장됨" : "☆ 저장"}
          </button>
        </div>
      </div>
    </article>
  );
};

window.TrendFeed = function TrendFeed({ trends, onOpen, saved, onToggleSave, readSet, activeTag, onTagClick, onClearTag, viewMode, onViewMode, region, onRegion, regionCounts, density, onDensityChange }) {
  const { useState, useEffect, useRef } = React;
  const INITIAL_VISIBLE = 24;
  const LOAD_INCREMENT = 1;
  const LOAD_AHEAD_PX = 240;
  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE);
  const sentinelRef = useRef(null);

  useEffect(() => {
    setVisibleCount(INITIAL_VISIBLE);
  }, [trends, viewMode, region, activeTag]);

  useEffect(() => {
    const maybeLoadMore = () => {
      if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - LOAD_AHEAD_PX) {
        setVisibleCount((count) => Math.min(count + LOAD_INCREMENT, trends.length));
      }
    };

    maybeLoadMore();
    window.addEventListener("scroll", maybeLoadMore, { passive: true });
    window.addEventListener("resize", maybeLoadMore);
    return () => {
      window.removeEventListener("scroll", maybeLoadMore);
      window.removeEventListener("resize", maybeLoadMore);
    };
  }, [trends.length]);

  useEffect(() => {
    if (visibleCount < trends.length) {
      const timer = setTimeout(() => {
        if (window.innerHeight >= document.documentElement.scrollHeight - LOAD_AHEAD_PX) {
          setVisibleCount((count) => Math.min(count + LOAD_INCREMENT, trends.length));
        }
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [visibleCount, trends.length]);

  const visible = trends.slice(0, visibleCount);
  const viewLabels = [
    { key: "now", label: "Now" },
    { key: "period", label: "Period" },
    { key: "new", label: "New" },
  ];
  const regionTabs = [
    { key: "all", label: "All", flag: "🌐" },
    { key: "KR", label: "Korea", flag: "🇰🇷" },
    { key: "JP", label: "Japan", flag: "🇯🇵" },
    { key: "CN", label: "China", flag: "🇨🇳" },
    { key: "US", label: "US/EN", flag: "🇺🇸" },
  ];

  return (
    <>
      <section className="hero-panel">
        <div className="hero-copy">
          <span className="eyebrow">Trend-first curation</span>
          <h1>게임 렌더링 변화의 핵심만, 트렌드 단위로 정리합니다.</h1>
          <p>중복 링크를 줄이고, 왜 중요한지와 실무 영향을 함께 보여주는 편집형 뷰입니다.</p>
        </div>
        <div className="hero-stats">
          <div className="stat"><span className="n">{window.TREND_STATS?.totalTrends || trends.length}</span><span className="k">Trends</span></div>
          <div className="stat"><span className="n">{window.TREND_STATS?.totalArticles || 0}</span><span className="k">Articles</span></div>
          <div className="stat"><span className="n">{window.LAST_UPDATED_LABEL || "-"}</span><span className="k">Updated</span></div>
        </div>
      </section>

      <div className="region-bar">
        <div className="region-tabs">
          {regionTabs.map((r) => (
            <button key={r.key} className={region === r.key ? "active" : ""} onClick={() => onRegion(r.key)}>
              <span className="flag">{r.flag}</span>
              <span>{r.label}</span>
              <span className="count">{regionCounts[r.key] || 0}</span>
            </button>
          ))}
        </div>
        <div className="spacer"></div>
        <div className="sort-group view-mode-group">
          {viewLabels.map((v) => (
            <button key={v.key} className={viewMode === v.key ? "active" : ""} onClick={() => onViewMode(v.key)}>{v.label}</button>
          ))}
          <button className={density === "compact" ? "active" : ""} onClick={() => onDensityChange(density === "compact" ? "comfortable" : "compact")}>{density === "compact" ? "Comfort" : "Compact"}</button>
        </div>
      </div>

      {activeTag && (
        <div className="chip-bar">
          <span className="label">FILTER</span>
          <span className="chip active">
            <span className="swatch" style={{ background: (window.TAGS_META[activeTag] || {}).color || "#7c8290" }}></span>
            {activeTag}
            <span className="x" onClick={onClearTag} style={{ cursor: "pointer" }}>×</span>
          </span>
        </div>
      )}

      <section className="spotlight-panel">
        <div className="section-head">
          <h2>Editor Spotlight</h2>
          <span>점수와 실무 파급력이 높은 트렌드를 우선 노출합니다.</span>
        </div>
        <div className="spotlight-list">
          {trends.slice(0, 3).map((trend) => (
            <button key={trend.id} className="spotlight-item" onClick={() => onOpen(trend.id)}>
              <span className="score">{trend.score}</span>
              <span className="title">{trend.title}</span>
            </button>
          ))}
        </div>
      </section>

      <div className="feed-list">
        {trends.length === 0 && (
          <div style={{ padding: "60px 22px", textAlign: "center", color: "var(--fg-3)", fontFamily: "var(--mono)", fontSize: 12 }}>
            조건과 일치하는 트렌드가 없습니다.
          </div>
        )}

        {visible.map((trend) => (
          <window.TrendCard
            key={trend.id}
            trend={trend}
            onOpen={() => onOpen(trend.id)}
            saved={saved.has(trend.id)}
            onToggleSave={() => onToggleSave(trend.id)}
            read={readSet.has(trend.id)}
            activeTag={activeTag}
            onTagClick={onTagClick}
          />
        ))}

        {visibleCount < trends.length && (
          <div ref={sentinelRef} style={{ padding: "20px", textAlign: "center", color: "var(--fg-4)", fontFamily: "var(--mono)", fontSize: 11 }}>
            로딩 중… ({visibleCount}/{trends.length})
          </div>
        )}
      </div>
    </>
  );
};