// ── HERO ──────────────────────────────────────────────────────────
// Same dark-green motion-blur treatment as Home/Contact heroes.
// Headline = approved Short description from SERVICE-DESCRIPTIONS.md.
// Sub-paragraph = first paragraph of the approved Expanded description.
const SolutionHero = ({ onCTA }) =>
<section data-screen-label="Hero" data-nav-tone="dark" className="full-bleed" style={{
  position: "relative",
  minHeight: "min(820px, 100svh)",
  maxHeight: "min(1000px, 100svh)",
  padding: "clamp(180px, 20vh, 280px) clamp(20px, 6vw, 96px) clamp(48px, 8vh, 120px)",
  fontFamily: "var(--font-display)",
  color: "#FFFFFF",
  overflow: "hidden",
  display: "flex", flexDirection: "column",
  background:
  "radial-gradient(120% 90% at 78% 55%, #1F6E5C 0%, #0F3D34 38%, #061C18 78%, #020A09 100%)"
}}>
    <div aria-hidden="true" style={{
    position: "absolute", inset: 0,
    backgroundImage: "url('/assets/photography/approved/13.jpeg')",
    backgroundSize: "cover",
    backgroundPosition: "center right",
    backgroundRepeat: "no-repeat",
    mixBlendMode: "screen",
    opacity: 0.95,
    maskImage:
    "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 18%, #000 50%, #000 100%)",
    WebkitMaskImage:
    "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 18%, #000 50%, #000 100%)"
  }} />
    <div aria-hidden="true" style={{
    position: "absolute", inset: 0,
    background:
    "linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%), " +
    "linear-gradient(90deg, rgba(2,10,9,0.55) 0%, rgba(2,10,9,0) 45%)",
    pointerEvents: "none"
  }} />

    <div style={{ position: "relative", maxWidth: 1600, margin: "0 auto",
    width: "100%", flex: 1, display: "flex", flexDirection: "column",
    justifyContent: "flex-end", gap: 64 }}>

      <div>
        {/* Breadcrumb / category eyebrow */}
        <div style={{ display: "inline-flex", alignItems: "center",
        padding: "8px 14px", borderRadius: 999,
        background: "rgba(255,255,255,0.08)",
        border: "1px solid rgba(255,255,255,0.18)",
        width: "fit-content",
        fontSize: 12, fontWeight: 500, letterSpacing: "0.02em",
        color: "rgba(255,255,255,0.85)",
        marginBottom: 28 }}>Solution

      </div>

        <h1 style={{
        fontWeight: 700, lineHeight: 1.02,
        letterSpacing: "-0.035em", margin: 0, maxWidth: 1300,
        textWrap: "balance",
        color: "#FFFFFF", fontSize: "84px"
      }}>Model Evaluation and Benchmarking


      </h1>

        <p style={{
        margin: "32px 0 0", maxWidth: 640, fontSize: 17, lineHeight: 1.55,
        fontWeight: 400, color: "rgba(255,255,255,0.78)"
      }}>
          Model Evaluation & Benchmarking is the structured assessment of AI model outputs against defined quality, performance, safety, language, domain, and user experience criteria. Argos Data helps enterprise AI teams evaluate how models perform across tasks, languages, use cases, and deployment conditions — turning human review into reliable evidence for model improvement and release readiness.
        </p>
      </div>

      <div style={{ display: "flex", gap: 12 }}>
        <button onClick={onCTA} style={{
        background: "rgba(8,22,19,0.85)",
        color: "#FFFFFF",
        padding: "14px 26px", borderRadius: 37, fontSize: 14, fontWeight: 500,
        fontFamily: "var(--font-display)",
        border: "1px solid rgba(255,255,255,0.18)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        cursor: "pointer",
        display: "inline-flex", alignItems: "center", gap: 10,
        letterSpacing: "-0.005em"
      }} onClick={() => { window.location.href = '/contact-us/'; }}>Let's talk</button>
        <button onClick={() => {
        const el = document.getElementById('sub-solutions');
        if (!el) return;
        const y = el.getBoundingClientRect().top + window.scrollY;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }} style={{
        background: "transparent", color: "#FFFFFF",
        padding: "14px 26px", borderRadius: 37, fontSize: 14, fontWeight: 500,
        fontFamily: "var(--font-display)",
        border: "1px solid rgba(255,255,255,0.32)", cursor: "pointer",
        display: "inline-flex", alignItems: "center", gap: 10,
        letterSpacing: "-0.005em"
      }}>Explore sub-solutions</button>
      </div>
    </div>
  </section>;


// ── OVERVIEW ───────────────────────────────────────────────────────
// Mirrors the Homepage "30+ years of experience" two-column rhythm:
// eyebrow + hairline rule, then a 1.15fr / 1fr split with H2 on the
// left and a body paragraph on the right.
// Copy = approved 2nd paragraph of the Expanded description.
const Overview = () =>
<section data-screen-label="Overview" className="full-bleed" style={{
  fontFamily: "var(--font-display)",
  background: "#F2F2F0", color: "#0E1F3E",
  padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)"
}}>
    <div style={{ maxWidth: 1600, margin: "0 auto" }}>
      <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
        letterSpacing: "0.10em", textTransform: "uppercase",
        marginBottom: 24 }}>
        Overview
      </div>
      <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
        letterSpacing: "-0.025em", margin: "0 0 48px",
        maxWidth: 1200, textWrap: "balance" }}>
        Designed around your model objective.
      </h2>
      <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
        fontWeight: 400, margin: 0, maxWidth: 980 }}>
        Each program is designed around the model objective, evaluation criteria, benchmark framework, reviewer qualifications, and scoring rubrics. Most evaluation work is delivered through Argos Myriad — the Argos Data Platform — with SmartSuite, our customizable tooling environment, providing custom evaluation workflows, scalable reviewer deployment, and embedded quality controls. Argos Data can also work inside client evaluation platforms or through structured file exchange when that fits the program better.
      </p>
    </div>
  </section>;


// ── USE CASES ──────────────────────────────────────────────────────
// 6 bullets, verbatim from the approved "Use cases" list in
// SERVICE-DESCRIPTIONS.md under AI Data Collection. Each renders as
// a numbered row inside a single bordered column block — light, calm
// rhythm consistent with the rest of the site's hairlined dividers.
const UseCases = () => {
  const items = [
    "Comprehensive LLM Evaluation for quality, relevance, accuracy, helpfulness, safety, and task performance",
    "Multilingual Evaluation for the cross-language, comparative view of model behavior across languages, locales, and regional contexts",
    "In-Language Model Validation for the deep, single-market view of whether a model is ready for deployment in a specific locale",
    "A/B Testing & Model Comparison for side-by-side evaluation of model versions, prompts, or system configurations",
    "Domain-Specific Benchmarking for evaluating models against industry, task, or subject-matter standards",
    "Human-in-the-Loop Validation for expert review, adjudication, and quality assurance across model evaluation workflows",
    "Agentic AI Evaluation & Workflow Validation for assessing how AI agents plan, reason, use tools, and complete multi-step tasks",
  ];

  return (
    <section data-screen-label="Use cases" style={{
      fontFamily: "var(--font-display)",
      background: "#FFFFFF", color: "#0E1F3E",
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
          letterSpacing: "0.10em", textTransform: "uppercase",
          marginBottom: 24 }}>
          Use cases
        </div>
        <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 64px",
          maxWidth: 1100, textWrap: "balance" }}>
          Where Model Evaluation and Benchmarking is applied.
        </h2>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          columnGap: 64,
          borderTop: "1px solid rgba(14,31,62,0.30)"
        }}>
          {items.map((it, i) =>
          <div key={it} style={{
            display: "grid",
            gridTemplateColumns: "60px 1fr",
            gap: 24,
            padding: "36px 0",
            borderBottom: "1px solid rgba(14,31,62,0.18)",
            alignItems: "baseline"
          }}>
              <div style={{ fontSize: 16, fontWeight: 500, color: "#0E1F3E",
              fontFeatureSettings: '"tnum"', opacity: 0.55 }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div style={{ fontSize: 24, lineHeight: 1.3, fontWeight: 500,
              letterSpacing: "-0.01em", color: "#0E1F3E", textWrap: "balance" }}>
                {it}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ── SUB-SERVICES GRID ──────────────────────────────────────────────
// Reuses the Homepage Solutions card pattern verbatim: numbered card,
// rounded image tile, title, approved short description, pill CTA,
// on the same cream/yellow radial wash. 6 cards = the 6 sub-services
// documented under AI Data Collection in SERVICE-DESCRIPTIONS.md.
//
// Image assignments: where a Homepage card uses an approved photo
// for the same topic, we reuse it. Where the doc names no thumbnail,
// we pick from the approved photography pool (no new imagery
// invented). If no approved photo clearly matches, a literal
// "Lorem ipsum…" placeholder tile is shown so missing imagery is
// visible to the manager — per project rules.
// SvcIcon is loaded globally from components/svc-icons.jsx
// (28 icons from the supplied Argos iconset, addressable by name "01"–"28").

const SubServices = () => {
  const services = [
  { id: "01", slug: "comprehensive-llm-evaluation", parent: "model-evaluation", title: "Comprehensive LLM Evaluation",
    desc: "Enterprise-grade evaluation for assessing LLM quality, reliability, safety, and production readiness",
    icon: "stack",
    bg: "#0E1F3E", fg: "#EEE36B" },
  // navy + yellow
  { id: "02", slug: "multilingual-evaluation", parent: "model-evaluation", title: "Multilingual Evaluation",
    desc: "The cross-language, comparative view of how a model performs across many languages, locales, and regions",
    icon: "arcs",
    bg: "#30AA74", fg: "#FFFFFF" },
  // green + white
  { id: "03", slug: "in-language-model-validation", parent: "model-evaluation", title: "In-Language Model Validation",
    desc: "The deep, single-market view of whether a model is ready for deployment in a specific locale",
    icon: "half-arcs",
    bg: "#EEE36B", fg: "#0E1F3E" },
  // yellow + navy
  { id: "04", slug: "a-b-testing-and-model-comparison", parent: "model-evaluation", title: "A/B Testing & Model Comparison",
    desc: "Enterprise-grade model comparison workflows for confident release, upgrade, and deployment decisions",
    icon: "speech",
    bg: "#002042", fg: "#30AA74" },
  // navy-deep + green
  { id: "05", slug: "domain-specific-benchmarking", parent: "model-evaluation", title: "Domain-Specific Benchmarking",
    desc: "Production-readiness benchmarks for evaluating AI performance in defined business workflows and domains",
    icon: "layers",
    bg: "#000000", fg: "#EEE36B" },
  // black + yellow
  { id: "06", slug: "human-in-the-loop-validation", parent: "model-evaluation", title: "Human-in-the-Loop Validation",
    desc: "Governed human validation workflows for consistent, auditable AI quality control",
    icon: "orbit",
    bg: "#3CA276", fg: "#0E1F3E" },
  { id: "07", slug: "agentic-ai-evaluation-and-workflow-validation", parent: "model-evaluation", title: "Agentic AI Evaluation & Workflow Validation",
    desc: "Structured human-in-the-loop evaluation for reliable, safe, and production-ready AI agent workflows",
    icon: "orbit",
    bg: "#3CA276", fg: "#0E1F3E" }];
;  // green-soft + navy



  // Shared "Learn more" text link — sits at the bottom of every card.
  const LearnMoreLink = ({ href = "#" }) =>
    <a data-arrow="right" href={href} style={{
      fontSize: 13, fontWeight: 500,
      color: "#0E1F3E", textDecoration: "none",
      display: "inline-flex", alignItems: "center", gap: 8,
      alignSelf: "flex-start",
      borderBottom: "1px solid #0E1F3E",
      paddingBottom: 3
    }}>Learn more <span aria-hidden="true" className="arrow">→</span></a>;

  // Shared icon plate — full-height navy column on the LEFT of every
  // card. Icon sits near the top, number anchored top-left in cream.
  // Width scales between full and half cards.
  const IconPlate = ({ s, width }) =>
    <div style={{
      width, flexShrink: 0,
      borderRadius: Math.round(width * 0.18),
      background: s.bg,
      position: "relative",
      alignSelf: "stretch",
      display: "flex", alignItems: "flex-start", justifyContent: "center",
      padding: `${Math.round(width * 0.34)}px ${Math.round(width * 0.18)}px`,
      overflow: "hidden"
    }}>
      <div style={{
        position: "absolute",
        top: Math.round(width * 0.12), left: Math.round(width * 0.14),
        fontSize: Math.max(11, Math.round(width * 0.115)),
        fontWeight: 500, color: s.fg,
        fontFeatureSettings: '"tnum"', letterSpacing: "0.06em",
        lineHeight: 1
      }}>{s.id}</div>
      <div style={{
        width: Math.round(width * 0.58),
        height: Math.round(width * 0.58),
        marginTop: Math.round(width * 0.06)
      }}>
        <SvcIcon name={s.icon} stroke={s.fg} />
      </div>
    </div>;

  // ── FULL CARD — horizontal, wide navy column + content ──────────
  const FullCard = ({ s }) =>
    <div style={{
      border: "1px solid rgba(14,31,62,0.45)",
      borderRadius: 28,
      padding: 20,
      background: "rgba(255,255,255,0.55)",
      display: "grid",
      gridTemplateColumns: "auto 1fr",
      gap: 28,
      alignItems: "stretch",
      height: "100%"
    }}>
      <IconPlate s={s} width={140} />
      <div style={{
        display: "flex", flexDirection: "column", flex: 1,
        padding: "8px 12px 8px 0", gap: 16
      }}>
        <div style={{
          fontSize: 26, fontWeight: 700, lineHeight: 1.15,
          letterSpacing: "-0.015em",
          whiteSpace: "pre-line"
        }}>
          {s.title}
        </div>
        <p style={{
          fontSize: 14, lineHeight: 1.55,
          color: "#1A1A1A", fontWeight: 400,
          margin: 0
        }}>{s.desc}</p>
        <div style={{ marginTop: "auto", paddingTop: 8 }}>
          <LearnMoreLink href={s.slug ? `/${s.parent}/${s.slug}` : "#"} />
        </div>
      </div>
    </div>;

  // ── HALF CARD — horizontal, navy column left, content right ─────
  // Two halves stacked vertically = same overall height as one full card.
  const HalfCard = ({ s }) =>
    <div style={{
      border: "1px solid rgba(14,31,62,0.45)",
      borderRadius: 24,
      padding: 16,
      background: "rgba(255,255,255,0.55)",
      display: "grid",
      gridTemplateColumns: "auto 1fr",
      gap: 22,
      alignItems: "stretch",
      flex: 1,
      minHeight: 0
    }}>
      <IconPlate s={s} width={108} />
      <div style={{
        display: "flex", flexDirection: "column",
        minWidth: 0, gap: 10,
        padding: "8px 8px 8px 0"
      }}>
        <div style={{
          fontSize: 20, fontWeight: 700, lineHeight: 1.2,
          letterSpacing: "-0.015em"
        }}>
          {s.title.replace(/\n/g, " ")}
        </div>
        <p style={{
          fontSize: 13, lineHeight: 1.5,
          color: "#1A1A1A", fontWeight: 400,
          margin: 0
        }}>{s.desc}</p>
        <div style={{ marginTop: "auto", paddingTop: 6 }}>
          <LearnMoreLink href={s.slug ? `/${s.parent}/${s.slug}` : "#"} />
        </div>
      </div>
    </div>;

  return (
    <section data-screen-label="Sub-services" style={{
      position: "relative",
      padding: "clamp(60px, 10vw, 120px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)",
      fontFamily: "var(--font-display)",
      color: "#0E1F3E",
      overflow: "hidden"
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
        "radial-gradient(70% 80% at 50% 50%, #F4ECA8 0%, #F8F2C8 28%, rgba(255,255,255,0.85) 60%, #FFFFFF 95%)",
        pointerEvents: "none"
      }} />
      <div style={{ position: "relative", maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
          letterSpacing: "0.10em", textTransform: "uppercase",
          marginBottom: 24 }}>
          Sub-services
        </div>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px"
        }}>
          Seven ways we evaluate.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: "#1A1A1A",
          fontWeight: 400, margin: "0 0 80px", maxWidth: 620 }}>
          Each program is built around the model objective, target users,
          operating conditions, and performance requirements — not a
          generic playbook.
        </p>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))",
          gridAutoRows: "1fr",
          gap: 20,
          alignItems: "stretch"
        }}>
          {services.map((s) =>
            <HalfCard key={s.id} s={s} />
          )}
        </div>
      </div>
    </section>);

};

// ── SUB-SERVICES — variant B ───────────────────────────────────────
// Alternate card design for the same six services. No icon plate
// background; the icon sits top-left of the card in the service's
// brand color. The number moves to the bottom-left and pairs with
// a "Learn more" affordance on the right that alternates between
// the text-link and the older pill button, every other card.
const SubServicesAlt = () => {
  const services = [
  { id: "01", slug: "comprehensive-llm-evaluation", parent: "model-evaluation", title: "Comprehensive LLM Evaluation",
    desc: "Enterprise-grade evaluation for assessing LLM quality, reliability, safety, and production readiness",
    icon: "18", color: "#0E1F3E" },
  { id: "02", slug: "multilingual-evaluation", parent: "model-evaluation", title: "Multilingual Evaluation",
    desc: "The cross-language, comparative view of how a model performs across many languages, locales, and regions",
    icon: "24", color: "#0E1F3E" },
  { id: "03", slug: "in-language-model-validation", parent: "model-evaluation", title: "In-Language Model Validation",
    desc: "The deep, single-market view of whether a model is ready for deployment in a specific locale",
    icon: "05", color: "#0E1F3E" },
  { id: "04", slug: "a-b-testing-and-model-comparison", parent: "model-evaluation", title: "A/B Testing & Model Comparison",
    desc: "Enterprise-grade model comparison workflows for confident release, upgrade, and deployment decisions",
    icon: "20", color: "#0E1F3E" },
  { id: "05", slug: "domain-specific-benchmarking", parent: "model-evaluation", title: "Domain-Specific Benchmarking",
    desc: "Production-readiness benchmarks for evaluating AI performance in defined business workflows and domains",
    icon: "17", color: "#0E1F3E" },
  { id: "06", slug: "human-in-the-loop-validation", parent: "model-evaluation", title: "Human-in-the-Loop Validation",
    desc: "Governed human validation workflows for consistent, auditable AI quality control",
    icon: "09", color: "#0E1F3E" },
  { id: "07", slug: "agentic-ai-evaluation-and-workflow-validation", parent: "model-evaluation", title: "Agentic AI Evaluation & Workflow Validation",
    desc: "Structured human-in-the-loop evaluation for reliable, safe, and production-ready AI agent workflows",
    icon: "27", color: "#0E1F3E" }];
;

  const Card = ({ s, idx }) => {
    return (
      <div style={{
        border: "1px solid rgba(14,31,62,0.45)",
        borderRadius: 24,
        padding: "28px 28px 24px",
        background: "rgba(255,255,255,0.55)",
        display: "flex", flexDirection: "column",
        height: "100%", gap: 20,
        minHeight: 320
      }}>
        <div style={{ width: 48, height: 48 }}>
          <SvcIcon name={s.icon} stroke={s.color} strokeWidth={1.8} />
        </div>
        <div style={{
          fontSize: 22, fontWeight: 700, lineHeight: 1.2,
          letterSpacing: "-0.015em",
          whiteSpace: "pre-line"
        }}>
          {s.title}
        </div>
        <p style={{
          fontSize: 14, lineHeight: 1.5,
          color: "#1A1A1A", fontWeight: 400,
          margin: 0
        }}>{s.desc}</p>
        <div style={{
          marginTop: "auto", paddingTop: 16,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 16
        }}>
          <a data-dark-pill href={s.slug ? `/${s.parent}/${s.slug}` : "#"} style={{
            background: "#0A0A0A", color: "#fff",
            padding: "10px 18px", borderRadius: 37,
            fontSize: 12, fontWeight: 500,
            fontFamily: "var(--font-display)",
            border: "none", cursor: "pointer",
            letterSpacing: "-0.005em",
            textDecoration: "none",
            display: "inline-block"
          }}>Learn more</a>
          <div style={{
            fontSize: 13, fontWeight: 500,
            color: s.color,
            fontFeatureSettings: '"tnum"', letterSpacing: "0.06em"
          }}>{s.id}</div>
        </div>
      </div>);
  };

  return (
    <section id="sub-solutions" data-screen-label="Sub-services (alt)" style={{
      position: "relative",
      padding: "clamp(60px, 10vw, 120px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)",
      fontFamily: "var(--font-display)",
      color: "#0E1F3E",
      overflow: "hidden",
      background: "#FFFFFF"
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
        "radial-gradient(70% 80% at 50% 50%, #F4ECA8 0%, #F8F2C8 28%, rgba(255,255,255,0.85) 60%, #FFFFFF 95%)",
        pointerEvents: "none"
      }} />
      <div style={{ position: "relative", maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
          letterSpacing: "0.10em", textTransform: "uppercase",
          marginBottom: 24 }}>
          Sub-services
        </div>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px"
        }}>
          Seven ways we evaluate.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: "#1A1A1A",
          fontWeight: 400, margin: "0 0 80px", maxWidth: 620 }}>
          Each program is built around the model objective, target users,
          operating conditions, and performance requirements — not a
          generic playbook.
        </p>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gridAutoRows: "1fr",
          gap: 20,
          alignItems: "stretch"
        }}>
          {services.map((s, i) =>
            <Card key={s.id} s={s} idx={i} />
          )}
        </div>
      </div>
    </section>);

};

// ── WHY ARGOS / DIFFERENTIATOR ─────────────────────────────────────
// Dark navy section, mirrors the Homepage "What we stand for" rhythm.
// Three column blocks — content = the three approved paragraphs of
// the "Argos differentiator" section, lightly framed with derived
// 2-word headings so the layout has structure. (Paragraph bodies
// remain verbatim from SERVICE-DESCRIPTIONS.md.)
const WhyArgos = () => {
  const blocks = [
  {
    id: "The risk",
    body: "As AI systems move into production, evaluation becomes a business-critical control point. Enterprise teams need to understand whether models are accurate, consistent, safe, relevant, and fit for production across languages, domains, and scenarios. Surface-level testing is not enough when model behavior affects customer experience, operational trust, compliance exposure, and brand risk."
  },
  {
    id: "Our approach",
    body: "Argos Data combines vetted human evaluators, multilingual and domain-specific expertise, and structured operational governance to support benchmarking, model comparison, regression testing, and ongoing performance monitoring. We define evaluation criteria, scoring rubrics, reviewer calibration, and adjudication workflows before evaluation begins. Programs are designed for repeatability — so evaluation evidence holds up across model versions, release cycles, and downstream review."
  },
  {
    id: "Why it matters",
    body: "For enterprise AI teams, this connects evaluation directly to release readiness and production reliability — providing the human-reviewed evidence needed to move models from development to deployment with confidence."
  }
  ];

  return (
    <section data-screen-label="Why Argos" data-nav-tone="dark" className="full-bleed" style={{
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)", fontFamily: "var(--font-display)",
      background: "#0E1F3E", color: "#fff"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.55)",
          letterSpacing: "0.10em", textTransform: "uppercase", marginBottom: 24 }}>
          Why Argos
        </div>
        <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 80px",
          maxWidth: 1100, textWrap: "balance" }}>
          Evaluation, treated as an engineered AI data operation.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.18)" }}>
          {blocks.map((v, i) =>
          <div key={v.id} style={{
            padding: "48px 40px 48px 0",
            paddingLeft: i === 0 ? 0 : 40,
            borderRight: i < 2 ? "1px solid rgba(255,255,255,0.18)" : "none"
          }}>
              <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.05,
              letterSpacing: "-0.02em", marginBottom: 24 }}>
                {v.id}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: "rgba(255,255,255,0.78)",
              fontWeight: 400, margin: 0 }}>{v.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ── OUTCOME ────────────────────────────────────────────────────────
// Light section, eyebrow + headline + verbatim Outcome paragraph
// from SERVICE-DESCRIPTIONS.md.
const Outcome = () =>
<section data-screen-label="Outcome" className="full-bleed" style={{
  padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)", fontFamily: "var(--font-display)",
  background: "#F2F2F0", color: "#0E1F3E"
}}>
    <div style={{ maxWidth: 1600, margin: "0 auto" }}>
      <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
      letterSpacing: "0.10em", textTransform: "uppercase", marginBottom: 24 }}>
        Outcome
      </div>
      <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
      letterSpacing: "-0.025em", margin: "0 0 48px",
      maxWidth: 1200, textWrap: "balance" }}>
        Reliable evaluation signals for measuring AI quality, safety, and release readiness.
      </h2>
      <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
      fontWeight: 400, maxWidth: 1000, margin: 0, textWrap: "pretty" }}>
        Model Evaluation & Benchmarking provides enterprise AI teams with reliable evidence of model performance across quality, safety, language, domain, and user experience criteria. The result is clearer release decisions, stronger model reliability, reduced deployment risk, and a more disciplined path from model development to production AI.

---
      </p>
    </div>
  </section>;

// Publish the six section components for the shared svc-template.jsx App.
window.SVC_SECTIONS = {
  SolutionHero, Overview, UseCases, SubServicesAlt, WhyArgos, Outcome
};
