// Homepage v2 — sections aligned to HOMEPAGE.md (May 2026).
// Order: HeroV1 → WhyArgos → ProofBar → AILifecycle → SolutionsV1
//      → PlatformV1 → CaseStudies → BlogV1
// Master proof figures, voice, and brand architecture (Myriad parent /
// SmartSuite as the customizable tooling environment inside it) are
// locked per HOMEPAGE.md / PLATFORM_NEW.md / CONTENT-GUIDELINES.md.
// Components are exposed on window at the bottom of the file so the
// page (src/pages/index.astro) can mount them.

// ── HERO ───────────────────────────────────────────────────────────
const HeroV1 = ({ 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/imagery/Argos-Data-Services-Build-Smarter-AI-with-Expert-Led-Data-Operations.jpg)",
      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>
        <h1 style={{
          fontSize: 84, fontWeight: 700, lineHeight: 1.02,
          letterSpacing: "-0.035em", margin: 0, maxWidth: 1200,
          textWrap: "balance", color: "#FFFFFF",
        }}>
          Build Smarter AI with<br />Expert-Led Data Operations
        </h1>
        <p style={{
          margin: "32px 0 0", maxWidth: 620, fontSize: 17, lineHeight: 1.55,
          fontWeight: 400, color: "rgba(255,255,255,0.78)",
        }}>
Launch and scale multilingual AI you can trust — with domain-specialist human intelligence, rigorous quality governance, and customizable tooling built for global enterprise scale.
        </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",
        }}>Let's talk</button>
      </div>
    </div>
  </section>
);

// ── WHY ARGOS — cream panel, positioning paragraph ─────────────────
// HOMEPAGE.md §2. Single-column intro establishing Argos Data as a
// human data operations partner for enterprise AI. Body is the
// approved positioning paragraph — do not paraphrase.
// Reduced bottom padding so this reads as one block with ProofBar.
const WhyArgos = () => (
  <section data-screen-label="Why Argos" style={{
    fontFamily: "var(--font-display)",
    background: "#FFFFFF", color: "#0E1F3E",
    overflow: "hidden",
  }}>
    <div style={{
      background: "#F2F2F0", color: "#0E1F3E",
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px) clamp(40px, 5vw, 64px)",
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
          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 48px",
          maxWidth: 1280, textWrap: "balance" }}>
          Built for the demands of enterprise AI.
        </h2>
        <p style={{ fontSize: 22, lineHeight: 1.5, color: "#1A1A1A",
          fontWeight: 400, margin: 0, maxWidth: 1080 }}>
Argos Data is a global human data operations partner helping enterprise AI teams train, evaluate, and secure production AI systems. We combine vetted subject matter experts, rigorous quality governance, and customizable proprietary tooling to operationalize complex AI programs at scale — from SFT and RLHF to multimodal annotation, evaluation, and safety testing across 150+ languages. We work as an extension of your AI team, turning ambiguous objectives into stable, production-ready data operations. The result is AI that performs reliably in the markets where it matters.
        </p>
      </div>
    </div>
  </section>
);

// ── PROOF BAR — 4 master figures + ISO trust signal row ────────────
// HOMEPAGE.md §3. Stats render as H2 headers in a horizontal row.
// Master figures are LOCKED: 30+ years, 150+ languages, 80K+ vetted
// experts, 36 global offices. Do not edit without confirming master
// figures with Marketing.

// CountUp — animates 0→target when the element first scrolls into
// view, then stops. Cubic ease-out, 1600ms by default. Supports an
// optional prefix (e.g. "+") and suffix (e.g. "%", "K", "K+"), plus
// a decimal place count for non-integer targets like 99.75.
// Respects prefers-reduced-motion (shows final value, no animation).
const CountUp = ({ to, prefix = "", suffix = "", decimals = 0, duration = 1600 }) => {
  const [value, setValue] = React.useState(0);
  const ref = React.useRef(null);
  const startedRef = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof window !== "undefined" &&
        window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setValue(to);
      startedRef.current = true;
      return;
    }
    const run = () => {
      if (startedRef.current) return;
      startedRef.current = true;
      const start = performance.now();
      const factor = Math.pow(10, decimals);
      const ease = (t) => 1 - Math.pow(1 - t, 3);
      const tick = (now) => {
        const t = Math.min((now - start) / duration, 1);
        setValue(Math.round(to * factor * ease(t)) / factor);
        if (t < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    if (typeof IntersectionObserver === "undefined") { run(); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { run(); obs.disconnect(); }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [to, duration, decimals]);

  return <span ref={ref}>{prefix}{value.toFixed(decimals)}{suffix}</span>;
};

const ProofBar = () => {
  const stats = [
    { target: 30,  suffix: "+",  label: "Years",          sub: "Multilingual Expertise" },
    { target: 150, suffix: "+",  label: "Languages",      sub: "Delivered Across Enterprise AI Programs" },
    { target: 80,  suffix: "K+", label: "Vetted Experts", sub: "Linguists, Annotators, and Domain Specialists" },
    { target: 36,  suffix: "",   label: "Global Locations", sub: "24/7 Follow-the-Sun Delivery" },
  ];
  const certs = ["ISO 9001", "ISO 13485", "ISO 17100", "ISO 27001", "ISO 18587"];
  return (
    <section data-screen-label="Proof bar" style={{
      padding: "24px clamp(20px, 6vw, 96px) clamp(48px, 8vw, 100px)", fontFamily: "var(--font-display)",
      background: "#F2F2F0", color: "#0E1F3E",
    }}>
      <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.label} style={{
              padding: "36px 32px 36px",
              paddingLeft: i === 0 ? 0 : 32,
              borderRight: i < stats.length - 1 ? "1px solid rgba(14,31,62,0.18)" : "none",
            }}>
              <div style={{ display: "flex", alignItems: "baseline", flexWrap: "wrap",
                columnGap: 16, rowGap: 4, margin: "0 0 8px" }}>
                <h2 style={{
                  fontSize: 72, fontWeight: 700, lineHeight: 1.0,
                  letterSpacing: "-0.035em", margin: 0,
                  color: "#0E1F3E", fontFeatureSettings: '"tnum"',
                }}>
                  <CountUp to={s.target} suffix={s.suffix}/>
                </h2>
                <div style={{ fontSize: 18, fontWeight: 600, color: "#0E1F3E",
                  letterSpacing: "-0.01em" }}>{s.label}</div>
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.45, color: "#4D4D4D",
                fontWeight: 400, maxWidth: 240 }}>{s.sub}</div>
            </div>
          ))}
        </div>
        {/* Trust signal row — labelled badges. Replace with official
            ISO badge artwork when supplied by Marketing. */}
        <div style={{
          marginTop: 72, paddingTop: 40,
          borderTop: "1px solid rgba(14,31,62,0.18)",
          display: "flex", flexWrap: "wrap",
          alignItems: "center", gap: 32,
        }}>
          <div style={{
            fontSize: 13, fontWeight: 500, color: "#666",
            letterSpacing: "0.10em", textTransform: "uppercase",
            marginRight: 16,
          }}>Compliance and certifications</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            {certs.map((c) => (
              <div key={c} style={{
                padding: "12px 22px",
                border: "1px solid #0E1F3E",
                borderRadius: 37,
                fontSize: 14, fontWeight: 600,
                letterSpacing: "-0.005em",
                color: "#0E1F3E", background: "#FFFFFF",
                fontFeatureSettings: '"tnum"',
              }}>{c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── AI LIFECYCLE — stage flow across the enterprise AI lifecycle ───
// HOMEPAGE.md §4. Intro paragraph above a horizontal flow of the
// stages Argos Data supports. The marketing-supplied AI Lifecycle
// Graphic (AI Lifecycle Graphic.pptx) is the long-term swap target;
// this typographic stage row is the production placeholder that
// matches the brand visual system.
const AILifecycle = () => {
  const stages = [
    { id: "01", title: "Strategy & Design", desc: "Scope refinement, workflow design, and rubric stabilization with AI and ML teams." },
    { id: "02", title: "Data Collection",   desc: "Human-centric collection across languages, modalities, and real-world scenarios." },
    { id: "03", title: "Data Annotation",   desc: "Human-in-the-loop labeling for text, image, audio, video, and multimodal data." },
    { id: "04", title: "Training",          desc: "Curated SFT, RLHF, and DPO data programs that align models to your objectives." },
    { id: "05", title: "Evaluation",        desc: "Structured evaluation, benchmarking, and inter-annotator agreement scoring." },
    { id: "06", title: "Deployment QA",     desc: "Multilingual validation, RAG content review, and release-readiness checks." },
    { id: "07", title: "Monitoring",        desc: "Continuous safety, bias, and quality review for production AI systems." },
  ];

  // The connector line for each row spans the full grid width regardless of
  // how many stages happen to be in that row. We measure each row's top by
  // sampling each item's offsetTop and draw a single absolute line per row at
  // top+7 (matching the dot's vertical centre). Re-measures on resize +
  // after fonts settle so the lines track the dots exactly.
  const gridRef = React.useRef(null);
  const [rowTops, setRowTops] = React.useState([]);
  React.useEffect(() => {
    function measure() {
      const grid = gridRef.current;
      if (!grid) return;
      const items = grid.querySelectorAll('[data-stage]');
      const tops = new Set();
      items.forEach((el) => tops.add(el.offsetTop));
      setRowTops([...tops].sort((a, b) => a - b));
    }
    measure();
    window.addEventListener('resize', measure);
    if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
      document.fonts.ready.then(measure);
    }
    return () => window.removeEventListener('resize', measure);
  }, []);
  return (
    <section data-screen-label="AI Lifecycle" data-nav-tone="dark" style={{
      padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px)",
      fontFamily: "var(--font-display)",
      background: "#0E1F3E", color: "#FFFFFF",
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ fontSize: 13, fontWeight: 500,
          color: "rgba(255,255,255,0.65)",
          letterSpacing: "0.10em", textTransform: "uppercase",
          marginBottom: 24 }}>
          AI Lifecycle
        </div>
        <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 32px",
          maxWidth: 1100, textWrap: "balance", color: "#FFFFFF" }}>
          Support at every stage of the enterprise AI lifecycle.
        </h2>
        <p style={{ fontSize: 20, lineHeight: 1.5,
          color: "rgba(255,255,255,0.78)", fontWeight: 400,
          margin: "0 0 80px", maxWidth: 920 }}>
          From data strategy to continuous monitoring, Argos Data supports every
          stage of the enterprise AI development lifecycle — combining
          human-in-the-loop expertise with quality-governed workflows at each step.
        </p>

        {/* Horizontal flow — stages divided by hairlines, with a
            through-line above the numbers as a visual connector.
            One full-width line per row, JS-measured against the dots so
            the line always reaches the section edges no matter how the
            stages wrap. */}
        <div style={{ position: "relative" }}>
          {rowTops.map((y, k) => (
            <div key={k} aria-hidden="true" style={{
              position: "absolute",
              top: y + 7, left: 0, right: 0, height: 1,
              background: "rgba(255,255,255,0.20)",
              pointerEvents: "none",
            }} />
          ))}
          <div ref={gridRef} style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            columnGap: 0,
            rowGap: 72,
          }}>
            {stages.map((s, i) => (
              <div key={s.id} data-stage style={{
                position: "relative",
                padding: "0 24px 0 0",
                paddingLeft: i === 0 ? 0 : 24,
              }}>
                <div aria-hidden="true" style={{
                  width: 15, height: 15, borderRadius: "50%",
                  background: i === 0 ? "#30AA74" : "#0E1F3E",
                  border: "1px solid rgba(255,255,255,0.45)",
                  boxShadow: i === 0 ? "0 0 0 4px rgba(48,170,116,0.20)" : "none",
                  position: "relative", marginBottom: 28,
                }}/>
                <div style={{
                  fontSize: 13, fontWeight: 500,
                  color: "rgba(255,255,255,0.55)",
                  letterSpacing: "0.01em", marginBottom: 12,
                  fontFeatureSettings: '"tnum"',
                }}>{s.id}</div>
                <div style={{
                  fontSize: 20, fontWeight: 700, lineHeight: 1.15,
                  letterSpacing: "-0.015em", color: "#FFFFFF",
                  marginBottom: 12, textWrap: "balance",
                }}>{s.title}</div>
                <p style={{
                  fontSize: 13, lineHeight: 1.5,
                  color: "rgba(255,255,255,0.70)", fontWeight: 400,
                  margin: 0, maxWidth: 220,
                }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── SOLUTIONS — 8 image cards on a soft cream/yellow glow ─────────
const SolutionsV1 = () => {
  // Allow other pages to deep-link with /#solutions and have us scroll into
  // view once the React tree has mounted (browser's native hash-scroll runs
  // before the JSX renders, so we re-do the scroll here).
  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    if (window.location.hash !== '#solutions') return;
    const el = document.getElementById('solutions');
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }, []);

  const solutions = [
    { id: "01", title: "AI Data\nCollection",
      desc: "Human-centric data collection that reflects real-world scenarios, behaviors, and model requirements.",
      img: "/assets/photography/approved/106.jpeg", href: "/ai-data-collection/" },
    { id: "02", title: "LLM Training\nData Services",
      desc: "Human-reviewed training data programs for improving LLM accuracy, alignment, reasoning, and domain performance.",
      img: "/assets/photography/approved/130.png", href: "/llm-training-data/" },
    { id: "03", title: "Data Annotation\n& Human Feedback",
      desc: "Human-in-the-loop data labeling and feedback workflows that improve model accuracy, alignment, and reliability.",
      img: "/assets/photography/approved/7.jpeg", href: "/data-annotation/" },
    { id: "04", title: "Prompt Engineering\n& Optimization",
      desc: "Structured prompt workflows for improving model behavior, task performance, and output consistency.",
      img: "/assets/photography/approved/66.jpeg", href: "/prompt-engineering/" },
    { id: "05", title: "Model Evaluation\n& Benchmarking",
      desc: "Enterprise-grade model evaluation for measuring AI quality, reliability, safety, and release readiness.",
      img: "/assets/photography/approved/13.jpeg", href: "/model-evaluation/" },
    { id: "06", title: "Multilingual AI\n& Internationalization",
      desc: "Language, locale, and culture-aware AI data services for global model performance.",
      img: "/assets/photography/approved/88rev.jpg", href: "/multilingual-ai/" },
    { id: "07", title: "Safety, Risk\n& Trust",
      desc: "Human-led evaluation and governance workflows for safer, more reliable AI systems.",
      img: "/assets/photography/approved/85.png", href: "/safety-risk-and-trust/" },
    { id: "08", title: "Quality\n& Governance",
      desc: "Enterprise quality frameworks for consistent, auditable, and production-ready AI data operations.",
      img: "/assets/photography/approved/107.jpeg", href: "/quality-and-governance/" },
  ];
  return (
    <section id="solutions" data-screen-label="Solutions" 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 }}>
          Solutions
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.0,
          letterSpacing: "-0.03em", margin: "0 0 80px", maxWidth: 1000,
        }}>Human-in-the-loop services across the enterprise AI program.</h2>
        <div style={{
          display: "grid",
          // Cards hold a minimum width and reflow instead of shrinking:
          // 4-up at design width, then 3-up, then 2-up, only collapsing
          // to 1-up on the very narrowest screens.
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: 28,
        }}>
          {solutions.map((s) => (
            <div key={s.id} style={{
              border: "1px solid rgba(14,31,62,0.45)", borderRadius: 28,
              padding: "32px 28px 28px", background: "transparent",
              display: "flex", flexDirection: "column", minHeight: 540,
            }}>
              <div style={{ fontSize: 24, fontWeight: 500, color: "#0E1F3E",
                marginBottom: 22, fontFeatureSettings: '"tnum"' }}>{s.id}</div>
              <div style={{
                width: "100%", aspectRatio: "16 / 11",
                borderRadius: 16, overflow: "hidden", marginBottom: 28,
                backgroundImage: `url('${s.img}')`,
                backgroundSize: "cover", backgroundPosition: "center",
              }}/>
              <div style={{
                fontSize: 24, fontWeight: 700, lineHeight: 1.15,
                letterSpacing: "-0.015em", whiteSpace: "pre-line",
                marginBottom: 16,
              }}>{s.title}</div>
              <p style={{
                fontSize: 14, lineHeight: 1.5, color: "#1A1A1A",
                fontWeight: 400, margin: "0 0 28px",
              }}>{s.desc}</p>
              <div style={{ marginTop: "auto" }}>
                <a data-dark-pill href={s.href} 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>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── PLATFORM SPOTLIGHT — Argos Myriad + SmartSuite ────────────────
// HOMEPAGE.md §6 / PLATFORM_NEW.md. Argos Myriad is the parent
// platform brand; SmartSuite is the named customizable tooling
// environment INSIDE Myriad. Do NOT describe them as peer products.
// Single glass panel holds the entire text block (eyebrow → headline
// → subhead → body → CTA) over the motion-blur photograph.
const PlatformV1 = () => (
  <section data-screen-label="Platform" data-nav-tone="dark" className="full-bleed" style={{
    position: "relative",
    minHeight: "min(820px, 100svh)",
    maxHeight: "min(1000px, 100svh)",
    padding: "clamp(100px, 16vh, 160px) clamp(20px, 6vw, 96px) clamp(48px, 8vh, 96px)",
    fontFamily: "var(--font-display)", color: "#FFFFFF",
    overflow: "hidden",
    display: "flex", flexDirection: "column",
    background: "#0F3D34",
  }}>
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0,
      backgroundImage: "url('/assets/platform-motion.jpg')",
      backgroundSize: "cover",
      backgroundPosition: "center right",
      backgroundRepeat: "no-repeat",
    }}/>
    <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.55) 100%), " +
        "linear-gradient(90deg, rgba(2,10,9,0.65) 0%, rgba(2,10,9,0) 55%)",
      pointerEvents: "none",
    }}/>

    <div style={{ position: "relative", maxWidth: 1600, margin: "0 auto",
      width: "100%", flex: 1, display: "flex", flexDirection: "column",
      justifyContent: "flex-end" }}>
      <div style={{
        background: "rgba(8,18,16,0.55)",
        backdropFilter: "blur(14px) saturate(140%)",
        WebkitBackdropFilter: "blur(14px) saturate(140%)",
        border: "1px solid rgba(255,255,255,0.10)",
        borderRadius: 28, padding: "48px 48px 44px",
        maxWidth: 980,
        display: "flex", flexDirection: "column", gap: 28,
      }}>
        <div style={{ fontSize: 13, fontWeight: 500,
          color: "rgba(255,255,255,0.65)",
          letterSpacing: "0.10em", textTransform: "uppercase" }}>
          Platform Spotlight
        </div>
        <div>
          <h2 style={{
            fontSize: 72, fontWeight: 700, lineHeight: 1.0,
            letterSpacing: "-0.035em", margin: "0 0 16px", color: "#FFFFFF",
          }}>Argos Myriad</h2>
          <h3 style={{
            fontSize: 20, fontWeight: 500, lineHeight: 1.3,
            letterSpacing: "-0.005em", margin: 0,
            color: "rgba(255,255,255,0.85)", maxWidth: 760,
          }}>
            The Argos Data Platform for Human-in-the-Loop AI Data Operations
          </h3>
        </div>
        <p style={{
          fontSize: 16, lineHeight: 1.6,
          color: "rgba(255,255,255,0.82)", fontWeight: 400,
          margin: 0,
        }}>
          Argos Myriad is the platform foundation behind our human data
          operations. It manages large-scale annotation, evaluation, and
          review workflows with role-based access, embedded QA, audit
          trails, and real-time visibility — the operational backbone that
          makes human-in-the-loop work governable at enterprise scale. Built
          into Myriad is <strong style={{ color: "#FFFFFF", fontWeight: 600 }}>SmartSuite</strong>,
          our customizable tooling environment — with ready-to-deploy
          specialized tools for workflows like RLHF, model evaluation,
          multimodal annotation, and RAG content review. When an existing
          tool isn't the right fit, Argos Data customizes it or builds a new
          one in as little as 1–2 weeks.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12,
          alignItems: "center", marginTop: 8 }}>
          <a href="/myriad/" data-dark-pill style={{
            background: "#FFFFFF", color: "#0E1F3E",
            padding: "14px 24px", borderRadius: 37,
            fontSize: 13, fontWeight: 500,
            fontFamily: "var(--font-display)",
            border: "none", cursor: "pointer",
            letterSpacing: "-0.005em",
            textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 10,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: "50%",
              background: "#30AA74",
              boxShadow: "0 0 0 3px rgba(48,170,116,0.20)",
              display: "inline-block",
            }}/>
            Explore Argos Myriad
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ── CASE STUDIES — three outcome-focused proof cards ──────────────
// HOMEPAGE.md §7. All three cards default to white; hover state
// flips the card to navy (via CSS variables in Layout.astro). Stats
// count up when each card scrolls into view. The "Read the case study"
// arrow nudges right on hover, paired with the card lift.
// Approved copy — do not invent additional stats.
const CaseStudies = () => {
  // Build-time featured case studies from the Astro content collection.
  // Falls back to the hand-curated placeholders below if the global is
  // absent (local dev with no collection data, or accidental misconfig).
  const liveCards = (typeof window !== 'undefined' && window.__argosCaseStudies)
    ? window.__argosCaseStudies
    : null;
  const cards = (liveCards && liveCards.length > 0) ? liveCards : [
    {
      category: "Global online retailer partnership",
      statValue: 99.75, statDecimals: 2, statSuffix: "%",
      statLabel: "On-time delivery rate",
      head: "On-time delivery across 120 languages.",
      body: "A 7-year partnership with one of the world's most demanding AI buyers, spanning 40 business units and active engagement across data collection, annotation, evaluation, and deployment QA.",
      href: "/case-studies/",
    },
    {
      category: "E-commerce search relevance",
      statValue: 35, statPrefix: "+", statSuffix: "%",
      statLabel: "Lift in search accuracy",
      head: "Search accuracy. 20% lift in conversions.",
      body: "Custom annotation tooling and an iterative human-in-the-loop refinement process helped a leading e-commerce platform close gaps in query understanding and align search results with user intent.",
      href: "/case-studies/",
    },
    {
      category: "Large-scale LLM quality evaluation",
      statValue: 70, statSuffix: "K",
      statLabel: "Long-form responses evaluated",
      head: "Long-form responses evaluated, tooling deployed in 2 weeks.",
      body: "SmartSuite-powered Response Quality Assessor unified prompts, responses, and quality checks into a single environment — scaling structured LLM evaluation without fragmenting reviewer workflows.",
      href: "/case-studies/",
    },
  ];
  return (
    <section data-screen-label="Case studies" 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={{ marginBottom: 72 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: "#666",
            letterSpacing: "0.10em", textTransform: "uppercase",
            marginBottom: 20 }}>
            Case Studies
          </div>
          <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.05,
            letterSpacing: "-0.025em", margin: 0, textWrap: "balance",
            maxWidth: 900 }}>
            Outcomes that earn trust.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: 20,
        }}>
          {cards.map((c) => (
            <article key={c.slug || c.category} data-case-card style={{
              borderRadius: 28, padding: "36px 32px 32px",
              minHeight: 520,
              display: "flex", flexDirection: "column",
            }}>
              <div style={{
                fontSize: 12, fontWeight: 500, color: "var(--cs-sub)",
                letterSpacing: "0.10em", textTransform: "uppercase",
                marginBottom: 28,
                transition: "color 220ms ease",
              }}>{c.category}</div>
              <div style={{
                display: "flex", alignItems: "baseline",
                columnGap: 16, rowGap: 4, flexWrap: "wrap",
                marginBottom: 24,
              }}>
                <div style={{
                  fontSize: 72, fontWeight: 700, lineHeight: 1.0,
                  letterSpacing: "-0.035em",
                  fontFeatureSettings: '"tnum"',
                }}>
                  {c.statText ? (
                    c.statText
                  ) : (
                    <CountUp
                      to={c.statValue}
                      prefix={c.statPrefix || ""}
                      suffix={c.statSuffix || ""}
                      decimals={c.statDecimals || 0}
                    />
                  )}
                </div>
                {c.statLabel && (
                  <div style={{
                    fontSize: 14, fontWeight: 500, lineHeight: 1.3,
                    color: "var(--cs-muted)",
                    maxWidth: 180, textWrap: "balance",
                    transition: "color 220ms ease",
                  }}>{c.statLabel}</div>
                )}
              </div>
              <h3 style={{
                fontSize: 24, fontWeight: 700, lineHeight: 1.2,
                letterSpacing: "-0.015em",
                margin: "0 0 20px", textWrap: "balance",
              }}>{c.head}</h3>
              <p style={{
                fontSize: 14, lineHeight: 1.55, color: "var(--cs-muted)",
                fontWeight: 400, margin: "0 0 32px",
                transition: "color 220ms ease",
              }}>{c.body}</p>
              <div style={{
                marginTop: "auto", paddingTop: 24,
                borderTop: "1px solid var(--cs-rule)",
                display: "flex", justifyContent: "flex-end",
                transition: "border-color 220ms ease",
              }}>
                <a href={c.href || "/case-studies/"} style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontSize: 13, fontWeight: 500, color: "inherit",
                  textDecoration: "none",
                }}>
                  Read the case study
                  <span data-case-arrow aria-hidden="true">
                    <ArrowDR color="currentColor" size={11}/>
                  </span>
                </a>
              </div>
            </article>
          ))}
        </div>
        <div style={{
          marginTop: 64, display: "flex", justifyContent: "center",
        }}>
          <a href="/case-studies/" data-dark-pill style={{
            display: "inline-flex", alignItems: "center",
            padding: "16px 28px", borderRadius: 37,
            background: "#0A0A0A", color: "#FFFFFF",
            textDecoration: "none", fontSize: 14, fontWeight: 500,
            fontFamily: "var(--font-display)",
            letterSpacing: "-0.005em",
          }}>
            Browse our case studies
          </a>
        </div>
      </div>
    </section>
  );
};

// ── BLOG — "Our stories" 3-card row ───────────────────────────────
// HOMEPAGE.md §8. Astro hand-off: set window.__argosBlogPosts before
// this script runs to feed live posts (done by src/pages/index.astro);
// BLOG_PLACEHOLDERS render as a fallback during local development.
const BLOG_PLACEHOLDERS = [
  { author: "Lorem Ipsum", readTime: "10 mins read",
    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.",
    excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud…",
    image: "" },
  { author: "Lorem Ipsum", readTime: "10 mins read",
    title: "Lorem ipsum dolor sit amet consectetur adipiscing elit duis.",
    excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat…",
    image: "" },
  { author: "Lorem Ipsum", readTime: "10 mins read",
    title: "Lorem ipsum dolor sit amet consectetur adipiscing elit nulla.",
    excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit…",
    image: "" },
];

const BlogV1 = () => {
  const posts = (typeof window !== "undefined" && Array.isArray(window.__argosBlogPosts) && window.__argosBlogPosts.length > 0)
    ? window.__argosBlogPosts.slice(0, 3)
    : BLOG_PLACEHOLDERS;
  return (
    <section data-screen-label="Blog" data-blog-list style={{
      position: "relative", padding: "clamp(60px, 10vw, 120px) clamp(20px, 6vw, 96px) clamp(60px, 12vw, 140px)",
      fontFamily: "var(--font-display)", color: "#0E1F3E",
      background: "#FFFFFF", overflow: "hidden",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(60% 70% at 50% 55%, #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 }}>
          Blog
        </div>
        <h2 style={{
          fontSize: 64, fontWeight: 700, lineHeight: 1.0,
          letterSpacing: "-0.03em", margin: "0 0 32px",
        }}>Our stories.</h2>
        <p style={{
          fontSize: 20, lineHeight: 1.5, color: "#4D4D4D",
          fontWeight: 400, margin: "0 0 72px", maxWidth: 920,
        }}>
          Insights and stories from the front lines of enterprise AI data
          operations — covering multilingual evaluation, RLHF, model
          benchmarking, AI safety, and the human work that makes AI reliable
          in production.
        </p>
        <div style={{
          display: "grid",
          // 3-up at design width, 2-up at narrower, 1-up on mobile —
          // never shrinking the card body.
          gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))",
          gap: 28,
        }}>
          {posts.map((p, i) => (
            <a key={i} href={p.href || "#"} data-blog-card-link>
              <article data-blog-card style={{
                border: "1px solid rgba(14,31,62,0.45)",
                borderRadius: 28, padding: "28px 28px 28px",
                background: "transparent",
                display: "flex", flexDirection: "column", minHeight: 560,
              }}>
                <div style={{
                  fontSize: 13, fontWeight: 500, color: "#0E1F3E",
                  marginBottom: 24,
                  display: "inline-flex", alignItems: "center", gap: 10,
                }}>
                  {p.author ? (
                    <>
                      {p.authorImage ? (
                        <img src={p.authorImage} alt="" data-blog-author-image style={{
                          width: 28, height: 28, borderRadius: "50%",
                          objectFit: "cover", display: "block",
                          background: "#F2F2F0", flexShrink: 0,
                        }}/>
                      ) : null}
                      <span data-blog-author>{p.author}</span>
                      <span aria-hidden="true" style={{ width: 3, height: 3, borderRadius: "50%",
                        background: "#0E1F3E", display: "inline-block" }}/>
                    </>
                  ) : null}
                  <span data-blog-readtime>{p.readTime}</span>
                </div>
                <h3 data-blog-title style={{
                  fontSize: 22, fontWeight: 700, lineHeight: 1.2,
                  letterSpacing: "-0.015em", margin: "0 0 18px",
                  textWrap: "balance",
                }}>{p.title}</h3>
                <p data-blog-excerpt style={{
                  fontSize: 14, lineHeight: 1.5,
                  color: "#1A1A1A", fontWeight: 400, margin: "0 0 28px",
                }}>{p.excerpt}</p>
                <div data-blog-image style={{
                  marginTop: "auto",
                  width: "100%", aspectRatio: "4 / 3",
                  borderRadius: 16,
                  background: p.image ? `#000 url('${p.image}') center/cover no-repeat` : "#000",
                }}/>
              </article>
            </a>
          ))}
        </div>
        <div style={{
          marginTop: 64, display: "flex", justifyContent: "center",
        }}>
          <a href="/blog/" data-dark-pill style={{
            display: "inline-flex", alignItems: "center",
            padding: "16px 28px", borderRadius: 37,
            background: "#0A0A0A", color: "#FFFFFF",
            textDecoration: "none", fontSize: 14, fontWeight: 500,
            fontFamily: "var(--font-display)",
            letterSpacing: "-0.005em",
          }}>
            Explore the Argos Data Blog
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  HeroV1,
  WhyArgos,
  ProofBar,
  AILifecycle,
  SolutionsV1,
  PlatformV1,
  CaseStudies,
  BlogV1,
});