// ── 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/66.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"
      }}>Prompt Engineering and Optimization


      </h1>

        <p style={{
        margin: "32px 0 0", maxWidth: 640, fontSize: 17, lineHeight: 1.55,
        fontWeight: 400, color: "rgba(255,255,255,0.78)"
      }}>
          Prompt Engineering & Optimization helps enterprise AI teams design, test, evaluate, and refine prompts that guide model behavior across defined tasks, domains, languages, and user scenarios. Argos Data supports prompt programs that improve instruction clarity, response quality, task completion, safety alignment, and consistency across production AI applications.
        </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 }}>
        This category contains four related services that share a common operating model and differ in scope. All four are built on structured methodology, domain-aware reviewers, multilingual expertise, and quality-governed workflows: prompt criteria, evaluation rubrics, reviewer calibration, and QA checkpoints are defined before work begins. Programs are most often delivered through Argos Myriad — the Argos Data Platform — with SmartSuite providing the configurable prompt review environment; for clients who prefer to keep prompt work inside their own systems, Argos Data integrates accordingly. What distinguishes the four services is what they apply this operating model to: Prompt Design creates new prompts, Prompt Testing validates prompts across release cycles, Prompt Quality Assessment reviews prompts against defined standards, and Few-Shot Prompting builds and validates example-led prompts.
      </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 = [
    "Designing prompts for assistants, copilots, search, support automation, and generative AI products",
    "Testing prompt performance across tasks, user scenarios, languages, and domains",
    "Evaluating prompt quality, clarity, safety, relevance, and output consistency",
    "Creating few-shot examples and task templates for defined model behaviors",
    "Identifying prompt failures, ambiguity, hallucination risk, and inconsistent responses",
    "Supporting prompt iteration, model comparison, regression testing, and release readiness",
  ];

  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 Prompt Engineering and Optimization 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: "prompt-design", parent: "prompt-engineering", title: "Prompt Design",
    desc: "Governed prompt design workflows for production-ready AI behavior",
    icon: "stack",
    bg: "#0E1F3E", fg: "#EEE36B" },
  // navy + yellow
  { id: "02", slug: "prompt-testing", parent: "prompt-engineering", title: "Prompt Testing",
    desc: "Governed prompt validation workflows for release readiness, regression testing, and production AI optimization",
    icon: "arcs",
    bg: "#30AA74", fg: "#FFFFFF" },
  // green + white
  { id: "03", slug: "prompt-quality-assessment", parent: "prompt-engineering", title: "Prompt Quality Assessment",
    desc: "Structured prompt quality review to ensure clarity, consistency, safety, and production readiness",
    icon: "half-arcs",
    bg: "#EEE36B", fg: "#0E1F3E" },
  // yellow + navy
  { id: "04", slug: "few-shot-prompting", parent: "prompt-engineering", title: "Few-Shot Prompting",
    desc: "Guide model behavior with a small set of validated examples — without the cost of full training data",
    icon: "speech",
    bg: "#002042", fg: "#30AA74" },
  // navy-deep + green
  { id: "05", title: "Multimodal\nData Collection",
    desc: "Controlled multimodal data collection for secure, consistent, model-ready AI pipelines.",
    icon: "layers",
    bg: "#000000", fg: "#EEE36B" },
  // black + yellow
  { id: "06", title: "Synthetic\nData Generation",
    desc: "Human-validated synthetic datasets for edge cases, rare scenarios, and controlled model coverage.",
    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"
        }}>
          Four ways we prompt.
        </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: "prompt-design", parent: "prompt-engineering", title: "Prompt Design",
    desc: "Governed prompt design workflows for production-ready AI behavior",
    icon: "27", color: "#0E1F3E" },
  { id: "02", slug: "prompt-testing", parent: "prompt-engineering", title: "Prompt Testing",
    desc: "Governed prompt validation workflows for release readiness, regression testing, and production AI optimization",
    icon: "26", color: "#0E1F3E" },
  { id: "03", slug: "prompt-quality-assessment", parent: "prompt-engineering", title: "Prompt Quality Assessment",
    desc: "Structured prompt quality review to ensure clarity, consistency, safety, and production readiness",
    icon: "10", color: "#0E1F3E" },
  { id: "04", slug: "few-shot-prompting", parent: "prompt-engineering", title: "Few-Shot Prompting",
    desc: "Guide model behavior with a small set of validated examples — without the cost of full training data",
    icon: "04", 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"
        }}>
          Four ways we prompt.
        </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: "Prompt quality directly affects model performance, user experience, and operational reliability. Poorly structured prompts create inconsistent outputs, incomplete task execution, unsafe responses, and unnecessary downstream correction."
  },
  {
    id: "Our approach",
    body: "Argos Data turns prompt engineering into a disciplined human-in-the-loop workflow rather than informal trial and error. We define prompt criteria, evaluation rubrics, reviewer calibration, and QA checkpoints before each program begins. Multilingual and domain-aware reviewers support prompt work across the languages, tasks, and use cases where models will actually be deployed."
  },
  {
    id: "Why it matters",
    body: "For enterprise AI teams, this connects prompt engineering directly to production performance — supporting model behavior that is consistent, safe, and aligned to defined business outcomes."
  }
  ];

  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" }}>
          Prompts, treated as an engineered 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" }}>
        Clear, consistent, model-ready prompts that improve LLM accuracy and downstream performance.
      </h2>
      <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
      fontWeight: 400, maxWidth: 1000, margin: 0, textWrap: "pretty" }}>
        Prompt Engineering & Optimization helps enterprise AI teams improve model responsiveness, consistency, safety, and task performance through structured prompt design and evaluation. The result is clearer model behavior, stronger output quality, reduced prompt-related failures, and more reliable AI experiences in production.

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

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