/* Services grid — 7 service cards + 1 CTA card */

const SERVICES = [
  {
    tag: "01 / Foundational",
    title: "AI System Architecture",
    desc: "Reference architectures for LLM, RAG, agentic, and MLOps systems. Designed for operational resilience, observability, and audit, with explicit avoidance of vendor lock-in.",
    items: ["LLM topology", "RAG / vector layer", "Inference fabric", "MLOps loop"],
  },
  {
    tag: "02 / Build",
    title: "Custom AI Software",
    desc: "Bespoke AI applications, copilots, and decision-support systems. Specification through deployment, with full documentation and operational hand-over.",
    items: ["Spec to prod", "Type-safe stacks", "Cloud-native", "SLA-backed"],
  },
  {
    tag: "03 / Embedded",
    title: "Embedded AI & Hardware",
    desc: "ESP32, FPGA prototypes, edge inference, and sensor-driven systems. Low-power, deterministic, and hardened for field deployment.",
    items: ["ESP32 / RISC-V", "FPGA prototype", "Edge inference", "Sensor fusion"],
  },
  {
    tag: "04 / Generative",
    title: "Generative AI Integration",
    desc: "LLM fine-tuning, retrieval-augmented generation, and enterprise copilots integrated with existing data estates and identity providers.",
    items: ["Fine-tune / LoRA", "Retrieval", "Eval harness", "Cost controls"],
  },
  {
    tag: "05 / Autonomous",
    title: "Agentic AI Systems",
    desc: "Multi-agent orchestration, tool-use, and autonomous workflows. Audit trails and human checkpoints are designed in as standard.",
    items: ["Planner / executor", "Tool routing", "Memory layer", "Guardrails"],
  },
  {
    tag: "06 / Governance",
    title: "AI Governance & Compliance",
    desc: "EU AI Act, ISO/IEC 42001, NIST AI RMF, and sector-specific regulation. Risk classification, documentation, and the corresponding control implementations.",
    items: ["Risk register", "Model cards", "DPIA / FRIA", "Audit pack"],
  },
  {
    tag: "07 / Security",
    title: "AI Security & Red Teaming",
    desc: "Adversarial evaluation, prompt-injection hardening, supply-chain review, and runtime defence. The objective is to identify and remediate weaknesses prior to production.",
    items: ["Adversarial eval", "Jailbreak suite", "SBOM / lineage", "Runtime defence"],
  },
];

function ServiceCard({ idx, s, n }) {
  return (
    <article className="service">
      <div className="service-head">
        <span className="service-num">{String(idx + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
        <span className="service-tag">{s.tag.split(" / ")[1]}</span>
      </div>
      <h3>{s.title}</h3>
      <p>{s.desc}</p>
      <ul>
        {s.items.map((it) => (
          <li key={it}>{it}</li>
        ))}
      </ul>
    </article>
  );
}

function ServicesCTACard() {
  return (
    <article
      className="service"
      style={{
        background: "var(--ink)",
        color: "var(--paper)",
        gridColumn: "span 3",
      }}
    >
      <div className="service-head">
        <span
          className="service-num"
          style={{ color: "var(--g-25)" }}
        >
          08 / 08
        </span>
        <span
          className="service-tag"
          style={{ color: "var(--paper)", borderColor: "var(--paper)" }}
        >
          Bespoke
        </span>
      </div>
      <h3 style={{ color: "var(--paper)" }}>
        Engagements that span more than one&nbsp;discipline.
      </h3>
      <p style={{ color: "var(--g-25)" }}>
        For programmes that combine advisory, software, integration, and
        hardware into a single deliverable. One contract, one accountable
        team, one defined outcome.
      </p>
      <a
        href="mailto:info@rozumcode.com"
        className="btn btn-ghost"
        style={{
          marginTop: "auto",
          alignSelf: "flex-start",
          background: "transparent",
          color: "var(--paper)",
          borderColor: "var(--paper)",
        }}
      >
        Open conversation <span className="arrow"></span>
      </a>
    </article>
  );
}

function Services() {
  return (
    <section id="services">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>02 / Services
          </div>
          <div>
            <h2>
              We advise. We&nbsp;build.
              <br />
              We&nbsp;<span className="serif-italic">execute</span>.
            </h2>
            <p className="lede">
              The practice combines advisory, software development, AI
              engineering, integration, and operational support under a
              single delivery model. Each capability is grounded in an
              established framework with defined deliverables. The engagement
              methodology is consistent across organisation size.
            </p>
          </div>
        </div>

        <div className="services">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.title} idx={i} s={s} n={8} />
          ))}
          <ServicesCTACard />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });