// Services + Intelligence + Integration sections

const SERVICES = [
  {
    icon: 'zap',
    label: 'tier · nano',
    title: 'Automation Nano Flows',
    desc: 'Surgical automations targeting single repetitive tasks. Delivered in days.',
    points: [
      'Single-source → single-action',
      'Versioned, observable',
      'Delivered in < 5 business days',
    ],
  },
  {
    icon: 'workflow',
    label: 'tier · system',
    title: 'Automation Systems',
    desc: 'Multi-step orchestrations across your stack with full audit trail.',
    points: [
      'Cross-tool pipelines',
      'SLA + alert routing',
      'Rollback-safe updates',
    ],
  },
  {
    icon: 'bot',
    label: 'tier · agentic',
    title: 'AI Operational Engineering',
    desc: 'RAG agents that triage, decide, and escalate inside your operations.',
    points: [
      'Domain-tuned retrieval',
      'Human-in-the-loop gates',
      'Decision logs + reproducibility',
    ],
  },
];

function ServicesSection() {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section className="so-section so-services" id="services">
      <div className="so-section-head">
        <span className="so-mono-label">SECTION · WHAT WE OFFER</span>
        <h2 className="so-section-title">
          Three tiers. <span className="muted">One operational compiler.</span>
        </h2>
      </div>
      <div className="so-services-grid">
        {SERVICES.map((s, i) => (
          <div
            key={s.title}
            className={'so-service-card' + (hovered === i ? ' hover' : '')}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
          >
            <div className="so-service-corner">{String(i + 1).padStart(2, '0')}</div>
            <div className="so-service-icon">
              <i data-lucide={s.icon}></i>
            </div>
            <div className="so-service-meta so-mono-label">{s.label}</div>
            <h3 className="so-service-title">{s.title}</h3>
            <p className="so-service-desc">{s.desc}</p>
            <ul className="so-service-points">
              {s.points.map(p => <li key={p}><span className="bullet">→</span>{p}</li>)}
            </ul>
            <a className="so-service-link" href="#">Specs &amp; handoff notes <span>↗</span></a>
          </div>
        ))}
      </div>
    </section>
  );
}

// Intelligence — anomaly detection / trends / cost
function IntelligenceSection() {
  return (
    <section className="so-section so-intel" id="intel">
      <div className="so-section-head">
        <span className="so-mono-label">SECTION · OPERATIONAL INTELLIGENCE</span>
        <h2 className="so-section-title">
          The system that watches the system.
        </h2>
        <p className="so-section-lede">
          We instrument every node so anomalies surface before they cascade — and so cost, latency, traffic, and SLA stay observable in one plane.
        </p>
      </div>

      <div className="so-intel-grid">
        <div className="so-intel-card so-intel-card--wide">
          <div className="head"><span className="so-mono-label">live · anomaly feed</span><span className="so-badge so-badge--live"><span className="pulse"></span>STREAMING</span></div>
          <div className="feed">
            <div className="entry"><span className="t">03:42:18</span><span className="lvl warn">DRIFT</span><span className="msg">node <code>airtable-sync</code> P95 latency 412ms (baseline 220ms)</span></div>
            <div className="entry"><span className="t">03:42:11</span><span className="lvl info">ROUTE</span><span className="msg">2 tickets escalated to <code>tier-2-queue</code></span></div>
            <div className="entry"><span className="t">03:41:50</span><span className="lvl ok">RESOLVE</span><span className="msg">retry succeeded for <code>slack-webhook-3</code></span></div>
            <div className="entry"><span className="t">03:41:32</span><span className="lvl ok">UPDATE</span><span className="msg"><code>intake-v3.4.1</code> rolled out · 0 errors</span></div>
            <div className="entry"><span className="t">03:40:09</span><span className="lvl danger">FAIL</span><span className="msg"><code>stripe-webhook</code> 3× consecutive — circuit opened</span></div>
          </div>
        </div>

        <div className="so-intel-card">
          <span className="so-mono-label">cost · 30d</span>
          <div className="big">−$24,180</div>
          <div className="sub">vs. manual baseline</div>
          <svg viewBox="0 0 200 60" width="100%" height="60">
            <polyline fill="none" stroke="var(--signal)" strokeWidth="2"
              points="0,40 20,38 40,30 60,33 80,22 100,25 120,15 140,18 160,10 180,12 200,5"/>
            <polyline fill="rgba(61,245,165,0.10)" stroke="none"
              points="0,40 20,38 40,30 60,33 80,22 100,25 120,15 140,18 160,10 180,12 200,5 200,60 0,60"/>
          </svg>
        </div>

        <div className="so-intel-card">
          <span className="so-mono-label">time saved · 30d</span>
          <div className="big">412h</div>
          <div className="sub">across 14 live flows</div>
          <div className="rows">
            <div className="r"><span>intake-triage</span><span className="signal">112h</span></div>
            <div className="r"><span>billing-recon</span><span className="signal">94h</span></div>
            <div className="r"><span>onboarding-bot</span><span className="signal">78h</span></div>
            <div className="r" style={{ opacity: 0.5 }}><span>+ 11 more</span><span>128h</span></div>
          </div>
          <div className="so-mono-label" style={{ marginTop: 14 }}>dashboards · trends · gauges · alerts</div>
        </div>
      </div>
    </section>
  );
}

// Integration — tools + bridge claim
const INTEGRATIONS = [
  'n8n', 'airtable', 'notion', 'slack', 'linear', 'jira', 'stripe', 'segment',
  'postgres', 'snowflake', 'salesforce', 'hubspot', 'zendesk', 'twilio', 'github', 'sendgrid'
];

function IntegrationSection() {
  return (
    <section className="so-section so-integ" id="integration">
      <div className="so-section-head">
        <span className="so-mono-label">SECTION · INTEGRATION LAYER</span>
        <h2 className="so-section-title">
          Integration coverage. <span className="muted">The remaining gap, we bridge.</span>
        </h2>
        <p className="so-section-lede">
          We start with native connectors (n8n, Airtable, Postgres) and fall back to bespoke API bridges when the tool you depend on has no off-the-shelf integration.
        </p>
      </div>
      <div className="so-integ-grid">
        {INTEGRATIONS.map(name => (
          <div key={name} className="so-integ-tile">
            <div className="dot"></div>
            <span>{name}</span>
          </div>
        ))}
        <div className="so-integ-tile so-integ-tile--bridge">
          <i data-lucide="git-merge"></i>
          <span>+ custom bridge</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesSection, IntelligenceSection, IntegrationSection });