// Business · Digital Infrastructure

function BusinessDigitalPage({ setRoute }) {
  return (
    <div data-screen-label="08b Business · Digital Infrastructure">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="business-digital" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Business · Digital Infrastructure</div>
          <h1>Digital infrastructure that works <em>as hard as your business does.</em></h1>
          <p className="lede">
            A lot of businesses are running digital infrastructure that made sense at some earlier point and has been patched since. The website doesn't represent where the business actually is. The internal tools don't talk to each other. The systems your team relies on slow them down more than they know. We fix that — and we do it faster than you'd expect, because we use AI in our own workflow.
          </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('business')}>Back to Business <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Entry point</dt><dd>Technology Assessment</dd></div>
            <div><dt>Reference engagements</dt><dd>KVC Builders, Revere Auctions</dd></div>
            <div><dt>Who leads</dt><dd>Senior strategist and technical director</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 digital presence of most non-technical businesses reflects where the business was, not where it is.</strong> The website was built during an earlier phase — when the portfolio was smaller, the positioning was different, the client base was different. It's been updated in pieces since then but never rethought. The result is a digital face that undersells the work, confuses the audience, or simply looks like something built for a different era.</p>
              <p><strong>Internal tools are often in worse shape.</strong> A mix of software that was added as needs arose, spreadsheets holding data that should be in a system, integrations that technically work but require someone to manually move information between them. Staff carry the overhead of the system fragmentation in their daily work without always recognizing it as a technology problem — it's just how things are done.</p>
              <p><strong>A technology investment returns more when it's made with genuine understanding of the operation.</strong> The wrong website redesign produces something that looks good at launch and doesn't hold up operationally within a year. The wrong internal tool creates new problems alongside the ones it solved. We work to understand the business before we recommend anything — and we build for how it will actually be used, not for how it was described in the brief.</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 build</div>
            <h2>Three types of work, <em>one integrated team.</em></h2>
            <p>Digital infrastructure for a real business rarely fits a single category. Most engagements span more than one of these — and the same team handles all of it.</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">Websites and digital presence</span>
                A site that represents where the business actually is.
              </div>
              <div className="q-entry-body">
                <p>Businesses with strong reputations and excellent work are often undersold by their digital presence. The site was built during an earlier phase of the company's development and hasn't kept pace with where the work is now. The clients you want to win are forming impressions before they talk to you — and the site is the first impression for most of them.</p>
                <p>We rebuilt KVC Builders' digital presence to match the quality and ambition of the work itself — clear positioning, a portfolio that shows the range of what the firm does, and a site that holds up technically and editorially over time. We use AI in our design and development workflow, which means we move faster and produce better work than a traditional agency operating at the same price point. The client doesn't need to know or care how we get there.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Custom tools and integrations</span>
                When off-the-shelf doesn't fit how the operation actually works.
              </div>
              <div className="q-entry-body">
                <p>Most businesses reach a point where the standard software options don't quite fit the way the operation works — or where the patchwork of tools they've accumulated is creating more friction than it resolves. The answer is sometimes a better standard tool, properly implemented. Sometimes it's custom software. The distinction matters and we make it honestly.</p>
                <p>We build custom tools for businesses with workflows that the standard market doesn't serve. We also replace fragile custom systems when the right off-the-shelf tool exists but was never properly configured. Our work with Revere Auctions involved both: integrating AI tooling into a specialized workflow that no off-the-shelf system could accommodate, while also replacing parts of the infrastructure that had grown past their useful life. We make those calls based on what the operation actually needs, not on what generates more billable work.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">AI-enhanced delivery</span>
                Better outcomes, faster — you don't need to understand the how.
              </div>
              <div className="q-entry-body">
                <p>We use AI throughout our own workflow — in research, in design, in development, in content. This makes us meaningfully faster and more thorough than a traditional agency or development shop operating at a comparable price. For clients, that means a better product delivered on a shorter timeline, without paying the premium a larger firm would charge to do the same work with more people.</p>
                <p>We're transparent about this because it matters for how clients evaluate us — but we don't require clients to care about it. Some clients want to understand how we're using AI in the work. Most just want the outcome. Either orientation is fine. The result is the same: digital infrastructure that's better than what the timeline and price would have produced from a traditional shop, built to hold up rather than to impress at launch.</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>Discover. Design. Build. Launch.</h2>
            <p>The sequence is consistent. We learn the business before we design anything, and the same team that designs it builds it.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Phase 01</div>
              <h4>Discover</h4>
              <p>Stakeholder conversations, audit of existing digital infrastructure, understanding of the operation and its audiences. We learn what exists, what's working, what isn't, and what the business actually needs from the thing we're about to build.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 02</div>
              <h4>Design</h4>
              <p>Architecture, content strategy, system design. We make explicit decisions about how the thing should work and why — rather than inheriting the existing decisions by default. Every significant choice gets a rationale your team can evaluate.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 03</div>
              <h4>Build</h4>
              <p>We build it. The same people who did the discovery and design — no handoff to a separate development team. AI in our workflow means we move faster than the timeline would suggest without it.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 04</div>
              <h4>Launch and Support</h4>
              <p>We launch it and we stay close enough after to know it's actually working. Documentation, training for whoever will maintain it, and support as things settle in after launch.</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 audit what exists, assess what's working and what isn't, and produce a written recommendation for what to build, in what order, and why — scoped and priced before you commit to anything larger.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Technology Assessment</div>
              <h3>A clear read on the current state and an honest plan for what comes next.</h3>
              <p>One to two weeks. A senior strategist and a technical director reviewing your existing digital infrastructure, talking to the people who use it, and producing a written assessment you can act on.</p>
              <p>Fixed price, quoted in the first conversation. The assessment stands on its own — not a loss leader for a larger engagement, and designed to be useful whether or not we end up being the ones to build what follows.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>1–2 weeks</dd></div>
                <div><dt>Team</dt><dd>Senior strategist + technical director</dd></div>
                <div><dt>Format</dt><dd>Technical audit + stakeholder interviews</dd></div>
                <div><dt>Output</dt><dd>Written assessment and prioritized build plan</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Audit of existing website, tools, and digital systems</li>
                <li>Conversations with the people who use and maintain the infrastructure</li>
                <li>Honest assessment of what's working and what isn't</li>
                <li>Prioritized recommendations with rationale for sequencing</li>
                <li>Written deliverable your leadership team can act on immediately</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: 'How long does a website rebuild take?', a: 'Depends on scope and complexity. For a focused engagement — a business website with a clear audience and a manageable content scope — we move in weeks, not months. More complex builds with significant content volume or custom functionality take longer. We scope it specifically before you commit.' },
              { q: 'We\'ve worked with agencies before that went over budget and over time. How is this different?', a: 'We scope specifically and price in the first conversation — a fixed price for defined scope, not a range that becomes the high end. We also use AI in our workflow, which means we move faster than a traditional agency at the same price point. And the same team that scoped it builds it, so there\'s no version of the original understanding that gets lost in translation.' },
              { q: 'Can you work with our existing website platform, or will you want to replace it?', a: 'Depends on what the assessment finds. We don\'t have a preferred platform we\'re trying to sell. We recommend what actually fits the business\'s needs, content volume, and the realistic capacity of whoever will maintain it.' },
              { q: 'You mentioned using AI in your workflow. What does that mean for our project?', a: 'It means faster design iteration, more thorough research and content development, and more efficient development — which translates to a better product on a shorter timeline than a traditional shop would produce at a comparable price. We\'re transparent about it, but you don\'t need to care about it. The outcome is what matters.' },
              { q: 'Do you handle the full project or just part of it?', a: 'The full project — discovery through launch and support. We don\'t hand off to a separate development team. The people who understand the business are the people who build the thing.' },
            ].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. 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('business')}>Back to Business <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { BusinessDigitalPage });