// Technology Service Page

function TechnologyPage({ setRoute }) {
  return (
    <div data-screen-label="06 Technology">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="technology" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Practice Area</div>
          <h1>Technology that <em>fits the problem.</em></h1>
          <p className="lede">
            We build websites, internal tools, workflow automations, and data infrastructure. What makes it different: we are also the people who understood the problem before we wrote a line of code. That closes the gap between what was asked for and what was actually needed.
          </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>Entry offer</dt><dd>Technology Assessment — scoped, honest, no-obligation</dd></div>
            <div><dt>Scope</dt><dd>Web, data, automation, infrastructure</dd></div>
            <div><dt>Who leads</dt><dd>Senior engineers alongside strategists</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>Technology projects fail in predictable ways.</strong> The spec didn't capture the real requirement. The agency built what they were asked for, not what the organization needed. The developer understood the code but not the operation it was supposed to serve.</p>
              <p><strong>We work differently because we start from the problem.</strong> We are not order-takers. We push back on the brief when the brief is wrong, and we build the thing that solves the actual problem — not the thing that was easy to specify.</p>
              <p><strong>We also build for ourselves.</strong> We run AI-native tools and infrastructure in our own practice. That means we are not learning what works on your budget — we are bringing something that is already field-tested.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">Three ways in</div>
            <h2>You probably arrive <em>in one of three states.</em></h2>
            <p>Where the work starts depends on where you are. We are comfortable with all three entry points and honest about which one fits your situation.</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">Something needs to be built</span>
                You know what you need. You need a team that builds things well.
              </div>
              <div className="q-entry-body">
                <p>A new website, an internal tool, a workflow automation, a data system. You have a clear-enough picture of what you want and you need people who can build it without constant supervision and without delivering something that requires a second project to fix.</p>
                <p>We build it right the first time — which sometimes means asking questions that slow the project down at the start in order to speed it up later. We are honest when the spec is wrong before we build to it.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Existing tech that isn't working</span>
                Systems accumulated. Workflows don't fit. Friction is high.
              </div>
              <div className="q-entry-body">
                <p>Technology ages and organizations change. What was the right system three years ago may now be a source of daily friction, a compliance risk, or simply a thing that no one on the current team knows how to maintain.</p>
                <p>We assess what you have honestly — what is worth keeping, what should be replaced, and what should be retired. Then we build the path forward in an order that keeps the operation running while the infrastructure improves underneath it.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">A spec without a builder</span>
                Architecture documents, RFPs, plans — and no one to execute them.
              </div>
              <div className="q-entry-body">
                <p>Strategy work produced a technical plan. An RFP was written. A previous vendor started and stopped. The documentation exists but the thing does not.</p>
                <p>We pick these up regularly. We review what was designed, tell you what holds and what needs to change, and build from there. You get the same senior-level attention that should have been there from the start — not a team that will execute the plan blindly and then bill you to fix the consequences.</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 the work flows</div>
            <h2>Assess. Architect. Build. Launch.</h2>
            <p>The sequence is consistent. What varies is the depth of each phase — which we scope based on what the project actually calls for, not what makes the engagement look bigger.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Phase 01</div>
              <h4>Assess</h4>
              <p>We review your existing systems and the workflows around them. We talk to the people doing the actual work — not just the people managing it — because that is where the real requirements live.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 02</div>
              <h4>Architect</h4>
              <p>We design the system that fits the problem. Not the most impressive one — the right one for where you are and where you are going. Constraints inform the design rather than getting discovered after build.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 03</div>
              <h4>Build</h4>
              <p>We implement. Websites, integrations, automations, custom tools, data pipelines. Code that is clean, documented, and maintainable by someone other than the person who wrote it.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 04</div>
              <h4>Launch</h4>
              <p>Deployment, staff training, and documentation. We don't disappear at launch. We make sure the people who will live with the system know how to use it and maintain it.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-offer">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 40 }}>
            <div className="q-eyebrow">The entry offer</div>
            <h2>Start with a <em>Technology Assessment.</em></h2>
            <p>A contained first engagement. We review your existing systems, map the workflows around them, and produce a clear recommendation — what to build, what to fix, and in what order. You can act on it with us or without us.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Technology Assessment</div>
              <h3>An honest picture of where your technology stands and what to do next.</h3>
              <p>One to three weeks, depending on the complexity of your current systems. A senior engineer and a strategist working together — because the technical recommendations only make sense in the context of how the organization actually works.</p>
              <p>The deliverable is a written assessment and an architecture recommendation. Not a proposal for more work — a document you can use whether or not we're the ones who build it.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>1–3 weeks</dd></div>
                <div><dt>Team</dt><dd>Senior engineer + strategist</dd></div>
                <div><dt>Format</dt><dd>Systems review and workflow interviews</dd></div>
                <div><dt>Output</dt><dd>Architecture recommendation and build plan</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Audit of existing tools, systems, and integrations</li>
                <li>Workflow mapping with the people doing the actual work</li>
                <li>Honest assessment of what is worth keeping</li>
                <li>Architecture recommendation with rationale</li>
                <li>Phased build plan you can take to any vendor</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 clients usually ask</div>
            <h2>Common questions.</h2>
          </div>
          <div className="q-faq-list">
            {[
              { q: 'What do you actually build?', a: 'Websites and web applications, internal tools, workflow automations, API integrations, data systems, and AI-powered tools. If you\'re not sure whether what you need fits that list, tell us what you\'re trying to do. We\'ll tell you honestly whether we\'re the right fit.' },
              { q: 'Do you work with existing codebases?', a: 'Yes. We inherit projects regularly. We review the existing code honestly before we commit — and we tell you if what\'s there is worth building on versus starting fresh. We don\'t give you the answer that makes the engagement bigger.' },
              { q: 'What is the difference between Quarterdeck and an agency?', a: 'Agencies build what you ask for. We build what you need — which sometimes means telling you the brief was wrong before we start. We also do the strategy that precedes the build, which means the expensive mistakes get caught before they\'re in production.' },
              { q: 'Do you provide ongoing maintenance?', a: 'In some cases. We scope ongoing support separately and only take it on when it genuinely makes sense for both sides. We build things that are maintainable — by us or by someone else — rather than creating dependencies.' },
              { q: 'How do you handle data privacy and security?', a: 'We treat it as a design constraint, not a legal checkbox. We build with security in mind from the start. For organizations with compliance requirements — FERPA, HIPAA, foundation governance standards — we work within them and flag where the requirements create tradeoffs worth discussing.' },
            ].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>trying to build.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. If a Technology Assessment is the right next step, we scope it in writing before you commit to anything.</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, { TechnologyPage });