// Capabilities.jsx — horizontal scroll deck of services + detail drawer
function Capabilities() {
  const cards = [
    {
      id: 'websites',
      t: 'Websites',
      d: 'Marketing sites, e-commerce, and custom web apps. WordPress, Squarespace, BigCommerce, or custom \u2014 we pick the right tool for the job.',
      tag: '01 / 06',
      overview: 'The website is the front door. Slow, dated, or off-brand sites cost you revenue on every click. We rebuild the front door so it converts \u2014 and so your team can actually update it without a developer.',
      deliverables: [
        'Marketing site design & build',
        'E-commerce (BigCommerce, Shopify, WooCommerce)',
        'Custom web apps (Next.js, Rails, Laravel)',
        'CMS migration from WordPress, Squarespace, or hand-rolled',
        'Analytics, tracking, and conversion instrumentation',
      ],
      stack: ['Next.js', 'WordPress', 'Squarespace', 'BigCommerce', 'Shopify', 'Vercel'],
      outcomes: [
        { k: '3\u00d7', v: 'faster page loads' },
        { k: '+40%', v: 'conversion lift (typical)' },
        { k: '6\u20138wk', v: 'average build timeline' },
      ],
      related: ['AWEC redesign', 'My Pie e-commerce', 'Black Desert Resort microsite'],
    },
    {
      id: 'crm',
      t: 'CRM',
      d: 'Pipeline, quoting, follow-ups. A CRM your team actually uses because it maps to how you already sell.',
      tag: '02 / 06',
      overview: 'Most CRMs fail because they\u2019re adopted before they\u2019re designed. We map your real sales motion, then configure (or build) a CRM that matches \u2014 not the other way around.',
      deliverables: [
        'Sales-process mapping & stage design',
        'HubSpot / Pipedrive / Salesforce configuration',
        'Custom CRM when off-the-shelf doesn\u2019t fit',
        'Quoting, contracts, and e-sign workflow',
        'Sales rep enablement and training',
      ],
      stack: ['HubSpot', 'Pipedrive', 'Airtable', 'Salesforce', 'Custom'],
      outcomes: [
        { k: '92%', v: 'rep adoption in 30 days' },
        { k: '2\u00d7', v: 'faster quote turnaround' },
        { k: '\u2212$0', v: 'on tools you\u2019ll abandon' },
      ],
      related: ['Foreman Labs pipeline', 'SLC Artisan Co quoting'],
    },
    {
      id: 'inventory',
      t: 'Inventory',
      d: 'Real-time stock, reorder rules, and the reports that keep you from running out \u2014 or over-buying.',
      tag: '03 / 06',
      overview: 'When stock and sales data live in different places, every decision is a guess. We wire them together so you reorder on signal, not panic.',
      deliverables: [
        'Real-time stock visibility across locations',
        'Reorder rules, par levels, and purchase automation',
        'POS \u2194 inventory \u2194 accounting sync',
        'Supplier and lead-time tracking',
        'Executive-level inventory reporting',
      ],
      stack: ['Shopify POS', 'Square', 'QuickBooks', 'Custom'],
      outcomes: [
        { k: '\u221230%', v: 'over-buying on slow SKUs' },
        { k: '0', v: 'stock-outs on hero products' },
        { k: '15min', v: 'weekly close (was 6 hours)' },
      ],
      related: ['My Pie commissary', 'Black Desert Resort F&B'],
    },
    {
      id: 'integrations',
      t: 'Integrations',
      d: 'POS to accounting. Forms to CRM. Shipping to inventory. The plumbing that makes the stack hang together.',
      tag: '04 / 06',
      feat: true,
      overview: 'The glue between your systems is where most money leaks. We design the integration layer first \u2014 so data flows, handoffs don\u2019t break, and no one copy-pastes between tabs again.',
      deliverables: [
        'Integration architecture & API design',
        'Zapier / Make / n8n for low-code flows',
        'Custom middleware when volume demands it',
        'Error monitoring and retry logic',
        'Documentation your team can actually read',
      ],
      stack: ['Make', 'Zapier', 'n8n', 'Node.js', 'Postgres', 'Webhooks'],
      outcomes: [
        { k: '100%', v: 'of data syncs automated' },
        { k: '0', v: 'copy-paste handoffs' },
        { k: '24/7', v: 'monitored & self-healing' },
      ],
      related: ['AWEC stack consolidation', 'SLC Artisan Co ops'],
    },
    {
      id: 'menus',
      t: 'Digital Menus',
      d: 'Back-of-house and front-of-house. Digital menus, signage, and the workflows that keep them in sync.',
      tag: '05 / 06',
      overview: 'For restaurants and retail, the menu is the product. We build digital menus and signage that stay synced with inventory, pricing, and the 86 list \u2014 automatically.',
      deliverables: [
        'Digital menu boards (on-prem & cloud)',
        'Front-of-house signage & ordering kiosks',
        'Kitchen display systems',
        'Menu \u2194 inventory \u2194 POS sync',
        'Remote management across locations',
      ],
      stack: ['Raspberry Pi', 'Screenly', 'Toast', 'Square', 'Custom'],
      outcomes: [
        { k: '<60s', v: 'to 86 an item across screens' },
        { k: '1', v: 'source of truth for pricing' },
        { k: '\u2212$5k/mo', v: 'typical signage-vendor savings' },
      ],
      related: ['My Pie digital menus', 'Black Desert Resort signage'],
    },
    {
      id: 'cto',
      t: 'Fractional CTO',
      d: 'Technical leadership without the full-time hire. Strategy, hiring, architecture, vendor calls.',
      tag: '06 / 06',
      overview: 'You need a CTO\u2019s judgment, not a CTO\u2019s salary. We embed part-time \u2014 in your leadership meetings, your vendor calls, your hiring panels \u2014 to make the right technical calls at the right time.',
      deliverables: [
        'Weekly leadership presence',
        'Technical roadmap and budget',
        'Vendor selection and contract review',
        'Engineering hiring and team structure',
        'Board-level technical reporting',
      ],
      stack: ['Strategy', 'Hiring', 'Architecture', 'Governance'],
      outcomes: [
        { k: '1/wk', v: 'leadership sync' },
        { k: '~$X', v: 'cost of a full-time CTO, avoided' },
        { k: 'Q+Q', v: 'quarterly technical planning' },
      ],
      related: ['AWEC fractional CTO', 'Foreman Labs'],
    },
  ];

  const [open, setOpen] = React.useState(null);
  const activeCard = open != null ? cards[open] : null;

  // Close on escape
  React.useEffect(() => {
    if (open == null) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  return (
    <section className="capabilities" id="work">
      <div className="capabilities__head">
        <div>
          <div className="eyebrow reveal">What we build</div>
          <h2 className="reveal reveal-1">Infrastructure<br/>that scales.</h2>
        </div>
        <div className="capabilities__hint">
          Drag / scroll
          <span className="arrow">&rarr;</span>
        </div>
      </div>
      <div className="capabilities__scroller" data-cursor="drag">
        {cards.map((c, i) => (
          <button
            key={c.id}
            type="button"
            className={`cap-card ${c.feat ? 'cap-card--feat' : ''}`}
            data-cursor="view"
            onClick={() => setOpen(i)}
          >
            <div className="cap-card__index">{c.tag}</div>
            <div>
              <h3 className="cap-card__title">{c.t}</h3>
              <p className="cap-card__desc">{c.d}</p>
            </div>
            <div className="cap-card__viz" aria-hidden />
          </button>
        ))}
      </div>

      {/* Drawer */}
      <div className={`cap-drawer-root ${activeCard ? 'open' : ''}`}>
        <div className="cap-drawer-scrim" onClick={() => setOpen(null)} />
        <aside className="cap-drawer" role="dialog" aria-modal="true" aria-labelledby="cap-drawer-title">
          {activeCard && (
            <>
              <header className="cap-drawer__head">
                <div>
                  <div className="cap-drawer__tag">{activeCard.tag} &nbsp;&middot;&nbsp; Service</div>
                  <h3 id="cap-drawer-title" className="cap-drawer__title">{activeCard.t}</h3>
                </div>
                <button type="button" className="cap-drawer__close" onClick={() => setOpen(null)} aria-label="Close">
                  <span className="x" /> <span className="lbl">Close</span>
                </button>
              </header>

              <div className="cap-drawer__body">
                <p className="cap-drawer__lede">{activeCard.overview}</p>

                <div className="cap-drawer__grid">
                  <div>
                    <div className="eyebrow">What we deliver</div>
                    <ul className="cap-drawer__list">
                      {activeCard.deliverables.map((d, i) => (
                        <li key={i}><span className="mark">+</span>{d}</li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <div className="eyebrow">Typical stack</div>
                    <div className="cap-drawer__chips">
                      {activeCard.stack.map((s) => (
                        <span key={s} className="chip">{s}</span>
                      ))}
                    </div>

                    <div className="eyebrow" style={{marginTop: 32}}>Recent work</div>
                    <ul className="cap-drawer__work">
                      {activeCard.related.map((r, i) => (
                        <li key={i}><span className="num">{String(i+1).padStart(2,'0')}</span>{r}</li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div className="cap-drawer__outcomes">
                  <div className="eyebrow">Outcomes</div>
                  <div className="cap-drawer__outcomes-grid">
                    {activeCard.outcomes.map((o, i) => (
                      <div key={i} className="outcome">
                        <span className="outcome__k">{o.k}</span>
                        <span className="outcome__v">{o.v}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <footer className="cap-drawer__foot">
                  <div>
                    <div className="eyebrow">Ready to talk?</div>
                    <p>Book a call. We&rsquo;ll tell you honestly whether {activeCard.t.toLowerCase()} is where to start.</p>
                  </div>
                  <a href="#contact" className="cap-drawer__cta" onClick={() => setOpen(null)} data-cursor="book">
                    Book a clarity call <span className="arrow">&rarr;</span>
                  </a>
                </footer>
              </div>
            </>
          )}
        </aside>
      </div>
    </section>
  );
}
window.Capabilities = Capabilities;