/* Cornell AI Network — Bridging the AI Gap: program overview + student + faculty landing pages */
const BG_DS = window.CornellAINetworkDesignSystem_392896;
const { Button: BBtn, SectionIntro: BIntro, FeatureCard: BFeature, Eyebrow: BEyebrow } = BG_DS;

const BPHOTO = (n) => `../design-system/assets/photos/${n}`;

/* ---- Signup with inline confirmation (per-side tracking via `side`) ---- */
function BridgeSignup({ side, tone = "light", cta, placeholder, note, confirmTitle, confirmBody }) {
  const [done, setDone] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const onDark = tone !== "light";
  const fg = onDark ? "#fff" : "var(--text-strong)";
  const subFg = onDark ? "rgba(255,255,255,0.82)" : "var(--text-muted)";

  if (done) {
    return (
      <div style={{ maxWidth: "460px" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: "9px", marginBottom: "10px" }}>
          <span style={{ width: "26px", height: "26px", borderRadius: "999px", background: onDark ? "#fff" : "var(--cain-red)", color: onDark ? "var(--cain-red)" : "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5L20 6.5" /></svg>
          </span>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "21px", margin: 0, color: fg }}>{confirmTitle}</h3>
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: subFg, margin: 0 }}>{confirmBody}</p>
      </div>
    );
  }
  return (
    <form
      data-signup-side={side}
      onSubmit={(e) => { e.preventDefault(); if (email.trim()) setDone(true); }}
      style={{ display: "flex", flexDirection: "column", gap: "10px", maxWidth: "460px", width: "100%" }}
    >
      <div style={{ display: "flex", gap: "10px", alignItems: "flex-end" }}>
        <input
          type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
          placeholder={placeholder || "Your Cornell email"}
          style={{
            flex: 1, background: "transparent", border: "none",
            borderBottom: `1.5px solid ${onDark ? "rgba(255,255,255,0.55)" : "var(--border-strong)"}`,
            padding: "10px 2px", fontFamily: "var(--font-body)", fontSize: "15px",
            color: fg, outline: "none",
          }}
        />
        <BBtn type="submit" variant={onDark ? "light" : "solid"}>{cta}</BBtn>
      </div>
      {note && <span style={{ fontFamily: "var(--font-body)", fontSize: "12.5px", color: subFg }}>{note}</span>}
    </form>
  );
}

/* ---- shared: how-it-works 3-step strip ---- */
function HowItWorks({ steps, tone = "light" }) {
  const onDark = tone !== "light";
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1px", background: onDark ? "rgba(255,255,255,0.18)" : "var(--border-soft)", border: `1px solid ${onDark ? "rgba(255,255,255,0.18)" : "var(--border-soft)"}`, borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
      {steps.map((s, i) => (
        <div key={i} style={{ background: onDark ? "var(--cain-ink)" : "var(--cain-white)", padding: "26px 24px" }}>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "30px", color: "var(--cain-red)", lineHeight: 1, marginBottom: "12px" }}>{i + 1}</div>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "19px", margin: "0 0 6px", color: onDark ? "#fff" : "var(--text-strong)" }}>{s.t}</p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.55, color: onDark ? "rgba(255,255,255,0.78)" : "var(--text-muted)", margin: 0 }}>{s.b}</p>
        </div>
      ))}
    </div>
  );
}

/* ---- shared: benefit list with check marks ---- */
function BenefitList({ items, tone = "light" }) {
  const onDark = tone !== "light";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: "flex", gap: "14px", alignItems: "flex-start" }}>
          <span style={{ width: "24px", height: "24px", borderRadius: "999px", flexShrink: 0, marginTop: "2px", background: onDark ? "rgba(255,255,255,0.14)" : "var(--cain-paper)", color: "var(--cain-red)", display: "grid", placeItems: "center" }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5L20 6.5" /></svg>
          </span>
          <div>
            <p style={{ fontFamily: "var(--font-display)", fontSize: "19px", margin: "0 0 3px", color: onDark ? "#fff" : "var(--text-strong)" }}>{it.t}</p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "14.5px", lineHeight: 1.55, color: onDark ? "rgba(255,255,255,0.8)" : "var(--text-body)", margin: 0 }}>{it.b}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { CAIN_BridgeSignup: BridgeSignup, CAIN_HowItWorks: HowItWorks, CAIN_BenefitList: BenefitList });