window.HowItWorks = function HowItWorks() {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const [open, setOpen] = React.useState(false);

  const sectionPadding = isMobile ? '40px 24px 80px' : isTablet ? '64px 32px 112px' : '80px 48px 160px';
  const h2Size = isMobile ? 32 : isTablet ? 44 : 56;
  const h3Size = isMobile ? 22 : 26;
  const bodySize = isMobile ? 16 : 17;

  return (
    <section style={{ padding: sectionPadding, maxWidth: 1280, margin: '0 auto' }}>
      <style>{`
        .deepdive-body p { margin: 0; }
        .deepdive-body ul, .deepdive-body ol {
          padding-left: 22px;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .deepdive-body ul { list-style: disc; }
        .deepdive-body ol { list-style: decimal; }
        .deepdive-body li { line-height: 1.6; }
        .deepdive-body li::marker { color: var(--text-tertiary); }
        .deepdive-body strong { color: var(--text-primary); font-weight: 600; }
        .deepdive-body code {
          font-family: var(--font-mono);
          font-size: 0.9em;
          background: var(--bg-muted);
          padding: 1px 6px;
          color: var(--text-primary);
        }
      `}</style>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr',
        gap: isMobile ? 32 : 96,
        alignItems: 'start',
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Deep dive</div>
          <h2 style={{
            fontSize: h2Size, fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.035em', color: 'var(--text-primary)', margin: 0,
          }}>
            How the work<br />actually works.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--text-secondary)', marginTop: 24, maxWidth: 360 }}>
            For the curious. Most visitors skip this. The rest of you, here's what actually happens.
          </p>
        </div>

        <div>
          <button onClick={() => setOpen(!open)} style={{
            background: 'transparent',
            border: '1px solid var(--border-strong)',
            color: 'var(--text-primary)',
            padding: '20px 24px',
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
            width: '100%',
            fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 500,
            textAlign: 'left',
            borderRadius: 0,
            transition: 'border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease)',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--text-primary)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
          >
            <span>{open ? 'Hide technical detail' : 'Show technical detail (about 5 min read)'}</span>
            <span aria-hidden="true" style={{
              flexShrink: 0,
              width: 24, height: 24,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              transform: open ? 'rotate(45deg)' : 'rotate(0)',
              transition: 'transform var(--dur-base) var(--ease)',
            }}>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <line x1="10" y1="4" x2="10" y2="16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                <line x1="4" y1="10" x2="16" y2="10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            </span>
          </button>

          <div style={{
            maxHeight: open ? 8000 : 0,
            opacity: open ? 1 : 0,
            overflow: 'hidden',
            transition: 'max-height 700ms var(--ease), opacity 500ms var(--ease), margin-top 700ms var(--ease)',
            marginTop: open ? 56 : 0,
          }}>
            <div className="deepdive-body" style={{
              display: 'flex', flexDirection: 'column', gap: 56,
              fontSize: bodySize, lineHeight: 1.65, color: 'var(--text-secondary)',
            }}>
              <Block title="Week 1 — Audit" h3Size={h3Size}>
                <p>We show up with a notebook and zero deck. The first three days, we shadow whoever's actually running the work. Standups. Tickets. The thing on the screen at 4 PM on Wednesday.</p>
                <p>We're not looking for what's "AI-shaped." We're looking for the hour that drains your week. Sometimes it's obvious. Sometimes it's a handoff so embedded the team doesn't read it as friction anymore.</p>
                <p>By Friday we have a ranked list. We pick one workflow to start with.</p>
              </Block>

              <Block title="The hour we hunt for in week one" h3Size={h3Size}>
                <p>Every audit ends with a ranked list. Every list has the same shape: the workflow at the top is the one nobody flagged when we asked.</p>
                <p>Three shapes we keep finding. Different teams, different stacks, same friction.</p>
                <p><strong>Shopify ops, team of nine.</strong> CX runs through Gorgias. Every morning the support lead spends ninety minutes before standup categorizing overnight tickets: refund requests, shipping issues, product questions, wholesale inquiries. The team can't start until she finishes.</p>
                <p>When you ask what she does all day, she says "respond to customers." She doesn't read the categorization as work. It's the prerequisite for the work, so it doesn't count.</p>
                <p>The agent reads the overnight queue, tags each ticket, drafts a first-pass reply in the brand voice. Routes wholesale and refund requests to specific humans. Flags the weird ones for review. Standup moves from 9:30 to 9:00.</p>
                <p><strong>B2B sales, three-person team.</strong> Maybe four signed contracts a week. After every signature, somebody sits in front of the executed PDF and copies terms into Salesforce: start date, contract value, billing frequency, special clauses. Twenty minutes per contract, plus the inevitable typo found two months later.</p>
                <p>The team calls this "admin." Nobody pushes back because it's admin.</p>
                <p>The agent watches the DocuSign-completed inbox, parses the contract, populates the Salesforce fields, posts a summary to the deal Slack channel. Flags anomalies for human review before write. The win isn't the twenty minutes. It's that Salesforce stops being three days behind reality.</p>
                <p><strong>Editorial team of twelve.</strong> Pitches land in a Slack channel called #pitches all week. Every Monday morning the managing editor spends two hours reading back through the channel, deduplicating, sorting by priority, rebuilding the editorial calendar in Notion before the 11 AM meeting.</p>
                <p>She's done it long enough she's stopped noticing it's a job.</p>
                <p>The agent watches #pitches, extracts each pitch into a structured row, deduplicates against the existing calendar, posts a draft Monday calendar to the editor's DMs by Sunday night. She reviews, tweaks, and ships. The two hours get rerouted to writing.</p>
                <p>Three different teams, three different stacks, same shape. The right first workflow is:</p>
                <ul>
                  <li>Repetitive, daily or weekly.</li>
                  <li>Bounded. The agent isn't being asked to invent strategy.</li>
                  <li>Recoverable. A wrong draft is a draft. A wrong send is a problem.</li>
                  <li>Already happening in tools you use. No new SaaS to buy.</li>
                  <li>Owned by someone who can articulate what a good outcome looks like, even if they've stopped noticing.</li>
                </ul>
                <p>That last one is what week one is really about. Not finding work to automate. Finding the person who knows what "right" looks like, and who'll spot it the moment the agent gets it wrong.</p>
              </Block>

              <Block title="Weeks 2–3 — Prototype" h3Size={h3Size}>
                <p>Day one of week two, we open a PR. Code lands in your repo from the start. No staging shadow system, no demo environment that diverges from your actual stack.</p>
                <p>"Prototype" doesn't mean "polished demo." It means a working agent inside your tools that the team can use Monday morning. It will have rough edges. By Wednesday afternoon the team has told us what's wrong. By Friday we've fixed half of it.</p>
                <p>What ships in this phase:</p>
                <ul>
                  <li>Prompts in your repo, version-controlled.</li>
                  <li>Tool definitions for everything the agent can touch.</li>
                  <li>Observability hookups, every agent action logged.</li>
                  <li>A Slack channel for fast feedback.</li>
                </ul>
              </Block>

              <Block title="Weeks 4–5 — Production" h3Size={h3Size}>
                <p>This is where most agent projects die. The model is fine. The infrastructure around the model is what makes or breaks it.</p>
                <p>Six things we ship in this phase:</p>
                <ol>
                  <li><strong>Eval suite.</strong> Tests, but for prompts. Runs in CI on every PR. Catches model drift when Anthropic ships a new Sonnet overnight.</li>
                  <li><strong>Cost caps.</strong> Hard per-day spend limits at the API gateway. If something goes weird, the bill stops.</li>
                  <li><strong>Rate limiting.</strong> Per user, per workflow, per origin. Abuse stops at the door.</li>
                  <li><strong>Failure recovery.</strong> Agents call APIs. APIs fail. Agents retry, then escalate, then page. No silent corruption.</li>
                  <li><strong>Audit trail.</strong> Every decision the agent made, queryable. "Why did the agent send this email at 2 PM?" gets a real answer.</li>
                  <li><strong>Cost-of-failure analysis.</strong> What happens when the agent makes a wrong call? Is it reversible? Auto-flagged for human review? Documented before we ship.</li>
                </ol>
                <p>By end of week five, the system runs unattended.</p>
              </Block>

              <Block title="Week 6 — Handoff" h3Size={h3Size}>
                <p>We train one operator on your team. Not "watch us click through this dashboard" training. Real, hands-on:</p>
                <ul>
                  <li>Read an eval result and decide what to do.</li>
                  <li>Modify a prompt and run the eval suite.</li>
                  <li>Add a new tool to the agent's allowed list.</li>
                  <li>Roll back a config.</li>
                  <li>Read the audit log when something looks off.</li>
                </ul>
                <p>By Friday, that person is the answer to "who runs this?"</p>
                <p>What you walk away with:</p>
                <ul>
                  <li>All code in your repos.</li>
                  <li>All prompts in version control.</li>
                  <li>An automation with the actual things that go wrong, not generic docs.</li>
                  <li>Eval suite running in your CI.</li>
                  <li>Observability dashboard using what you already have (Datadog, Langfuse, Cloudflare logs).</li>
                  <li>Three months of Slack-channel availability for follow-up questions.</li>
                </ul>
              </Block>

              <Block title='What "production-grade" actually means' h3Size={h3Size}>
                <p>Three things most consultancies skip:</p>
                <ol>
                  <li><strong>Evals are tests, not vibes.</strong> A prompt change without an eval pass is a regression, not progress. CI runs them on every PR.</li>
                  <li><strong>Costs are bounded by code, not goodwill.</strong> Hard caps at the API gateway. The agent can't run up a $10k bill because a malformed input created a loop.</li>
                  <li><strong>Every agent action is auditable.</strong> Compliance and ops both want this. The audit log isn't a feature, it's the substrate.</li>
                </ol>
                <p>If you've done this before, none of this is news. If you haven't, it's the difference between a demo and a system you can actually run.</p>
              </Block>

              <Block title="How we handle your data" h3Size={h3Size}>
                <p>Everything happens in your tenant:</p>
                <ul>
                  <li>Workspace agents authenticate via your Google admin. Data flows through Google APIs your team already authorizes.</li>
                  <li>Shopify agents run through your Shopify Partner app, scoped to your store.</li>
                  <li>Code lives in your GitHub. We push directly to your repos.</li>
                  <li>Prompts live next to the code, version-controlled.</li>
                  <li>Observability writes to your existing stack.</li>
                </ul>
                <p>We sign DPAs and BAAs if you need them. We don't extract data to a separate system. Every API call our agents make is auditable in your own logs.</p>
              </Block>

              <Block title="Tools we typically reach for" h3Size={h3Size}>
                <p>We don't have a stack. The stack you already use is the stack.</p>
                <ul>
                  <li><strong>Models:</strong> Claude by default. GPT and Gemini when the workflow benefits.</li>
                  <li><strong>Orchestration:</strong> depends on the workflow. Sometimes plain SDK calls, sometimes Cloudflare Workers, sometimes the Agents SDK.</li>
                  <li><strong>Evals:</strong> bring-your-own, or we set up vitest-based eval scripts.</li>
                  <li><strong>Observability:</strong> Langfuse, LangSmith, Datadog, or structured logs through your existing pipeline.</li>
                  <li><strong>Code work:</strong> Claude Code in your repo. The same loop you'd run yourself, but the operator is paid.</li>
                </ul>
                <p>If your stack has a constraint we haven't seen (regulatory, custom platform, on-prem), we'll tell you up front.</p>
              </Block>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

function Block({ title, h3Size, children }) {
  return (
    <div>
      <h3 style={{
        fontSize: h3Size, fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', color: 'var(--text-primary)', margin: '0 0 16px',
      }}>{title}</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {children}
      </div>
    </div>
  );
}
