services.tsx

import Layout from "@theme/Layout";
import BrowserOnly from "@docusaurus/BrowserOnly";
import Footer from "../components/footer/Footer";
import Section from "../components/layout/Section";
import SectionSeparator from "../components/layout/SectionSeparator";
import SplitSection from "../components/layout/SplitSection";
import Banner from "../components/layout/Banner";
import LinkToContact from "../components/LinkToContact";
import ScrollDownCTA from "../components/layout/ScrollDownCTA";

import SupportIllustration from "/img/illustrations/support.svg";
import SpecialProjectsIllustration from "@site/static/img/illustrations/special_projects.svg";
import FundedIllustration from "/img/illustrations/contact.svg";

function ServicesContent() {
  return (
    <>
      {/* ── Header ────────────────────────────────────────────────────────── */}
      <Section pageTop fullHeight bg="yellow">
        <h1>Hire the team that built the tools you depend on</h1>
        <p className="page-tagline">Direct access to the upstream maintainers, no intermediaries.</p>
        <p>
          Major organisations work with us because there is no shortcut to deep expertise.
          Whether you need a support retainer, a custom feature, or a long-term engineering partner — you talk to the people who wrote the code.
          No account managers, no escalation queues.
        </p>
        <div style={{ display: "flex", gap: "var(--ifm-spacing-xl)", alignItems: "center", flexWrap: "wrap" }}>
          <LinkToContact label="Get in touch" />
          <ScrollDownCTA />
        </div>
      </Section>

      <SectionSeparator variant={4} />

      {/* ── Services ──────────────────────────────────────────────────────── */}
      <SplitSection
        ratio="50/50"
        image={
          <SupportIllustration
            height="280px"
            alt="Illustration for the support section."
          />
        }
      >
        <h2><span className="highlight">Support</span> Retainer</h2>
        <p>
          A QuantStack support retainer gives you direct access to the upstream maintainers.
          We triage issues, review pull requests or give feedback on feasibility, implement POCs and full features and shepherd them until they are merged.
          We also advise on your architecture, and take ownership of problems distracting your team.
        </p>
        <p>
          Our clients include many of the world's largest enterprises. We have
          supported financial firms running Jupyter at scale, aerospace engineers building
          domain-specific platforms, and research institutions deploying open-source
          infrastructure for thousands of users.
        </p>
      </SplitSection>

      <SplitSection
        ratio="50/50"
        reverse
        image={
          <SpecialProjectsIllustration
            alt="Illustration of a group of people working together."
            height="300px"
          />
        }
      >
        <h2><span className="highlight">Custom</span> Engineering</h2>
        <p>
          We take on custom engineering projects that push the boundaries of what open-source can do.
        </p>
        <p>
          Recent examples: JupyterGIS, a collaborative geospatial platform for ESA and research
          institutions; JupyterCAD, real-time collaborative 3D CAD editing for Safran Aircraft
          Engines; notebook.link, our browser-native Jupyter product built on JupyterLite.
        </p>
        <p>
          Everything we build goes back upstream wherever possible. If you have a hard problem
          at the intersection of open-source, scientific computing, and engineering — we want
          to hear about it.
        </p>
      </SplitSection>

      <SplitSection
        ratio="50/50"
        image={
          <FundedIllustration
            height="280px"
            alt="Illustration for funded development."
          />
        }
      >
        <h2><span className="highlight">Funded</span> Development</h2>
        <p>
          Need a specific fix or feature in Mamba, JupyterLab, Arrow, or another project we maintain? We implement it upstream.
        </p>
        <p>
          You get the feature. The community maintains it going forward. No fork, no long-term
          maintenance burden on your team. This is the most efficient way to get exactly what
          you need from a project you already depend on.
        </p>
      </SplitSection>

      {/* ── CTA ───────────────────────────────────────────────────────────── */}
      <Banner
        bg="dark"
        title="Ready to work together?"
        cta={<LinkToContact label="GET IN TOUCH" />}
      >
        Tell us what you're building. We'll tell you honestly whether and how we can help.
      </Banner>
    </>
  );
}

export default function ServicesPage(): JSX.Element {
  return (
    <Layout>
      <BrowserOnly>{() => <ServicesContent />}</BrowserOnly>
      <Footer />
    </Layout>
  );
}