/* Cornell AI Network — "Bridging the AI Gap": overview, students, faculty */
const BR_DS = window.CornellAINetworkDesignSystem_392896;
const { Button: BrBtn, SectionIntro: BrIntro, FeatureCard: BrFeature, Eyebrow: BrEyebrow } = BR_DS;
const BrPhoto = (n) => `../design-system/assets/photos/${n}`;

/* ============================= PROGRAM OVERVIEW ============================= */
function BridgeOverview({ onNavigate }) {
  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: "520px", display: "flex", alignItems: "center", overflow: "hidden" }}>
        <img src={BrPhoto("workshop-talk.jpg")} alt="Students working" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(20,16,14,0.82) 0%, rgba(20,16,14,0.55) 50%, rgba(20,16,14,0.2) 100%)" }} />
        <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", width: "100%" }}>
          <div style={{ maxWidth: "640px", color: "#fff", paddingBlock: "84px" }}>
            <BrEyebrow tone="light" style={{ marginBottom: "16px" }}>Bridging the AI Gap · A Cornell AI Network program</BrEyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.8rem,5vw,4.4rem)", lineHeight: 1.04, margin: "0 0 22px", color: "#fff" }}>
              Connecting AI-native students with the labs that need them.
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.6, opacity: 0.92, margin: "0 0 30px", maxWidth: "520px" }}>
              Every student today knows how to use AI. Almost none have proof they've used it on real work. We match them to the faculty projects that need exactly that.
            </p>
            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
              <BrBtn variant="solid" onClick={() => onNavigate("bridge-students")}>I'm a student</BrBtn>
              <BrBtn variant="light" onClick={() => onNavigate("bridge-faculty")}>I'm faculty or a lab</BrBtn>
            </div>
          </div>
        </div>
      </section>

      {/* The gap */}
      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "860px", margin: "0 auto", textAlign: "center" }}>
          <BrEyebrow tone="muted" align="center" style={{ marginBottom: "16px" }}>The gap</BrEyebrow>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.6rem,2.8vw,2.3rem)", lineHeight: 1.32, color: "var(--text-strong)", margin: 0, textWrap: "pretty" }}>
            Faculty are sitting on hours of work AI could accelerate — document workflows, literature synthesis, data cleanup — but don't have the time or the tools to do it themselves. Students have the tools and no proof. <span style={{ color: "var(--cain-red)" }}>That's the gap we bridge.</span>
          </p>
        </div>
      </section>

      {/* Two paths */}
      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <BrIntro eyebrow="Two sides" title="Pick your side of the bridge" subtitle="Students join and get matched to faculty projects. Professors and labs get vetted, AI-literate help without the learning curve." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginTop: "var(--space-8)" }}>
            {[
              { side: "Students", img: "build-career.jpg", title: "Get real AI experience employers believe", body: "Real projects, real faculty, and a resume line that isn't another online badge.", cta: "Explore the student track", go: "bridge-students" },
              { side: "Faculty & labs", img: "build-investors.jpg", title: "AI-literate help without the learning curve", body: "A vetted, AI-native student handles the work you don't have time to learn.", cta: "Explore the faculty track", go: "bridge-faculty" },
            ].map((c) => (
              <div key={c.side} style={{ background: "var(--cain-white)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-sm)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
                <img src={BrPhoto(c.img)} alt="" style={{ width: "100%", height: "200px", objectFit: "cover" }} />
                <div style={{ padding: "28px", display: "flex", flexDirection: "column", flex: 1 }}>
                  <BrEyebrow tone="muted" style={{ marginBottom: "10px" }}>{c.side}</BrEyebrow>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "24px", lineHeight: 1.16, margin: "0 0 10px", color: "var(--text-strong)" }}>{c.title}</h3>
                  <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 22px" }}>{c.body}</p>
                  <div style={{ marginTop: "auto" }}>
                    <BrBtn variant="outline" onClick={() => onNavigate(c.go)}>{c.cta}</BrBtn>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============================= STUDENTS ============================= */
function BridgeStudents() {
  const steps = [
    { t: "Join the network", b: "Tell us what you can do and what you want to work on." },
    { t: "Get matched", b: "We pair you with a faculty project that fits your skills." },
    { t: "Do the work", b: "Ship real output and build a portfolio you can point to." },
  ];
  const benefits = [
    { t: "Hands-on AI work", b: "From document workflows to building research tools — the work that actually proves you can do it." },
    { t: "Direct access to faculty", b: "Mentorship, references, and a network that opens doors long after the project ends." },
    { t: "Experience you can point to", b: "A portfolio and faculty connection, not just a course you watched." },
  ];
  return (
    <main>
      <section style={{ background: "var(--cain-white)", padding: "var(--space-9) var(--gutter) var(--section-y)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "56px", alignItems: "center" }}>
          <div>
            <BrEyebrow tone="muted" style={{ marginBottom: "16px" }}>For students · Bridging the AI Gap</BrEyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.6rem,4.6vw,4rem)", lineHeight: 1.05, margin: "0 0 20px", color: "var(--text-strong)" }}>
              Get real AI experience employers actually believe.
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.62, color: "var(--text-body)", margin: "0 0 28px", maxWidth: "500px" }}>
              Cornell AI Network matches AI-native students with professors and labs who need hands-on help. Real projects, real faculty, a resume line that isn't another online badge.
            </p>
            <window.CAIN_BridgeSignup
              side="student"
              cta="Join the network"
              placeholder="Your Cornell email"
              note="Free for Cornell students. We'll follow up within a week with next steps."
              confirmTitle="You're on the list."
              confirmBody="Watch your inbox — we'll reach out to learn what you want to work on and start matching you to faculty projects."
            />
          </div>
          <img src={BrPhoto("build-career.jpg")} alt="Student doing AI work" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
        </div>
      </section>

      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <BrIntro eyebrow="How it works" title="Three steps to real work" />
          <div style={{ marginTop: "var(--space-8)" }}><window.CAIN_HowItWorks steps={steps} /></div>
        </div>
      </section>

      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "56px", alignItems: "center" }}>
          <img src={BrPhoto("event-workshop.jpg")} alt="Workshop" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
          <div>
            <BrEyebrow tone="muted" style={{ marginBottom: "12px" }}>What you walk away with</BrEyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", margin: "0 0 28px", color: "var(--text-strong)" }}>Proof, not another badge</h2>
            <window.CAIN_BenefitList items={benefits} />
          </div>
        </div>
      </section>

      {/* Closing capture */}
      <section style={{ background: "var(--cain-ink)", color: "#fff", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2rem,3.6vw,3rem)", lineHeight: 1.1, margin: "0 0 22px", color: "#fff" }}>Join the network</h2>
          <window.CAIN_BridgeSignup
            side="student" tone="ink" cta="Join the network" placeholder="Your Cornell email"
            note="Free for Cornell students. We'll follow up within a week."
            confirmTitle="You're on the list." confirmBody="We'll reach out shortly to start matching you to faculty projects."
          />
        </div>
      </section>
    </main>
  );
}

/* ============================= FACULTY ============================= */
function BridgeFaculty() {
  const steps = [
    { t: "Tell us your need", b: "Describe the task or project — no technical spec required." },
    { t: "We match you", b: "We pair you with a vetted, AI-native student who fits." },
    { t: "They get to work", b: "You get real output back, with no time spent learning tools." },
  ];
  const benefits = [
    { t: "Save hours on the right tasks", b: "Literature synthesis, document workflows, data cleanup, custom tools — the work AI can accelerate." },
    { t: "No need to learn the tools yourself", b: "Your student already knows them. You stay focused on the research." },
    { t: "Mentor the next generation", b: "Get real help while giving a Cornell student work that matters." },
  ];
  return (
    <main>
      <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", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "56px", alignItems: "center" }}>
          <div>
            <BrEyebrow tone="light" style={{ marginBottom: "16px" }}>For faculty & labs · Bridging the AI Gap</BrEyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.4rem,4.4vw,3.7rem)", lineHeight: 1.06, margin: "0 0 20px", color: "#fff" }}>
              AI-literate student help for your research — without the learning curve.
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.62, opacity: 0.92, margin: "0 0 28px", maxWidth: "520px" }}>
              Cornell AI Network pairs you with a vetted, AI-native student who handles the work you don't have time to learn: literature synthesis, document workflows, data cleanup, custom tools.
            </p>
            <window.CAIN_BridgeSignup
              side="faculty"
              tone="maroon"
              cta="Request a student"
              placeholder="Your Cornell email"
              note="No cost to request. We'll reply within a few days to scope your project."
              confirmTitle="Request received."
              confirmBody="We'll be in touch within a few days to understand your project and find the right student match."
            />
          </div>
          <img src={BrPhoto("campus-building.jpg")} alt="Cornell lab" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
        </div>
      </section>

      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <BrIntro eyebrow="How it works" title="Three steps to handing off the work" />
          <div style={{ marginTop: "var(--space-8)" }}><window.CAIN_HowItWorks steps={steps} /></div>
        </div>
      </section>

      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "56px", alignItems: "center" }}>
          <div>
            <BrEyebrow tone="muted" style={{ marginBottom: "12px" }}>Why labs use it</BrEyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", margin: "0 0 28px", color: "var(--text-strong)" }}>Real help, none of the overhead</h2>
            <window.CAIN_BenefitList items={benefits} />
          </div>
          <img src={BrPhoto("build-investors.jpg")} alt="Research" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
        </div>
      </section>

      {/* Closing capture */}
      <section style={{ background: "var(--cain-red)", color: "#fff", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2rem,3.6vw,3rem)", lineHeight: 1.1, margin: "0 0 14px", color: "#fff" }}>Request a student</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", opacity: 0.9, margin: "0 0 26px", maxWidth: "440px" }}>Tell us what you need. We'll handle the match.</p>
          <window.CAIN_BridgeSignup
            side="faculty" tone="red" cta="Request a student" placeholder="Your Cornell email"
            note="No cost to request. We'll reply within a few days."
            confirmTitle="Request received." confirmBody="We'll be in touch within a few days to scope your project and find the right match."
          />
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CAIN_BridgeOverview: BridgeOverview, CAIN_BridgeStudents: BridgeStudents, CAIN_BridgeFaculty: BridgeFaculty });
