/* Tech Stack — 4 columns: Models / Software / Embedded / Cloud */

const STACK = [
  {
    h: "Models",
    k: "Foundation · Open · Fine-tuned",
    items: [
      ["GPT / o-series", "OpenAI"],
      ["Claude", "Anthropic"],
      ["Llama 3 / 4", "Meta"],
      ["Mistral / Mixtral", "Open"],
      ["Gemini", "Google"],
      ["Whisper / TTS", "Speech"],
      ["Stable Diffusion", "Vision"],
      ["Custom fine-tunes", "LoRA / QLoRA"],
    ],
  },
  {
    h: "Software",
    k: "Application · Orchestration",
    items: [
      ["TypeScript / Python", "Languages"],
      ["LangGraph", "Agentic"],
      ["LlamaIndex", "Retrieval"],
      ["FastAPI / Hono", "API"],
      ["pgvector / Qdrant", "Vector"],
      ["Postgres / Neon", "Data"],
      ["Temporal", "Workflow"],
      ["OTel / Datadog", "Observability"],
    ],
  },
  {
    h: "Embedded",
    k: "Hardware · Edge",
    items: [
      ["ESP32 / -S3 / -C6", "MCU"],
      ["Raspberry Pi 5", "SBC"],
      ["Nvidia Jetson", "Edge GPU"],
      ["Coral / Hailo", "NPU"],
      ["TensorFlow Lite", "On-device"],
      ["ONNX Runtime", "Portable"],
      ["MQTT / CoAP", "Protocol"],
      ["LoRa / BLE / WiFi", "Comms"],
    ],
  },
  {
    h: "Cloud · Ops",
    k: "Deploy · Govern · Run",
    items: [
      ["AWS · GCP · Azure", "Hyperscaler"],
      ["Kubernetes", "Orchestration"],
      ["Terraform / Pulumi", "IaC"],
      ["GitHub Actions", "CI/CD"],
      ["Modal / Replicate", "Inference"],
      ["Weights & Biases", "ML Ops"],
      ["Snowflake / Databricks", "Lakehouse"],
      ["Sentry / Honeycomb", "Telemetry"],
    ],
  },
];

function TechStack() {
  return (
    <section id="stack">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>07 / Technology
          </div>
          <div>
            <h2>
              Vendor-neutral. <br />
              Outcome-bound.
            </h2>
            <p className="lede">
              The practice is vendor-neutral. Stack decisions are made on
              the basis of engagement outcome, applicable regulation, and
              total cost of ownership. Integration with existing data,
              identity, and operational systems is included in scope.
            </p>
          </div>
        </div>

        <div className="stack-grid">
          {STACK.map((col) => (
            <div className="stack-col" key={col.h}>
              <h4>{col.h}</h4>
              <div className="kicker">{col.k}</div>
              <ul>
                {col.items.map(([n, t]) => (
                  <li key={n}>
                    <span dangerouslySetInnerHTML={{ __html: n }} />
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Numbers band — capability surface (no fabricated business metrics) */
function NumbersBand() {
  const items = [
    { big: "08", unit: "", lbl: "Practice areas covered end-to-end" },
    { big: "06", unit: "", lbl: "Regulatory frameworks tracked continuously" },
    { big: "04", unit: "", lbl: "Hyperscaler clouds + on-prem deployment" },
    { big: "24", unit: "/7", lbl: "Production support for run-state engagements" },
  ];
  return (
    <section style={{ borderTop: "1px solid var(--ink)", padding: "0" }}>
      <div className="page">
        <div className="numbers">
          {items.map((it) => (
            <div className="number-cell" key={it.lbl}>
              <div className="big">
                {it.big}
                {it.unit && <span className="unit">{it.unit}</span>}
              </div>
              <div className="lbl">{it.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TechStack, NumbersBand });