// spndly — middle sections: Problem, HowItWorks, Services

function Problem() {
  const stats = [
    { n: '01', u: '', title: 'Information arrives everywhere', desc: 'Emails, forms, photos, portals, PDFs, spreadsheets, and phone notes all become separate places your team has to check.' },
    { n: '02', u: '', title: 'People become the integration layer', desc: 'The same details get copied from one system into another, then checked again because nobody trusts the handoff.' },
    { n: '03', u: '', title: 'Important work waits for review', desc: 'Quotes, claims, reports, invoices, and exceptions sit until the right person has time to assemble the context.' },
  ];
  return (
    <section className="section" id="problem" data-screen-label="02 problem">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head-left">
            <div className="label-eye">Where teams lose time</div>
            <h2 className="h2">Manual operations<br />do not stay small.</h2>
            <p className="lead">The painful workflows are rarely one task. They are intake, lookup, review, drafting, filing, follow-up, and exception handling spread across five tools. We turn that mess into one controlled system.</p>
          </div>
          <div className="sec-head-aside">
            <span className="k">Best fit:</span> repeatable work<br />
            <span className="k">Common signals:</span> re-entry, waiting, review<br />
            <span className="k">Typical buyers:</span> operators, owners, department leads
          </div>
        </div>
        <div className="stat-grid">
          {stats.map((s, i) => (
            <div className="stat-cell" key={i}>
              <div className="mono-xs">Pattern {String(i + 1).padStart(2, '0')}</div>
              <div className="stat-num" style={{ marginTop: 14 }}>{s.n}<span className="unit">{s.u}</span></div>
              <h3 className="stat-title">{s.title}</h3>
              <div className="stat-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      nm: 'tell_us',
      n: '01',
      title: 'Map the workflow.',
      desc: 'Show us what comes in, who touches it, where it waits, what has to be checked, and what final output matters.',
      list: ['a call or a short form', 'no technical prep', 'we learn the current path', 'we identify the control points'],
    },
    {
      nm: 'one_pager',
      n: '02',
      title: 'Design the automation.',
      desc: 'You get a plain-English plan: what should be automated, what should stay human-reviewed, what systems need to connect, and what success looks like.',
      list: ['automation scope', 'human review points', 'systems and data flow', 'fixed-price build path'],
    },
    {
      nm: 'we_build',
      n: '03',
      title: 'Build and operate it.',
      desc: 'We wire the workflow into the tools your team already uses, add monitoring, and keep humans in control where judgment, money, or compliance is involved.',
      list: ['works with current tools', 'monitored after launch', 'exception handling included', 'review stays explicit'],
    },
  ];
  return (
    <section className="section" id="how" data-screen-label="03 how it works">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head-left">
            <div className="label-eye">How we build</div>
            <h2 className="h2">From messy workflow<br />to working system.</h2>
            <p className="lead">We do not start by selling software. We start by understanding the workflow, separating automation from judgment, then building the smallest reliable system that moves the work.</p>
          </div>
          <div className="sec-head-aside">
            <span className="k">Starts with:</span> workflow map<br />
            <span className="k">Then:</span> scoped build<br />
            <span className="k">After launch:</span> monitoring + iteration
          </div>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-num"><span>Step {s.n}</span><span className="nm">{s.nm.replace('_', ' ')}</span></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <ul className="step-list">
                {s.list.map((l, j) => <li key={j}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { t: 'Field service and blue-collar ops', d: 'Turn work orders, photos, invoices, dispatch notes, and customer follow-up into a workflow your team can trust.' },
    { t: 'Clinics and healthcare admin', d: 'Support intake, EHR-adjacent review, billing follow-up, and provider-controlled workflows without adding another place to work.' },
    { t: 'Insurance and claims operations', d: 'Route claim files, gather evidence, prepare review packets, and keep human reviewers in control of final decisions.' },
    { t: 'Enterprise back-office teams', d: 'Connect approvals, inboxes, spreadsheets, internal systems, and reporting steps that currently depend on manual handoffs.' },
    { t: 'Document intake and cleanup', d: 'Pull structured facts from PDFs, forms, emails, photos, and portals so the team stops re-keying the same information.' },
    { t: 'Billing, collections, and follow-up', d: 'Flag stuck invoices, missed steps, aging balances, and unanswered requests before they become someone’s late-night task.' },
    { t: 'Review queues and exceptions', d: 'Separate routine work from the cases that actually need a human, with clear queues and escalation paths.' },
    { t: 'Reports and client deliverables', d: 'Generate repeatable drafts from approved data and templates, then route them for review before they go out.' },
    { t: 'Operational visibility', d: 'Show what came in, what moved, what is blocked, and what needs review without another spreadsheet ritual.' },
  ];
  return (
    <section className="section" id="services" data-screen-label="04 services">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head-left">
            <div className="label-eye">What we automate</div>
            <h2 className="h2">The workflows between<br />your actual tools.</h2>
            <p className="lead">Not strategy decks. Not another dashboard for its own sake. Working automations for the operational work your team already does by hand.</p>
          </div>
          <div className="sec-head-aside">
            <span className="k">Works with:</span> email, sheets, portals, internal tools<br />
            <span className="k">Best for:</span> repeatable operational workflows<br />
            <span className="k">Guardrail:</span> human review where it matters
          </div>
        </div>
        <div className="services">
          {items.map((it, i) => (
            <div className="service" key={i}>
              <span className="service-check">✓</span>
              <div className="service-body">
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, HowItWorks, Services });