// Advisors page — VivaMed Biopharma
window.AdvisorsApp = (function(){
const { useState } = React;

function AdvHero(){
  return (
    <section className="subpage-hero">
      <div className="subpage-hero-inner">
        <div className="subpage-eyebrow"><span className="dot"/>VIVAMED CLINICAL ADVISORY BOARD</div>
        <h1 className="subpage-h1">
          Clinicians who still see <em>patients</em> — shaping how we pick programs, design trials, and read out.
        </h1>
        <p className="subpage-lede">
          VivaMed's clinical advisory board is a standing group of practicing physicians who
          review every protocol we run, every program we prioritize, and every biomarker we commit to.
          We're now expanding the board to three new specialties.
        </p>
      </div>
    </section>
  );
}

function AdvStrip(){
  const items = [
    ["14","Current advisors"],
    ["4h/mo","Expected commitment"],
    ["48 months","Standard term"],
  ];
  return (
    <section className="subpage-strip">
      <div className="subpage-strip-inner">
        {items.map(([v,l],i)=>(
          <div key={i} className="subpage-strip-item"><b>{v}</b>{l}</div>
        ))}
      </div>
    </section>
  );
}

// Reduce a full name to 2-letter initials for the avatar chip.
function initialsFor(name){
  const clean = (name || "").replace(/^Dr\.?\s+/i, "").split(",")[0].trim();
  const parts = clean.split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "??";
  if (parts.length === 1) return parts[0].slice(0,2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

function AdvCurrent(){
  const advisors = (window.PEOPLE_ADVISORS || []);
  return (
    <section className="adv-sec">
      <div className="adv-sec-inner">
        <div className="adv-head">
          <div className="careers-section-head">Current board</div>
          <h2>Clinicians from Barrow, Banner, Creighton, and Utah — every one still practicing.</h2>
          <p>The full VivaMed clinical advisory board. Each advisor reviews protocols, prioritizes programs, and advises on biomarker-driven enrollment in their specialty.</p>
        </div>
        <div className="adv-profiles">
          {advisors.map((a, idx)=>(
            <div key={idx} className="adv-profile">
              <div className="adv-avatar">{initialsFor(a.name)}</div>
              <div className="adv-info">
                <h3>{a.name}</h3>
                <div className="adv-role">{a.title}</div>
                <p className="adv-bio">{a.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AdvWhoWeAre(){
  const items = [
    { n:"01", t:"Practicing clinicians — currently",
      d:"We want advisors who still spend at least one clinic day per week with patients. If your last clinic session was in 2019, you're probably not who we're looking for.",
      list:[
        "Board-certified in a relevant specialty",
        "Active academic, hospital, or private practice",
        "Comfortable saying \"I don't know\" in a room full of ML researchers",
      ]},
    { n:"02", t:"Deep in one of three specialties",
      d:"For the 2026 board expansion we are specifically looking to add seats in:",
      list:[
        "Endocrinology — type 2 diabetes endotyping, GLP-1 non-responder subtypes",
        "Nephrology — CKD progression heterogeneity, proteinuric vs. non-proteinuric endotypes",
        "Gastroenterology — IBD subtype diagnosis, biologics-refractory populations",
      ]},
    { n:"03", t:"Willing to disagree with us — loudly",
      d:"The single most useful thing an advisor does is push back. We hire the people we will argue with most productively.",
      list:[
        "Comfortable redlining manuscripts and protocols",
        "Willing to tell us a program should be killed",
        "Track record of changing their own mind in public",
      ]},
    { n:"04", t:"Physical presence in the US or EU",
      d:"We meet quarterly in-person. Travel is reimbursed. If you can't travel 3–4 times a year, a non-voting correspondent seat may be a better fit — we have those too.",
      list:[
        "Quarterly in-person meetings (Phoenix · Boston · Basel)",
        "Monthly 90-min video call for active-protocol review",
        "Ad-hoc consults on specific programs — paid separately",
      ]},
  ];
  return (
    <section className="adv-sec alt">
      <div className="adv-sec-inner">
        <div className="adv-head">
          <div className="careers-section-head">Who we're looking for</div>
          <h2>Four things we care about, in this order.</h2>
        </div>
        <div className="exp-grid">
          {items.map(it=>(
            <div key={it.n} className="exp-card">
              <div className="exp-num">{it.n}</div>
              <h3 className="exp-title">{it.t}</h3>
              <p className="exp-desc">{it.d}</p>
              {it.list && (
                <ul className="exp-list">
                  {it.list.map((l,i)=><li key={i}>{l}</li>)}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AdvApply(){
  return (
    <section className="apply-cta">
      <h2>Think you'd be a good fit?</h2>
      <p>
        Send us a short note — who you are, what you practice, and which of our programs
        you'd most want to poke holes in. We read every application and reply to all of them
        within two weeks.
      </p>
      <div className="apply-cta-btns">
        <a className="home-cta-primary" href="mailto:info@vivamed.com" style={{background:"#fff",color:"#0B1C2C"}}>
          info@vivamed.com
        </a>
        <a className="home-cta-secondary" href="/people">Meet the current team →</a>
      </div>
    </section>
  );
}

function App(){
  return (
    <>
      <AdvHero/>
      <AdvStrip/>
      <AdvCurrent/>
      <AdvWhoWeAre/>
      <AdvApply/>
      <FooterCTA/>
    </>
  );
}

return App;
})();