// Foundations — Technology sub-page

function FoundationsTechnologyPage({ setRoute }) {
  return (
    <div data-screen-label="07c Foundations · Technology">
      <section className="q-svc-hero2" style={{ padding: '0 0 100px' }}>
        <SiteNav route="foundations-technology" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark"><span className="q-eyebrow-link" onClick={() => setRoute('foundations')}>Foundations</span> · Technology</div>
          <h1>Technology built for how <em>foundations actually work.</em></h1>
          <p className="lede">
            Foundations often have more data, more operational complexity, and more technology debt than they realize. We help foundation leaders understand what they have, decide what to build, and then build it, with the same team, end to end.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a className="qbtn qbtn--paper">Start a conversation <Arrow /></a>
            <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('foundations')}>Back to Foundations <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Typical profile</dt><dd>Foundations ready to invest in operational infrastructure</dd></div>
            <div><dt>Common entry</dt><dd>Technology audit and roadmap</dd></div>
            <div><dt>Who leads</dt><dd>Partners with hands-on technical 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>The systems don't talk to each other.</strong> Grants management in one tool, financials in another, grantee communications in email, program data in spreadsheets. Staff spend hours every week on work that should take minutes. Nobody planned it this way — it accumulated.</p>
              <p><strong>The data is richer than anyone knows.</strong> Most foundations have years of grant history, program data, and operational information that could sharpen strategy, improve grantmaking decisions, and make reporting faster. But it's sitting in formats nobody can easily use.</p>
              <p><strong>The right technology fits the foundation, not the other way around.</strong> Every foundation's operational picture is specific: particular grantmaking workflows, particular data needs, particular relationships between staff, systems, and grantees. Technology built around that specificity is what staff actually use. Technology that isn't tends to accumulate workarounds.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-tech-stack">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow q-eyebrow--dark">How the work layers</div>
            <h2>Technology that <em>builds on itself.</em></h2>
            <p>Each layer depends on the one below it. Foundations with strong data infrastructure get more from their systems. Foundations with strong systems get more from custom tools. We work across all four — and the same team handles the whole stack.</p>
          </div>
          <div className="q-tech-layers">
            {[
              {
                num: '01',
                label: 'Layer one',
                title: 'Data & Infrastructure',
                desc: 'The foundation beneath everything else. How data is stored, connected, and made accessible.',
                caps: ['Data pipelines', 'Reporting dashboards', 'System integrations', 'Database architecture'],
              },
              {
                num: '02',
                label: 'Layer two',
                title: 'Systems & Workflow',
                desc: 'The tools your team works in every day — grants management, document workflows, and the processes connecting them.',
                caps: ['Grants management', 'Process automation', 'CRM configuration', 'Document workflows'],
              },
              {
                num: '03',
                label: 'Layer three',
                title: 'Custom Tools & AI',
                desc: 'Purpose-built tools for the work your foundation does that no off-the-shelf product was designed for.',
                caps: ['Internal AI assistants', 'Custom dashboards', 'Workflow tools', 'Knowledge bases'],
              },
              {
                num: '04',
                label: 'Layer four',
                title: 'Digital & Web',
                desc: 'The face your foundation shows the world — and the digital infrastructure behind it.',
                caps: ['Websites', 'Grantee portals', 'Public reporting', 'Digital strategy'],
              },
            ].map((layer, i) => (
              <div className="q-tech-layer" key={i}>
                <div className="q-tech-layer-id">
                  <div className="q-tech-layer-num">{layer.num}</div>
                  <div className="q-tech-layer-label">{layer.label}</div>
                </div>
                <div className="q-tech-layer-body">
                  <div className="q-tech-layer-title">{layer.title}</div>
                  <div className="q-tech-layer-desc">{layer.desc}</div>
                </div>
                <div className="q-tech-layer-caps">
                  {layer.caps.map((c, j) => <span className="q-tech-cap" key={j}>{c}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">What we build</div>
            <h2>Infrastructure that serves the work, <em>not the other way around.</em></h2>
            <p>Technology engagements are scoped around what the foundation actually needs. These are the areas where foundations find the most value.</p>
          </div>
          <div className="q-entry-list">
            <div className="q-entry-item">
              <div className="q-entry-num">01</div>
              <div className="q-entry-title">
                <span className="label">Data infrastructure and reporting</span>
                Getting the data into a shape you can actually use.
              </div>
              <div className="q-entry-body">
                <p>We audit what data a foundation has, how it's stored, and what it would take to make it useful. Then we build the infrastructure (data pipelines, reporting dashboards, connected systems) that makes the data accessible to the people who need it without requiring a data analyst to run a query every time.</p>
                <p>Better data infrastructure often changes strategic conversations. When foundation leaders can see their grant portfolio clearly, patterns emerge that weren't visible before.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Grants management systems</span>
                Systems that fit the workflow, not the other way around.
              </div>
              <div className="q-entry-body">
                <p>Whether it's selecting and implementing an off-the-shelf platform, customizing an existing system, or building something purpose-built, we approach grants management technology from the grantee experience and the staff workflow first, not from what the vendor demo showed.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">Custom internal tooling</span>
                Built for your foundation, not a generic template.
              </div>
              <div className="q-entry-body">
                <p>Sometimes the right answer is a tool that doesn't exist yet: a dashboard that surfaces the program data leadership actually tracks, a workflow that automates the reporting step staff do manually every quarter, an internal assistant trained on the foundation's own grant history and knowledge base.</p>
                <p>We design and build these. Small tools done well can change how a team operates more than a large platform implemented poorly.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">04</div>
              <div className="q-entry-title">
                <span className="label">Workflow automation</span>
                More time for the work only your team can do.
              </div>
              <div className="q-entry-body">
                <p>Grant acknowledgment letters, grantee reminders, reporting deadline tracking, board packet preparation: foundations have operational workflows that consume staff time every cycle. We identify and automate these, carefully, so staff can focus on the relationships and judgment that actually move the work forward.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="q-process">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow q-eyebrow--dark">How we engage</div>
            <h2>Audit first, <em>then build.</em></h2>
            <p>Technology engagements start with an honest look at what exists before recommending anything new. We scope implementation in writing before you commit, and we build what we scope.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Step 01</div>
              <h4>Technology audit</h4>
              <p>We map the current state: tools, data flows, workflows, and the workarounds staff have built to make things function. Most foundations are surprised by what this turns up.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 02</div>
              <h4>Prioritize and scope</h4>
              <p>A ranked list of the highest-leverage improvements and an honest cost estimate for each. We cut the list to what will actually move and scope the work before you commit to anything.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 03</div>
              <h4>Build and implement</h4>
              <p>We build what we scoped. If the work surfaces something unexpected, we flag it before we change direction.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 04</div>
              <h4>Yours to run</h4>
              <p>Practical training for the staff who will use what we built. Documentation that doesn't require us to be in the room. Systems designed to be maintained by your team, not by us.</p>
            </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 with.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. Tell us what your current systems look like and what's not working — 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--paper" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
                <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('foundations')}>Back to Foundations <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { FoundationsTechnologyPage });