// Bio page template — two layouts, applied to the real team roster.
// Layout A: Image-forward (portrait leads)
// Layout B: Text-forward (typography leads, photo secondary)

const BIO_TEAM = {
  amanda: {
    id: 'amanda',
    photo: 'assets/team/amanda.jpg',
    first: 'Amanda',
    last: 'Rinderle',
    role: 'Managing Partner',
    location: 'Rhode Island',
    lede: "A trusted strategic advisor with nearly two decades helping foundations, nonprofits, schools, and corporations tackle complex challenges.",
    bio: [
      "Amanda Rinderle is a trusted strategic advisor and consultant with nearly two decades of experience helping foundations, nonprofits, schools, and corporations tackle complex challenges. As Managing Partner at Quarterdeck, she leads high-impact work in strategy, AI, technology, and implementation across education, healthcare, and industry.",
      "Amanda previously served as a senior consultant at FSG and as a consultant at Oliver Wyman and Trinity Partners. She holds an MBA from Yale, where she graduated with distinction, and a BA from Princeton, magna cum laude.",
    ],
    currently: 'How foundation boards are actually talking about AI.',
  },
  jonas: {
    id: 'jonas',
    photo: 'assets/team/jonas.png',
    first: 'Jonas',
    last: 'Clark',
    role: 'Partner',
    location: 'Rhode Island',
    lede: "Leads the AI and Technology practice. Works with leadership teams at universities, foundations, and established businesses ready to move from AI curiosity to AI capability.",
    bio: [
      "Jonas works at the intersection of emerging technology and organizational reality — figuring out what's actually coming, and helping organizations put it to work. At Quarterdeck, he leads the firm's AI and Technology practice, working with leadership teams at universities, foundations, and established businesses who are ready to move from AI curiosity to AI capability. That typically means data infrastructure, workflow automation, and custom AI tooling built around how an organization actually operates, not a vendor's template.",
      "He also invests in early-stage technology companies as a partner at Elm Street Ventures, with a focus on AI and engineering-related technologies emerging from university research.",
      "Before this, Jonas taught entrepreneurship at Brown University and spent nearly a decade advising founding teams from the earliest stages through to fundraising and scale. He holds a BA from Haverford College and an MBA from Yale.",
    ],
    currently: 'Context engineering — why what you put in front of a model determines the ceiling of what it can actually do for you.',
  },
  sharon: {
    id: 'sharon',
    photo: 'assets/team/sharon.png',
    first: 'Sharon',
    last: 'Shepard',
    role: 'Partner',
    location: 'Massachusetts',
    lede: "Over 25 years scaling businesses, optimizing operations, and driving impact. Former COO of SaVida Health and Managing Director at BlueHub Capital.",
    bio: [
      "Sharon Shepard is a seasoned consultant and operator with over 25 years of experience scaling businesses, optimizing operations, and driving impact. As a Partner at Quarterdeck, she leads consulting engagements that help organizations tackle complex challenges and accelerate growth.",
      "Previously, Sharon served as COO of SaVida Health, where she led rapid multi-state expansion and built the operational foundation for long-term success in behavioral health. Prior to that, she was Managing Director at BlueHub Capital, a $1.4B CDFI, where she oversaw $225M in mission-driven investments across healthcare, housing, and financial inclusion.",
      "Her career spans leadership roles in venture capital, consulting, and startups—including as SVP at Mass Ventures and CEO of several tech firms. She has served on numerous nonprofit and corporate boards, was named Woman Entrepreneur of the Year, and holds a Master's in Mechanical Engineering from MIT.",
    ],
    currently: 'How to deploy AI tools inside organizations — and make the adoption actually stick.',
  },
  jeff: {
    id: 'jeff',
    photo: 'assets/team/jeff.png',
    first: 'Jeff',
    last: 'Hunter',
    role: 'Technical Director',
    location: 'Massachusetts',
    lede: "Technology leader and AI expert. Leads design and implementation of advanced AI solutions that help organizations turn complex data into smarter decisions.",
    bio: [
      "Jeff Hunter is a technology leader and AI expert with deep experience in AI-driven solutions, data processing, and software engineering. As Director and Head of AI Projects at Quarterdeck, he leads the design and implementation of advanced AI technologies that help organizations turn complex data into smarter decisions and greater efficiency.",
      "Jeff's career spans roles as head of engineering, CTO, and principal investigator on commercial and government-funded AI initiatives. He bridges research and real-world application, guiding teams from prototype to scalable deployment. He also advises leaders on how to integrate AI into strategy and operations through hands-on training and guidance.",
      "Jeff holds a PhD in Semiconductor Physics from Heriot-Watt University.",
    ],
    currently: 'Building better and more resilient model harnesses — the infrastructure layer that determines whether AI holds up outside the demo.',
  },
  al: {
    id: 'al',
    photo: 'assets/team/al.png',
    first: 'Al',
    last: 'Hough',
    role: 'AI / Machine Learning Specialist',
    location: 'Massachusetts',
    lede: "Seasoned AI researcher and implementer. Decades of experience delivering working, reliable systems. Published author in the field.",
    bio: [
      "Al Hough is a seasoned AI researcher and implementer who brings deep technical expertise to Quarterdeck's technical staff, focusing on delivering working, reliable systems.",
      "With a career spanning decades, Al has built a foundation of successful consulting engagements, the creation of large-scale robust systems, and a commitment to research currency. His background as a published author in the field ensures that all implementations are guided toward the most verified, robust, and cost-effective techniques available.",
      "Al holds a PhD in Computer Science from the University of Massachusetts.",
    ],
    currently: 'The unglamorous data engineering work that has to happen before the interesting AI work can begin.',
  },
  chelsea: {
    id: 'chelsea',
    photo: 'assets/team/chelsea.png',
    first: 'Chelsea',
    last: 'Acosta Patel',
    role: 'Creative Director',
    location: 'Massachusetts',
    lede: "A designer and entrepreneur who plays at the collision of design and business. Her superpower is transforming ambiguity into clarity.",
    bio: [
      "Designer, anthropologist, and strategist, Chelsea plays at the collision of design and business. She relishes transforming ambiguity into clarity through images and plain ol' English. She thinks human-centered-design is a buzzword (what else would we design for, rocks?). A hockey goalie at heart, she keeps her cool through any situation… except unexpectedly running out of coffee beans. Chelsea is a graduate of Cornell and holds an MBA from Yale.",
    ],
    currently: 'How to help teams build design systems that survive contact with the people who actually have to use them.',
  },
  molly: {
    id: 'molly',
    photo: 'assets/team/molly.png',
    first: 'Molly',
    last: 'Cosgrove',
    role: 'Senior Financial Consultant',
    location: 'Illinois',
    lede: "Over a decade in finance and strategy. Consults with nonprofits and mission-driven startups on financial strategy, accounting, and organizational sustainability.",
    bio: [
      "Molly Cosgrove brings over a decade of experience in finance and strategy, with deep expertise in accounting and organizational sustainability. She has served as Financial Controller of Burt Lewis Ingredients. In addition to her corporate leadership, Molly consults with nonprofits and mission-driven startups, providing financial strategy and hands-on implementation support in accounting and operations. She has advised organizations such as the YWCA, Lawndale Children's Discovery Center, and Demi Composting, helping them strengthen financial practices and scale their impact.",
      "Based in Chicago, Molly is also a dedicated community volunteer and an avid runner who has completed nine marathons, including the Chicago, Boston, and Berlin. Molly earned her MBA from the University of Chicago Booth School of Business with concentrations in accounting, entrepreneurship, and strategic management.",
    ],
    currently: 'How nonprofit CFOs can build financial systems rigorous enough to actually drive decisions.',
  },
};

const BIO_ORDER = ['amanda', 'jonas', 'sharon', 'jeff', 'al', 'chelsea', 'molly'];

// ------------------------------------------------------------------
// Layout A — Image-forward
// ------------------------------------------------------------------

function BioPageA({ member, prev, next, setRoute, setMember }) {
  const m = member;
  return (
    <div className="q-bio q-bio--a">
      <div className="q-wrap q-bio-crumbs">
        <a onClick={() => setRoute('team')}>Team</a>
        <span className="sep">/</span>
        <span>{m.first} {m.last}</span>
      </div>

      <section className="q-bio-a-hero">
        <div className="q-wrap">
          <div className="q-bio-a-grid">
            <figure className="q-bio-a-portrait">
              <img src={m.photo} alt={`${m.first} ${m.last}`} />
            </figure>
            <div className="q-bio-a-head">
              <div className="q-eyebrow">Team · {m.role}</div>
              <h1 className="q-bio-name">
                <span className="first">{m.first}</span>
                <span className="last">{m.last}</span>
              </h1>
              <p className="q-bio-lede">{m.lede}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-bio-body">
        <div className="q-wrap">
          <div className="q-bio-cols">
            <aside className="q-bio-aside">
              <div className="q-bio-aside-block">
                <dt>Role</dt>
                <dd>{m.role}</dd>
              </div>
              <div className="q-bio-aside-block">
                <dt>Based in</dt>
                <dd>{m.location}</dd>
              </div>
              <div className="q-bio-aside-block">
                <dt>Contact</dt>
                <dd><a href={`mailto:${m.id}@quarterdeck.io`}>{m.id}@quarterdeck.io</a></dd>
              </div>
            </aside>
            <div className="q-bio-prose">
              {m.bio.map((p, i) => <p key={i}>{p}</p>)}
              <div className="q-bio-current">
                <span className="label">Currently thinking about</span>
                <p>{m.currently}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <BioFooterNav prev={prev} next={next} setRoute={setRoute} setMember={setMember} />
    </div>
  );
}

// ------------------------------------------------------------------
// Layout B — Text-forward
// ------------------------------------------------------------------

function BioPageB({ member, prev, next, setRoute, setMember }) {
  const m = member;
  return (
    <div className="q-bio q-bio--b">
      <div className="q-wrap-narrow q-bio-crumbs">
        <a onClick={() => setRoute('team')}>Team</a>
        <span className="sep">/</span>
        <span>{m.first} {m.last}</span>
      </div>

      <section className="q-bio-b-hero">
        <div className="q-wrap">
          <div className="q-eyebrow">Team · {m.role}</div>
          <h1 className="q-bio-b-name">
            <span>{m.first}</span>
            <span className="ws"> </span>
            <span>{m.last}</span>
          </h1>
          <div className="q-bio-b-sub">
            <div className="role">{m.role}</div>
            <div className="loc">{m.location}</div>
          </div>
        </div>
      </section>

      <section className="q-bio-b-body">
        <div className="q-wrap">
          <div className="q-bio-b-grid">
            <div className="q-bio-b-prose">
              <p className="q-bio-lede">{m.lede}</p>
              {m.bio.map((p, i) => <p key={i}>{p}</p>)}
              <div className="q-bio-current">
                <span className="label">Currently thinking about</span>
                <p>{m.currently}</p>
              </div>
              <div className="q-bio-b-contact">
                <dt>Contact</dt>
                <dd><a href={`mailto:${m.id}@quarterdeck.io`}>{m.id}@quarterdeck.io</a></dd>
              </div>
            </div>
            <figure className="q-bio-b-portrait">
              <img src={m.photo} alt={`${m.first} ${m.last}`} />
              <figcaption>{m.first} {m.last}, {m.role}</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <BioFooterNav prev={prev} next={next} setRoute={setRoute} setMember={setMember} />
    </div>
  );
}

// ------------------------------------------------------------------
// Shared footer: prev / next / back to team
// ------------------------------------------------------------------

function BioFooterNav({ prev, next, setRoute, setMember }) {
  return (
    <section className="q-bio-foot">
      <div className="q-wrap">
        <div className="q-bio-foot-grid">
          <a className="q-bio-foot-link q-bio-foot-link--back" onClick={() => setRoute('team')}>
            <span className="label">Back to</span>
            <span className="target">The full team</span>
          </a>
          <a className="q-bio-foot-link" onClick={() => setMember(prev.id)}>
            <span className="label">Previous</span>
            <span className="target">{prev.first} {prev.last}<span className="role"> · {prev.role}</span></span>
          </a>
          <a className="q-bio-foot-link q-bio-foot-link--next" onClick={() => setMember(next.id)}>
            <span className="label">Next</span>
            <span className="target">{next.first} {next.last}<span className="role"> · {next.role}</span></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------------
// Page wrapper
// ------------------------------------------------------------------

function BioPage({ setRoute, bioId }) {
  const [memberId, setMemberId] = React.useState(bioId || 'amanda');
  React.useEffect(() => { window.scrollTo({ top: 0 }); }, [memberId]);

  const setMember = (id) => setRoute('bio', id);

  const member = BIO_TEAM[memberId];
  const idx = BIO_ORDER.indexOf(memberId);
  const prev = BIO_TEAM[BIO_ORDER[(idx - 1 + BIO_ORDER.length) % BIO_ORDER.length]];
  const next = BIO_TEAM[BIO_ORDER[(idx + 1) % BIO_ORDER.length]];

  return (
    <div data-screen-label={`05 Bio — ${member.first} ${member.last}`}>
      <SiteNav route="bio" setRoute={setRoute} theme="light" />
      <BioPageA member={member} prev={prev} next={next} setRoute={setRoute} setMember={setMember} />
      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { BioPage });