/* Cornell AI Network — Website UI kit: shared chrome (NavBar, Footer, CTABand) */
const { Button, EmailCapture, Eyebrow } = window.CornellAINetworkDesignSystem_392896;

const LOGO = "../design-system/assets/logos/cain-wordmark.png";

function NavBar({ current, onNavigate }) {
  const links = [
    { id: "about", label: "About us" },
    { id: "what", label: "What are we doing" },
    { id: "events", label: "Events" },
    { id: "jobs", label: "Jobs" },
    { id: "bridge", label: "Bridging the AI Gap" },
  ];
  const bridgePages = ["bridge", "bridge-students", "bridge-faculty"];
  const isActive = (id) => id === "bridge" ? bridgePages.includes(current) : current === id;
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(255,255,255,0.96)", backdropFilter: "saturate(180%) blur(6px)",
      borderBottom: "1px solid var(--border-soft)",
    }}>
      <div style={{
        maxWidth: "var(--container)", margin: "0 auto", padding: "14px var(--gutter)",
        display: "flex", alignItems: "center", gap: "32px",
      }}>
        <a onClick={() => onNavigate("home")} style={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
          <img src={LOGO} alt="Cornell AI Network" style={{ height: "26px", width: "auto" }} />
        </a>
        <nav style={{ display: "flex", gap: "22px", marginLeft: "8px" }}>
          {links.map((l) => (
            <a key={l.id} onClick={() => onNavigate(l.id)} style={{
              cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: "14.5px", whiteSpace: "nowrap",
              color: isActive(l.id) ? "var(--cain-red)" : "var(--text-strong)",
            }}>{l.label}</a>
          ))}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", gap: "12px" }}>
          <Button variant="outline" size="sm" onClick={() => onNavigate("login")}>Connect with us</Button>
          <Button variant="solid" size="sm" onClick={() => onNavigate("bridge")}>Get matched</Button>
        </div>
      </div>
    </header>
  );
}

function CTABand({ tone = "ink" }) {
  const bg = tone === "red" ? "var(--cain-red)" : tone === "maroon" ? "var(--cain-maroon)" : "var(--cain-ink)";
  return (
    <section style={{ background: bg, color: "var(--text-on-dark)", padding: "var(--section-y) var(--gutter)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.2rem,4vw,3.4rem)", lineHeight: 1.08, margin: 0, color: "#fff" }}>
          Ready to connect
        </h2>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.2rem,4vw,3.4rem)", lineHeight: 1.08, margin: "0 0 20px", paddingLeft: "1.4em", color: "#fff" }}>
          Join the network
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", opacity: 0.88, margin: "0 0 26px" }}>
          The best time to build your network is before you need it.
        </p>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <EmailCapture tone={tone === "red" || tone === "maroon" ? "red" : "ink"} cta="Join" note={null} />
        </div>
      </div>
    </section>
  );
}

function Footer({ onNavigate }) {
  const cols = [
    { id: "home", label: "Home" },
    { id: "events", label: "Events" },
    { id: "jobs", label: "Jobs" },
    { id: "bridge", label: "Bridging the AI Gap" },
    { id: "login", label: "Contact Us" },
    { id: "about", label: "About us" },
  ];
  return (
    <footer style={{ background: "var(--cain-paper)", padding: "var(--space-8) var(--gutter) var(--space-6)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        <div style={{ display: "flex", gap: "40px", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ minWidth: "260px" }}>
            <img src={LOGO} alt="Cornell AI Network" style={{ height: "28px", marginBottom: "20px" }} />
            <nav style={{ display: "flex", gap: "22px", flexWrap: "wrap" }}>
              {cols.map((c) => (
                <a key={c.id} onClick={() => onNavigate(c.id)} style={{ cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--text-strong)" }}>{c.label}</a>
              ))}
            </nav>
          </div>
          <div style={{ minWidth: "300px", maxWidth: "360px" }}>
            <Eyebrow tone="muted" style={{ marginBottom: "12px" }}>Explore</Eyebrow>
            <EmailCapture cta="Subscribe" note="By subscribing you agree to our Privacy Policy and consent to receive updates." />
          </div>
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: "13px", color: "var(--text-muted)", maxWidth: "760px", margin: "var(--space-7) 0 var(--space-5)", lineHeight: 1.6 }}>
          CAIN is a student and alumni organization affiliated with Cornell University. Views expressed are our own and do not represent Cornell University. Photography courtesy of Cornell University. Used with permission under Cornell Digital Asset Management guidelines. contact@cornellainetwork.com
        </p>
        <div style={{ borderTop: "1px solid var(--border-soft)", paddingTop: "var(--space-4)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "12px" }}>
          <div style={{ display: "flex", gap: "20px" }}>
            {["Privacy Policy", "Terms of service", "Cookie settings"].map((t) => (
              <a key={t} style={{ fontFamily: "var(--font-ui)", fontSize: "13px", color: "var(--text-muted)", cursor: "pointer" }}>{t}</a>
            ))}
          </div>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: "13px", color: "var(--text-muted)" }}>© 2025 Cornell AI Network Club. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CAIN_NavBar: NavBar, CAIN_Footer: Footer, CAIN_CTABand: CTABand });