// /company/our-approach/ — Company > Our Approach
// Content source: COMPANY.md §2 (Our Approach) + §Final CTA.
// Photo assignments for this page (no overlap with other company pages):
//   Hero          → 7.jpeg   (scope huddle, document review)
//   "How we work" → 68.jpeg  (calibration / pair review)
//   QA review     → 13.jpeg  (embedded QA, multi-monitor review)
//   Pillars       → 131.png  (continuous focus, quality)

// ── HERO ──────────────────────────────────────────────────────────
const ApproachHero = () => (
  <CompanyHero
    route="approach"
    h1="Our Approach"
    subhead="Structured Workflows. Vetted Expertise. Quality Governance."
    intro="Enterprise AI data work is rarely simple. Our approach turns ambiguous objectives into structured, repeatable, quality-governed workflows — refined, vetted, embedded, and continuously improved."
    image="/assets/photography/approved/7.jpeg"
  />
);

// ── BODY ──────────────────────────────────────────────────────────
// COMPANY.md §2 Body — verbatim. Wide-measure single-column block.
const ApproachBody = () => (
  <section data-screen-label="Approach body" style={{
    fontFamily: "var(--font-display)",
    background: "#F2F2F0", color: "#0E1F3E",
    padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px) clamp(48px, 8vw, 96px)",
  }}>
    <div style={{ maxWidth: 1600, margin: "0 auto" }}>
      <SectionLabel>How we operationalize complexity</SectionLabel>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.05,
        letterSpacing: "-0.025em", margin: "0 0 48px",
        maxWidth: 1280, textWrap: "balance",
      }}>
        Argos Data turns ambiguous AI data needs into structured,
        repeatable, quality-governed workflows.
      </h2>
      <p style={{
        fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
        fontWeight: 400, margin: 0, maxWidth: 1080,
      }}>
        Enterprise AI data work is rarely simple. Programs involve ambiguous
        objectives, evolving guidelines, complex task types, multiple
        languages, and quality requirements that change as models mature.
        Argos Data is built to operationalize that complexity — turning
        ambiguous AI data needs into structured, repeatable, quality-governed
        workflows.
      </p>
      <p style={{
        fontSize: 17, lineHeight: 1.65, color: "#4D4D4D",
        fontWeight: 400, margin: "32px 0 0", maxWidth: 760,
      }}>
        Our approach is grounded in 4 operational disciplines, supported by
        4 dedicated team functions.
      </p>
    </div>
  </section>
);

// ── HOW WE WORK — 4 numbered operational disciplines ──────────────
// COMPANY.md §2 §How We Work. The four headings (1. Scope Refinement
// and Workflow Design, etc.) and their bodies are verbatim. A
// calibration-style photograph sits to the side at the breakpoint
// where it fits, reinforcing the "process, work-in-progress" feel
// the manager asked for on this page.
const ApproachHowWeWork = () => {
  const disciplines = [
    {
      n: "01",
      title: "Scope Refinement and Workflow Design",
      team: "Solutions Architects",
      body: "Solutions Architects work directly with client AI and ML teams to translate ambiguous objectives into structured guidelines, grading rubrics, error taxonomies, and scalable operating models. Before any production work begins, we align on the model objective, data requirements, reviewer qualifications, QA standards, and delivery expectations.",
    },
    {
      n: "02",
      title: "Reviewer Sourcing, Vetting, and Calibration",
      team: "Supply Chain and Workforce Operations",
      body: "Supply Chain and Workforce Operations teams source, screen, and onboard contributors against project-specific qualification thresholds. Calibration rounds, inter-annotator agreement reviews, and pilot validation happen before contributors enter production.",
    },
    {
      n: "03",
      title: "Production Delivery and Embedded QA",
      team: "Quality Analysts and Quality Leads",
      body: "Dedicated Quality Analysts and Quality Leads run layered review, dispute resolution, error taxonomy maintenance, and root cause analysis throughout production. Quality controls are embedded in the workflow, not bolted on at the end.",
    },
    {
      n: "04",
      title: "Continuous Improvement and Tooling",
      team: "Engineering and Tooling",
      body: "Engineering and Tooling teams configure and extend SmartSuite within the Argos Myriad platform, implement workflow automation, and integrate API-ready connections to client environments. As programs evolve, workflows adapt.",
    },
  ];

  return (
    <section data-screen-label="How we work" style={{
      fontFamily: "var(--font-display)",
      background: "#FFFFFF", color: "#0E1F3E",
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)",
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <SectionLabel>How we work</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px",
          maxWidth: 1100, textWrap: "balance",
        }}>
          Four operational disciplines. Four dedicated team functions.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55, color: "#4D4D4D",
          fontWeight: 400, margin: "0 0 72px", maxWidth: 760,
        }}>
          Every program runs through the same four-stage operating model.
          Each stage is owned by a dedicated team — so structure, expertise,
          and accountability stay in place from kickoff through production.
        </p>

        {/* Two-column layout: 4 numbered discipline blocks on the left,
            a sticky calibration photo on the right. At narrower widths
            the photo wraps below. */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)",
          gap: 80,
          alignItems: "start",
        }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "60px 1fr",
            columnGap: 32,
            rowGap: 0,
            borderTop: "1px solid rgba(14,31,62,0.30)",
          }}>
            {disciplines.map((d) => (
              <React.Fragment key={d.n}>
                <div style={{
                  padding: "36px 0",
                  borderBottom: "1px solid rgba(14,31,62,0.18)",
                  fontSize: 16, fontWeight: 500, color: "#0E1F3E",
                  opacity: 0.55,
                  fontFeatureSettings: '"tnum"', letterSpacing: "0.02em",
                }}>{d.n}</div>
                <div style={{
                  padding: "36px 0",
                  borderBottom: "1px solid rgba(14,31,62,0.18)",
                }}>
                  <div style={{
                    fontSize: 26, fontWeight: 700, lineHeight: 1.2,
                    letterSpacing: "-0.015em", color: "#0E1F3E",
                    marginBottom: 12, textWrap: "balance",
                  }}>{d.title}</div>
                  <div style={{
                    fontSize: 12, fontWeight: 500,
                    color: "#30AA74",
                    letterSpacing: "0.10em", textTransform: "uppercase",
                    marginBottom: 16,
                  }}>Team · {d.team}</div>
                  <p style={{
                    fontSize: 15, lineHeight: 1.6, color: "#1A1A1A",
                    fontWeight: 400, margin: 0,
                  }}>{d.body}</p>
                </div>
              </React.Fragment>
            ))}
          </div>

          {/* Calibration / pair-review photo — sits with the disciplines.
              position: sticky lets it ride alongside the long list on
              wide screens; harmlessly inert at narrow widths. */}
          <div style={{ position: "sticky", top: 96 }}>
            <div style={{
              width: "100%", aspectRatio: "4 / 5",
              borderRadius: 28, overflow: "hidden",
              backgroundImage: "url('/assets/photography/approved/68.jpeg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundColor: "#0E1F3E",
            }}/>
            <div style={{
              marginTop: 20,
              fontSize: 13, fontWeight: 500, color: "#666",
              letterSpacing: "0.02em",
              maxWidth: 360,
            }}>
              Calibration rounds, inter-annotator agreement reviews, and pilot
              validation happen before contributors enter production.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── EMBEDDED QA — photo split reinforcing discipline 3 ────────────
// A second photo moment, anchored to the embedded-QA discipline.
// Reinforces "Quality controls are embedded in the workflow, not
// bolted on at the end" with a real photograph of monitoring /
// review work.
const ApproachQAPanel = () => (
  <section data-screen-label="Embedded QA" style={{
    fontFamily: "var(--font-display)",
    background: "#F2F2F0", color: "#0E1F3E",
    padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)",
  }}>
    <div style={{ maxWidth: 1600, margin: "0 auto" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)",
        gap: 64,
        alignItems: "center",
      }}>
        <div>
          <SectionLabel>Embedded, not bolted on</SectionLabel>
          <h2 style={{
            fontSize: 48, fontWeight: 700, lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: "0 0 32px",
            textWrap: "balance",
          }}>
            Quality controls run inside the workflow — through layered
            review, dispute resolution, error taxonomies, and root cause
            analysis.
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0, maxWidth: 520,
          }}>
            Dedicated Quality Analysts and Quality Leads run the QA loop in
            production — not at the end of it. Issues are surfaced, owned,
            and resolved without breaking flow, and every decision feeds the
            error taxonomy so the next iteration starts ahead of the last.
          </p>
        </div>
        <div style={{
          width: "100%", aspectRatio: "5 / 4",
          borderRadius: 28, overflow: "hidden",
          backgroundImage: "url('/assets/photography/approved/13.jpeg')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundColor: "#0E1F3E",
        }}/>
      </div>
    </div>
  </section>
);

// ── 4 PILLARS — Trust / Expertise / Quality / Agility ─────────────
// COMPANY.md §2 §Our 4 Pillars. Four-card layout, body copy verbatim.
// Sits on a soft cream/yellow radial wash like the homepage Solutions
// and Blog sections — pulls the warm note from photography palette
// into the page chrome.
const ApproachPillars = () => {
  const pillars = [
    {
      name: "Trust",
      body: "Enterprise-grade security, ISO-aligned compliance, role-based access, audit trails, bias-aware review, and PII handling — designed to de-risk AI deployments and meet the standards of enterprise governance, security, and procurement teams.",
    },
    {
      name: "Expertise",
      body: "30+ years of multilingual operational experience combined with deep domain knowledge across STEM, healthcare, finance, legal, retail, technology, and other regulated verticals.",
    },
    {
      name: "Quality",
      body: "Human-in-the-loop processes built around scope refinement, guideline stabilization, rubric calibration, inter-annotator agreement, error taxonomies, and structured QA — designed to improve model outcomes, not just deliver volume.",
    },
    {
      name: "Agility",
      body: "End-to-end AI data lifecycle support, with the customizable tooling and workforce flexibility to adapt fast as program needs evolve. SmartSuite tools can be configured or built from scratch in as little as 1-2 weeks.",
    },
  ];

  return (
    <section data-screen-label="Pillars" style={{
      position: "relative",
      fontFamily: "var(--font-display)",
      background: "#FFFFFF", color: "#0E1F3E",
      padding: "clamp(60px, 10vw, 120px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)",
      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" }}>
        <SectionLabel>Our 4 pillars</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px",
          maxWidth: 1100, textWrap: "balance",
        }}>
          Trust. Expertise. Quality. Agility.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55, color: "#1A1A1A",
          fontWeight: 400, margin: "0 0 80px", maxWidth: 720,
        }}>
          Four pillars that hold the work together — the standards every
          program is built against.
        </p>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 20,
        }}>
          {pillars.map((p, i) => (
            <div key={p.name} style={{
              border: "1px solid rgba(14,31,62,0.45)", borderRadius: 28,
              padding: "36px 28px 32px", background: "rgba(255,255,255,0.55)",
              display: "flex", flexDirection: "column",
              minHeight: 380, gap: 18,
            }}>
              <div style={{
                fontSize: 12, fontWeight: 500, color: "#0E1F3E",
                letterSpacing: "0.10em", textTransform: "uppercase",
                opacity: 0.55,
                fontFeatureSettings: '"tnum"',
              }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{
                fontSize: 36, fontWeight: 700, lineHeight: 1.0,
                letterSpacing: "-0.02em", color: "#0E1F3E",
              }}>{p.name}</div>
              <p style={{
                fontSize: 14, lineHeight: 1.6, color: "#1A1A1A",
                fontWeight: 400, margin: 0,
              }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

function ApproachApp() {
  return (
    <div>
      <ApproachHero />
      <ApproachBody />
      <ApproachHowWeWork />
      <ApproachQAPanel />
      <ApproachPillars />
    </div>
  );
}

window.ApproachApp = ApproachApp;