// /company/security-and-compliance/ — Company > Security & Compliance
// Content source: COMPANY.md §4 (Security & Compliance) + §Final CTA.
// Photo assignments for this page (no overlap with other company pages):
//   Hero               → 107.jpeg    (quiet, controlled, focused work)
//   Secure environments → 128rev.jpg (precision, clean controlled space)
//   Audit / technical  → 66.jpeg     (careful technical review)

// ── HERO ──────────────────────────────────────────────────────────
const SecurityHero = () => (
  <CompanyHero
    route="security"
    h1="Security & Compliance"
    subhead="Enterprise-Grade Controls Built Into Every Workflow"
    intro="Privacy, confidentiality, access control, and auditability are non-negotiable. Our security posture is built into how we work — not added on as a separate layer."
    image="/assets/photography/approved/107.jpeg"
  />
);

// ── BODY ──────────────────────────────────────────────────────────
const SecurityBody = () => (
  <section data-screen-label="Security body" style={{
    fontFamily: "var(--font-display)",
    background: "#F2F2F0", color: "#0E1F3E",
    padding: "clamp(60px, 12vw, 140px) clamp(20px, 6vw, 96px) clamp(48px, 8vw, 96px)",
  }}>
    <div style={{ maxWidth: 1600, margin: "0 auto" }}>
      <SectionLabel>How we operate</SectionLabel>
      <h2 style={{
        fontSize: 56, fontWeight: 700, lineHeight: 1.05,
        letterSpacing: "-0.025em", margin: "0 0 48px",
        maxWidth: 1280, textWrap: "balance",
      }}>
        Privacy, confidentiality, access control, and auditability —
        built into the workflow, not added on as a separate layer.
      </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,
        }}>
          Argos Data operates AI data programs in environments where
          privacy, confidentiality, access control, and auditability are
          non-negotiable. Our security and compliance posture is built into
          how we work — not added on as a separate layer.
        </p>
        <p style={{
          fontSize: 17, lineHeight: 1.65, color: "#1A1A1A",
          fontWeight: 400, margin: 0,
        }}>
          Every program is designed around role-based access, PII handling,
          secure reviewer environments, data segregation, audit trails,
          workflow controls, and quality documentation. These controls are
          supported by the Argos Myriad platform and configured to meet each
          client's specific security, privacy, and regulatory requirements.
        </p>
      </div>
    </div>
  </section>
);

// ── CERTIFICATIONS & COMPLIANCE ───────────────────────────────────
// COMPANY.md §4 §Certifications and Compliance Alignment. Seven
// items, verbatim. Rendered as labelled text badges — the brief
// note from COMPANY.md says ISO badge artwork should be swapped in
// from Marketing later; this text treatment is the production
// placeholder that matches the brand visual system.
const SecurityCerts = () => {
  const certs = [
    { id: "ISO 9001",     desc: "Quality Management Systems" },
    { id: "ISO 13485",    desc: "Medical Devices Quality Management" },
    { id: "ISO 17100",    desc: "Translation Services Quality" },
    { id: "ISO 27001",    desc: "Information Security Management" },
    { id: "ISO 18587",    desc: "Post-Editing of Machine Translation Output" },
    { id: "HIPAA-aligned", desc: "Healthcare data handling capability" },
    { id: "GDPR-compliant", desc: "EU data protection alignment" },
  ];
  return (
    <section data-screen-label="Certifications" 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={{ borderTop: "1px solid #0E1F3E", paddingTop: 56 }}>
          <SectionLabel>Certifications and compliance alignment</SectionLabel>
          <h3 style={{
            fontSize: 28, fontWeight: 700, lineHeight: 1.2,
            letterSpacing: "-0.015em", margin: "0 0 56px",
            maxWidth: 900, textWrap: "balance",
          }}>
            The certifications and standards Argos Data maintains and
            operates under.
          </h3>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 16,
          }}>
            {certs.map((c) => (
              <div key={c.id} style={{
                display: "flex", flexDirection: "column",
                padding: "28px 28px",
                borderRadius: 20,
                border: "1px solid #0E1F3E",
                background: "#FFFFFF",
                minHeight: 140,
                gap: 14,
              }}>
                <div style={{
                  fontSize: 22, fontWeight: 700, lineHeight: 1.15,
                  letterSpacing: "-0.015em", color: "#0E1F3E",
                  fontFeatureSettings: '"tnum"',
                }}>{c.id}</div>
                <div style={{
                  fontSize: 14, lineHeight: 1.5, color: "#4D4D4D",
                  fontWeight: 400,
                }}>{c.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── SECURITY CONTROLS — 6 verbatim blocks ─────────────────────────
// COMPANY.md §4 §Security Controls. Six headings (Data Hosting and
// Infrastructure, Access Control, Data Handling, Secure Production
// Environments, Anti-Exfiltration Tooling, Audit Trails and
// Documentation), bodies verbatim.
//
// Layout: dark navy section reusing the WhyArgos column rhythm. Two
// rows of three. A short companion photo sits inside the same dark
// field above the grid as a tone-setter — quieter than the workforce
// photo treatment, in line with "calmer, structured, trust-conveying."
const SecurityControls = () => {
  const controls = [
    {
      title: "Data Hosting and Infrastructure",
      body: "Data is hosted in secure data centers aligned with ISO 27001, ISO 27018, SOC 1, SOC 2, SOC 3, FedRAMP, HITRUST, MTCS, IRAP, and ENS controls. Monthly penetration tests are performed on externally exposed systems.",
    },
    {
      title: "Access Control",
      body: "Role-based access governs every workflow. Contributors, reviewers, and managers access only the data and tasks required for their assigned role. Access is provisioned, monitored, and revoked through controlled portals — including for third-party vendors when applicable.",
    },
    {
      title: "Data Handling",
      body: "Argos Data supports both data anonymization and pseudonymization, with structured PII redaction tooling integrated into annotation workflows. For sensitive data, we partner with leading multilingual PII redaction solution providers to detect and mask personal data prior to or during reviewer access.",
    },
    {
      title: "Secure Production Environments",
      body: "For programs requiring enhanced data protection, Argos Data operates secure, access-controlled delivery facilities at multiple global office locations. These facilities can enforce clean desk policies, restricted device access, controlled workstation configurations, and supervised production workflows.",
    },
    {
      title: "Anti-Exfiltration Tooling",
      body: "Workflows can include copy-paste blocking, external storage disabling, session monitoring, screen recording, behavioral heat mapping, and activity tracking. These layered controls reduce both intentional and accidental data leakage risk.",
    },
    {
      title: "Audit Trails and Documentation",
      body: "Every workflow produces auditable records — task completion, reviewer activity, QA decisions, dispute resolutions, and access events — supporting client compliance reviews, governance audits, and production-readiness validation.",
    },
  ];

  return (
    <section data-screen-label="Security controls" 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>Security controls</SectionLabel>
        <h2 style={{
          fontSize: 56, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: "-0.025em", margin: "0 0 24px",
          maxWidth: 1200, textWrap: "balance", color: "#FFFFFF",
        }}>
          Layered controls. Configured per program. Auditable end-to-end.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.72)",
          fontWeight: 400, margin: "0 0 80px", maxWidth: 760,
        }}>
          Every Argos Data workflow runs against the same layered set of
          controls — configured to each client's specific security,
          privacy, and regulatory requirements.
        </p>

        {/* 3-up grid. Hairline rules between cells mirror the WhyArgos
            section on the homepage. */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          borderTop: "1px solid rgba(255,255,255,0.18)",
        }}>
          {controls.map((c, i) => (
            <div key={c.title} style={{
              padding: "48px 40px 48px 0",
              paddingLeft: i % 3 === 0 ? 0 : 40,
              borderRight: (i % 3 !== 2) ? "1px solid rgba(255,255,255,0.18)" : "none",
              borderBottom: i < controls.length - 3 ? "1px solid rgba(255,255,255,0.18)" : "none",
            }}>
              <div style={{
                fontSize: 12, fontWeight: 500,
                color: "rgba(255,255,255,0.55)",
                letterSpacing: "0.10em", textTransform: "uppercase",
                marginBottom: 16,
                fontFeatureSettings: '"tnum"',
              }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{
                fontSize: 24, fontWeight: 700, lineHeight: 1.2,
                letterSpacing: "-0.015em", color: "#FFFFFF",
                marginBottom: 18, textWrap: "balance",
              }}>{c.title}</div>
              <p style={{
                fontSize: 15, lineHeight: 1.6,
                color: "rgba(255,255,255,0.78)", fontWeight: 400,
                margin: 0,
              }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── PHOTO MOMENT — secure environments / auditability ─────────────
// A photo split that anchors "Secure Production Environments" and
// "Audit Trails" with two complementary photographs. Kept calm,
// structured, trust-conveying, in line with the manager's brief
// for this page.
const SecurityPhotoSplit = () => (
  <section data-screen-label="Secure environments" 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>Inside the work</SectionLabel>
      <h2 style={{
        fontSize: 48, fontWeight: 700, lineHeight: 1.08,
        letterSpacing: "-0.025em", margin: "0 0 64px",
        maxWidth: 1100, textWrap: "balance",
      }}>
        Controlled environments. Auditable records. End-to-end visibility.
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(340px, 1fr))",
        gap: 28,
      }}>
        <div style={{
          display: "flex", flexDirection: "column", gap: 24,
        }}>
          <div style={{
            width: "100%", aspectRatio: "5 / 4",
            borderRadius: 28, overflow: "hidden",
            backgroundImage: "url('/assets/photography/approved/128rev.jpg')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundColor: "#0E1F3E",
          }}/>
          <div>
            <div style={{
              fontSize: 22, fontWeight: 700, lineHeight: 1.2,
              letterSpacing: "-0.015em", color: "#0E1F3E",
              marginBottom: 12,
            }}>Secure Production Environments</div>
            <p style={{
              fontSize: 15, lineHeight: 1.6, color: "#1A1A1A",
              fontWeight: 400, margin: 0, maxWidth: 520,
            }}>
              Access-controlled delivery facilities at multiple global office
              locations — with clean desk policies, restricted device access,
              and supervised workflows when client programs require them.
            </p>
          </div>
        </div>

        <div style={{
          display: "flex", flexDirection: "column", gap: 24,
        }}>
          <div style={{
            width: "100%", aspectRatio: "5 / 4",
            borderRadius: 28, overflow: "hidden",
            backgroundImage: "url('/assets/photography/approved/66.jpeg')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundColor: "#0E1F3E",
          }}/>
          <div>
            <div style={{
              fontSize: 22, fontWeight: 700, lineHeight: 1.2,
              letterSpacing: "-0.015em", color: "#0E1F3E",
              marginBottom: 12,
            }}>Audit Trails and Documentation</div>
            <p style={{
              fontSize: 15, lineHeight: 1.6, color: "#1A1A1A",
              fontWeight: 400, margin: 0, maxWidth: 520,
            }}>
              Auditable records of task completion, reviewer activity, QA
              decisions, and access events — supporting client compliance
              reviews and production-readiness validation.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

function SecurityApp() {
  return (
    <div>
      <SecurityHero />
      <SecurityBody />
      <SecurityCerts />
      <SecurityControls />
      <SecurityPhotoSplit />
    </div>
  );
}

window.SecurityApp = SecurityApp;