// /company/about-us/ — Company > About Argos Data
// Content source: COMPANY.md §1 (About Argos Data) + §Final CTA.
// Visual system mirrors the homepage / sub-service pages. The
// section structure was confirmed with the manager before build.
// Photo assignments for this page (no overlaps with the other three
// company pages):
//   Hero      → 88rev.jpg  (institutional, identity, structured)
//   Photo split → 112.png  (collaboration / partnership)
//
// Note: 130.png and the Final CTA / tagline section were dropped at
// iteration request — only the Hero, Body, Stats, and Partnership
// sections remain on /about/.

// ── HERO ──────────────────────────────────────────────────────────
// H1 + subhead verbatim from COMPANY.md §1. The "intro" line below
// the subhead is the one-sentence framing approved for these split
// pages — present on /about/, /approach/, /global-workforce/, and
// /security-and-compliance/ so each route reads as a standalone page
// rather than a section without its parent narrative.
const AboutHero = () => (
  <CompanyHero
    route="about"
    h1="About Argos Data"
    subhead="A Global Human Data Operations Partner for Enterprise AI"
    intro="The trust anchor of the Argos Data story — who we are, how we work, and why enterprise AI teams partner with us to move from pilot to production with confidence."
    image="/assets/photography/approved/88rev.jpg"
  />
);

// ── BODY — three approved positioning paragraphs ──────────────────
// COMPANY.md §1 Body. The three paragraphs are kept verbatim and
// rendered in a single-column wide-measure block, matching the
// "WhyArgos" rhythm on the homepage. Drop cap on the first paragraph
// is the only typographic embellishment — adds warmth without
// inventing copy.
const AboutBody = () => {
  const paragraphs = [
    "Argos Data is the AI and data services division of Argos Multilingual, a global enterprise services company with more than 30 years of multilingual operational expertise. We help enterprise AI teams train, evaluate, and secure production AI systems through structured, human-in-the-loop data operations — built for quality, compliance, and scale.",
    "Our work spans data collection, annotation, model evaluation, RLHF, multimodal data programs, multilingual validation, and AI safety. We partner with clients across the full AI development lifecycle, from data strategy and collection through annotation, evaluation, deployment QA, and ongoing safety monitoring.",
    "What sets Argos Data apart is the combination of deep multilingual expertise, a vetted global expert network, and customizable workflow technology. We are built specifically for the operational realities of enterprise AI — high stakes, high quality, complex tasks, multiple languages, sensitive data, and the need to move from pilot to production with confidence.",
  ];

  return (
    <section data-screen-label="About 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>The page in one breath</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 64px",
          maxWidth: 1280, textWrap: "balance",
        }}>
          A global human data operations partner — built for the operational
          realities of enterprise AI.
        </h2>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
          columnGap: 96, rowGap: 32,
          alignItems: "start",
        }}>
          <p style={{
            fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
            fontWeight: 400, margin: 0,
            gridColumn: "1 / -1", maxWidth: 1080,
          }}>
            {paragraphs[0]}
          </p>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0,
          }}>
            {paragraphs[1]}
          </p>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0,
          }}>
            {paragraphs[2]}
          </p>
        </div>
      </div>
    </section>
  );
};

// ── STATS BAR — supporting proof points ───────────────────────────
// COMPANY.md §1 §Supporting Stats Bar. Values are MASTER FIGURES
// locked across homepage, Platform, and Company. The numeric part
// of each value animates with the shared CountUp on first scroll
// into view (same treatment as the homepage Proof Bar).
const AboutStats = () => {
  const stats = [
    { count: 30,  suffix: "+",  unit: "Years",          label: "Multilingual Operational Expertise" },
    { count: 150, suffix: "+",  unit: "Languages",      label: "Supported" },
    { count: 80,  suffix: "K+", unit: "Vetted Experts", label: "Globally" },
    { count: 36,  suffix: "",   unit: "Global Offices", label: "For 24/7 Follow-the-Sun Delivery" },
  ];
  return (
    <section data-screen-label="About stats" style={{
      fontFamily: "var(--font-display)",
      background: "#F2F2F0", color: "#0E1F3E",
      padding: "0 clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)",
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          borderTop: "1px solid #0E1F3E",
        }}>
          {stats.map((s, i) => (
            <div key={s.unit} style={{
              padding: "48px 32px 48px",
              paddingLeft: i === 0 ? 0 : 32,
              borderRight: i < stats.length - 1 ? "1px solid rgba(14,31,62,0.18)" : "none",
            }}>
              <div style={{
                fontSize: 40, fontWeight: 700, lineHeight: 1.05,
                letterSpacing: "-0.025em", margin: "0 0 16px",
                color: "#0E1F3E", textWrap: "balance",
                fontFeatureSettings: '"tnum"',
              }}>
                <CountUp to={s.count} suffix={s.suffix}/> {s.unit}
              </div>
              <div style={{
                fontSize: 14, lineHeight: 1.45, color: "#4D4D4D",
                fontWeight: 400, maxWidth: 240,
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── PHOTO SPLIT — partnership block ───────────────────────────────
// Two-column section pairing a "pull quote" derived from the
// approved "Always Say" sentence with a real-world photo of two
// teammates working together. The quote is taken verbatim from the
// COMPANY.md §Always Say block ("Argos Data is a global human data
// operations partner for enterprise AI.") so we don't invent copy.
const AboutPartnership = () => (
  <section data-screen-label="About partnership" 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" }}>
      <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/112.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundColor: "#0E1F3E",
        }}/>
        <div>
          <SectionLabel>How we work with clients</SectionLabel>
          <p style={{
            fontSize: 40, fontWeight: 700, lineHeight: 1.1,
            letterSpacing: "-0.025em", margin: "0 0 32px",
            textWrap: "balance",
          }}>
            Argos Data is a global human data operations partner for enterprise AI.
          </p>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
            fontWeight: 400, margin: 0, maxWidth: 520,
          }}>
            We combine 30+ years of multilingual expertise with vetted global
            talent and customizable workflow technology — supporting the full
            enterprise AI development lifecycle, from data strategy and
            collection through annotation, evaluation, deployment QA, and
            ongoing safety monitoring.
          </p>
        </div>
      </div>
    </div>
  </section>
);

// ── TAGLINE ───────────────────────────────────────────────────────
// Removed from the page composition at the manager's request — the
// "Smart Data. Brilliant AI." tagline moment is no longer rendered
// on /about/. The original COMPANY.md tagline still lives in §1
// §Tagline as canonical brand copy; it just isn't expressed as a
// dedicated visual section here.

// Compose into a single App. The .astro route mounts this directly,
// so per-page component bundles don't collide (each page only
// includes its own co-*.jsx).
//
// Per manager instruction, the About page does NOT include the
// shared Final CTA section or the standalone Tagline moment —
// removed at iteration request.
function AboutApp() {
  return (
    <div>
      <AboutHero />
      <AboutBody />
      <AboutStats />
      <AboutPartnership />
    </div>
  );
}

window.AboutApp = AboutApp;