// ── 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/85.png')",
    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"
      }}>Safety Risk and Trust


      </h1>

        <p style={{
        margin: "32px 0 0", maxWidth: 640, fontSize: 17, lineHeight: 1.55,
        fontWeight: 400, color: "rgba(255,255,255,0.78)"
      }}>
          Safety, Risk & Trust helps enterprise AI teams evaluate, monitor, and improve model behavior against defined safety standards, policy requirements, risk criteria, and user expectations. Argos Data supports AI programs where model outputs must be assessed for harmful content, bias, toxicity, hallucinations, cultural risk, policy violations, and unsafe behavior across languages, domains, and deployment contexts.
        </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's intended use.
      </h2>
      <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
        fontWeight: 400, margin: 0, maxWidth: 980 }}>
        Each program is designed around the model's intended use, safety taxonomy, review criteria, and risk thresholds. Most safety programs run inside Argos Myriad — the Argos Data Platform — where SmartSuite, our customizable tooling environment, supports secure human-in-the-loop review, embedded QA controls, role-based access, and auditability. Safety work also frequently calls for the data to stay inside the client's environment; in those cases, Argos Data adapts to deliver inside client platforms or through secure file exchange while preserving the same governance standards.
      </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 = [
    "Evaluating model outputs for safety, toxicity, bias, misinformation, and policy compliance",
    "Testing models against adversarial prompts, jailbreak attempts, manipulation, and harmful use cases",
    "Reviewing outputs for hallucinations, factuality issues, cultural risk, and unsafe recommendations",
    "Supporting safety-aligned RLHF, preference ranking, and human feedback workflows",
    "Monitoring model behavior across languages, locales, domains, and user scenarios",
    "Creating auditable review records for AI governance, release readiness, and ongoing risk management",
  ];

  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 Safety Risk and Trust 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: "safety-aligned-rlhf", parent: "safety-risk-and-trust", title: "Safety-Aligned RLHF",
    desc: "Governed safety feedback workflows for traceable, policy-aligned model improvement",
    icon: "stack",
    bg: "#0E1F3E", fg: "#EEE36B" },
  // navy + yellow
  { id: "02", slug: "continuous-safety-monitoring", parent: "safety-risk-and-trust", title: "Continuous Safety Monitoring",
    desc: "Ongoing human-in-the-loop monitoring that identifies, escalates, and documents AI safety risks over time",
    icon: "arcs",
    bg: "#30AA74", fg: "#FFFFFF" },
  // green + white
  { id: "03", slug: "toxicity-and-safety-classification", parent: "safety-risk-and-trust", title: "Toxicity & Safety Classification",
    desc: "Human-in-the-loop classification for identifying harmful, unsafe, biased, and policy-sensitive content",
    icon: "half-arcs",
    bg: "#EEE36B", fg: "#0E1F3E" },
  // yellow + navy
  { id: "04", slug: "bias-mitigation", parent: "safety-risk-and-trust", title: "Bias Mitigation",
    desc: "Governed bias evaluation and remediation workflows for responsible enterprise AI",
    icon: "speech",
    bg: "#002042", fg: "#30AA74" },
  // navy-deep + green
  { id: "05", slug: "red-teaming-and-adversarial-evaluation", parent: "safety-risk-and-trust", title: "Red Teaming & Adversarial Evaluation",
    desc: "Governed adversarial testing for identifying, documenting, and reducing AI model vulnerabilities",
    icon: "layers",
    bg: "#000000", fg: "#EEE36B" },
  // black + yellow
  { id: "06", slug: "ethical-and-responsible-data-collection", parent: "safety-risk-and-trust", title: "Ethical & Responsible Data Collection",
    desc: "Governed data collection frameworks for reducing privacy, compliance, representation, and dataset integrity risk",
    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"
        }}>
          Six ways we safeguard.
        </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: "safety-aligned-rlhf", parent: "safety-risk-and-trust", title: "Safety-Aligned RLHF",
    desc: "Governed safety feedback workflows for traceable, policy-aligned model improvement",
    icon: "09", color: "#0E1F3E" },
  { id: "02", slug: "continuous-safety-monitoring", parent: "safety-risk-and-trust", title: "Continuous Safety Monitoring",
    desc: "Ongoing human-in-the-loop monitoring that identifies, escalates, and documents AI safety risks over time",
    icon: "07", color: "#0E1F3E" },
  { id: "03", slug: "toxicity-and-safety-classification", parent: "safety-risk-and-trust", title: "Toxicity & Safety Classification",
    desc: "Human-in-the-loop classification for identifying harmful, unsafe, biased, and policy-sensitive content",
    icon: "15", color: "#0E1F3E" },
  { id: "04", slug: "bias-mitigation", parent: "safety-risk-and-trust", title: "Bias Mitigation",
    desc: "Governed bias evaluation and remediation workflows for responsible enterprise AI",
    icon: "11", color: "#0E1F3E" },
  { id: "05", slug: "red-teaming-and-adversarial-evaluation", parent: "safety-risk-and-trust", title: "Red Teaming & Adversarial Evaluation",
    desc: "Governed adversarial testing for identifying, documenting, and reducing AI model vulnerabilities",
    icon: "20", color: "#0E1F3E" },
  { id: "06", slug: "ethical-and-responsible-data-collection", parent: "safety-risk-and-trust", title: "Ethical & Responsible Data Collection",
    desc: "Governed data collection frameworks for reducing privacy, compliance, representation, and dataset integrity risk",
    icon: "16", 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"
        }}>
          Six ways we safeguard.
        </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: "AI safety requires more than automated filtering or one-time review. Enterprise teams need structured human judgment to identify nuanced risks, ambiguous edge cases, cultural variation, policy interpretation challenges, and failure modes that automated systems miss."
  },
  {
    id: "Our approach",
    body: "Argos Data brings vetted reviewers, domain-aware specialists, and secure human-in-the-loop workflows to safety, risk, and trust programs. We define safety taxonomies, review criteria, calibration standards, and escalation rules before each program begins. Multilingual and regional reviewers evaluate model behavior across the languages, cultures, and use cases where AI systems actually operate — producing safety evidence that is consistent, auditable, and actionable."
  },
  {
    id: "Why it matters",
    body: "For enterprise AI programs, Argos Data connects safety review directly to model reliability, governance, and production readiness. Our approach helps teams reduce deployment risk, improve trust, and evaluate model behavior across the real-world languages, cultures, and use cases where AI systems operate."
  }
  ];

  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" }}>
          Safety, 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" }}>
        Safer, more reliable AI systems built on human-led evaluation and governance.
      </h2>
      <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
      fontWeight: 400, maxWidth: 1000, margin: 0, textWrap: "pretty" }}>
        Safety, Risk & Trust helps enterprise AI teams identify, measure, and reduce model risk before and after deployment. The result is safer model behavior, stronger governance, improved user trust, reduced compliance exposure, and more reliable AI systems prepared for production environments.

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

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