// /company/global-workforce/ — Company > Global Workforce
// Content source: COMPANY.md §3 (Global Workforce) + §Final CTA.
// Photo assignments for this page (no overlap with other company pages):
//   Hero               → 126.png  (workforce, team production, scale)
//   How we vet         → 12.jpeg  (specialists / domain experts at work)
//   L0–L4 / linguists  → 106.jpeg (individual expert at work)
//   Follow-the-sun     → 85.png   (movement, real-world / global)

// ── HERO ──────────────────────────────────────────────────────────
const WorkforceHero = () => (
  <CompanyHero
    route="workforce"
    h1="Global Workforce"
    subhead="Vetted Experts. Built for Specialized AI Data Work."
    intro="The people behind the work. Linguists, annotators, STEM specialists, and domain experts — sourced, vetted, calibrated, and matched to the programs that need them."
    image="/assets/photography/approved/126.png"
  />
);

// ── BODY + STATS ──────────────────────────────────────────────────
// COMPANY.md §3 Body (verbatim) followed by the §Workforce Stats
// row. Stats are MASTER FIGURES and must stay aligned with the
// homepage / Platform numbers. Numeric values animate with CountUp
// on first scroll into view; the "L0–L4" tier marker is non-numeric
// and renders as plain text.
const WorkforceIntro = () => {
  const stats = [
    { count: 80,  suffix: "K+", label: "Vetted Global Experts" },
    { count: 25,  suffix: "K+", label: "Consistent Provisioned Workforce" },
    { count: 150, suffix: "+",  label: "Languages Supported" },
    { text: "L0–L4",            label: "Tiered Proficiency Model" },
  ];
  return (
    <section data-screen-label="Workforce body" 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" }}>
        <SectionLabel>Who delivers the work</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 48px",
          maxWidth: 1280, textWrap: "balance",
        }}>
          Vetted, calibrated, and matched to specialized AI data work.
        </h2>
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
          columnGap: 96, rowGap: 24,
        }}>
          <p style={{
            fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
            fontWeight: 400, margin: 0,
          }}>
            Our workforce is built through targeted recruitment, structured
            vetting, and performance-based qualification — designed to
            deliver consistent, defensible data quality for enterprise AI
            programs.
          </p>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0,
          }}>
            Our global expert network includes linguists, annotators, STEM
            specialists, technical writers, human raters, and domain subject
            matter experts across 150+ languages. Contributors are sourced
            through direct recruitment, vetted vendor partners, and
            specialist channels rather than open marketplaces.
          </p>
        </div>

        {/* Stats row, matching the Proof Bar pattern on the homepage. */}
        <div style={{
          marginTop: 96,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          borderTop: "1px solid #0E1F3E",
        }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{
              padding: "44px 32px 44px",
              paddingLeft: i === 0 ? 0 : 32,
              borderRight: i < stats.length - 1 ? "1px solid rgba(14,31,62,0.18)" : "none",
            }}>
              <div style={{
                fontSize: 72, fontWeight: 700, lineHeight: 1.0,
                letterSpacing: "-0.035em", margin: "0 0 12px",
                color: "#0E1F3E", fontFeatureSettings: '"tnum"',
              }}>
                {s.text ? s.text : <CountUp to={s.count} suffix={s.suffix}/>}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.45, color: "#4D4D4D",
                fontWeight: 400, maxWidth: 220 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── HOW WE VET — 4 verbatim blocks ────────────────────────────────
const WorkforceVetting = () => {
  const steps = [
    {
      title: "Targeted Sourcing",
      body: "Contributors are sourced through verified channels, in-region partnerships, and specialist recruitment pipelines. For rare or low-resource languages, we source in-region to preserve cultural and linguistic authenticity.",
    },
    {
      title: "Structured Screening",
      body: "Language proficiency tests, domain skill assessments, and credential verification happen before contributors enter the pool. For higher-sensitivity programs, additional background checks and signed confidentiality agreements are required.",
    },
    {
      title: "Calibration and Pilot Validation",
      body: "Contributors complete project-specific calibration tasks and pilot phases before production work begins. Only those meeting accuracy thresholds and rubric alignment standards are activated for live programs.",
    },
    {
      title: "Performance-Based Access",
      body: "Quality scoring and inter-annotator agreement are continuously tracked and access validated through quality metrics.",
    },
  ];
  return (
    <section data-screen-label="How we vet" 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 vet</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px",
          maxWidth: 1100, textWrap: "balance",
        }}>
          Targeted. Structured. Calibrated. Performance-based.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55, color: "#1A1A1A",
          fontWeight: 400, margin: "0 0 72px", maxWidth: 760,
        }}>
          Contributors don't enter production until they've cleared every
          stage — sourcing, screening, calibration, and continuous quality
          tracking.
        </p>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
          gap: 80,
          alignItems: "start",
        }}>
          {/* Sticky photo alongside the long list of vetting steps. */}
          <div style={{ position: "sticky", top: 96 }}>
            <div style={{
              width: "100%", aspectRatio: "4 / 5",
              borderRadius: 28, overflow: "hidden",
              backgroundImage: "url('/assets/photography/approved/12.jpeg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundColor: "#0E1F3E",
            }}/>
            <div style={{
              marginTop: 20,
              fontSize: 13, fontWeight: 500, color: "#666",
              letterSpacing: "0.02em",
              maxWidth: 360,
            }}>
              Specialist talent reviewed against project-specific qualification
              thresholds — sourced through verified channels, not open
              marketplaces.
            </div>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "60px 1fr",
            columnGap: 32,
            borderTop: "1px solid rgba(14,31,62,0.30)",
          }}>
            {steps.map((s, i) => (
              <React.Fragment key={s.title}>
                <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",
                }}>{String(i + 1).padStart(2, "0")}</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: 16, textWrap: "balance",
                  }}>{s.title}</div>
                  <p style={{
                    fontSize: 15, lineHeight: 1.6, color: "#1A1A1A",
                    fontWeight: 400, margin: 0, maxWidth: 720,
                  }}>{s.body}</p>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── L0–L4 PROFICIENCY MODEL ───────────────────────────────────────
// COMPANY.md §3 §L0–L4 Proficiency Model. The five tiers and their
// descriptions are verbatim — these tiers are part of the credibility
// narrative on this page and must not be paraphrased.
const WorkforceTiers = () => {
  const tiers = [
    { id: "L0", name: "Elementary Proficiency",      body: "Basic annotation and large-scale data labeling." },
    { id: "L1", name: "Working Proficiency",          body: "Moderate-complexity tasks with higher accuracy needs." },
    { id: "L2", name: "Professional Proficiency",     body: "Native-level understanding and contextual labeling." },
    { id: "L3", name: "Linguist or Subject Matter Expert", body: "Complex annotation requiring domain-specific knowledge." },
    { id: "L4", name: "Expert Proficiency, STEM",     body: "High-stakes projects requiring expert consulting and quality control." },
  ];
  return (
    <section data-screen-label="L0-L4 model" data-nav-tone="dark" className="full-bleed" style={{
      fontFamily: "var(--font-display)",
      background: "#0E1F3E", color: "#FFFFFF",
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)",
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <SectionLabel onDark>L0–L4 Proficiency Model</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px",
          maxWidth: 1100, textWrap: "balance", color: "#FFFFFF",
        }}>
          Matched to the right level of expertise.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.72)",
          fontWeight: 400, margin: "0 0 80px", maxWidth: 760,
        }}>
          Contributors are classified by proficiency and experience level so
          client programs are matched to the right level of expertise.
        </p>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)",
          gap: 80,
          alignItems: "start",
        }}>
          {/* Tier ladder */}
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.18)" }}>
            {tiers.map((t) => (
              <div key={t.id} style={{
                display: "grid",
                gridTemplateColumns: "120px 1fr",
                columnGap: 32, alignItems: "baseline",
                padding: "32px 0",
                borderBottom: "1px solid rgba(255,255,255,0.18)",
              }}>
                <div style={{
                  fontSize: 56, fontWeight: 700, lineHeight: 1.0,
                  letterSpacing: "-0.035em", color: "#EEE36B",
                  fontFeatureSettings: '"tnum"',
                }}>{t.id}</div>
                <div>
                  <div style={{
                    fontSize: 22, fontWeight: 700, lineHeight: 1.2,
                    letterSpacing: "-0.015em", color: "#FFFFFF",
                    marginBottom: 8, textWrap: "balance",
                  }}>{t.name}</div>
                  <p style={{
                    fontSize: 15, lineHeight: 1.55,
                    color: "rgba(255,255,255,0.72)", fontWeight: 400,
                    margin: 0,
                  }}>{t.body}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Companion photo — one of the focused individual-expert
              shots, reinforcing the L3 / L4 tier descriptions. */}
          <div style={{ position: "sticky", top: 96 }}>
            <div style={{
              width: "100%", aspectRatio: "4 / 5",
              borderRadius: 28, overflow: "hidden",
              backgroundImage: "url('/assets/photography/approved/106.jpeg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundColor: "#020A09",
            }}/>
            <div style={{
              marginTop: 20,
              fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.65)",
              letterSpacing: "0.02em",
              maxWidth: 360,
            }}>
              Linguists, domain specialists, and STEM experts — matched to
              programs by tier, not by availability.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── FOLLOW-THE-SUN + SPECIALIZED TALENT SOURCING ──────────────────
// Two short COMPANY.md §3 blocks paired in a single section. The
// Follow-the-Sun copy gets a photo with motion (real-world / global
// movement). Specialized Talent Sourcing is the text-only callout.
const WorkforceDelivery = () => (
  <section data-screen-label="Follow-the-sun" 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, 1.05fr) minmax(0, 1fr)",
        gap: 64,
        alignItems: "center",
      }}>
        <div style={{
          width: "100%", aspectRatio: "5 / 4",
          borderRadius: 28, overflow: "hidden",
          backgroundImage: "url('/assets/photography/approved/85.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundColor: "#0E1F3E",
        }}/>
        <div>
          <SectionLabel>Follow-the-sun delivery</SectionLabel>
          <h2 style={{
            fontSize: 48, fontWeight: 700, lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: "0 0 24px",
            textWrap: "balance",
          }}>
            36 offices. Continuous handoffs. Time-sensitive AI data work
            that runs around the clock.
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0, maxWidth: 560,
          }}>
            With 36 global office locations, Argos Data operates a
            follow-the-sun delivery model. Programs can run continuously
            across time zones, with handoffs between regions for sustained
            throughput on time-sensitive AI data work.
          </p>
        </div>
      </div>

      {/* Specialized Talent Sourcing — text-only callout below the
          photo split. Verbatim from COMPANY.md. */}
      <div style={{
        marginTop: 96,
        padding: "48px 48px",
        borderRadius: 28,
        background: "#FFFFFF",
        border: "1px solid rgba(14,31,62,0.18)",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
        gap: 48,
        alignItems: "start",
      }}>
        <div>
          <SectionLabel>Specialized talent sourcing</SectionLabel>
          <div style={{
            fontSize: 56, fontWeight: 700, lineHeight: 1.0,
            letterSpacing: "-0.035em", color: "#0E1F3E",
            marginTop: 12,
          }}>
            5–10 days
          </div>
          <div style={{
            fontSize: 14, fontWeight: 500, color: "#4D4D4D",
            marginTop: 12, maxWidth: 320,
          }}>
            Typical initial cohort for major markets.
          </div>
        </div>
        <p style={{
          fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
          fontWeight: 400, margin: 0, maxWidth: 720,
        }}>
          For programs requiring rare profiles — PhD-level writers,
          domain-specialist clinicians, low-resource language reviewers —
          Argos Data can deliver a vetted initial cohort within 5–10
          business days for most major markets. Low-resource language and
          highly niche profiles may take longer, depending on verification
          requirements and volume.
        </p>
      </div>
    </div>
  </section>
);

function WorkforceApp() {
  return (
    <div>
      <WorkforceHero />
      <WorkforceIntro />
      <WorkforceVetting />
      <WorkforceTiers />
      <WorkforceDelivery />
    </div>
  );
}

window.WorkforceApp = WorkforceApp;