// Higher Education Segment Page — top-level

function HigherEdPage({ setRoute }) {
  const goCase = (caseId) => {
    setRoute('case', caseId);
  };

  return (
    <div data-screen-label="09 Higher Education">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="higher-ed" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Who we serve</div>
          <h1>For higher education institutions <em>building what comes next.</em></h1>
          <p className="lede">
            We are technology and strategy partners for colleges, universities, and the research centers and initiatives they house. The work spans institutional data and intelligence, digital infrastructure, and organizational strategy — often in the same engagement. We know this sector because we have worked inside it for years.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a className="qbtn qbtn--paper">Start a conversation <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Typical profile</dt><dd>Research universities, liberal arts colleges, conservatories, academic centers</dd></div>
            <div><dt>Recognition</dt><dd>2025 CASE Circle of Excellence Award</dd></div>
            <div><dt>Who leads</dt><dd>Senior partners with deep higher ed sector experience</dd></div>
          </dl>
        </div>
      </section>

      <section className="q-situation">
        <div className="q-wrap">
          <div className="q-situation-grid">
            <div>
              <div className="q-eyebrow">The situation</div>
            </div>
            <div>
              <p><strong>Higher education institutions are running some of the most complex digital and data environments of any organization type — and most of them know it.</strong> Websites serving multiple audiences, CMS platforms carrying decades of content, advancement systems, research databases, administrative tools. These were built at different times, for different purposes, and they are increasingly failing to work together.</p>
              <p><strong>At the same time, institutions are generating more data than they can use.</strong> Donor records, engagement history, research outputs, financial flows, enrollment patterns — the information to make better institutional decisions exists. It just lives in silos that make it hard to see clearly. AI can change what's possible here, but only if the underlying infrastructure is built to support it.</p>
              <p><strong>Research centers and academic initiatives face their own version of these pressures.</strong> Many are operating on funding models that worked for one cycle and may not hold for the next. The strategic questions — how to sustain, how to grow, how to make the case to funders and institutional leadership — often don't fit neatly into the institution's existing governance structures.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">What we do for higher education</div>
            <h2>Three practice areas, <em>built for the sector.</em></h2>
            <p>Our work in higher ed spans institutional data and intelligence, digital infrastructure, and strategy for centers and initiatives. Most engagements touch more than one.</p>
          </div>
          <div className="q-entry-list">

            <div className="q-entry-item" style={{ cursor: 'pointer' }} onClick={() => setRoute('higher-ed-intelligence')}>
              <div className="q-entry-num">01</div>
              <div className="q-entry-title">
                <span className="label">Institutional Intelligence</span>
                Seeing the institution clearly — and acting on what you see.
              </div>
              <div className="q-entry-body">
                <p>Most colleges and universities are sitting on data that could transform how they operate. Donor records, enrollment patterns, research outputs, financial flows — the information to make much better decisions exists. The infrastructure to make it useful often doesn't. We build that infrastructure and layer the intelligence on top of it.</p>
                <p>The advancement analytics work we did with the New England Conservatory — recognized with a 2025 CASE Circle of Excellence Award — is one example of what this looks like in practice. We are bringing this approach to other institutions ready to close the gap between the data they have and the decisions it could support.</p>
              </div>
            </div>

            <div className="q-entry-item" style={{ cursor: 'pointer' }} onClick={() => setRoute('higher-ed-digital')}>
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Digital Infrastructure</span>
                Technology that works at institutional scale — and is built to last.
              </div>
              <div className="q-entry-body">
                <p>Higher education institutions operate complex digital environments that were built over decades. When the pieces stop working together, the cost is high and the path to fixing it is not obvious. We have rebuilt institutional digital infrastructure at scale — and we know how to navigate the stakeholder landscape that comes with it.</p>
                <p>Our five-year partnership with the New England Conservatory — which earned a 2025 CASE Circle of Excellence Award — is the reference point. We know what it takes to do this work right, and we know the difference between a launch that holds and one that doesn't.</p>
              </div>
            </div>

            <div className="q-entry-item" style={{ cursor: 'pointer' }} onClick={() => setRoute('higher-ed-strategy')}>
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">Strategy for Centers and Initiatives</span>
                Organizational clarity for the programs that need it most.
              </div>
              <div className="q-entry-body">
                <p>Academic centers, research initiatives, and interdisciplinary programs often face strategic questions their institutional home isn't equipped to answer: how to sustain, how to grow, how to build a funding model that doesn't depend on the next grant cycle, how to make the case to funders and institutional leadership at the same time.</p>
                <p>Our work with NCARE at Northwestern and EdExchange at Brown's Annenberg Institute both started here. We bring outside perspective and sector experience to programs that have domain expertise and need strategic clarity.</p>
              </div>
            </div>

          </div>
        </div>
      </section>

      <section className="q-work-cases" style={{ background: 'var(--qd-paper-100)', padding: '80px 0' }}>
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow q-eyebrow--dark">Selected work</div>
            <h2>Named partnerships, <em>full case studies.</em></h2>
            <p>We name our clients, describe what was actually hard, and say what changed.</p>
          </div>
          <div className="q-work-grid">
            {[
              {
                id: 'nec',
                sector: 'Higher Education · Technology',
                client: 'New England Conservatory',
                desc: 'Five-year partnership. Custom CMS, full platform rebuild, and advancement analytics. 2025 CASE Circle of Excellence Award.',
                services: ['Strategy', 'Technology'],
                image: 'assets/nec-hero.jpg',
              },
              {
                id: 'edexchange',
                sector: 'Higher Education · Strategy',
                client: 'EdExchange at Brown',
                desc: 'Sustainability and growth frameworks for a nationally recognized education research platform at the Annenberg Institute.',
                services: ['Strategy'],
                image: 'assets/EdExchange%20Annenberg%20Brown%20-%20Case%20Study%20Hero%20Image.jpg',
              },
              {
                id: 'ncare',
                sector: 'Higher Education · Strategy',
                client: 'NCARE at Northwestern',
                desc: 'Rebranding, consortium funding model, and go-to-market strategy at an organizational inflection point.',
                services: ['Strategy'],
                image: 'assets/Ncare%20-%20Case%20Study%20Hero%20Image.jpg',
              },
            ].map(c => (
              <div className="q-work-card" key={c.id} onClick={() => goCase(c.id)}>
                <div className="q-work-card-image" style={{ backgroundImage: `url(${c.image})` }}>
                  <div className="q-work-card-tag">{c.sector}</div>
                </div>
                <div className="q-work-card-body">
                  <h3 className="q-work-card-client">{c.client}</h3>
                  <p className="q-work-card-desc">{c.desc}</p>
                  <div className="q-work-card-footer">
                    <div className="q-work-card-services">
                      {c.services.map(s => <span key={s} className="q-work-card-svc">{s}</span>)}
                    </div>
                    <span className="q-work-card-link">Read the case <Arrow /></span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-offer">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 40 }}>
            <div className="q-eyebrow">Where to start</div>
            <h2>A contained first engagement — <em>scoped to where you are.</em></h2>
            <p>Whether the priority is institutional data and intelligence, a technology project, or a strategic question for a center or initiative, we start with a contained assessment that produces a clear picture and a prioritized plan. Scoped, priced, and written before you commit to anything.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Initial Assessment</div>
              <h3>A clear read on the situation and an honest recommendation for next steps.</h3>
              <p>Two to four weeks depending on scope. We interview the people doing the actual work — not just leadership — and produce a written assessment that your cabinet or board can read and use.</p>
              <p>We have worked in higher education long enough to know where the institutional friction typically lives. We won't be learning the terrain on your timeline.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>1–4 weeks depending on scope</dd></div>
                <div><dt>Team</dt><dd>Two senior partners</dd></div>
                <div><dt>Format</dt><dd>Stakeholder interviews + written assessment</dd></div>
                <div><dt>Output</dt><dd>Prioritized plan and recommendations</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Interviews across relevant academic and administrative stakeholders</li>
                <li>Review of existing tools, platforms, and workflows</li>
                <li>Honest assessment of readiness — not diplomatic, not padded</li>
                <li>Ranked recommendations with rationale for sequencing</li>
                <li>Written deliverable suitable for cabinet or board presentation</li>
              </ul>
              <a className="qbtn qbtn--primary">Start the conversation <Arrow /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="q-faq">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 24 }}>
            <div className="q-eyebrow">What higher ed clients usually ask</div>
            <h2>Common questions.</h2>
          </div>
          <div className="q-faq-list">
            {[
              { q: 'How do you navigate shared governance and faculty buy-in?', a: 'Carefully and from the start. We don\'t design strategies that require faculty to do something they haven\'t been consulted on. We include the right voices early, design for the culture that exists rather than the one a policy document assumes, and help leadership communicate in ways that are honest about both the opportunity and the limits.' },
              { q: 'We have a complex stakeholder map. How do you manage that?', a: 'It is a feature of working in higher education, not a complication we\'re surprised by. We have done stakeholder management across academic leadership, advancement, IT, faculty governance, and student-facing teams. We know how to run a process that keeps the relevant people informed and involved without making the project unmanageable.' },
              { q: 'Can you work within our existing procurement and vendor processes?', a: 'Yes. We are familiar with RFP processes, sole-source justifications, and the vendor management requirements that come with institutional procurement. Tell us what your process looks like and we\'ll tell you how to navigate it.' },
              { q: 'What if we just need help with a specific project, not a broader engagement?', a: 'That is a fine starting point. Many of our higher education relationships begin with a specific technology project or a strategic question for a center — and evolve from there. We don\'t require the full picture to start the work.' },
              { q: 'Do you work with centers and institutes directly, or only through the institution?', a: 'Directly. Centers and institutes are often our primary client — with the institutional context in mind but not captured by it. We help them navigate the institution, not ignore it.' },
            ].map((f, i) => (
              <div className="q-faq-item" key={i}>
                <div className="q">{f.q}</div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-svc-cta">
        <div className="q-wrap">
          <div className="q-svc-cta-inner">
            <div>
              <div className="q-eyebrow q-eyebrow--dark">Next step</div>
              <h2>Tell us what you are <em>working through.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. We know the terrain and we'll ask the right questions. If a scoped first engagement makes sense, we write the scope before you commit.</p>
              <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
                <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('home')}>Back to home <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { HigherEdPage });