// Business Segment Page

function BusinessPage({ setRoute }) {
  return (
    <div data-screen-label="08 Business">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="business" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark">Business</div>
          <h1>For businesses that have <em>decided to move.</em></h1>
          <p className="lede">
            The companies we work with in this space have already made a decision. The gap between where they are on technology and AI and where they need to be is real, and they're not waiting for internal consensus or the perfect moment to close it. They want a partner who can move with them — who thinks clearly, builds things that actually work, and doesn't require them to become technical to benefit.
          </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>Operationally complex businesses with leadership ready to invest in meaningful change</dd></div>
            <div><dt>Common entry</dt><dd>AI & Automation Assessment or Technology Assessment</dd></div>
            <div><dt>Reference clients</dt><dd>Revere Auctions, KVC Builders</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 competitive landscape in most traditional industries is shifting faster than it looks from inside.</strong> Companies in architecture, manufacturing, professional services, and specialized trades are watching competitors use AI and automation to do more with less, move faster, and deliver more consistently. The question is no longer whether to engage with these tools — it's how to do it without wasting the investment on the wrong things in the wrong order.</p>
              <p><strong>The hard part isn't finding tools.</strong> There are more AI tools than any business can evaluate seriously. The hard part is knowing which ones actually apply to your specific operation, getting your team using them in ways that stick, and building digital infrastructure that doesn't require a developer every time something needs to change. Generic AI consulting produces generic results — enthusiasm and a document, with the hard implementation work left for the client to figure out.</p>
              <p><strong>The businesses that do this well share one thing.</strong> Leadership that made a real decision — not to explore, not to pilot indefinitely, but to actually change how the operation works. That kind of commitment is what makes it possible to build something that holds up. It's also what makes a client a good partner for the kind of work we do.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">Two practice areas</div>
            <h2>Where the work <em>concentrates.</em></h2>
            <p>Most engagements start with one of these and expand into the other. The same team handles both.</p>
          </div>
          <div className="q-entry-list">

            <div className="q-entry-item" style={{ cursor: 'pointer' }} onClick={() => setRoute('business-ai')}>
              <div className="q-entry-num">01</div>
              <div className="q-entry-title">
                <span className="label">AI & Automation</span>
                Workflows that run faster. Staff capacity freed for work that matters.
              </div>
              <div className="q-entry-body">
                <p>Custom AI tooling and workflow automation built for the specific operation — not adapted from generic templates. Connecting data sources for real business intelligence. Automating the administrative and repetitive work that consumes staff time without advancing the business. Training the team that will actually use it.</p>
                <p>Our work with Revere Auctions is one example: proprietary AI tooling for specialized item processing that freed hours of senior staff time daily. The same approach applies across industries where the operation has specific requirements that off-the-shelf tools don't serve.</p>
                <a className="qbtn qbtn--ghost" style={{ marginTop: 16 }}>AI & Automation <Arrow /></a>
              </div>
            </div>

            <div className="q-entry-item" style={{ cursor: 'pointer' }} onClick={() => setRoute('business-digital')}>
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Digital Infrastructure</span>
                Websites, tools, and systems built to hold up under real operational load.
              </div>
              <div className="q-entry-body">
                <p>Websites that actually represent where the business is now. Internal tools that fit how the operation works. Integrations that connect the systems that should talk to each other. Built by people who understand business operations, not just code — and who will push back when the spec is wrong.</p>
                <p>KVC Builders is one reference: a regional architecture and design-build firm whose digital presence needed to catch up with the quality of the work. We build with AI in our own workflow, which means faster delivery and better outcomes — without requiring the client to care about how we got there.</p>
                <a className="qbtn qbtn--ghost" style={{ marginTop: 16 }}>Digital Infrastructure <Arrow /></a>
              </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 typically engage</div>
            <h2>Fast starts. <em>Measurable results.</em></h2>
            <p>Business engagements move quickly once the right opportunities are identified. We scope the first step to produce something real — not a roadmap, but actual changed practice or working infrastructure.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Step 01</div>
              <h4>Identify the leverage</h4>
              <p>We learn the operation — the workflows, the bottlenecks, the places where time is lost or opportunity is missed. We identify the highest-return opportunities given the business's current state and capacity to absorb change.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 02</div>
              <h4>Build the right thing</h4>
              <p>Off-the-shelf where it fits. Custom where it doesn't. We don't over-engineer — we build the minimum that actually solves the problem, built to last, built to be maintained by the people who will own it.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 03</div>
              <h4>Train the team</h4>
              <p>Training for the people who will actually use the tools, on the specific workflows that changed. Not a seminar. Hands-on, role-specific, and measured by whether behavior actually changed — not by attendance.</p>
            </div>
            <div className="q-phase">
              <div className="step">Step 04</div>
              <h4>Expand what works</h4>
              <p>Once the first set of workflows is running, we identify what's next. Many of our business client relationships grow from a contained first engagement into an ongoing operational partnership.</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">Where to start</div>
            <h2>A contained first engagement — <em>scoped and priced in the first conversation.</em></h2>
            <p>Whether the priority is AI and automation or digital infrastructure, we start with an assessment. Scoped to the actual question, priced transparently, and designed to be useful whether or not we end up being the ones to build what follows.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Initial Assessment</div>
              <h3>A clear picture of where the highest return is — and what it takes to capture it.</h3>
              <p>One to three weeks, depending on scope. A senior strategist and a technical director working together. We review the operation, talk to the people doing the actual work, and produce a specific, prioritized plan — written, not a slide deck.</p>
              <p>We quote a fixed price in the first conversation. Not a range that becomes the high end. The deliverable stands on its own whether or not you continue working with us.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>1–3 weeks</dd></div>
                <div><dt>Team</dt><dd>Senior strategist + technical director</dd></div>
                <div><dt>Format</dt><dd>Operations review + workflow or technical audit</dd></div>
                <div><dt>Output</dt><dd>Prioritized written plan with clear next steps</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Interviews with leadership and the people doing the actual work</li>
                <li>Review of existing tools, systems, workflows, and digital infrastructure</li>
                <li>Honest identification of the highest-leverage opportunities</li>
                <li>Build vs. buy assessment for each priority</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 quickly can we see results?', a: 'Faster than most engagements promise. The first measurable changes — workflows that are visibly faster, staff time that is visibly freed, a digital presence that actually represents the business — typically happen within the first engagement. We design for early wins rather than deferring all value to the end of a long project.' },
              { q: 'We\'re not a technology company. Do we need to understand AI to work with you?', a: 'No. Some of our best client relationships are with businesses where the leadership has no interest in understanding how the technology works — they want the outcome. We handle the how. You focus on whether the result is what you needed.' },
              { q: 'We\'re not sure if we need AI and automation work or digital infrastructure work. How do you help us figure that out?', a: 'That\'s what the first conversation is for. In most cases, both are relevant — the question is sequencing. We help you figure out what to do first based on where the highest return is right now, not based on which service we prefer to sell.' },
              { q: 'We\'ve had technology projects go sideways before. What\'s different?', a: 'We build and implement with the same team that assesses and designs. There\'s no handoff from the people who understood the problem to a separate team that builds the solution. We also push back when the spec is wrong — which is often where things go sideways.' },
              { q: 'What happens after the initial engagement?', a: 'Some clients take the plan and execute it internally or with other vendors. Some continue working with us. We design the first engagement to be useful either way — and we don\'t build the relationship on dependency.' },
            ].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 about <em>your operation.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. We'll ask about the business before we suggest anything. If a scoped first engagement makes sense, we put it in writing 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, { BusinessPage });