/* Cornell AI Network — Website UI kit: pages (Home, About, What we do) */
const DS = window.CornellAINetworkDesignSystem_392896;
const { Button, SectionIntro, EventCard, FeatureCard, Eyebrow, Avatar } = DS;

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

/* ----------------------------- HOME ----------------------------- */
function HomePage({ onNavigate }) {
  const features = [
    { img: "event-workshop.jpg", title: "Learn from AI Leaders", body: "Access workshops, seminars, and speaker events featuring innovators shaping the future of artificial intelligence." },
    { img: "build-career.jpg", title: "Hire & Get Hired", body: "Whether you're recruiting top AI talent or exploring your next role, this is where Cornell careers in AI begin." },
    { img: "build-founders.jpg", title: "Discover AI Companies", body: "We surface the most promising AI ventures from the Cornell community, connecting founders with the investors who back them." },
    { img: "event-mixer.jpg", title: "Connect with the Community", body: "Build meaningful relationships with alumni, students, and industry leaders who share your passion for AI." },
  ];
  return (
    <main>
      {/* Hero — one continuous film scrubbed by scroll (hero-film.jsx). Stop
          timecodes are measured against the film, not authored. Robot waves on frame 0
          and lifts off on first scroll.
          Archives, both still mounted in index.html and switchable here:
          CAIN_HeroScrollWorld = the per-clip scroll-world hero.
          CAIN_HeroFlight      = the original single-video hero. */}
      <window.CAIN_HeroFilm />

      {/* Come for the AI */}
      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <SectionIntro title={<span>Come for the AI,<br/>stay for the network</span>} subtitle="The professional community where Cornell alumni and students connect around AI — to learn, build, hire, invest, and grow." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "22px", marginTop: "var(--space-8)" }}>
            {features.map((f) => (
              <FeatureCard key={f.title} image={PHOTO(f.img)} title={f.title}>{f.body}</FeatureCard>
            ))}
          </div>
        </div>
      </section>

      {/* Events */}
      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "980px", margin: "0 auto" }}>
          <SectionIntro eyebrow="Upcoming" title="Events" subtitle="See what's happening next in our community." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginTop: "var(--space-8)" }}>
            <EventCard image={PHOTO("event-mixer.jpg")} tag="Networking" date="Fri 23 Feb" location="Ithaca" title="Cornell AI Network-ing" description="Connect with AI enthusiasts, founders, researchers, and builders." onClick={(e) => { e.preventDefault(); onNavigate("login"); }} />
            <EventCard image={PHOTO("event-workshop.jpg")} tag="Learning" date="Wed 13 Mar" location="Cornell" title="AI Skill-up workshop" description="Join us for an evening of learning and catching up with the fast world of AI." onClick={(e) => { e.preventDefault(); onNavigate("login"); }} />
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--space-7)" }}>
            <Button variant="outline" onClick={() => onNavigate("events")}>View all</Button>
          </div>
        </div>
      </section>

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

/* ----------------------------- ABOUT ----------------------------- */
function AboutPage() {
  const values = [
    { title: "Why we exist", body: "AI is reshaping every industry. Cornell talent should be at the center of it, not on the sidelines." },
    { title: "How we operate", body: "We host events, share knowledge, and make the introductions that turn connections into careers, deals, and breakthroughs." },
    { title: "What we believe", body: "The best opportunities happen when talent, capital, and ideas are in the same room, and trust is already built." },
    { title: "Where we're headed", body: "From campus to boardroom, we're building the definitive network for AI professionals with Cornell roots." },
  ];
  const team = [
    { photo: "team-michael.jpg", name: "Michael L. Piggott", role: "President", bio: "Cornell MBA (Class of 2025) focused on high-impact AI communities and ventures, working at the intersection of AI, fintech, and product strategy." },
    { photo: "team-neelam.jpg", name: "Neelam Naik", role: "VP", bio: "A technology leader and Cornell MBA with 20+ years in cloud architecture and software engineering, from Capital One to Thomson Reuters." },
    { photo: "team-david.jpg", name: "David Ancor", role: "COO", bio: "A product leader and Cornell MBA building AI-driven products from concept to exit, now serving as COO of the Cornell AI Network." },
  ];
  return (
    <main>
      {/* Hero */}
      <section style={{ background: "var(--cain-ink)", color: "var(--text-on-dark)", padding: "var(--space-8) var(--gutter) 0" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "40px", alignItems: "start", paddingTop: "var(--space-6)" }}>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.4rem,4.4vw,3.8rem)", lineHeight: 1.06, margin: 0, color: "#fff" }}>
              The AI network for Cornell's most ambitious
            </h1>
            <div style={{ paddingTop: "10px" }}>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.6, opacity: 0.9, margin: "0 0 20px" }}>
                The Cornell AI Network connects founders, investors, executives, and talent shaping the future of artificial intelligence.
              </p>
              <div style={{ display: "flex", gap: "12px" }}>
                <Button variant="solid">Join us</Button>
                <Button variant="light">Learn more</Button>
              </div>
            </div>
          </div>
          <img src={PHOTO("campus-building.jpg")} alt="Cornell collegiate gothic" style={{ width: "100%", height: "420px", objectFit: "cover", marginTop: "var(--space-7)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" }} />
        </div>
      </section>

      {/* Where Cornell meets the future of AI */}
      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <SectionIntro eyebrow="About Us" title={<span>Where Cornell meets<br/>the future of AI</span>} subtitle="Cornell's brightest minds in AI were scattered across industries, startups, and research labs with no way to find each other. We changed that." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: "40px", alignItems: "center", marginTop: "var(--space-8)" }}>
            <div style={{ display: "grid", gap: "28px" }}>
              {values.slice(0, 2).map((v) => <ValueItem key={v.title} {...v} align="right" />)}
            </div>
            <img src="../design-system/assets/illustrations/cain-club-banner.png" alt="Cornell Network student club" style={{ width: "280px", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-sm)" }} />
            <div style={{ display: "grid", gap: "28px" }}>
              {values.slice(2).map((v) => <ValueItem key={v.title} {...v} align="left" />)}
            </div>
          </div>
        </div>
      </section>

      {/* Our team */}
      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <SectionIntro title="Our team" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "30px", marginTop: "var(--space-8)" }}>
            {team.map((m) => (
              <div key={m.name} style={{ textAlign: "center" }}>
                <img src={PHOTO(m.photo)} alt={m.name} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--radius-sm)", marginBottom: "var(--space-4)" }} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "20px", margin: "0 0 4px", color: "var(--text-strong)" }}>{m.name}, {m.role}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-body)", lineHeight: 1.6, margin: "0 0 14px" }}>{m.bio}</p>
                <LinkedInGlyph />
              </div>
            ))}
          </div>
        </div>
      </section>

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

function ValueItem({ title, body, align }) {
  return (
    <div style={{ textAlign: align }}>
      <h4 style={{ fontFamily: "var(--font-display)", fontSize: "19px", margin: "0 0 8px", color: "var(--text-strong)" }}>{title}</h4>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 1.6, margin: 0 }}>{body}</p>
    </div>
  );
}

function LinkedInGlyph() {
  return (
    <a style={{ display: "inline-flex", cursor: "pointer", color: "var(--text-strong)" }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.06 3.77-2.06 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21H9z"/></svg>
    </a>
  );
}

/* -------------------------- WHAT WE DO -------------------------- */
function WhatWeDoPage({ onNavigate }) {
  const audiences = [
    { eyebrow: "Build", img: "build-founders.jpg", title: "Founders and builders", body: "Find co-founders, early hires, and investors for your AI venture." },
    { eyebrow: "Invest", img: "build-investors.jpg", title: "Investors and allocators", body: "Access vetted deal flow and technical diligence from people who understand AI." },
    { eyebrow: "Grow", img: "build-career.jpg", title: "Career movers and skill seekers", body: "Level up your AI expertise and find your next role through the Cornell network." },
    { eyebrow: "Recruit", img: "build-talent.jpg", title: "Talent leaders and recruiters", body: "Build relationships with top Cornell AI candidates before they hit the market." },
  ];
  const [open, setOpen] = React.useState(0);
  const doItems = [
    { title: "Events that matter", body: "Pitch nights, speaker series, and dinners designed for real conversation, not name-tag networking." },
    { title: "Introductions that work", body: "Warm, intentional introductions between founders, investors, and operators — matched on what you're building." },
    { title: "Knowledge worth your time", body: "Briefings and breakdowns from the people actually shipping AI, not the hype cycle." },
  ];
  return (
    <main>
      {/* Hero */}
      <section style={{ background: "var(--cain-maroon)", color: "var(--text-on-dark)", padding: "var(--space-9) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <Eyebrow tone="light" style={{ marginBottom: "16px" }}>Network</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.6rem,5vw,4.2rem)", lineHeight: 1.05, margin: "0 0 20px", color: "#fff" }}>
            What we're building
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.6, opacity: 0.9, margin: "0 0 28px", maxWidth: "520px" }}>
            CAIN connects Cornell's AI community through events, introductions, and knowledge that actually matter.
          </p>
          <Button variant="light" onClick={() => onNavigate("login")}>What we actually do</Button>
        </div>
      </section>

      {/* Who we build for */}
      <section style={{ background: "var(--cain-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <SectionIntro eyebrow="Serve" title="Who we build for" subtitle="Cornell AI Network exists for the people moving AI forward." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "22px", marginTop: "var(--space-8)" }}>
            {audiences.map((a) => (
              <FeatureCard key={a.title} image={PHOTO(a.img)} eyebrow={a.eyebrow} title={a.title}>{a.body}</FeatureCard>
            ))}
          </div>
        </div>
      </section>

      {/* What we actually do */}
      <section style={{ background: "var(--cain-white)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "center" }}>
          <img src={PHOTO("workshop-talk.jpg")} alt="AI workshop" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
          <div>
            <Eyebrow tone="muted" style={{ marginBottom: "12px" }}>The Cornell AI Network</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", margin: "0 0 28px", color: "var(--text-strong)" }}>What we actually do</h2>
            <div>
              {doItems.map((d, i) => (
                <div key={d.title} onClick={() => setOpen(i)} style={{ borderTop: i === 0 ? "1px solid var(--border-strong)" : "none", borderBottom: "1px solid var(--border-strong)", padding: "18px 0", cursor: "pointer" }}>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "21px", margin: 0, color: open === i ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-fast)" }}>{d.title}</h3>
                  {open === i && (
                    <p style={{ fontFamily: "var(--font-body)", fontSize: "14.5px", color: "var(--text-body)", lineHeight: 1.6, margin: "10px 0 0" }}>{d.body}</p>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { CAIN_HomePage: HomePage, CAIN_AboutPage: AboutPage, CAIN_WhatWeDoPage: WhatWeDoPage });