/* Cornell AI Network — Jobs board + full Events listing (public site) */
const JE_DS = window.CornellAINetworkDesignSystem_392896;
const { Button: JeBtn, SectionIntro: JeIntro, EventCard: JeEventCard, Eyebrow: JeEyebrow, Tag: JeTag } = JE_DS;
const JePhoto = (n) => `../design-system/assets/photos/${n}`;

/* ============================= JOBS ============================= */
function JobsPage({ onNavigate }) {
  const [digest, setDigest] = React.useState(null);
  const [q, setQ] = React.useState("");
  React.useEffect(() => {
    fetch("../design-system/assets/data/april-2026-digest.json").then((r) => r.json()).then(setDigest).catch(() => {});
  }, []);
  const jobsSection = digest && digest.sections.find((s) => s.id === "jobs");
  const jobs = jobsSection ? jobsSection.items : [];
  const filtered = jobs.filter((j) => (j.role + " " + j.org + " " + j.location).toLowerCase().includes(q.toLowerCase()));

  return (
    <main>
      {/* Hero */}
      <section style={{ background: "var(--cain-ink)", color: "#fff", padding: "var(--space-9) var(--gutter) var(--space-8)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <JeEyebrow tone="light" style={{ marginBottom: "16px" }}>Careers</JeEyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.6rem,5vw,4.2rem)", lineHeight: 1.05, margin: "0 0 18px", color: "#fff" }}>
            AI &amp; ML roles from the Cornell network
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.6, opacity: 0.9, margin: "0 0 28px", maxWidth: "560px" }}>
            Openings posted by Cornellians and surfaced through Cornell Career Services — refreshed with each monthly digest.
          </p>
          <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
            <JeBtn as="a" href="https://bigredai.org/jobs" target="_blank" variant="solid">Full job board</JeBtn>
            <JeBtn variant="light" onClick={() => onNavigate("login")}>Post a role</JeBtn>
          </div>
        </div>
      </section>

      {/* Listings */}
      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "920px", margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "20px", flexWrap: "wrap", marginBottom: "var(--space-6)" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h2)", margin: 0, color: "var(--text-strong)" }}>
              Featured positions <span style={{ color: "var(--text-muted)", fontSize: "0.6em", fontStyle: "italic" }}>{filtered.length}</span>
            </h2>
            <input
              value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search roles, companies…"
              style={{ minWidth: "240px", background: "var(--cain-white)", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-sm)", padding: "10px 14px", fontFamily: "var(--font-body)", fontSize: "14.5px", color: "var(--text-body)", outline: "none" }}
            />
          </div>
          {!digest && <p style={{ fontFamily: "var(--font-body)", color: "var(--text-muted)" }}>Loading roles…</p>}
          <div style={{ display: "flex", flexDirection: "column", gap: "0" }}>
            {filtered.map((j, i) => (
              <a key={i} href={j.url} target="_blank" rel="noopener" style={{
                display: "grid", gridTemplateColumns: "1fr auto", gap: "20px", alignItems: "center",
                padding: "22px 4px", borderTop: i === 0 ? "1px solid var(--border-soft)" : "none",
                borderBottom: "1px solid var(--border-soft)", cursor: "pointer", color: "inherit",
              }}>
                <div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "20px", margin: "0 0 5px", color: "var(--text-strong)" }}>{j.role}</h3>
                  <div style={{ display: "flex", gap: "16px", flexWrap: "wrap", marginBottom: "8px", fontFamily: "var(--font-ui)", fontSize: "13.5px", color: "var(--text-muted)" }}>
                    <span>{j.org}</span><span>·</span><span>{j.location}</span>
                  </div>
                  <p style={{ fontFamily: "var(--font-body)", fontSize: "14.5px", lineHeight: 1.55, color: "var(--text-body)", margin: 0, maxWidth: "600px" }}>{j.body}</p>
                </div>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--cain-red)", whiteSpace: "nowrap", display: "inline-flex", alignItems: "center", gap: "6px" }}>
                  View role
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                </span>
              </a>
            ))}
          </div>
          {jobsSection && jobsSection.footerLinks && (
            <div style={{ display: "flex", gap: "20px", flexWrap: "wrap", marginTop: "var(--space-6)" }}>
              {jobsSection.footerLinks.map((l, i) => (
                <a key={i} href={l.url} target="_blank" rel="noopener" style={{ fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--cain-red)" }}>{l.label}</a>
              ))}
            </div>
          )}
        </div>
      </section>

      <CAIN_CTABand tone="red" />
    </main>
  );
}

/* ============================= EVENTS ============================= */
function EventsPage({ onNavigate }) {
  const [digest, setDigest] = React.useState(null);
  React.useEffect(() => {
    fetch("../design-system/assets/data/april-2026-digest.json").then((r) => r.json()).then(setDigest).catch(() => {});
  }, []);
  // photos rotate across the event list
  const imgs = ["event-mixer.jpg", "event-workshop.jpg", "workshop-talk.jpg", "build-founders.jpg", "campus-building.jpg"];
  const tagFor = (name) => /summit|frontiers/i.test(name) ? "Summit" : /demo|hub/i.test(name) ? "Showcase" : /workshop|community|benchmark/i.test(name) ? "Workshop" : "Convening";
  const events = digest ? (digest.sections.find((s) => s.id === "events-upcoming") || {}).items || [] : [];

  // featured = first event
  const featured = events[0];
  const rest = events.slice(1);
  const stripLinks = (t) => (t || "").replace(/\s*\[[^\]]+\]\([^)]+\)/g, "").trim();

  return (
    <main>
      {/* Hero / featured */}
      <section style={{ background: "var(--cain-maroon)", color: "#fff", padding: "var(--space-9) var(--gutter) var(--section-y)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <JeEyebrow tone="light" style={{ marginBottom: "16px" }}>Events</JeEyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.6rem,5vw,4.2rem)", lineHeight: 1.05, margin: "0 0 18px", color: "#fff", maxWidth: "640px" }}>
            What's happening next in Cornell AI
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.6, opacity: 0.9, margin: 0, maxWidth: "540px" }}>
            Summits, demo days, and workshops across the Ithaca and Cornell Tech campuses — open to students, alumni, and the wider community.
          </p>
        </div>
      </section>

      {/* Grid */}
      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <JeIntro eyebrow="Upcoming" title="On the calendar" subtitle="Pulled from this month's digest. Dates and venues per the Cornell AI events calendar." />
          {!digest && <p style={{ fontFamily: "var(--font-body)", color: "var(--text-muted)", marginTop: "var(--space-6)" }}>Loading events…</p>}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px", marginTop: "var(--space-8)" }}>
            {events.map((ev, i) => (
              <JeEventCard
                key={i}
                image={JePhoto(imgs[i % imgs.length])}
                tag={tagFor(ev.name)}
                date={ev.when.split("·")[0].trim()}
                location={ev.where}
                title={ev.name}
                description={stripLinks(ev.body)}
                cta="Event details"
                onClick={(e) => { e.preventDefault(); onNavigate("login"); }}
              />
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--space-7)" }}>
            <JeBtn as="a" href="https://ai.cornell.edu/events/" target="_blank" variant="outline">Full calendar at ai.cornell.edu</JeBtn>
          </div>
        </div>
      </section>

      <CAIN_CTABand tone="ink" />
    </main>
  );
}

Object.assign(window, { CAIN_JobsPage: JobsPage, CAIN_EventsPage: EventsPage });