// AI Adoption Service Page
// Opens with the situation, names three client entry states, describes process,
// presents the Initial Evaluation as the entry offer, answers common questions.

function AIAdoptionPage({ setRoute }) {
  return (
    <div data-screen-label="03 AI Adoption">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="ai-adoption" 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>AI Adoption, <em>actually.</em></h1>
          <p className="lede">
            Most organizations know they should be doing something about AI and aren't sure what. That is the room we walk into. We don't evangelize, and we don't hand off a deck. We assess, plan, build, and train — with the same team, end to end.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a className="qbtn qbtn--paper">Book an initial evaluation <Arrow /></a>
            <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('case')}>See recent work <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Entry offer</dt><dd>Initial Evaluation — scoped, defined, low threshold</dd></div>
            <div><dt>Typical duration</dt><dd>Weeks to months, not years</dd></div>
            <div><dt>Who leads</dt><dd>A senior strategist and a senior builder — together</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>Staff are already using AI.</strong> Informally, in their browsers, on their phones. The question is not whether it is happening — the question is whether you have a position on it.</p>
              <p><strong>Your board is starting to ask.</strong> Not the technical detail. The shape of the thing. Where are we, where are we going, what are we doing about it.</p>
              <p><strong>The existing advisors have not been equipped to answer.</strong> They have good instincts about your organization and no hands-on experience with the tools. We have both.</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>The specific conversation we have depends on where you already are. We are comfortable with any of the three, and we do the work that actually fits — not the work we have pre-packaged.</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">No starting point</span>
                You know AI matters. You do not know where to begin.
              </div>
              <div className="q-entry-body">
                <p>We begin with orientation. A structured look at what AI can and cannot do for an organization like yours, where peers are, and what the first real moves look like.</p>
                <p>By the end you have a picture of the landscape, a short list of the opportunities that actually fit, and a plan for the next ninety days that your team can execute without a second engagement.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Started but not sticking</span>
                The tools exist. The workflows haven't changed.
              </div>
              <div className="q-entry-body">
                <p>This is the most common state and the most misunderstood one. Licenses got purchased. A few champions adopted the tools. The rest of the organization nodded and went back to their existing habits.</p>
                <p>We work with the people doing the actual work — not just leadership — to identify where AI belongs in real workflows, redesign those workflows, and train the team on the specific versions that matter for them. The deliverable is adoption, not enthusiasm.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">Strategy, no executor</span>
                You have the plan. You do not have the team to ship it.
              </div>
              <div className="q-entry-body">
                <p>A strategy built by someone who will not be building it is already compromised. We pick up plans written by other firms and make them real — or we write our own, with the understanding that we are going to execute it.</p>
                <p>That usually means integrating AI into existing systems, building the internal tools your staff actually need, and training people in the specific ways that fit your operation. Not a pilot. A deployment.</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. Plan. Build. Train.</h2>
            <p>The sequence is the same across the three entry states. The depth of each phase is not. We scope each engagement to where you actually are.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Phase 01</div>
              <h4>Assess</h4>
              <p>Interviews with the people doing the work. An honest read of your tools, data, workflows, and change-readiness. No theater.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 02</div>
              <h4>Plan</h4>
              <p>A prioritized path — not a dreamboard. The three to five moves that produce real change in your operation, in the order they should happen.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 03</div>
              <h4>Build</h4>
              <p>We implement. Tools, integrations, internal assistants, workflow changes. Same team that wrote the plan ships the thing.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 04</div>
              <h4>Train</h4>
              <p>Practical training for the specific versions of the specific workflows that matter to your staff. Not a webinar.</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 an <em>Initial Evaluation.</em></h2>
            <p>A contained first engagement. Scoped, defined, low threshold. Produces a clear picture of where you are and what you should do next — whether we end up doing the next step together or you take it and go.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Initial Evaluation</div>
              <h3>A clear-eyed picture of where you are, and what to do next.</h3>
              <p>Two to four weeks, depending on the complexity of the organization. A senior strategist and a senior builder, working together. The deliverable is a written assessment and a ranked plan — not a deck, not a sales pitch.</p>
              <p>If we are the right partner for the work that comes after, good. If we are not, you still have a document you can act on.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>2–4 weeks</dd></div>
                <div><dt>Team</dt><dd>Two senior partners</dd></div>
                <div><dt>Format</dt><dd>Interviews + written assessment</dd></div>
                <div><dt>Output</dt><dd>Prioritized 90-day plan</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Stakeholder interviews across functions</li>
                <li>Review of existing tools, data, and workflows</li>
                <li>Honest read on organizational change-readiness</li>
                <li>Ranked list of the next three to five moves</li>
                <li>Written deliverable you can share with a board</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: 'Do you sell an AI platform?', a: 'No. We are not reselling anyone else\'s tools. We pick the tools that fit your operation, integrate them with your existing systems, and build custom where it actually pays off. The incentives are clean.' },
              { q: 'How is this different from a generalist consulting firm?', a: 'A generalist firm hands off a deck to a separate implementation team, usually a different vendor. We are the same team end to end. A strategy built by the people who will execute it is a different thing.' },
              { q: 'How is this different from an agency or a dev shop?', a: 'An agency ships what you ask for without asking whether it is the right thing. A dev shop ships what the deck said. We think and we build, and we push back on both when it matters.' },
              { q: 'Where do you fit among our existing advisors?', a: 'Usually alongside. We do not replace your legal, financial, or governance counsel. We do the work that sits between organizational strategy and technical execution — which is where most AI efforts currently stall.' },
              { q: 'What does this cost?', a: 'The Initial Evaluation is a fixed, scoped engagement and we quote it in the first conversation. What comes after depends on what the evaluation finds. We are transparent about both.' },
            ].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 figure out.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. If an initial evaluation 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, { AIAdoptionPage });