/* global React */

const BUILD_ROWS = [
  {
    n: "01",
    slug: "multi-agent",
    title: "Multi-agent pipelines",
    desc: "Classify, route, draft, verify. Shipped behind your auth with an eval harness from day one. We don't ship anything we can't measure.",
    meta: ["4–8 weeks", "Production"],
  },
  {
    n: "02",
    slug: "workflow-automation",
    title: "Workflow automation",
    desc: "n8n, Temporal, Airflow. We wire agents into the systems you already run — your CRM, your inbox, your data warehouse. No new dashboards for your team to learn.",
    meta: ["2–6 weeks", "Production"],
  },
  {
    n: "03",
    slug: "architecture-review",
    title: "Architecture review",
    desc: "Two-week diagnostic. We map your stack, find the leaks, write the runbook. You get a document, a Loom, and a list of the three things to fix first.",
    meta: ["1–2 weeks", "Strategy"],
  },
  {
    n: "04",
    slug: "evaluation-harness",
    title: "Evaluation harness",
    desc: "Golden sets, regression suites, drift alarms. So you'll know when a model swap breaks something — before your customers do.",
    meta: ["2–4 weeks", "Reliability"],
  },
  {
    n: "05",
    slug: "operate",
    title: "Operate & on-call",
    desc: "Pager rotation, monthly model swaps, quarterly architecture reviews. We keep it from rotting. You stop reinventing the wheel every quarter.",
    meta: ["Ongoing", "Monthly retainer"],
  },
];

const ArrowUpRight = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M7 7h10v10"/><path d="M7 17 17 7"/>
  </svg>
);

function WhatWeBuild() {
  return (
    <section className="at-section at-build" id="services" data-comment-anchor="6f569ad8e7-section-38-5">
      <div className="at-container">
        <div
          style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            marginBottom: 56, gap: 32, flexWrap: 'wrap',
          }}
        >
          <div>
            <div className="at-eyebrow">What we build</div>
            <h2 className="at-h-section">Five ways<br />we engage.</h2>
          </div>
          <p className="at-body" style={{ maxWidth: '42ch' }}>
            We're a small team that ships systems. Every engagement starts with a written architecture and ends with a runbook your team can operate.
          </p>
        </div>

        <ol className="at-build-stack" aria-label="What we build">
          {BUILD_ROWS.map((row, i) => (
            <li
              key={row.n}
              className="at-build-row"
              style={{ '--i': i }}
              data-cursor-label={`read · ${row.n}`}
            >
              <article className="at-build-card">
                <span className="at-build-card-ghost" aria-hidden="true">{row.n}</span>

                <div className="at-build-card-top">
                  <span className="at-build-card-num">{row.n} / 05</span>
                  <div className="at-build-card-tags">
                    <span className="at-build-card-tag">{row.meta[0]}</span>
                    <span className="at-build-card-tag">{row.meta[1]}</span>
                  </div>
                </div>

                <div className="at-build-card-body">
                  <h3 className="at-build-card-title">{row.title}</h3>
                  <p className="at-build-card-desc">{row.desc}</p>
                </div>

                <div className="at-build-card-foot">
                  <a href={`/services?s=${row.slug}`} className="at-build-card-link" data-cursor-label="learn more">
                    Learn more <ArrowUpRight />
                  </a>
                  <a href={`/services?s=${row.slug}`} className="at-build-card-arrow" aria-label={`Learn more about ${row.title}`}>
                    <ArrowUpRight />
                  </a>
                </div>
              </article>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.WhatWeBuild = WhatWeBuild;