// Resource Hub + Resource Detail (resources are first-class pages)

function ResourceHub() {
  const [cat, setCat] = useState("All");

  // Build a sorted, deduped list of categories actually present.
  const presentCategories = useMemo(() => {
    const seen = new Set(RESOURCES.map((r) => r.category));
    return RESOURCE_CATEGORIES.filter((c) => seen.has(c));
  }, []);

  const filtered = cat === "All" ? RESOURCES : RESOURCES.filter((r) => r.category === cat);

  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Resource Hub</div>
          <h1>{RESOURCES_PAGE.hero.headline.split(" decisions.")[0]} <em>decisions.</em></h1>
          <p>{RESOURCES_PAGE.hero.subheadline}</p>
        </div>
      </section>

      <div className="container">
        <p style={{ maxWidth: "62ch", color: "var(--ink-2)", fontSize: 17, lineHeight: 1.65, padding: "8px 0 16px" }}>
          {RESOURCES_PAGE.intro}
        </p>

        <div className="library-controls" style={{ position: "static" }}>
          <div className="filter-row">
            {["All", ...presentCategories].map((c) => (
              <button
                key={c}
                className={"filter-pill " + (cat === c ? "is-active" : "")}
                onClick={() => setCat(c)}
              >
                {c}
              </button>
            ))}
          </div>
        </div>

        <div className="results-meta">
          {filtered.length} resource{filtered.length === 1 ? "" : "s"}
          {cat !== "All" && <> · in <span style={{ color: "var(--ink)" }}>{cat}</span></>}
        </div>

        {filtered.length === 0 ? (
          <div className="empty-state">
            <h3>No resources in this category yet.</h3>
            <p>More are being added. Try another category, or come back soon.</p>
          </div>
        ) : (
          <div className="resources-grid">
            {filtered.map((r) => <ResourceCard key={r.slug} resource={r} />)}
          </div>
        )}

        <div style={{ marginTop: 64, padding: 32, background: "var(--bg-2)", border: "1px solid var(--rule)", borderRadius: 14, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow mono">Use the resources with founders</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 24, letterSpacing: "-0.01em", maxWidth: "40ch" }}>
              Running a programme, accelerator, or founder cohort? You can use these in your own work.
            </div>
          </div>
          <Link to="/contact" className="btn btn-ghost">Get in touch →</Link>
        </div>
      </div>
    </Page>
  );
}

function ResourceDetail({ slug }) {
  const resource = resourceBySlug(slug);
  if (!resource) return <NotFound />;

  // Find lessons that reference this resource.
  const linkedLessons = LESSONS.filter((l) => l.resource === resource.slug);

  return (
    <Page>
      <section className="chapter-hero">
        <div className="container">
          <Link to="/resources" className="back-link">← All resources</Link>
          <div className="chapter-hero-eyebrow">
            <span className="mono">{resource.format}</span>
            <span style={{ width: 24, height: 1, background: "var(--rule-2)" }} />
            <Tag>{resource.category}</Tag>
            {resource.placeholder && (
              <>
                <span style={{ width: 24, height: 1, background: "var(--rule-2)" }} />
                <span className="mono" style={{ color: "var(--ink-3)" }}>Coming soon</span>
              </>
            )}
          </div>
          <h1>{resource.title}</h1>
          <p className="chapter-hero-intro">{resource.summary}</p>
        </div>
      </section>

      <div className="container">
        <div className="chapter-body">
          <aside className="chapter-toc">
            <div className="toc-h">In this resource</div>
            <a href="#when" className="toc-link">When to use it</a>
            <a href="#includes" className="toc-link">What it includes</a>
            <a href="#about" className="toc-link">About the tool</a>
            {linkedLessons.length > 0 && <a href="#lessons" className="toc-link">Related lessons</a>}
            <a href="#download" className="toc-link">Download</a>
          </aside>

          <div>
            <section id="when" className="chapter-sec">
              <h2><span className="num">01</span>When to use it</h2>
              <div className="body"><p>{resource.whenToUse}</p></div>
            </section>

            <section id="includes" className="chapter-sec">
              <h2><span className="num">02</span>What it includes</h2>
              <div className="body">
                <ul>{resource.includes.map((x, i) => <li key={i}>{x}</li>)}</ul>
              </div>
            </section>

            <section id="about" className="chapter-sec">
              <h2><span className="num">03</span>About the tool</h2>
              <div className="body"><p>{resource.pageCopy}</p></div>
            </section>

            {linkedLessons.length > 0 && (
              <section id="lessons" style={{ paddingTop: 48, borderTop: "1px solid var(--rule)", marginTop: 24 }}>
                <div className="eyebrow mono">Pairs with</div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, letterSpacing: "-0.01em", margin: "0 0 24px", fontWeight: 500 }}>
                  Read alongside {linkedLessons.length === 1 ? "this lesson" : "these lessons"}.
                </h3>
                <div className="lessons-grid">
                  {linkedLessons.map((l) => <LessonCard key={l.slug} lesson={l} />)}
                </div>
              </section>
            )}

            <section id="download" className="chapter-sec callout" style={{ marginTop: 48 }}>
              <h2><span className="num">04</span>Use it this week</h2>
              <div className="body">
                {resource.placeholder ? (
                  <p>This worksheet is being prepared. Use the structure above as a starting point and check back soon for the downloadable version.</p>
                ) : (
                  <p>Download the worksheet, work through it solo, or run it with your team. Free to remix.</p>
                )}
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16 }}>
                  <button className="btn btn-primary" onClick={(e) => e.preventDefault()} disabled={resource.placeholder}>
                    {resource.placeholder ? "Coming soon" : "Download worksheet"} {!resource.placeholder && <span className="arrow">↓</span>}
                  </button>
                  <Link to="/resources" className="btn btn-secondary">Browse all resources</Link>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </Page>
  );
}

Object.assign(window, { ResourceHub, ResourceDetail });