// platform-sections-v2.jsx
// Argos Myriad platform page — built strictly from PLATFORM_NEW_PAGE CONTENT.md.
//
// CONTENT RULES (per user request):
//  - Use ONLY content from PLATFORM_NEW_PAGE CONTENT.md.
//  - Do not invent, paraphrase, or add copy.
//  - Empty text fields are filled with "lorem ipsum".
//
// Render order (7 sections):
//   PlatformHero
//   → PlatformInside           ("Built for Scale. Designed for Control.")
//   → PlatformSupports         ("Ten workflow types. One operating layer.")
//   → InsideSmartSuite         (SmartSuite headline + tools + capabilities)
//   → HowMyriadHelps           ("Designed for programs where manual coordination becomes a bottleneck...")
//   → ImplementationTimeline   ("From scope to deployment, fast.")
//   → PlatformFinalCTA         ("Ready to design a scalable, quality-governed AI data workflow?")

// ─────────────────────────────────────────────────────────────────
// Shared bits
// ─────────────────────────────────────────────────────────────────

const PEyebrowLight = ({ children, color = "rgba(255,255,255,0.65)" }) =>
<div style={{
  fontSize: 13, fontWeight: 500, color,
  letterSpacing: "0.10em", textTransform: "uppercase",
  marginBottom: 24, fontFamily: "var(--font-display)"
}}>{children}</div>;

// ─────────────────────────────────────────────────────────────────
// 1) HERO
// ─────────────────────────────────────────────────────────────────
const PlatformHero = ({ onCTA }) =>
<section data-screen-label="Platform Hero" data-nav-tone="dark"
className="full-bleed" style={{
  position: "relative",
  minHeight: "min(900px, 100svh)",
  maxHeight: "min(1080px, 100svh)",
  padding: "clamp(180px, 22vh, 280px) 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.50) 100%), " +
    "linear-gradient(90deg, rgba(2,10,9,0.65) 0%, rgba(2,10,9,0) 52%)",
    pointerEvents: "none"
  }} />

    <div style={{
    position: "relative", maxWidth: 1600, margin: "0 auto",
    width: "100%", flex: 1,
    display: "flex", flexDirection: "column", justifyContent: "flex-end"
  }}>
      <div style={{ maxWidth: 1180 }}>
        {/* CATEGORY SUBHEADER → "Platform" */}
        <div style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        padding: "8px 14px",
        border: "1px solid rgba(255,255,255,0.30)",
        borderRadius: 37, fontSize: 12, fontWeight: 500,
        marginBottom: 28, color: "rgba(255,255,255,0.95)"
      }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%",
          background: "#30AA74" }} />
          Platform
        </div>
        {/* Headline */}
        <h1 style={{
        fontSize: 120, fontWeight: 700, lineHeight: 1.0,
        letterSpacing: "-0.04em", margin: 0,
        textWrap: "balance", maxWidth: 1280
      }}>
          Argos Myriad
        </h1>
        {/* Short Description */}
        <p style={{
        marginTop: 28, maxWidth: 880,
        fontSize: 24, fontWeight: 500, lineHeight: 1.3,
        color: "rgba(255,255,255,0.92)", letterSpacing: "-0.005em"
      }}>
          Our platform to support secure, scalable, human-in-the-loop AI data operations
        </p>
        {/* Expanded Description */}
        <p style={{
        marginTop: 24, maxWidth: 880,
        fontSize: 17, lineHeight: 1.6,
        fontWeight: 400, color: "rgba(255,255,255,0.78)"
      }}>
          Argos Myriad is our unified platform for workflow management,
          reviewer coordination, QA controls, and reporting visibility.
          Along with SmartSuite, our customizable tooling environment,
          Myriad offers the ability for enterprise AI teams collect,
          annotate, evaluate, validate, and improve data for production
          AI systems at scale. Myriad combines human expertise with
          platform-enabled quality governance and the ability to match
          the exact requirements of any data program – across the entire
          AI data lifecycle.
        </p>
        {/* CTA Buttons */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 40 }}>
          <button onClick={onCTA} style={{
          background: "#fff", color: "#000",
          padding: "16px 26px", borderRadius: 37,
          fontSize: 12, fontWeight: 500,
          fontFamily: "var(--font-display)",
          border: "none", cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 10
        }}>
            Talk to an AI Data Expert
          </button>
          <button style={{
          background: "rgba(255,255,255,0.10)", color: "#fff",
          padding: "16px 26px", borderRadius: 37,
          fontSize: 12, fontWeight: 500,
          fontFamily: "var(--font-display)",
          border: "1px solid rgba(255,255,255,0.18)", cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 10
        }}>
            Explore AI Data Solutions
          </button>
        </div>
      </div>
    </div>
  </section>;

// ─────────────────────────────────────────────────────────────────
// 2) INSIDE ARGOS MYRIAD — "Built for Scale. Designed for Control."
// ─────────────────────────────────────────────────────────────────
const PlatformInside = () =>
<section data-screen-label="Inside Argos Myriad" data-nav-tone="dark"
className="full-bleed" style={{
  padding: "140px 96px", fontFamily: "var(--font-display)",
  background: "#1A1A1A", color: "#fff"
}}>
    <div style={{
    maxWidth: 1600, margin: "0 auto",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-start",
    gap: 80
  }}>
      <div style={{ width: "900px", flexShrink: 0 }}>
        <PEyebrowLight>Inside Argos Myriad</PEyebrowLight>
        <h2 style={{
        fontSize: 72, fontWeight: 700, lineHeight: 1.02,
        letterSpacing: "-0.03em", margin: 0, textWrap: "balance"
      }}>
          Built for Scale. Designed for Control.
        </h2>
        <div style={{
        marginTop: 48,
        display: "grid",
        gap: 24,
        fontSize: 17, lineHeight: 1.65,
        color: "rgba(255,255,255,0.78)", fontWeight: 400
      }}>
          <p style={{ margin: 0, fontWeight: "400" }}>
            Argos Myriad supports the design, execution, and governance of
            large-scale enterprise AI data programs. Offering the ability
            to seamlessly manage annotation, evaluation, and human review
            workflows, Myriad provides task distribution, contributor
            coordination, role-based access, embedded QA, audit trails,
            secure delivery, and real-time progress visibility across
            complex programs.
          </p>
          <p style={{ margin: 0, fontWeight: "400" }}>
            Supporting both high-volume AI data operations and specialized
            workflow design, Myriad allows us to configure the right process
            for your model, task, domain, language, and deployment
            environment. Along with SmartSuite, our customizable tooling
            environment, Myriad turns large scale-scale data programs and
            workflows into a streamlined, secure, and scalable process.
          </p>
          <p style={{ margin: 0, fontWeight: "400" }}>
            Myriad is built for programs where data quality, security,
            multilingual expertise, and operational visibility matter.
            Whether you&rsquo;re collecting speech data, annotating multimodal
            datasets, ranking model responses, validating multilingual
            outputs, preparing RAG knowledge assets, or evaluating model
            performance, Myriad provides the workflow structure and quality
            controls, while SmartSuite provides the task-design flexibility,
            to move from pilot to production with greater confidence.
          </p>
          <p style={{ margin: 0, color: "#fff", fontWeight: "400" }}>
            Myriad does not replace expert human judgment. It enables it.
            Myriad provides the operational foundation for Argos Data to
            deploy vetted contributors, linguists, domain specialists,
            annotators, evaluators, and reviewers through secure, structured,
            and quality-governed workflows.
          </p>
        </div>
      </div>
      <div style={{
      position: "sticky",
      top: 96,
      flexShrink: 0,
      aspectRatio: "4 / 5",
      borderRadius: 24,
      overflow: "hidden",
      backgroundImage: "url('assets/platform-motion.jpg')",
      backgroundSize: "cover",
      backgroundPosition: "center center",
      backgroundRepeat: "no-repeat", height: "800px", width: "600px"
    }} aria-hidden="true" />
    </div>
  </section>;

// ─────────────────────────────────────────────────────────────────
// 3) WHAT MYRIAD SUPPORTS — "Ten workflow types. One operating layer."
//    Source provides only the 10 item titles → descriptions = "lorem ipsum".
// ─────────────────────────────────────────────────────────────────
const PlatformSupports = () => {
  const items = [
  { id: "01", t: "Data collection" },
  { id: "02", t: "Multimodal annotation" },
  { id: "03", t: "Human feedback and preference ranking" },
  { id: "04", t: "Reinforcement Learning with Human Feedback (RLHF) & DPO support" },
  { id: "05", t: "Supervised Fine-Tuning (SFT)" },
  { id: "06", t: "Model evaluation & benchmarking" },
  { id: "07", t: "Multilingual & in-language validation" },
  { id: "08", t: "Retrieval-Augmented Generation (RAG) data preparation & review" },
  { id: "09", t: "Human-in-the-loop QA" },
  { id: "10", t: "Reviewer calibration & QA checkpoints" }];

  return (
    <section data-screen-label="What Myriad supports" data-nav-tone="dark"
    className="full-bleed" style={{
      padding: "140px 96px", fontFamily: "var(--font-display)",
      background: "#262626", color: "#fff"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ marginBottom: 64 }}>
          <PEyebrowLight>What Myriad supports</PEyebrowLight>
          <h2 style={{
            fontSize: 64, fontWeight: 700, lineHeight: 1.02,
            letterSpacing: "-0.03em", margin: 0, textWrap: "balance"
          }}>
            Ten workflow types.<br />One operating layer.
          </h2>
          {/* No supporting paragraph in source → lorem ipsum */}
          <p style={{
            marginTop: 28, maxWidth: 720,
            fontSize: 17, lineHeight: 1.6,
            color: "rgba(255,255,255,0.65)", fontWeight: 400,
            fontStyle: "italic"
          }}>Argos Myriad supports the full breadth of human-in-the-loop AI data programs — from collection through evaluation — under a single governance, reporting, and quality framework.

          </p>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          columnGap: 80,
          borderTop: "1px solid rgba(255,255,255,0.18)"
        }}>
          {items.map((it, i) => {
            return (
              <div key={it.id} style={{
                padding: "28px 0",
                borderBottom: "1px solid rgba(255,255,255,0.18)",
                display: "grid",
                gridTemplateColumns: "84px 1fr",
                alignItems: "center",
                gap: 24
              }}>
                <div style={{
                  fontSize: 13, fontWeight: 500,
                  color: "rgba(255,255,255,0.45)",
                  letterSpacing: "0.08em",
                  fontFeatureSettings: '"tnum"'
                }}>{it.id}</div>
                <div style={{
                  fontSize: 28, fontWeight: 600,
                  letterSpacing: "-0.018em", lineHeight: 1.2,
                  color: "#fff"
                }}>{it.t}</div>
              </div>);

          })}
        </div>
      </div>
    </section>);
};

// ─────────────────────────────────────────────────────────────────
// 4) INSIDE SMARTSUITE
//    Source: headline, short desc, expanded desc, two pillars,
//    7 named tools (no descriptions → lorem ipsum), and a key
//    capabilities list.
// ─────────────────────────────────────────────────────────────────
const InsideSmartSuite = () => {
  const tools = [
  { id: "01", name: "Image Conversation Annotator" },
  { id: "02", name: "Response Quality Assessor" },
  { id: "03", name: "LLM Performance Evaluator" },
  { id: "04", name: "LLM Penetration Tester" },
  { id: "05", name: "Red Team Coordinator" },
  { id: "06", name: "Policy Compliance Tester" },
  { id: "07", name: "Adversarial Attack Simulator" }];

  const capabilities = [
  "A growing library of ready-to-deploy specialized tools for complex AI data tasks",
  "Deep customization of existing tools to fit your requirements",
  "Rapid development of new custom tools, typically deployed in 1-2 weeks",
  "Custom workflow configuration",
  "Task templates",
  "Specialized reviewer interfaces designed around the specific task",
  "Embedded QA controls",
  "Data validation rules and flexible task design",
  "Support for text, image, audio, and video workflows",
  "Built-in collaboration tools for distributed reviewer and project teams",
  "Reporting and analytics support",
  "Integration with project-specific data sources and delivery requirements",
  "Security and compliance controls"];


  return (
    <section data-screen-label="Inside SmartSuite" data-nav-tone="dark"
    className="full-bleed" style={{
      padding: "140px 96px", fontFamily: "var(--font-display)",
      background: "#0F0F0F", color: "rgb(48, 170, 116)"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{
          marginBottom: 80,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          gap: 80
        }}>
        <div style={{ width: "900px", flexShrink: 0 }}>
          <PEyebrowLight>Inside SmartSuite</PEyebrowLight>
          <h2 style={{
              fontSize: 56, fontWeight: 700, lineHeight: 1.05,
              letterSpacing: "-0.03em", margin: 0, textWrap: "balance", color: "rgb(255, 255, 255)"
            }}>
            SmartSuite: Deeply Customizable Tooling Environment Inside Argos Myriad
          </h2>
          {/* Short Description */}
          <p style={{
              marginTop: 32, maxWidth: 1000,
              fontSize: 20, fontWeight: 500, lineHeight: 1.45,
              color: "rgba(255,255,255,0.92)"
            }}>
            SmartSuite supports the creation, configuration, and deployment
            of specialized AI data tools, task interfaces, workflow
            configurations, and QA controls for human-in-the-loop AI data
            programs.
          </p>
          {/* Expanded Description */}
          <div style={{
              marginTop: 24, maxWidth: 1000,
              display: "grid", gap: 20,
              fontSize: 17, lineHeight: 1.6,
              color: "rgba(255,255,255,0.78)", fontWeight: 400
            }}>
            <p style={{ margin: 0 }}>
              Solve unique tooling challenges with our easily customizable
              tech stack that optimizes human-centric data workflows with
              task templates and allows for rapid development and deployment
              of new tools. SmartSuite supports specialized human-in-the-loop
              and RLHF workflows through a library of ready-to-deploy tools,
              allowing us to customize existing tools or build new ones to
              match your program&rsquo;s specific needs.
            </p>
            <p style={{ margin: 0 }}>SmartSuite is built around:</p>
            <ol style={{
                margin: 0, paddingLeft: 24,
                display: "grid", gap: 16
              }}>
              <li>
                <strong style={{ color: "#fff", fontWeight: 600 }}>
                  A library of ready-to-deploy specialized tools
                </strong>{" "}
                purpose-built for complex AI data tasks, including the Image
                Conversation Annotator, Response Quality Assessor, LLM
                Performance Evaluator, LLM Penetration Tester, Red Team
                Coordinator, Policy Compliance Tester, Adversarial Attack
                Simulator, and others.
              </li>
              <li>
                <strong style={{ color: "#fff", fontWeight: 600 }}>
                  Deep customization and rapid new tool development
                </strong>
                , allowing Argos Data to tailor existing tools — or build
                entirely new ones — around a your specific model objective,
                data type, reviewer criteria, guidelines, and delivery
                requirements. When an existing SmartSuite tool isn&rsquo;t the
                right fit, Argos Data typically develops a new one in 1-2
                weeks.
              </li>
            </ol>
            <p style={{ margin: 0 }}>
              SmartSuite is used when a project requires more than a standard
              annotation or review interface and is especially valuable for
              AI programs involving RLHF, model response evaluation,
              multimodal annotation, RAG content preparation, safety testing,
              custom data collection, and other workflows where task design
              directly affects data quality.
            </p>
          </div>
        </div>
          <div style={{
            position: "sticky",
            top: 96,
            flexShrink: 0,
            aspectRatio: "4 / 5",
            borderRadius: 24,
            overflow: "hidden",
            backgroundImage: "url('assets/platform-motion.jpg')",
            backgroundSize: "cover",
            backgroundPosition: "center center",
            backgroundRepeat: "no-repeat",
            height: "800px", width: "600px"
          }} aria-hidden="true" />
        </div>

        {/* Tools grid — 4 on row 1, 3 on row 2, both rows same total width.
            Uses a 12-col grid: row 1 cards span 3 cols (4×3=12),
            row 2 cards span 4 cols (3×4=12). */}
        <div className="smartsuite-tools-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: 16, marginBottom: 80, width: "100%"
        }}>
          {tools.map((t, i) =>
          <article key={t.id} className="smartsuite-tool-card" style={{
            gridColumn: i < 4 ? "span 3" : "span 4",
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 22, padding: "32px 28px 28px",
            minHeight: 220,
            display: "flex", flexDirection: "column", gap: 20
          }}>
              <div style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              fontSize: 11, fontWeight: 500,
              color: "rgba(255,255,255,0.55)",
              letterSpacing: "0.08em", textTransform: "uppercase",
              fontFeatureSettings: '"tnum"'
            }}>
                <span style={{
                width: 7, height: 7, borderRadius: "50%",
                background: "#30AA74",
                boxShadow: "0 0 0 3px rgba(48,170,116,0.20)",
                display: "inline-block", flexShrink: 0
              }} />
                <span>{t.id} — SmartSuite Tool</span>
              </div>
              <h3 style={{
              fontSize: 22, fontWeight: 700, lineHeight: 1.2,
              letterSpacing: "-0.015em", margin: 0,
              color: "#FFFFFF"
            }}>{t.name}</h3>
              <p style={{
              fontSize: 14, lineHeight: 1.5, margin: 0,
              color: "rgba(255,255,255,0.55)", fontWeight: 400,
              fontStyle: "italic"
            }}></p>
            </article>
          )}
        </div>

        {/* Key Capabilities */}
        <div style={{
          paddingTop: 48,
          borderTop: "1px solid rgba(255,255,255,0.18)", width: "900px"
        }}>
          <PEyebrowLight>Key capabilities</PEyebrowLight>
          <ul style={{
            margin: 0, padding: 0, listStyle: "none",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
            gap: 0, width: "1600px"
          }}>
            {capabilities.map((c, i) =>
            <li key={i} style={{
              padding: "20px 24px 20px 0",
              borderBottom: "1px solid rgba(255,255,255,0.10)",
              fontSize: 15, lineHeight: 1.5,
              color: "rgba(255,255,255,0.85)",
              display: "flex", gap: 16
            }}>
                <span style={{
                color: "rgba(255,255,255,0.45)",
                fontWeight: 500, minWidth: 28,
                fontFeatureSettings: '"tnum"'
              }}>{String(i + 1).padStart(2, "0")}</span>
                <span>{c}</span>
              </li>
            )}
          </ul>
        </div>

        {/* Closing paragraphs */}
        <div style={{
          marginTop: 48, maxWidth: 1000,
          display: "grid", gap: 20,
          fontSize: 17, lineHeight: 1.6,
          color: "rgba(255,255,255,0.78)", fontWeight: 400
        }}>
          <p style={{ margin: 0, fontWeight: "400", width: "800px" }}>
            SmartSuite helps enterprise AI teams operationalize specialized
            AI data workflows without forcing complex tasks into generic
            interfaces. Offering the flexibility to design task environments
            around each model&rsquo;s actual requirements, SmartSuite improves
            workflow efficiency, reviewer consistency, and data quality.
          </p>
          <p style={{ margin: 0, color: "#fff", fontWeight: "400", width: "720px" }}>For enterprise teams running advanced AI programs, SmartSuite ensures the tooling adapts to the model, not the other way around.


          </p>
        </div>
      </div>
    </section>);
};

// ─────────────────────────────────────────────────────────────────
// 5) HOW MYRIAD HELPS
// ─────────────────────────────────────────────────────────────────
const HowMyriadHelps = () => {
  const diffs = [
  { id: "Human Expertise, Platform-Enabled",
    d: "Argos Myriad is designed to support expert human judgment, not replace it. The platform enables Argos Data to deploy linguists, domain specialists, annotators, evaluators, and reviewers through structured workflows with clear criteria, QA checkpoints, and delivery controls." },
  { id: "Built for Complex AI Data Workflows",
    d: "Myriad supports AI data programs that involve multiple languages, modalities, domains, large-scale reviewer groups, task types, and quality requirements. SmartSuite provides the flexibility for our team to design tools and interfaces around your specific requirements." },
  { id: "Designed for Quality Governance",
    d: "The platform offers embedded QA controls, reviewer calibration, validation rules, auditability, and reporting visibility. Human data operations stay consistent, traceable, and aligned to enterprise quality requirements." },
  { id: "Scalable Across AI Data Programs",
    d: "Myriad supports small specialized workflows, high-volume annotation programs, and ongoing production AI data operations. It helps enterprise teams move from pilot to production without losing control over quality or process." },
  { id: "Deeply Customizable Through SmartSuite",
    d: "SmartSuite enables Argos Data to configure existing specialized tools — or build new ones in a matter of weeks — around client-specific model objectives, data formats, reviewer requirements, and delivery standards. Generic platforms force the work to fit the tool. SmartSuite makes the tool fit the work." },
  { id: "Secure and Compliant by Design",
    d: "The platform includes role-based controls, detailed audit logs, anti-cheating mechanisms, IP tracking, and completion verification. Built-in capabilities support GDPR, HIPAA, and ISO-aligned compliance needs." }];

  return (
    <section data-screen-label="How Myriad helps" data-nav-tone="dark"
    className="full-bleed" style={{
      padding: "140px 96px", fontFamily: "var(--font-display)",
      background: "#333333", color: "#fff"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ maxWidth: 1280, marginBottom: 80 }}>
          <PEyebrowLight>How Myriad helps</PEyebrowLight>
          <h2 style={{
            fontSize: 56, fontWeight: 700, lineHeight: 1.05,
            letterSpacing: "-0.03em", margin: 0, textWrap: "balance"
          }}>
            Designed for programs where manual coordination becomes a
            bottleneck, so you can deploy faster, with confidence.
          </h2>
          <p style={{
            marginTop: 32, maxWidth: 1000,
            fontSize: 17, lineHeight: 1.6,
            color: "rgba(255,255,255,0.78)", fontWeight: 400
          }}>
            AI data programs often become difficult to manage when workflows
            involve large datasets, multiple reviewer groups, custom task
            requirements, multilingual complexity, quality standards, and
            secure delivery expectations. Myriad offers the platform
            foundation to manage that complexity — and SmartSuite ensures
            the work isn&rsquo;t forced into generic tooling that doesn&rsquo;t
            match the model objective.
          </p>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.18)"
        }}>
          {diffs.map((v, i) =>
          <div key={v.id} style={{
            padding: "56px 48px 56px 0",
            paddingLeft: i % 2 === 0 ? 0 : 48,
            borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.18)" : "none",
            borderBottom: i < diffs.length - 2 ? "1px solid rgba(255,255,255,0.18)" : "none"
          }}>
              <div style={{
              fontSize: 28, fontWeight: 700, lineHeight: 1.1,
              letterSpacing: "-0.02em", marginBottom: 20, textWrap: "balance"
            }}>
                {v.id}
              </div>
              <p style={{
              fontSize: 16, lineHeight: 1.6,
              color: "rgba(255,255,255,0.78)", fontWeight: 400, margin: 0,
              maxWidth: 620
            }}>{v.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
};

// ─────────────────────────────────────────────────────────────────
// 6) IMPLEMENTATION TIMELINE
// ─────────────────────────────────────────────────────────────────
const ImplementationTimeline = () => {
  const steps = [
  { mark: "01", when: "1 to 2 days",
    title: "Initial consultation and project setup",
    desc: "Solutions Architects scope the program, align on guidelines, reviewer qualifications, and delivery requirements with your AI and ML teams." },
  { mark: "02", when: "1 to 2 weeks",
    title: "SmartSuite tool customization or new tool development",
    desc: "When required, Argos Data customizes existing SmartSuite tools — or builds entirely new ones — around your model objective, data type, and quality criteria." },
  { mark: "03", when: "Immediately",
    title: "Task deployment and reviewer onboarding",
    desc: "Vetted contributors enter calibration and pilot validation; once accuracy thresholds are met, production work begins, governed by Myriad\u2019s quality controls." }];

  return (
    <section data-screen-label="Implementation timeline" data-nav-tone="dark"
    className="full-bleed" style={{
      padding: "140px 96px", fontFamily: "var(--font-display)",
      background: "#4D4D4D", color: "#fff"
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ maxWidth: 1100, marginBottom: 80 }}>
          <PEyebrowLight>Implementation Timeline</PEyebrowLight>
          <h2 style={{
            fontSize: 56, fontWeight: 700, lineHeight: 1.05,
            letterSpacing: "-0.025em", margin: "0 0 32px",
            textWrap: "balance"
          }}>
            From scope to deployment, fast.
          </h2>
          <p style={{
            margin: 0, maxWidth: 820,
            fontSize: 17, lineHeight: 1.6,
            color: "rgba(255,255,255,0.78)", fontWeight: 400
          }}>
            We move from initial consultation to production task deployment
            in days, not months. Custom SmartSuite tooling, when required,
            is typically deployed in 1-2 weeks.
          </p>
        </div>

        <div style={{ position: "relative" }}>
          <div aria-hidden="true" style={{
            position: "absolute", top: 7, left: 0, right: 0,
            height: 1, background: "rgba(255,255,255,0.20)"
          }} />
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 0
          }}>
            {steps.map((s, i) =>
            <div key={s.mark} style={{
              position: "relative",
              padding: "0 32px 0 0",
              paddingLeft: i === 0 ? 0 : 32
            }}>
                <div aria-hidden="true" style={{
                width: 15, height: 15, borderRadius: "50%",
                background: i === 0 ? "#30AA74" : "#1A1A1A",
                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: 32
              }} />
                <div style={{
                fontSize: 13, fontWeight: 500,
                color: "rgba(255,255,255,0.55)",
                letterSpacing: "0.04em", marginBottom: 16,
                fontFeatureSettings: '"tnum"'
              }}>{s.mark}</div>
                <div style={{
                fontSize: 32, fontWeight: 700, lineHeight: 1.05,
                letterSpacing: "-0.02em", color: "#FFFFFF",
                marginBottom: 16
              }}>{s.when}</div>
                <div style={{
                fontSize: 18, fontWeight: 600, lineHeight: 1.3,
                letterSpacing: "-0.01em", color: "#FFFFFF",
                marginBottom: 12, textWrap: "balance", maxWidth: 320, width: "320px"
              }}>{s.title}</div>
                <p style={{
                fontSize: 14, lineHeight: 1.6,
                color: "rgba(255,255,255,0.78)", fontWeight: 400,
                margin: 0, maxWidth: 340
              }}>{s.desc}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);
};

// ─────────────────────────────────────────────────────────────────
// 7) FINAL CTA
//    Uses the CTA Copy + CTA Button from the source's Implementation
//    Timeline section.
// ─────────────────────────────────────────────────────────────────
const PlatformFinalCTA = () => {
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;
    const tryCreate = () => {
      if (window.hbspt && window.hbspt.forms) {
        window.hbspt.forms.create({
          portalId: "26728782",
          formId: "18b4272c-bc49-40fd-a2fa-d7688ea325d2",
          region: "eu1",
          target: "#contact-form-container"
        });
        return true;
      }
      return false;
    };
    if (!tryCreate()) {
      const interval = setInterval(() => {if (tryCreate()) clearInterval(interval);}, 120);
      setTimeout(() => clearInterval(interval), 10000);
    }
  }, []);

  return (
    <section data-screen-label="Final CTA" data-nav-tone="dark" id="contact"
    className="full-bleed" style={{
      position: "relative",
      minHeight: 540,
      padding: "120px 96px",
      fontFamily: "var(--font-display)",
      color: "#FFFFFF", overflow: "hidden",
      background: "#0F3D34"
    }}>
    <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        backgroundImage: "url('assets/platform-motion.jpg')",
        backgroundSize: "cover",
        backgroundPosition: "center left",
        backgroundRepeat: "no-repeat",
        opacity: 0.85
      }} />
    <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
        "linear-gradient(90deg, rgba(2,10,9,0.20) 0%, rgba(2,10,9,0.55) 55%, rgba(2,10,9,0.85) 100%)",
        pointerEvents: "none"
      }} />
    <div style={{
        position: "relative", maxWidth: 1600, margin: "0 auto"
      }}>
      {/* No eyebrow text in source → lorem ipsum */}
      <PEyebrowLight>lorem ipsum</PEyebrowLight>
      <h2 style={{
          fontSize: 72, fontWeight: 700, lineHeight: 1.02,
          letterSpacing: "-0.035em", margin: "0 0 32px", textWrap: "balance",
          maxWidth: 1280
        }}>
        Ready to design a scalable, quality-governed AI data workflow?
      </h2>
      {/* No supporting paragraph in source → lorem ipsum */}
      <p style={{
          margin: "0 0 48px", maxWidth: 720,
          fontSize: 18, lineHeight: 1.55,
          color: "rgba(255,255,255,0.65)",
          fontStyle: "italic"
        }}>

        </p>
      <div style={{
          width: "100%", maxWidth: 1000,
          background: "#F2F2F0",
          borderRadius: 28,
          padding: "40px 48px",
          color: "#0E1F3E"
        }}>
        {/* CTA Button copy: "Discuss Your AI Data Needs" — the HubSpot
                                                                                                                                                                                           form here serves as the action. */}
        <div id="contact-form-container" />
      </div>
    </div>
  </section>);

};

Object.assign(window, {
  PlatformHero,
  PlatformInside,
  PlatformSupports,
  InsideSmartSuite,
  HowMyriadHelps,
  ImplementationTimeline,
  PlatformFinalCTA
});