window.PeopleApp = (function(){
const { useState, useEffect, useRef } = React;

function PeopleHero(){
  const leaders = window.PEOPLE_LEADERSHIP || [];
  const n = leaders.length;
  const advisorCount = window.PEOPLE_ADVISORS ? window.PEOPLE_ADVISORS.length : 14;

  return (
    <section className="people-hero-simple">
      <div className="people-hero-simple-inner">
        <div className="people-hero-copy">
          <div className="eyebrow" style={{color:"#004AAD",borderColor:"rgba(0,74,173,.25)",background:"rgba(0,74,173,.06)"}}>
            <span className="dot"/>The VivaMed Team · {n + advisorCount} people
          </div>
          <h1>Physicians, scientists, and operators<br/>who've shipped <em>real</em> medicines.</h1>
          <p className="people-hero-lede">
            {n} operators who've supported 39 approvals, founded 15+ healthcare companies,
            and developed 150+ drug assets — paired with {advisorCount} clinical advisors from Barrow,
            Banner, Creighton, and the University of Arizona.
          </p>
          <div className="people-hero-stats">
            <div><div className="n">{n}</div><div className="l">Leadership</div></div>
            <div><div className="n">{advisorCount}</div><div className="l">Advisors</div></div>
            <div><div className="n">39</div><div className="l">Approvals</div></div>
            <div><div className="n">5</div><div className="l">Offices</div></div>
          </div>
        </div>
      </div>
      <style>{`
        .people-hero-simple {
          position: relative;
          padding: 140px 0 80px;
          background: #fff;
          color: #0B1C2C;
          overflow: hidden;
        }
        .people-hero-simple-inner {
          max-width: 1100px;
          margin: 0 auto;
          padding: 0 40px;
        }
        .people-hero-copy h1 {
          font-size: clamp(36px, 4.8vw, 60px);
          font-weight: 700;
          letter-spacing: -.02em;
          line-height: 1.05;
          color: #0B1C2C;
          margin: 22px 0 20px;
          text-wrap: balance;
          max-width: 22ch;
        }
        .people-hero-copy h1 em {
          font-style: italic;
          color: #004AAD;
          font-weight: 700;
        }
        .people-hero-lede {
          font-size: 17px;
          line-height: 1.65;
          color: #4A5F77;
          max-width: 620px;
          margin: 0 0 32px;
        }
        .people-hero-stats {
          display: grid;
          grid-template-columns: repeat(4, auto);
          gap: 40px;
          justify-content: start;
        }
        @media (max-width: 480px) { .people-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } }
        .people-hero-stats > div .n {
          font-size: 32px;
          font-weight: 800;
          letter-spacing: -.02em;
          color: #004AAD;
          line-height: 1;
        }
        .people-hero-stats > div .l {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 11px;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: #838B93;
          margin-top: 6px;
        }
      `}</style>
    </section>
  );
}

// Reusable LinkedIn icon link, sized + styled by caller.
function LinkedInLink({ href, className="leader-linkedin" }){
  if (!href) return null;
  return (
    <a className={className} href={href} target="_blank" rel="noreferrer" onClick={e=>e.stopPropagation()} aria-label="LinkedIn profile">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
        <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-2.1-1.5-2.1a1.63 1.63 0 00-1.6 1.67V19H10v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.9 0 3.4 1.16 3.4 3.92V19z"/>
      </svg>
    </a>
  );
}

function BoardSection(){
  const all = window.PEOPLE_LEADERSHIP || [];
  // Preserve a deterministic display order.
  const order = [
    "Kendric Speagle",
    "John Shufeldt",
    "Glenn Dean",
    "Kate Fassett",
    "Manel Ben-Aissa",
    "Nicholas Harris",
    "David Pulver",
    "Ben Tietgen",
  ];
  const board = order
    .map(prefix => all.find(p => p.name.startsWith(prefix)))
    .filter(Boolean);
  if (board.length === 0) return null;
  return (
    <section className="section section-board" id="board">
      <div className="section-inner">
        <div className="board-head">
          <div className="eyebrow"><span className="dot"/>The VivaMed Team · {board.length} members</div>
          <h2>The VivaMed Team.</h2>
          <p>The executive leadership setting VivaMed's direction.</p>
        </div>
        <div className="board-grid">
          {board.map(p=>(
            <article key={p.name} className="board-card">
              <div className="board-photo">
                <img src={p.photo} alt={p.name}/>
                <LinkedInLink href={p.linkedin} className="board-li"/>
              </div>
              <div className="board-meta">
                <div className="board-name">{p.name}</div>
                <div className="board-title">{p.title}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .section-board {
          padding: 96px 0 72px;
          background: #fff;
        }
        .board-head {
          max-width: 880px;
          margin: 0 auto 48px;
          padding: 0;
          text-align: left;
        }
        .board-head h2 {
          font-size: clamp(32px, 4.4vw, 52px);
          font-weight: 700;
          letter-spacing: -.02em;
          line-height: 1.05;
          color: #0B1C2C;
          margin: 16px 0 14px;
        }
        .board-head p {
          font-size: 16px;
          line-height: 1.6;
          color: #4A5F77;
          margin: 0;
          max-width: 580px;
        }
        .board-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        @media (max-width: 900px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .board-grid { grid-template-columns: 1fr; } }
        .board-card {
          background: #fff;
          border: 1px solid var(--border, #e3ebf4);
          border-radius: 10px;
          overflow: hidden;
          transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
        }
        .board-card:hover {
          border-color: #004AAD;
          transform: translateY(-2px);
          box-shadow: 0 20px 40px -24px rgba(0, 74, 173, .25);
        }
        .board-photo {
          position: relative;
          aspect-ratio: 1 / 1;
          background: #EAEEF3;
          overflow: hidden;
        }
        .board-photo img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          transition: transform .4s ease;
        }
        .board-card:hover .board-photo img { transform: scale(1.03); }
        .board-li {
          position: absolute;
          top: 10px; right: 10px;
          width: 30px; height: 30px;
          border-radius: 8px;
          background: rgba(255,255,255,.92);
          color: #0A66C2;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(4px);
          box-shadow: 0 4px 12px rgba(11,28,44,.15);
          transition: background .15s ease, transform .15s ease;
        }
        .board-li:hover { background: #fff; transform: scale(1.06); }
        .board-meta {
          padding: 18px 18px 20px;
        }
        .board-name {
          font-size: 17px;
          font-weight: 700;
          color: #0B1C2C;
          letter-spacing: -.005em;
          line-height: 1.25;
          margin-bottom: 6px;
        }
        .board-title {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 11.5px;
          letter-spacing: .04em;
          line-height: 1.4;
          color: #6B8AAB;
        }
      `}</style>
    </section>
  );
}

function Advisors(){
  const [filter, setFilter] = useState("all");
  const allAdvisors = window.PEOPLE_ADVISORS;
  const withBios = allAdvisors.filter(a => a.bio && a.bio !== "Bio coming soon.");
  const comingSoon = allAdvisors.filter(a => !a.bio || a.bio === "Bio coming soon.");

  const specialties = ["all", ...Array.from(new Set(withBios.map(a=>a.specialty))).filter(s=>s!=="TBD")];
  const filtered = filter==="all" ? withBios : withBios.filter(a=>a.specialty===filter);

  const initials = (name)=> name.replace(/,.*$/,"").split(" ").filter(w=>!/^(Dr\.?|MD|DO|PhD|MBA|MPH|JD|FACEP|FACC|FSCAI|FARVO|MS|MEd|M\.P\.A\.|B\.S\.|CPA)/i.test(w)).slice(0,2).map(w=>w[0]).join("");

  return (
    <section className="section section-advisors" id="advisors">
      <div className="section-inner">
        <div className="advisors-head">
          <div className="eyebrow" style={{color:"#3393F0",borderColor:"rgba(51,147,240,.35)",background:"rgba(51,147,240,.08)"}}>
            <span className="dot"/>Clinical advisory board · {allAdvisors.length} members
          </div>
          <h2>Clinicians from the<br/>frontlines of medicine.</h2>
          <p>A standing panel of specialists who pressure-test our endotype definitions, review our clinical protocols, and connect VivaMed programs to real patient populations.</p>
        </div>
        <div className="advisor-filters">
          {specialties.map(s=>(
            <button
              key={s}
              className={`filter-chip${filter===s?" active":""}`}
              onClick={()=>setFilter(s)}
            >{s==="all"?"All specialties":s}</button>
          ))}
          <div style={{marginLeft:"auto",fontFamily:"var(--mono)",fontSize:11,letterSpacing:".05em",color:"var(--muted)"}}>
            {filtered.length} of {withBios.length} featured · {comingSoon.length} more below
          </div>
        </div>
        <div className="advisor-grid">
          {filtered.map(a=>(
            <div key={a.name} className="advisor-card">
              <div className="advisor-head">
                <div className="advisor-avatar">{initials(a.name)}</div>
                <div>
                  <div className="advisor-name">{a.name}</div>
                  <div className="advisor-role">{a.title}</div>
                </div>
              </div>
              <div className="advisor-specialty">{a.specialty}</div>
              <p className="advisor-bio">{a.bio}</p>
            </div>
          ))}
        </div>

        {comingSoon.length > 0 && filter === "all" && (
          <div className="advisor-more">
            <div className="advisor-more-head">
              <div className="advisor-more-label">Additional clinical advisors</div>
              <div className="advisor-more-sub">Bios coming soon</div>
            </div>
            <div className="advisor-more-chips">
              {comingSoon.map(a=>(
                <div key={a.name} className="advisor-chip">
                  <div className="advisor-chip-avatar">{initials(a.name)}</div>
                  <div className="advisor-chip-name">{a.name}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <style>{`
        .advisor-more {
          margin-top: 56px;
          padding-top: 40px;
          border-top: 1px solid rgba(0, 74, 173, .1);
        }
        .advisor-more-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-bottom: 20px;
          flex-wrap: wrap;
          gap: 8px;
        }
        .advisor-more-label {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 12px;
          letter-spacing: .12em;
          text-transform: uppercase;
          color: #0B1C2C;
        }
        .advisor-more-sub {
          font-size: 12.5px;
          color: #6B8AAB;
          font-style: italic;
        }
        .advisor-more-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .advisor-chip {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 8px 14px 8px 8px;
          background: #fff;
          border: 1px solid #e3ebf4;
          border-radius: 999px;
          transition: border-color 180ms ease, transform 180ms ease;
        }
        .advisor-chip:hover {
          border-color: #3393F0;
          transform: translateY(-1px);
        }
        .advisor-chip-avatar {
          width: 28px; height: 28px;
          border-radius: 50%;
          background: linear-gradient(135deg, #004AAD, #3393F0);
          color: #fff;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .02em;
          display: inline-flex; align-items: center; justify-content: center;
        }
        .advisor-chip-name {
          font-size: 13px;
          font-weight: 600;
          color: #0B1C2C;
        }
      `}</style>
    </section>
  );
}

function TeamPhoto(){
  return (
    <section className="team-photo-sec" id="team-photo">
      <div className="team-photo-head">
        <h2 className="team-photo-title">
          One team.<br/>
          <span className="hl">Five offices.</span> One mission.
        </h2>
        <p className="team-photo-lede">
          Physicians, scientists, and operators across five cities — united by a single
          bet: that decomposing diseases into their causal mechanisms is how we get to
          better drugs faster.
        </p>
      </div>
      <div className="team-photo-wrap">
        <img
          src="assets/team-photo.png"
          alt="The VivaMed BioPharma team photographed together at an all-hands"
          className="team-photo-img"
          loading="lazy"
        />
        <div className="team-photo-fade" aria-hidden="true"/>
      </div>
      <style>{`
        .team-photo-sec {
          position: relative;
          padding: 120px 0 80px;
          background: #EAEEF3;
          overflow: hidden;
        }
        .team-photo-head {
          max-width: 880px;
          margin: 0 auto 56px;
          padding: 0 40px;
          text-align: center;
        }
        .team-photo-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 12px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: #004AAD;
          margin-bottom: 22px;
          padding: 6px 14px;
          border: 1px solid rgba(0, 74, 173, .25);
          border-radius: 999px;
          background: rgba(0, 74, 173, .06);
        }
        .team-photo-eyebrow .dot {
          width: 6px; height: 6px;
          background: #004AAD;
          border-radius: 50%;
        }
        .team-photo-title {
          font-size: clamp(36px, 5vw, 64px);
          font-weight: 700;
          letter-spacing: -.02em;
          line-height: 1.05;
          color: #0B1C2C;
          margin: 0 0 24px;
          text-wrap: balance;
        }
        .team-photo-title .hl {
          color: #004AAD;
          font-weight: 700;
        }
        .team-photo-lede {
          font-size: 17px;
          line-height: 1.6;
          color: #4A5F77;
          max-width: 620px;
          margin: 0 auto;
        }
        .team-photo-wrap {
          position: relative;
          max-width: 1440px;
          margin: 0 auto;
          padding: 0 40px;
        }
        .team-photo-img {
          width: 100%;
          height: auto;
          display: block;
          border-radius: 20px;
          box-shadow:
            0 40px 120px -40px rgba(0, 74, 173, .25),
            0 1px 0 rgba(255,255,255,.8) inset;
        }
        .team-photo-fade {
          position: absolute;
          left: 40px; right: 40px; bottom: 0;
          height: 120px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          background: linear-gradient(180deg, transparent 0%, rgba(234, 238, 243, .85) 100%);
          pointer-events: none;
        }
        @media (max-width: 760px) {
          .team-photo-sec { padding: 80px 0 56px; }
          .team-photo-head { padding: 0 24px; margin-bottom: 40px; }
          .team-photo-wrap { padding: 0 20px; }
          .team-photo-img { border-radius: 14px; }
          .team-photo-fade { left: 20px; right: 20px; border-radius: 0 0 14px 14px; height: 80px; }
        }
      `}</style>
    </section>
  );
}

function InMemoriam(){
  return (
    <section className="section memoriam">
      <div className="section-inner">
        <div className="memoriam-card">
          <div className="memoriam-body">
            <div className="memoriam-eyebrow">MANAGEMENT TEAM</div>
            <div className="memoriam-name">Honoring the Legacy of Dr. Chad Hays</div>

            <p className="memoriam-note">
              Dr. Chad Hays was a physician, attorney, and healthcare executive whose expertise in clinical leadership, regulatory affairs, and health policy made a profound impact on the healthcare industry. His unique ability to bridge medicine, law, and business allowed him to navigate complex challenges and drive meaningful innovation.
            </p>
            <p className="memoriam-note">
              As a senior medical director at one of the largest integrated healthcare organizations in the U.S., Dr. Hays provided clinical oversight for a vast provider network, implementing care models that improved patient outcomes and operational efficiency. He was also a dedicated mentor, serving as an assistant professor of emergency medicine, guiding the next generation of physicians.
            </p>
            <p className="memoriam-note">
              Dr. Hays was a valued advisor to VivaMed BioPharma, where his strategic insights into clinical development, regulatory pathways, and market access strengthened our mission to advance transformative healthcare solutions. His wisdom, leadership, and passion for improving patient care continue to inspire us.
            </p>
            <p className="memoriam-note">
              We are deeply grateful for Dr. Hays’ contributions to the sector and honored to carry forward his legacy in our work.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function PeopleCTA(){
  return (
    <>
      <section className="footer-cta footer-cta-dark">
        <h2>Looking for the right mind in the right room?</h2>
        <p>We're always hiring scientists, engineers, and clinicians. We're also always looking for the next clinical advisor.</p>
        <div className="footer-cta-actions">
          <a className="btn btn-dark" href="mailto:info@vivamed.com">Get in touch</a>
          <a className="btn btn-ghost" href="/advisors">Join the advisory board →</a>
        </div>
      </section>
      <PageFooter/>
    </>
  );
}

function App(){
  return (
    <>
      <TeamPhoto/>
      <PeopleHero/>
      <BoardSection/>
      <Advisors/>
      <InMemoriam/>
      <PeopleCTA/>
    </>
  );
}

return App;
})();