// 자료실
const ResourcesPage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;
  const cats = ["전체", "제품 브로슈어", "도입 가이드", "사용 매뉴얼", "정책·규정", "교육 자료", "양식"];
  const [activeCat, setActiveCat] = React.useState("전체");
  const [q, setQ] = React.useState("");

  const filtered = D.resources.filter(r => {
    if (activeCat !== "전체" && r.cat !== activeCat) return false;
    if (q && !r.title.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  const featured = D.resources.filter(r => r.featured);

  const typeColor = (t) => ({
    PDF: "#E11D48",
    PPTX: "#D97706",
    DOCX: "#2563EB",
    XLSX: "#059669",
  })[t] || "#64748B";

  return (
    <main>
      {/* Sub hero */}
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">PAS / Resources</div>
          <h1 className="pas-sub-hero-title">자료실</h1>
          <p className="pas-sub-hero-desc">
            제품 소개서, 도입 가이드, 사용 매뉴얼, 교육 자료까지 — PAS와 함께하는 약국 운영에 필요한 모든 자료를 제공합니다.
          </p>
        </div>
      </section>

      {/* Featured */}
      <section className="pas-section pas-section--tight">
        <div className="pas-container">
          <div className="pas-eyebrow">Featured</div>
          <h2 style={{fontSize: 32, marginBottom: 28}}>가장 많이 찾는 자료</h2>
          <div className="pas-res-featured-grid">
            {featured.map((r, i) => (
              <div key={i} className="pas-res-featured-card">
                <div className="pas-res-type-badge" style={{color: typeColor(r.type), borderColor: typeColor(r.type)}}>{r.type}</div>
                <div className="pas-res-featured-cat mono">{r.cat}</div>
                <div className="pas-res-featured-title">{r.title}</div>
                <div className="pas-res-featured-meta">
                  <span className="mono">{r.size}</span>
                  <span className="mono muted">· {r.date}</span>
                  <span className="mono muted">· 다운로드 {r.downloads.toLocaleString()}</span>
                </div>
                <button className="pas-btn pas-btn-sm" style={{marginTop: 20}}>
                  다운로드 <Icon name="download" size={14}/>
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* All resources */}
      <section className="pas-section pas-section--tight" style={{background: "var(--surface)", borderTop: "1px solid var(--line)"}}>
        <div className="pas-container">
          <div className="pas-board-toolbar">
            <div className="pas-board-cats">
              {cats.map(c => (
                <button
                  key={c}
                  className={`pas-board-cat ${activeCat === c ? "is-on" : ""}`}
                  onClick={() => setActiveCat(c)}
                >
                  {c}
                  <span className="pas-board-cat-count">
                    {c === "전체" ? D.resources.length : D.resources.filter(r => r.cat === c).length}
                  </span>
                </button>
              ))}
            </div>
            <div className="pas-board-search">
              <Icon name="search" size={16}/>
              <input
                type="text"
                placeholder="자료명으로 검색"
                value={q}
                onChange={e => setQ(e.target.value)}
              />
            </div>
          </div>

          <div className="pas-res-grid">
            {filtered.map((r, i) => (
              <div key={i} className="pas-res-card">
                <div className="pas-res-card-head">
                  <div className="pas-res-type-badge" style={{color: typeColor(r.type), borderColor: typeColor(r.type)}}>{r.type}</div>
                  <div className="pas-res-card-cat mono">{r.cat}</div>
                </div>
                <div className="pas-res-card-title">{r.title}</div>
                <div className="pas-res-card-meta">
                  <span className="mono">{r.size}</span>
                  <span className="mono muted">{r.date}</span>
                </div>
                <div className="pas-res-card-footer">
                  <span className="mono muted">↓ {r.downloads.toLocaleString()}</span>
                  <button className="pas-res-card-dl">
                    다운로드 <Icon name="download" size={13}/>
                  </button>
                </div>
              </div>
            ))}
          </div>

          {filtered.length === 0 && (
            <div className="pas-board-empty">
              <Icon name="inbox" size={28}/>
              <div>검색 결과가 없습니다</div>
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <section className="pas-section pas-section--tight">
        <div className="pas-container" style={{textAlign: "center"}}>
          <h2 style={{fontSize: 36, marginBottom: 16}}>필요한 자료가 없으신가요?</h2>
          <p style={{color: "var(--ink-soft)", marginBottom: 28, fontSize: 17}}>
            맞춤형 자료가 필요하시면 고객지원팀으로 문의해 주세요. 영업일 기준 1일 이내 회신드립니다.
          </p>
          <button className="pas-btn pas-btn-lg" onClick={onContact}>
            자료 요청하기 <Icon name="arrow" size={16}/>
          </button>
        </div>
      </section>
    </main>
  );
};

window.ResourcesPage = ResourcesPage;