// find.jsx — Find a Child page. Shows all verified campaigns sorted by priority.
// To add a new child: add an entry to CAMPAIGNS in avatars.jsx with a priority value.
// To promote a child to the home page: give them one of the three lowest priority numbers.

const ALL_TAGS = ["All", "Urgent", "In treatment", "Almost there"];

function FindPage({ onOpenCampaign, onNavigate }) {
  const [activeTag, setActiveTag] = React.useState("All");

  const sorted = [...CAMPAIGNS].sort((a, b) => (a.priority || 99) - (b.priority || 99));
  const filtered = activeTag === "All" ? sorted : sorted.filter(c => c.tag === activeTag);

  return (
    <>
      {/* Hero */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Verified cases</div>
        <h1 className="display" style={{ fontSize: 40, marginBottom: 14 }}>
          Find a child to support.
        </h1>
        <p className="body-md" style={{ maxWidth: 520, marginBottom: 0 }}>
          Every child on this page is real, and every one of them is waiting. We've met their families. We know their doctors. We've seen the bills.
        </p>
      </Section>

      {/* Tag filters */}
      <Section bg="var(--bg-1)" style={{ paddingBottom: 0 }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {ALL_TAGS.map(tag => (
          <button
            key={tag}
            onClick={() => setActiveTag(tag)}
            style={{
              padding: "7px 14px", borderRadius: 999, border: 0,
              fontSize: 13, fontWeight: 600, cursor: "pointer",
              fontFamily: "var(--font-sans)",
              background: activeTag === tag ? "var(--ink-mid)" : "rgba(86,52,64,0.07)",
              color: activeTag === tag ? "#FBF7F4" : "var(--ink-deep)",
              transition: "background 0.15s ease, color 0.15s ease",
            }}
          >
            {tag}
          </button>
        ))}
      </div>
      </Section>

      {/* Campaign grid */}
      <Section>
        {filtered.length === 0 ? (
          <p className="body-md" style={{ textAlign: "center", padding: "24px 0" }}>
            No campaigns match that filter right now.
          </p>
        ) : (
          <div className="campaigns-grid" style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {filtered.map(c => (
              <CampaignCard key={c.id} c={c} onOpen={() => onOpenCampaign(c.id)} />
            ))}
          </div>
        )}
      </Section>

      {/* How ranking works — transparent note */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>How we prioritise</div>
        <h2 className="section-title" style={{ marginBottom: 12 }}>
          The most urgent cases rise to the top.
        </h2>
        <p className="body-md" style={{ marginBottom: 0, maxWidth: 520 }}>
          The kids at the top have the most urgent need and the least time. As situations change — as children get funded, or get closer — the order shifts. The home page always shows whoever needs the most help right now.
        </p>
      </Section>

      <Footer onNavigate={onNavigate} />
    </>
  );
}

Object.assign(window, { FindPage });