// TeamPage — three treatments for Quarterdeck team section
// Renders three treatments stacked with labels, plus the about-page hero.

const TEAM = [
  {
    id: 'amanda',
    photo: 'assets/team/amanda.jpg',
    name: 'Amanda',
    role: 'Managing Partner',
    dek: "A trusted strategic advisor and technical consultant with nearly two decades of experience helping foundations, nonprofits, schools, and corporations tackle complex challenges.",
    currently: 'How foundation boards are actually talking about AI.',
    bio: [
      "Started Quarterdeck because the best strategists she knew were handing decks to engineers they had never met. That gap made no sense. Now the decks and the engineers share a Slack.",
      "Writes most of the field guides. Runs the Initial Evaluations. Believes in short meetings and long memos.",
    ],
    quote: 'If the strategy is good, someone has already thought about who will implement it.',
    meta: ['Providence', 'Managing Partner', 'Strategy'],
  },
  {
    id: 'jonas',
    photo: 'assets/team/jonas.png',
    name: 'Jonas',
    role: 'Partner',
    dek: "Leads Quarterdeck's AI and Technology practice, working with leadership teams at universities, foundations, and businesses to move from AI curiosity to AI capability. He brings an unusual combination of technical depth, strategic clarity, and investor pattern recognition to every engagement.",
    currently: 'Context engineering — why what you put in front of a model determines the ceiling of what it can actually do for you.',
    bio: [
      'Came from research engineering. Joined because the work that matters is integration and training, not demos.',
      "Has a healthy skepticism of anything that sounds like 'autonomous.' Writes eval harnesses before he writes features.",
    ],
    quote: 'If it works in the demo and not on Tuesday, it does not work.',
    meta: ['Providence', 'Partner', 'Technology · AI'],
  },
  {
    id: 'sharon',
    photo: 'assets/team/sharon.png',
    name: 'Sharon',
    role: 'Partner',
    dek: 'A seasoned consultant and operator with over 25 years of experience scaling businesses, optimizing operations, and driving impact.',
    currently: 'How to deploy AI tools inside organizations — and make the adoption actually stick.',
    bio: [
      'Was a client of the people who became Quarterdeck before joining as a partner. Knows where the sharp edges of institutional change live.',
      'Leads engagements where the word "consortium" comes up. Has sat through the meetings.',
    ],
    quote: 'A good roadmap survives its first encounter with a department chair.',
    meta: ['Providence', 'Partner', 'Strategy · Operations'],
  },
  {
    id: 'jeff',
    photo: 'assets/team/jeff.png',
    name: 'Jeff',
    role: 'Technical Director',
    dek: 'A technology leader and AI expert with deep experience in AI-driven solutions, data processing, and software engineering.',
    currently: 'Building better and more resilient model harnesses — the infrastructure layer that determines whether AI holds up outside the demo.',
    bio: [
      "Came up through institutional IT, ran platforms at two universities, then got tired of shipping someone else's roadmap. Joined to close the loop between strategy and build.",
      'If your AI pilot has been stuck in "evaluation" for nine months, he is the person you want in the room.',
    ],
    quote: "The interesting engineering problems are almost never the ones that look interesting.",
    meta: ['Providence', 'Technical Director', 'Technology · AI'],
  },
  {
    id: 'al',
    photo: 'assets/team/al.png',
    name: 'Al',
    role: 'AI / Machine Learning Specialist',
    dek: 'A seasoned AI researcher and implementer who brings deep technical experience delivering working, reliable systems.',
    currently: 'The unglamorous data engineering work that has to happen before the interesting AI work can begin.',
    bio: [
      'Built Revere Auctions\' invoicing and inventory platform and most of what clients call "the stuff that finally works." Has opinions about durability.',
      'Prefers writing tests to writing copy, but writes good copy too, because he had to.',
    ],
    quote: 'The systems that last are the ones somebody else can maintain without you.',
    meta: ['Providence', 'AI / ML Specialist', 'Technology'],
  },
  {
    id: 'chelsea',
    photo: 'assets/team/chelsea.png',
    name: 'Chelsea',
    role: 'Creative Director',
    dek: 'A designer and entrepreneur who plays at the collision of design and business. Her superpower is transforming ambiguity into clarity.',
    currently: 'How to help teams build design systems that survive contact with the people who actually have to use them.',
    bio: [
      'Came from applied policy research. Reads transcripts on purpose. Has a long-running argument with the phrase "best practices."',
      'Leads assessments for higher-ed and foundation clients; writes the memos that clients quote back to us months later.',
    ],
    quote: 'Best practice is a sentence that usually means "we did not have time to think."',
    meta: ['Boston · Remote', 'Creative Director', 'Design · Strategy'],
  },
  {
    id: 'molly',
    photo: 'assets/team/molly.png',
    name: 'Molly',
    role: 'Senior Financial Consultant',
    dek: 'Brings over a decade of experience in finance and strategy, with deep expertise in accounting and organizational sustainability.',
    currently: 'How nonprofit CFOs can build financial systems rigorous enough to actually drive decisions.',
    bio: [
      'Background in institutional advancement at two New England colleges. Spent a decade learning how large organizations actually make decisions — and where strategy quietly dies.',
      "Runs engagements from kickoff to whatever comes after launch. Does not use the word 'workstream.'",
    ],
    quote: 'Adoption is a staffing question before it is a technology question.',
    meta: ['Chicago', 'Senior Financial Consultant', 'Finance · Strategy'],
  },
];

// --- About-page hero ---
function TeamHero() {
  return (
    <section className="q-team-head">
      <div className="q-wrap">
        <div className="q-section-head" style={{ marginBottom: 0 }}>
          <div className="q-eyebrow">The team</div>
          <h2>Small firm. Senior people. <em>No handoffs.</em></h2>
          <p>We started Quarterdeck because the best strategists we knew were handing decks to engineers they had never met. That gap made no sense to us, and it still doesn't. At Quarterdeck every engagement is led by a partner. The person who scopes the work is in the room when it is built, at the table for every decision that matters, and genuinely passionate in seeing its impact.</p>
        </div>
      </div>
    </section>
  );
}

// --- About-page intro band (sits above the grid on the real About page) ---
function AboutIntro() {
  return (
    <section style={{ padding: '0 0 80px', background: 'var(--qd-paper-50)' }}>
      <div className="q-wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, paddingTop: 24, borderTop: '1px solid var(--qd-paper-300)' }} className="q-about-intro">
          <div style={{ fontSize: 'clamp(1.5rem, 2.6vw, 2rem)', fontWeight: 300, lineHeight: 1.25, letterSpacing: '-.015em', color: 'var(--fg-1)', maxWidth: '24ch', textWrap: 'balance' }}>
            A firm of people who do the thinking <em style={{ fontStyle: 'normal', fontWeight: 600 }}>and</em> the building — not one handing off to the other.
          </div>
          <div>
            <p style={{ margin: '0 0 16px', fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: '52ch' }}>We started Quarterdeck in 2018 because the best strategists we knew were handing decks to engineers they had never met. That gap made no sense to us, and it still doesn't.</p>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: '52ch' }}>We stayed small on purpose. Every engagement is led by a partner. The person who scopes the work is in the room when it is built, and on the call when something is not going well.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Treatment A: Editorial portrait grid (the About page team section) ---
function TeamGrid({ setRoute }) {
  return (
    <section className="q-team-a">
      <div className="q-wrap">
        <div className="q-team-a-grid">
          {TEAM.map(m => (
            <div key={m.id} className="q-team-a-card" style={{ cursor: 'pointer' }} onClick={() => {
              if (setRoute) setRoute('bio', m.id);
            }}>
              <div className="q-team-a-portrait"><img src={m.photo} alt={m.name} /></div>
              <div className="q-team-a-name">{m.name}</div>
              <div className="q-team-a-role">{m.role}</div>
              <div className="q-team-a-dek">{m.dek}</div>
              <div className="q-team-a-aside">
                <span className="label">Currently thinking about</span>
                {m.currently}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage({ setRoute }) {
  return (
    <div data-screen-label="04 About — team">
      <SiteNav route="team" setRoute={setRoute} theme="light" />
      <TeamHero />
      <TeamGrid setRoute={setRoute} />
      <section className="q-closer" style={{ paddingTop: 0 }}>
        <div className="q-wrap">
          <div className="q-closer-inner">
            <div>
              <div className="q-eyebrow">Work with us</div>
              <h2>If the shape of this sounds <em>like the help you need,</em> say hello.</h2>
            </div>
            <div>
              <p>A first conversation is short, specific, and free. Tell us what you're working on; we'll tell you whether we're the right partner for it.</p>
              <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="qbtn qbtn--primary" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { AboutPage });