// FoundersPage — full /founders route
// Lazy/optional headshots: drop assets/founders/heath.jpg and assets/founders/william.jpg to override
// Brand logos use logo.clearbit.com (public CDN) with onError fallback to monogram

const { useState: useFPState } = React;

function LogoTile({ name, src, domain, href, note }) {
  const [stage, setStage] = useFPState(src ? "local" : (domain ? "clearbit" : "mono"));
  const initials = name.split(/\s+/).map(w => w[0]).slice(0, 2).join("").toUpperCase();
  let img = null;
  if (stage === "local") {
    img = <img src={src} alt={`${name} logo`} loading="lazy"
      onError={() => setStage(domain ? "clearbit" : "mono")} />;
  } else if (stage === "clearbit") {
    img = <img src={`https://logo.clearbit.com/${domain}?size=160`} alt={`${name} logo`} loading="lazy"
      onError={() => setStage("mono")} />;
  } else {
    img = <span className="logo-tile__monogram">{initials}</span>;
  }
  const inner = (
    <>
      <div className="logo-tile__mark" aria-hidden="true">{img}</div>
      <div className="logo-tile__meta">
        <div className="logo-tile__name">{name}</div>
        {note && <div className="logo-tile__note">{note}</div>}
      </div>
    </>
  );
  return href
    ? <a className="logo-tile" href={href} target="_blank" rel="noopener noreferrer">{inner}</a>
    : <div className="logo-tile">{inner}</div>;
}

function FounderHero({ name, role, photo, initials, tone, summary, location, links, edu, now }) {
  const [imgFailed, setImgFailed] = useFPState(false);
  return (
    <div className="founder-hero fade-up" data-tone={tone}>
      <div className="founder-hero__photo">
        {photo && !imgFailed
          ? <img src={photo} alt={name} onError={() => setImgFailed(true)} />
          : <span className="founder-hero__initials">{initials}</span>}
        <div className="founder-hero__photo-glow" aria-hidden="true" />
      </div>
      <div className="founder-hero__body">
        <div className="founder-hero__role">{role}</div>
        <h2 className="founder-hero__name">{name}</h2>
        {location && <div className="founder-hero__loc">{location}</div>}
        <p className="founder-hero__summary">{summary}</p>
        {now && (
          <div className="founder-hero__now">
            <span className="founder-hero__now-dot" /> {now}
          </div>
        )}
        {edu && edu.length > 0 && (
          <ul className="founder-hero__edu">
            {edu.map((e, i) => (
              <li key={i}>
                <span className="founder-hero__edu-school">{e.school}</span>
                {e.detail && <span className="founder-hero__edu-detail"> · {e.detail}</span>}
              </li>
            ))}
          </ul>
        )}
        {links && links.length > 0 && (
          <div className="founder-hero__links">
            {links.map((l, i) => (
              <a key={i} href={l.href} target="_blank" rel="noopener noreferrer" className="founder-hero__link">
                {l.label} <span aria-hidden="true">↗</span>
              </a>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function FoundersPage() {
  const heath = {
    name: "Heath Rutledge-Jukes",
    role: "Co-founder · Product, learning design, clinical education",
    photo: "assets/founders/heath.jpg",
    initials: "HR",
    tone: "pink",
    location: "St. Louis, MO",
    now: "MD candidate · Washington University School of Medicine (Class of 2026)",
    summary:
      "Heath leads product and learning. Technical co-founder of King of the Curve — the multi-product med-prep platform spanning MCAT, DAT, NCLEX, PA-CAT, and admissions tools, used by 500K+ students. Forbes 30 Under 30 Education 2025, TEDx speaker, MCAT 522 (99th ·%ile and the highest score in Florida Southern history), and a published researcher across orthopedics, behavioral science, global digital health, and ADHD pharmacology. Also co-founder of CardioVis, co-founder/board member of TeleCatalyst, and a medical-AI product associate at Centaur Labs.",
    edu: [
      { school: "Washington University School of Medicine", detail: "MD candidate, Aug 2022 – May 2026" },
      { school: "Florida Southern College",                  detail: "B.S. Psychology (minors: Chemistry, Neuroscience, Biology) · GPA 4.0 · MCAT 522" },
      { school: "Kaskaskia College",                          detail: "A.A./A.S. · GPA 3.86" },
    ],
    links: [
      { label: "heathrutledgejukes.com",   href: "https://www.heathrutledgejukes.com" },
      { label: "heath@kingofthecurve.org", href: "mailto:heath@kingofthecurve.org" },
      { label: "WashU Medicine feature",   href: "https://medicine.washu.edu/news/rutledge-jukes-named-to-forbes-30-under-30/" },
    ],
  };

  const william = {
    name: "William Kelly",
    role: "Co-founder · Finance, growth, communications",
    photo: "assets/founders/william.jpg",
    initials: "WK",
    tone: "blue",
    location: "Ithaca, NY",
    now: "Co-founder, King of the Curve",
    summary:
      "William runs the business: financial operations, growth, digital marketing, and social. Triple-major in Accounting, Economics & Finance, and Business Administration at Florida Southern, then a Master's in Accounting at Cornell. Took a consulting role at Deloitte out of college, and is also a licensed real estate broker. Per KOTC's own about page, \"a pivotal member in driving growth, marketing, and communications.\"",
    edu: [
      { school: "Cornell University",        detail: "M.S., Accounting / Business Management" },
      { school: "Florida Southern College",  detail: "B.S. · Triple major: Accounting, Economics & Finance, Business Administration" },
    ],
    links: [
      { label: "LinkedIn",                   href: "https://www.linkedin.com/in/william-kelly-/" },
      { label: "william@kingofthecurve.org", href: "mailto:william@kingofthecurve.org" },
      { label: "KOTC founder feature",       href: "https://kingofthecurve.org/blog/biwu5qmpbplh4s2zfdyhlg5tru6j74" },
    ],
  };

  // Essential affiliations only. Logos: local files in assets/logos/ where downloaded
  // from each org's official site; otherwise Clearbit (browser-side) with monogram fallback.
  const affiliations = [
    { name: "King of the Curve", src: "assets/logos/kotc.png",      domain: "kingofthecurve.org", href: "https://kingofthecurve.org",                                                                  note: "Co-founded · 500K+ students" },
    { name: "WashU Medicine",    src: "assets/logos/washu-med.png", domain: "medicine.washu.edu", href: "https://medicine.washu.edu/news/rutledge-jukes-named-to-forbes-30-under-30/",                  note: "Heath · MD candidate" },
    { name: "Cornell University",src: "assets/logos/cornell.png",   domain: "cornell.edu",        href: "https://www.cornell.edu",                                                                    note: "William · MS Accounting" },
    { name: "Florida Southern",  src: "assets/logos/fsc.png",       domain: "flsouthern.edu",     href: "https://www.flsouthern.edu/news/fsc-connections-help-bring-low-cost-mcat-study-app",        note: "Both · Undergrad" },
    { name: "Deloitte",                                              domain: "deloitte.com",       href: "https://www2.deloitte.com",                                                                  note: "William · Consulting" },
    { name: "Kapor Capital",                                          domain: "kaporcapital.com",   href: "https://www.kaporcapital.com",                                                               note: "KOTC · Lead investor" },
    { name: "Forbes",                                                 domain: "forbes.com",         href: "https://www.forbes.com/profile/king-of-the-curve/",                                          note: "30 Under 30 Education · 2025" },
    { name: "TEDx",                                                   domain: "ted.com",            href: "https://www.ted.com/tedx/events/48686",                                                      note: "Heath · Speaker" },
    { name: "Centaur Labs",      src: "assets/logos/centaur.png",   domain: "centaur.ai",         href: "https://www.centaur.ai",                                                                     note: "Heath · Medical-AI consultant" },
  ];

  // Awards & grants timeline (KOTC + Heath)
  const awards = [
    { year: "2025", title: "Forbes 30 Under 30 — Education",   org: "Forbes" },
    { year: "2025", title: "St. Louis Inno Fire Award",         org: "Skandalaris Center, WashU" },
    { year: "2025", title: "Inno Madness Champion",             org: "St. Louis Inno" },
    { year: "2024", title: "Arch Grants Growth Grant — $100K",  org: "Arch Grants" },
    { year: "2023", title: "Arch Grants Startup Cohort — $75K", org: "Arch Grants" },
    { year: "2022", title: "TEDxUCincinnati — Invited Speaker", org: "TEDx" },
  ];

  // Trimmed to the projects that are publicly verifiable & substantive.
  const projects = [
    { name: "King of the Curve",    who: "Heath, William & AndrewPaul McIntosh", desc: "Co-founders, 2020. Multi-product med-prep across MCAT, DAT, NCLEX, PA-CAT, and admissions tools. 500K+ users, $1M+ raised (primarily Kapor Capital), Forbes 30 Under 30 Education 2025, 2025 Inno Madness champion, 2025 St. Louis Inno Fire Award winner.", href: "https://kingofthecurve.org" },
    { name: "TeleCatalyst",         who: "Heath · Co-founder / Board",            desc: "Healthcare communication app published under King of the Curve, LLC on the App Store. Focused on widening access to care.", href: "https://apps.apple.com/us/app/telecatalyst/id1619602262" },
    { name: "Centaur Labs",         who: "Heath · Medical-AI Consultant",         desc: "Medical-AI data labeling and clinical content review at scale; product / labeling consulting.", href: "https://www.centaur.ai" },
    { name: "TEDxUCincinnati 2022", who: "Heath · Speaker",                       desc: "\"Making Scholastic Success More Equitable\" — invited TEDx talk on learning, access, and technology.", href: "https://www.youtube.com/watch?v=EFtqkNqJzmo" },
    { name: "Original MCAT App",    who: "Heath · Lead developer",                desc: "Lead developer of Florida Southern's original MCAT study app — the prototype that became King of the Curve.", href: "https://www.flsouthern.edu/news/fsc-connections-help-bring-low-cost-mcat-study-app" },
  ];

  // Heath's publicly indexed publications (PubMed / Cureus).
  const publications = [
    { title: "Survivorship of a metal-on-metal total hip implant with a modular titanium adapter", venue: "Journal of Arthroplasty", year: "2022", href: "https://pubmed.ncbi.nlm.nih.gov/35219576/" },
    { title: "Examining bias in healthcare experiences of LGBTQ+ patients",                          venue: "Journal of Homosexuality",  year: "2023", href: "https://pubmed.ncbi.nlm.nih.gov/35171085/" },
    { title: "Digital roots: harnessing digital platforms in advancing traditional & complementary medicine for cancer care in Sub-Saharan Africa", venue: "ecancermedicalscience", year: "2024", href: "https://pubmed.ncbi.nlm.nih.gov/38566766/" },
    { title: "Lisdexamfetamine's efficacy in treating ADHD: a meta-analysis and review",            venue: "Cureus",                    year: "2024", href: "https://www.cureus.com/articles/256810-lisdexamfetamines-efficacy-in-treating-attention-deficit-hyperactivity-disorder-adhd-a-meta-analysis-and-review" },
  ];

  return (
    <main className="founders-page">
      {/* Page hero */}
      <section className="section fp-hero">
        <div className="section__bg">
          <div className="orb" style={{ top:"-10%", left:"10%", width:420, height:420, background:"hsl(var(--brand-pink) / 0.10)" }} />
          <div className="orb" style={{ top:"5%",  right:"5%",  width:360, height:360, background:"hsl(var(--brand-blue) / 0.10)" }} />
          <div className="orb" style={{ bottom:"-10%", left:"30%", width:320, height:320, background:"hsl(var(--brand-teal) / 0.08)" }} />
        </div>
        <div className="section__inner">
          <div className="section__head fade-up">
            <div className="tag-pill tag-pill--gold">Meet the Founders</div>
            <h1 className="section__title">
              Built by an <span className="gradient-text">MD candidate</span> and a <span className="gradient-text">Cornell-trained finance lead</span>.
            </h1>
            <p className="section__lede">
              LearnLytx grew out of King of the Curve — the gamified medical-prep platform Heath and William built from a dorm room into a product used by half a million students. They're the same two people you'll work with here.
            </p>
          </div>
        </div>
      </section>

      {/* Founder cards */}
      <section className="section fp-cards">
        <div className="section__inner">
          <div className="fp-cards__stack">
            <FounderHero {...heath} />
            <FounderHero {...william} />
          </div>
        </div>
      </section>

      {/* Logo wall */}
      <section className="section fp-logos">
        <div className="section__bg">
          <div className="orb" style={{ top:"10%", right:"10%", width:300, height:300, background:"hsl(var(--brand-orange) / 0.07)" }} />
        </div>
        <div className="section__inner">
          <div className="section__head fade-up">
            <div className="tag-pill tag-pill--gold">Where we've trained, built & been recognized</div>
            <h2 className="section__title">Real institutions. Real receipts.</h2>
            <p className="section__lede">
              The places we studied, the firms we worked at, and the programs that have backed our work.
            </p>
          </div>
          <div className="logo-wall fade-up">
            {affiliations.map((a, i) => <LogoTile key={i} {...a} />)}
          </div>
        </div>
      </section>

      {/* Selected projects / experience */}
      <section className="section fp-projects">
        <div className="section__inner">
          <div className="section__head fade-up">
            <div className="tag-pill tag-pill--gold">Selected projects</div>
            <h2 className="section__title">Things we've actually shipped.</h2>
          </div>
          <div className="fp-projects__grid stagger">
            {projects.map((p, i) => {
              const Tag = p.href ? "a" : "article";
              const extra = p.href ? { href: p.href, target: "_blank", rel: "noopener noreferrer" } : {};
              return (
                <Tag key={i} className="fp-project fade-up" {...extra}>
                  <div className="fp-project__head">
                    <h3 className="fp-project__name">{p.name}</h3>
                    <div className="fp-project__who">{p.who}</div>
                  </div>
                  <p className="fp-project__desc">{p.desc}</p>
                  {p.href && <div className="fp-project__cta">View <span aria-hidden="true">↗</span></div>}
                </Tag>
              );
            })}
          </div>
        </div>
      </section>

      {/* Awards & grants */}
      <section className="section fp-awards">
        <div className="section__bg">
          <div className="orb" style={{ top:"10%", right:"6%", width:300, height:300, background:"hsl(var(--brand-orange) / 0.10)" }} />
        </div>
        <div className="section__inner">
          <div className="section__head fade-up">
            <div className="tag-pill tag-pill--orange">Awards &amp; grants</div>
            <h2 className="section__title">Recognized work, on the record.</h2>
            <p className="section__lede">Selected awards, grants, and invited talks tied to the founders and to King of the Curve.</p>
          </div>
          <ol className="fp-awards__list fade-up">
            {awards.map((a, i) => (
              <li key={i} className="fp-award">
                <div className="fp-award__year">{a.year}</div>
                <div className="fp-award__body">
                  <div className="fp-award__title">{a.title}</div>
                  <div className="fp-award__org">{a.org}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Publications & talks */}
      <section className="section fp-pubs">
        <div className="section__bg">
          <div className="orb" style={{ top:"15%", left:"5%", width:280, height:280, background:"hsl(var(--brand-teal) / 0.08)" }} />
        </div>
        <div className="section__inner">
          <div className="section__head fade-up">
            <div className="tag-pill tag-pill--gold">Publications & talks</div>
            <h2 className="section__title">Peer-reviewed and on the record.</h2>
            <p className="section__lede">
              Indexed scholarship from Heath — orthopedics, behavioral science, global digital health, and ADHD pharmacology — plus an invited TEDx talk.
            </p>
          </div>
          <ul className="fp-pubs__list fade-up">
            {publications.map((p, i) => (
              <li key={i} className="fp-pub">
                <a href={p.href} target="_blank" rel="noopener noreferrer" className="fp-pub__link">
                  <div className="fp-pub__title">{p.title}</div>
                  <div className="fp-pub__meta">{p.venue} · {p.year}</div>
                </a>
              </li>
            ))}
            <li className="fp-pub">
              <a href="https://www.youtube.com/watch?v=EFtqkNqJzmo" target="_blank" rel="noopener noreferrer" className="fp-pub__link">
                <div className="fp-pub__title">“Making Scholastic Success More Equitable”</div>
                <div className="fp-pub__meta">TEDxUCincinnati · Talk</div>
              </a>
            </li>
          </ul>
        </div>
      </section>

      {/* CTA */}
      <section className="section final-cta bg-soft-final">
        <div className="section__bg">
          <div className="orb orb-gold" />
          <div className="orb orb-teal" />
        </div>
        <div className="section__inner">
          <div className="final-cta__inner fade-up">
            <h2>Want to talk to <span className="gradient-text">Heath or William directly?</span></h2>
            <p>Free 30-minute consultation. No pitch deck, no delivery team — just the founders.</p>
            <a href="https://jira-b2c0c.web.app/book/1-1-6c9edd37" target="_blank" rel="noopener noreferrer" className="ll-btn ll-btn--cta ll-btn--xl">
              Book a Call <span className="arr">→</span>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.FoundersPage = FoundersPage;