// Case Studies / Client Results, Resource Highlights, Footer CTA, Footer

// Label → URL map for footer links. Anything not listed falls through to "#".
const FOOTER_LINKS = {
  "AI Data Collection": "/ai-data-collection/",
  "LLM Training Data Services": "/llm-training-data/",
  "Data Annotation & Human Feedback": "/data-annotation/",
  "Prompt Engineering & Optimization": "/prompt-engineering/",
  "Model Evaluation & Benchmarking": "/model-evaluation/",
  "Multilingual AI & Internationalization": "/multilingual-ai/",
  "Safety, Risk & Trust": "/safety-risk-and-trust/",
  "Quality & Governance": "/quality-and-governance/",
  "About Us": "/company/about-us/",
  "Our Approach": "/company/our-approach/",
  "Global Workforce": "/company/global-workforce/",
  "Security & Compliance": "/company/security-and-compliance/",
  "Careers & Talent": "https://careers.argosmultilingual.com/",
  "Case Studies": "/case-studies/",
  "Blog": "/blog/",
  "Contact": "/contact-us/",
  "Contact us": "/contact-us/"
};

const CaseResults = () =>
<section style={{ margin: "180px 64px 0", fontFamily: "var(--font-display)" }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
      <div style={{ maxWidth: 720 }}>
        <Eyebrow>Client results</Eyebrow>
        <h2 style={{ fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.025em", margin: "20px 0 0", textWrap: "balance" }}>
          Outcomes, in their words.
        </h2>
      </div>
      <Button variant="ghost" icon>Read more case studies</Button>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 16 }}>
      <div style={{
      position: "relative",
      background: "#000", color: "#fff", borderRadius: 28, padding: 36,
      minHeight: 460, display: "flex", flexDirection: "column", justifyContent: "space-between",
      overflow: "hidden"
    }}>
        <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(/assets/imagery/motion-blur-people-2.png)",
        backgroundSize: "cover", backgroundPosition: "center",
        opacity: 0.25
      }} />
        <div style={{ position: "relative" }}>
          <Pill variant="dark"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "#30AA74", display: "inline-block" }} /> Featured case study</Pill>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ fontSize: 96, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, marginBottom: 12 }}>18%</div>
          <div style={{ fontSize: 17, opacity: 0.85, fontWeight: 400, marginBottom: 32, maxWidth: 420, lineHeight: 1.45 }}>
            under budget at six-month review — with SOC 2 Type II completed
            before kick-off. Global procurement at a Fortune 500 fintech.
          </div>
          <div style={{ fontSize: 13, opacity: 0.7 }}>Jennifer Park · VP Global Procurement</div>
        </div>
      </div>

      <div style={{
      background: "#F2F2F0", color: "#000", borderRadius: 28, padding: 32,
      minHeight: 460, display: "flex", flexDirection: "column", justifyContent: "space-between"
    }}>
        <div style={{ fontSize: 12, fontWeight: 500, color: "#666" }}>Multilingual launch</div>
        <div>
          <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 1, marginBottom: 12 }}>47</div>
          <div style={{ fontSize: 15, color: "#4D4D4D", fontWeight: 400, marginBottom: 28, lineHeight: 1.45 }}>
            markets shipped on schedule, with linguistic vetting documented
            from day one. SaaS expansion across APAC and EMEA.
          </div>
          <div style={{ fontSize: 13, color: "#666" }}>Alex Finch · Head of AI</div>
        </div>
      </div>

      <div style={{
      background: "#fff", color: "#000", borderRadius: 28, padding: 32,
      border: "1px solid #000",
      minHeight: 460, display: "flex", flexDirection: "column", justifyContent: "space-between"
    }}>
        <div style={{ fontSize: 12, fontWeight: 500, color: "#666" }}>Quality benchmark</div>
        <div>
          <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 1, marginBottom: 12 }}>0.94</div>
          <div style={{ fontSize: 15, color: "#4D4D4D", fontWeight: 400, marginBottom: 28, lineHeight: 1.45 }}>
            inter-annotator agreement on a 12-language preference dataset —
            a 22-point lift on the prior vendor baseline.
          </div>
          <div style={{ fontSize: 13, color: "#666" }}>Marcus Rodriguez · Senior ML Engineer</div>
        </div>
      </div>
    </div>
  </section>;


const Resources = () => {
  const articles = [
  {
    tag: "Guide",
    date: "Mar 2026",
    title: "Designing multilingual evaluation harnesses that survive contact with production.",
    mins: "12 min read",
    img: "/assets/imagery/blog-image-1.jpg"
  },
  {
    tag: "Benchmark report",
    date: "Feb 2026",
    title: "RLHF vs DPO: a 9-language comparison on real-world preference data.",
    mins: "8 min read"
  },
  {
    tag: "Case study",
    date: "Jan 2026",
    title: "How Argos rebuilt one fintech's annotation pipeline in 28 days.",
    mins: "6 min read"
  }];

  return (
    <section style={{ margin: "180px 64px 0", fontFamily: "var(--font-display)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
        <div>
          <Eyebrow>Latest from Argos</Eyebrow>
          <h2 style={{ fontSize: 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.025em", margin: "20px 0 0", textWrap: "balance", maxWidth: 720 }}>
            Field notes from the data side of AI.
          </h2>
        </div>
        <Button variant="ghost" icon>Visit the resource library</Button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 24 }}>
        {articles.map((a, i) =>
        <a key={a.title} href="#" style={{
          display: "flex", flexDirection: "column", textDecoration: "none", color: "#000",
          gap: 20
        }}>
            <div style={{
            borderRadius: 28, overflow: "hidden",
            aspectRatio: i === 0 ? "16 / 11" : "4 / 5",
            background: i === 0 ?
            `#000 url(${a.img}) center/cover` :
            i === 1 ?
            "linear-gradient(135deg, #0E1F3E 0%, #002042 100%)" :
            "radial-gradient(circle at 70% 30%, #EEE36B 0%, #F2F2F0 70%)",
            position: "relative",
            border: i !== 0 ? "1px solid #000" : "none"
          }}>
              {i === 1 &&
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ color: "#fff", fontSize: 88, fontWeight: 700, letterSpacing: "-0.04em" }}>RLHF / DPO</div>
                </div>
            }
              {i === 2 &&
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", padding: 28 }}>
                  <div style={{ color: "#000", fontSize: 64, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }}>28<br />days</div>
                </div>
            }
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <Pill variant="outline">{a.tag}</Pill>
              <span style={{ fontSize: 12, color: "#666" }}>{a.date} · {a.mins}</span>
            </div>
            <div style={{ fontSize: i === 0 ? 28 : 22, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.015em", textWrap: "balance" }}>
              {a.title}
            </div>
          </a>
        )}
      </div>
    </section>);

};

const FooterCTA = () =>
<section style={{ margin: "200px 32px 0", fontFamily: "var(--font-display)" }}>
    <div style={{
    position: "relative", overflow: "hidden",
    borderRadius: 48, padding: "clamp(48px, 10vw, 96px) clamp(24px, 5vw, 64px)",
    background: "#000", color: "#fff",
    minHeight: 520,
    display: "flex", flexDirection: "column", justifyContent: "space-between"
  }}>
      <div style={{
      position: "absolute", inset: 0,
      backgroundImage: "url(/assets/imagery/motion-blur-people-3.png)",
      backgroundSize: "cover", backgroundPosition: "center right",
      opacity: 0.42
    }} />
      <div style={{
      position: "absolute", inset: 0,
      background: "linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.20) 100%)"
    }} />

      <div style={{ position: "relative" }}>
      </div>

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
        <div></div>

        <div>
          <p style={{ fontSize: 16, lineHeight: 1.5, color: "rgba(255,255,255,0.80)", fontWeight: 400, marginBottom: 24, maxWidth: 360 }}>
            Tell us about your model, your languages and your timeline. We'll
            scope a pilot in 48 hours.
          </p>
          <form onSubmit={(e) => {e.preventDefault();}} style={{
          display: "flex", alignItems: "center", gap: 6,
          background: "rgba(255,255,255,0.10)", borderRadius: 37, padding: 6,
          border: "1px solid rgba(255,255,255,0.20)"
        }}>
            <input type="email" placeholder="you@company.com" style={{
            flex: 1, background: "transparent", border: "none", outline: "none",
            color: "#fff", fontSize: 14, padding: "12px 16px",
            fontFamily: "var(--font-display)"
          }} />
            <button type="submit" style={{
            background: "#fff", color: "#000",
            padding: "12px 22px", borderRadius: 37, fontSize: 12, fontWeight: 500,
            fontFamily: "var(--font-display)", border: "none", cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap"
          }}>Contact us</button>
          </form>
          <div style={{ marginTop: 14, fontSize: 12, color: "rgba(255,255,255,0.55)" }}>
            Or write us at <span style={{ color: "#fff" }}>hello@argos.ai</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


const Footer = ({ variant = "light" } = {}) => {
  // Light is the default (white background, navy text). Pass
  // variant="dark" to render the same structure / content on a dark
  // grey field with white text — used on dark pages like Platform.html
  // where the white footer would clash with the section above it.
  const isDark = variant === "dark";
  const t = {
    bg:         isDark ? "#1A1A1A" : "#FFFFFF",
    fg:         isDark ? "#FFFFFF" : "#0E1F3E",
    fgMuted:    isDark ? "rgba(255,255,255,0.65)" : "#4D4D4D",
    fgFaint:    isDark ? "rgba(255,255,255,0.50)" : "#666",
    colHeading: isDark ? "rgba(255,255,255,0.55)" : "rgba(14,31,62,0.55)",
    border:     isDark ? "rgba(255,255,255,0.40)" : "#0E1F3E",
    divider:    isDark ? "rgba(255,255,255,0.18)" : "#000",
    logo:       isDark ? "/assets/logos/argos-logo-white.svg" : "/assets/logos/argos-logo-blue.svg",
    // Contact pill hover: invert the colors against the current bg.
    pillHoverBg: isDark ? "#FFFFFF" : "#0E1F3E",
    pillHoverFg: isDark ? "#0E1F3E" : "#FFFFFF",
  };

  const solutionsItems = [
    "AI Data Collection",
    "LLM Training Data Services",
    "Data Annotation & Human Feedback",
    "Prompt Engineering & Optimization",
    "Model Evaluation & Benchmarking",
    "Multilingual AI & Internationalization",
    "Safety, Risk & Trust",
    "Quality & Governance"
  ];
  const companyItems = [
    { label: "About Us",            href: FOOTER_LINKS["About Us"] },
    { label: "Our Approach",        href: FOOTER_LINKS["Our Approach"] },
    { label: "Global Workforce",    href: FOOTER_LINKS["Global Workforce"] },
    { label: "Security & Compliance", href: FOOTER_LINKS["Security & Compliance"] },
    { label: "Careers & Talent",    href: FOOTER_LINKS["Careers & Talent"] }
  ];
  const resourcesItems = [
    { label: "Case Studies", href: FOOTER_LINKS["Case Studies"] },
    { label: "Blog",         href: FOOTER_LINKS["Blog"] }
  ];

  const colHeading = {
    fontSize: 11, fontWeight: 500, color: t.colHeading,
    textTransform: "uppercase", letterSpacing: "0.12em",
    lineHeight: 1.3,
    // All eyebrow slots reserve room for 2 lines of heading text so
    // single-line eyebrows (SOLUTIONS, COMPANY) align with the 2-line
    // Myriad tagline above their links — and the transparent
    // placeholder column also holds the same height.
    minHeight: "2.6em",
    marginBottom: 24
  };
  const linkStyle = {
    fontSize: 15, color: t.fg, textDecoration: "none",
    fontWeight: 500, letterSpacing: "-0.005em",
    transition: "color 160ms cubic-bezier(.22,.8,.26,1)"
  };
  // Hover stays brand green on both themes — reads as accent over white
  // or grey equally well.
  const linkHover = (e, on) => { e.currentTarget.style.color = on ? "#30AA74" : t.fg; };

  return (
    <footer style={{ background: t.bg, fontFamily: "var(--font-display)" }}>
    <div style={{ maxWidth: 1920, margin: "0 auto", padding: "clamp(48px, 8vw, 88px) clamp(20px, 5vw, 64px) 40px" }}>
      {/* Wide layout: logo block · Solutions · Company · Stay connected.
          Narrow layout: logo block + a compact Contact / Careers list.
          The contact-pill hover swaps colors based on the variant, hence
          the CSS variables seeded by inline style below. */}
      <style>{`
        .footer-cols-wide { display: grid; grid-template-columns: 1.7fr 1.4fr 1.1fr 1.1fr 0.9fr; column-gap: 64px; row-gap: 0; margin-bottom: 72px; align-items: start; }
        .footer-cols-narrow { display: none; grid-template-columns: 1.6fr 1fr; gap: 48px; margin-bottom: 64px; align-items: end;}
        @media (max-width: 1100px) {
          .footer-cols-wide { display: none; }
          .footer-cols-narrow { display: grid; }
        }
        .footer-contact-pill {
          background: transparent;
          color: var(--footer-fg);
          transition: background 200ms cubic-bezier(.22,.8,.26,1), color 200ms cubic-bezier(.22,.8,.26,1);
        }
        .footer-contact-pill:hover {
          background: var(--footer-pill-hover-bg) !important;
          color: var(--footer-pill-hover-fg) !important;
        }
        .footer-contact-pill .footer-contact-arrow { transition: transform 280ms cubic-bezier(.22,.8,.26,1); transform-origin: 50% 50%; }
        .footer-contact-pill:hover .footer-contact-arrow { transform: translate(3px, -3px); }
      `}</style>

      {/* CSS variables for contact-pill hover swap. Defined on the
          wrapper so the same selector chain works on both themes. */}
      <div style={{
        "--footer-fg": t.fg,
        "--footer-pill-hover-bg": t.pillHoverBg,
        "--footer-pill-hover-fg": t.pillHoverFg,
      }}>

      {/* Wide layout */}
      <div className="footer-cols-wide">
        {/* Logo + tagline block */}
        <div>
          <a href="/" aria-label="Argos Data — home" style={{ display: "inline-block", marginBottom: 0 }}>
            <img src={t.logo} alt="Argos data" style={{ height: 140, width: "280px", display: "block" }} />
          </a>
          <p style={{ fontSize: 22, color: t.fgMuted, lineHeight: 1.5, fontWeight: 400, maxWidth: 320, marginBottom: 32 }}>Smart Data. Brilliant AI.
          </p>

          {/* Contact CTA — pill matching the top-nav style */}
          <a href="/contact-us/" className="footer-contact-pill" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "13px 22px", borderRadius: 999,
            border: `1px solid ${t.border}`,
            textDecoration: "none",
            fontSize: 14, fontWeight: 600, letterSpacing: "-0.005em"
          }}>
            Contact Us
            <span className="footer-contact-arrow" style={{
              display: "inline-flex"
            }}>
              <ArrowDR size={10} color="currentColor" />
            </span>
          </a>
        </div>

        {/* Solutions — single column listing all 8 service categories. */}
        <div>
          <div style={colHeading}>Solutions</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {solutionsItems.map((it) => (
              <a key={it} href={FOOTER_LINKS[it] || "#"} style={linkStyle}
                onMouseEnter={(e) => linkHover(e, true)}
                onMouseLeave={(e) => linkHover(e, false)}>
                {it}
              </a>
            ))}
          </div>
        </div>

        {/* Platform column — Argos Myriad rendered with the standard
            link type (matching Solutions / Company items) plus a green
            status dot. The tagline sits as a small sentence-case
            subline below it, in brand green. */}
        <div>
          <div style={colHeading}>Platform</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="/myriad/" style={{
              ...linkStyle,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}
              onMouseEnter={(e) => linkHover(e, true)}
              onMouseLeave={(e) => linkHover(e, false)}>
              <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,
              }} />
              Argos Myriad
            </a>
            <div style={{
              fontSize: 13, fontWeight: 400, lineHeight: 1.5,
              color: "#30AA74", letterSpacing: "-0.005em",
              maxWidth: 220,
            }}>
              Built for scale. Designed for control.
            </div>
          </div>
        </div>

        {/* Company */}
        <div>
          <div style={colHeading}>Company</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {companyItems.map((it) => (
              <a key={it.label} href={it.href} style={linkStyle}
                onMouseEnter={(e) => linkHover(e, true)}
                onMouseLeave={(e) => linkHover(e, false)}>
                {it.label}
              </a>
            ))}
          </div>
        </div>

        {/* Resources */}
        <div>
          <div style={colHeading}>Resources</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {resourcesItems.map((it) => (
              <a key={it.label} href={it.href} style={linkStyle}
                onMouseEnter={(e) => linkHover(e, true)}
                onMouseLeave={(e) => linkHover(e, false)}>
                {it.label}
              </a>
            ))}
          </div>
        </div>
      </div>

{/* Narrow layout */}
      <div className="footer-cols-narrow">
        <div>
          <a href="/" aria-label="Argos Data — home" style={{ display: "inline-block", marginBottom: 0 }}>
            <img src={t.logo} alt="Argos data" style={{ height: 140, width: "280px", display: "block" }} />
          </a>
          <p style={{ fontSize: 24, color: t.fgMuted, lineHeight: 1.5, fontWeight: 400, maxWidth: 320, marginBottom: 28 }}>Smart Data. Brilliant AI.
          </p>
          <a href="/contact-us/" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "13px 22px", borderRadius: 999,
            border: `1px solid ${t.border}`,
            color: t.fg, textDecoration: "none",
            fontSize: 14, fontWeight: 600, letterSpacing: "-0.005em"
          }}>
            Contact Us
            <ArrowDR size={10} color="currentColor" />
          </a>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
          <a href="/myriad/" style={{ fontSize: 16, color: t.fg, textDecoration: "none", fontWeight: 400, display: "inline-flex", alignItems: "center", gap: 8, transition: "color 160ms cubic-bezier(.22,.8,.26,1)" }}
            onMouseEnter={(e) => linkHover(e, true)}
            onMouseLeave={(e) => linkHover(e, false)}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#30AA74", boxShadow: "0 0 0 3px rgba(48,170,116,0.20)", display: "inline-block" }} />
            Argos Myriad
          </a>

          {/* Solutions — collapsible. Uses native <details> so it works
              without React state; chevron rotates via CSS based on the
              open attribute. The same solutionsItems array used by the
              wide layout drives this list, so they stay in sync. */}
          <details className="footer-narrow-details" style={{ width: "100%" }}>
            <summary style={{
              fontSize: 16, color: t.fg, fontWeight: 400,
              cursor: "pointer", listStyle: "none",
              display: "inline-flex", alignItems: "center", gap: 8,
              userSelect: "none"
            }}>
              Solutions
              <span className="footer-narrow-chevron" style={{
                display: "inline-block",
                transition: "transform 200ms cubic-bezier(.22,.8,.26,1)",
                fontSize: 12, lineHeight: 1, color: t.fgMuted
              }}>▾</span>
            </summary>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 14, paddingLeft: 4 }}>
              {solutionsItems.map((it) => (
                <a key={it} href={FOOTER_LINKS[it] || "#"} style={{ fontSize: 15, color: t.fg, textDecoration: "none", fontWeight: 500, letterSpacing: "-0.005em" }}
                  onMouseEnter={(e) => linkHover(e, true)}
                  onMouseLeave={(e) => linkHover(e, false)}>
                  {it}
                </a>
              ))}
            </div>
          </details>

          {/* Company — collapsible, same pattern as Solutions */}
          <details className="footer-narrow-details" style={{ width: "100%" }}>
            <summary style={{
              fontSize: 16, color: t.fg, fontWeight: 400,
              cursor: "pointer", listStyle: "none",
              display: "inline-flex", alignItems: "center", gap: 8,
              userSelect: "none"
            }}>
              Company
              <span className="footer-narrow-chevron" style={{
                display: "inline-block",
                transition: "transform 200ms cubic-bezier(.22,.8,.26,1)",
                fontSize: 12, lineHeight: 1, color: t.fgMuted
              }}>▾</span>
            </summary>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 14, paddingLeft: 4 }}>
              {companyItems.map((it) => {
                const isExternal = it.href.startsWith('http');
                return (
                  <a key={it.label} href={it.href}
                    {...(isExternal && { target: '_blank', rel: 'noopener noreferrer' })}
                    style={{ fontSize: 15, color: t.fg, textDecoration: "none", fontWeight: 500, letterSpacing: "-0.005em" }}
                    onMouseEnter={(e) => linkHover(e, true)}
                    onMouseLeave={(e) => linkHover(e, false)}>
                    {it.label}
                  </a>
                );
              })}
            </div>
          </details>

          <a href="/case-studies/" style={{ fontSize: 16, color: t.fg, textDecoration: "none", fontWeight: 500 }}>Case Studies</a>
          <a href="/blog/" style={{ fontSize: 16, color: t.fg, textDecoration: "none", fontWeight: 500 }}>Blog</a>
        </div>
      </div>

      <div style={{ fontSize: 12, color: t.fgFaint, textAlign: "center", lineHeight: 1.6, marginBottom: 20 }}>
        © 2026 Argos Multilingual. All rights reserved.
      </div>

      <div style={{ borderTop: `1px solid ${t.divider}`, paddingTop: 28, display: "flex", justifyContent: "center", alignItems: "flex-start" }}>
        <div style={{ fontSize: 12, color: t.fgFaint, textAlign: "center", lineHeight: 1.6 }}>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", columnGap: 14, rowGap: 4 }}>
            <a href="https://www.argosmultilingual.com/privacy-policy" style={{ color: t.fgFaint, textDecoration: "none" }}>Privacy Policy</a>
            <a href="https://www.argosmultilingual.com/terms-of-service" style={{ color: t.fgFaint, textDecoration: "none" }}>Terms of Service</a>
            <a href="https://www.argosmultilingual.com/terms-and-conditions" style={{ color: t.fgFaint, textDecoration: "none" }}>Terms and Conditions</a>
            <a href="https://www.argosmultilingual.com/do-not-sell-or-share-my-personal-information" style={{ color: t.fgFaint, textDecoration: "none" }}>Do Not Sell or Share My Personal Information</a>
          </div>
        </div>
      </div>

      </div>
    </div>
    </footer>);

};

Object.assign(window, { CaseResults, Resources, FooterCTA, Footer });