// Strategy Service Page

function StrategyPage({ setRoute }) {
  return (
    <div data-screen-label="05 Strategy">
      <section className="q-svc-hero2" style={{ padding: '0 0 120px' }}>
        <SiteNav route="strategy" 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>Strategy, <em>from people who build.</em></h1>
          <p className="lede">
            Most strategy engagements produce a document. Ours produce a decision — what to do, in what order, and why. When the work calls for implementation, we're the team that does it. That is what closes the gap most strategy falls into.
          </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>Strategic Assessment — scoped, written, actionable</dd></div>
            <div><dt>Scope</dt><dd>Organizational, technical, or both</dd></div>
            <div><dt>Who leads</dt><dd>Senior strategists who also build</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>Strategy documents are easy to commission and easy to shelve.</strong> The failure mode is rarely bad thinking — it is thinking that was never connected to execution. The plan assumed a team that didn't exist or a handoff that didn't hold.</p>
              <p><strong>Most consulting firms have an incentive to keep strategy and implementation separate.</strong> Different engagements, different vendors, different budgets. We don't work that way. The same people who think through the problem build the answer.</p>
              <p><strong>The result is a different kind of plan.</strong> One built with the constraints already in it. One where the people making the recommendation are the people who will have to live with it.</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>Strategy looks different <em>depending on where you are.</em></h2>
            <p>We scope each engagement around the actual question, not a standard starting point. Most of the work we do fits one of these shapes.</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 clear direction</span>
                You know something needs to change. The path forward isn't visible yet.
              </div>
              <div className="q-entry-body">
                <p>You may know that AI matters, that your technology infrastructure is aging, or that the way your team works is not scaling. What you don't have is a clear picture of what to do next, or why that before anything else.</p>
                <p>We start by understanding the organization on its own terms: how decisions get made, where resources actually go, which constraints are real and which are just habit. From there, we build a specific path rather than hand you a list of possibilities and call it a strategy.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Too many competing priorities</span>
                You have more options than bandwidth. The question is what goes first.
              </div>
              <div className="q-entry-body">
                <p>The hardest strategic problem isn't figuring out what you could do. It's choosing what to do first, and being willing to say what waits. Organizations with real capacity and real ambition usually face a longer list of options than they have the bandwidth to pursue.</p>
                <p>We don't validate the list. We cut it. We work through what's genuinely high-leverage, what's urgent, and what can wait, and we're clear about why so the decision holds when someone tests 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 plan that isn't moving</span>
                The strategy exists. It's just not translating into action.
              </div>
              <div className="q-entry-body">
                <p>Sometimes the plan is solid but the organization needs help executing it. Sometimes the plan has gaps that only showed up when someone tried to act on it. Fairly often it's both.</p>
                <p>We pick up existing strategy work, assess what's holding and what isn't, and sharpen what needs it. When implementation is the missing piece, we do that too. We don't treat prior work as a problem to undo.</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. Frame. Recommend. Execute.</h2>
            <p>The sequence is consistent. The depth of each phase depends on where you are and what the engagement calls for. We scope collaboratively and thoughtfully.</p>
          </div>
          <div className="q-process-phases">
            <div className="q-phase">
              <div className="step">Phase 01</div>
              <h4>Discover</h4>
              <p>We learn the organization — how decisions get made, where resources go, what constraints are real. We talk to the people doing the work, not just the people managing it.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 02</div>
              <h4>Frame</h4>
              <p>We name the actual problem. Organizations describe symptoms well and mechanisms poorly. We work to find the lever — the place where the right move produces the most change.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 03</div>
              <h4>Recommend</h4>
              <p>A specific, prioritized path. Not a menu of options — a ranked set of moves with a clear rationale for the order. Something you can act on without a second engagement.</p>
            </div>
            <div className="q-phase">
              <div className="step">Phase 04</div>
              <h4>Execute</h4>
              <p>When the work calls for implementation — and it usually does — we are the team. Same people, no handoff, no version of the plan lost in translation.</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>Strategic Assessment.</em></h2>
            <p>A contained first engagement. Scoped, written, and actionable. Produces a clear picture of where you are, what the real choices are, and what we recommend — 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">Strategic Assessment</div>
              <h3>A direct account of what we found and what we recommend.</h3>
              <p>Two to four weeks, depending on the complexity of the organization. A senior strategist and a senior builder, working together from the start. The deliverable is a written document — not a deck, not a framework diagram — that your board or leadership team can read without translation.</p>
              <p>If we are the right partner for the work that follows, we'll say so. If you are better served doing the next step internally or with a different firm, we'll say that too.</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, document review, workshops</dd></div>
                <div><dt>Output</dt><dd>Written assessment and prioritized path</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Stakeholder interviews across functions and levels</li>
                <li>Review of existing plans, reports, and strategy documents</li>
                <li>Honest read on organizational capacity and readiness</li>
                <li>Ranked set of recommended moves, with rationale</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: 'How is this different from a management consulting firm?', a: 'Management consulting firms separate thinking from doing — different teams, different vendors, different budget lines. We don\'t. When the strategy calls for technology, we build it. When it calls for training, we deliver it. There is no second vendor and no handoff gap.' },
              { q: 'What does the deliverable actually look like?', a: 'A written document. Clear, direct, and specific about what we found and what we recommend. Not a slide deck with a framework on every page — something your leadership team can read in an hour and your board can read in twenty minutes.' },
              { q: 'What if we just need a thought partner, not a full engagement?', a: 'That is a legitimate need and some of our best client relationships started that way. If you\'re working through a specific decision and want a rigorous outside read, tell us what you\'re thinking through and we\'ll tell you honestly what kind of conversation makes sense.' },
              { q: 'Do you work with boards?', a: 'Yes. We are comfortable presenting to boards and governing bodies and are used to situations where the board and the staff are working from different pictures of the problem. Part of what we do is make sure both rooms are reading the same document.' },
              { q: 'What if we want strategy only — no implementation?', a: 'That works. The written deliverable is designed to be actionable without us. We won\'t hold the thinking hostage to a follow-on engagement. If you take the plan and run with it yourself, that is a success.' },
            ].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 a Strategic 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, { StrategyPage });