Careers Listings

import Link from "next/link";
import { ArrowUpRight } from "lucide-react";

const departments = [
  {
    name: "Engineering",
    roles: [
      { title: "Senior product engineer", location: "Remote · EU", type: "Full-time" },
      { title: "Infrastructure engineer", location: "Remote · Worldwide", type: "Full-time" },
      { title: "Design engineer", location: "Paris or remote", type: "Full-time" },
    ],
  },
  {
    name: "Product & Design",
    roles: [
      { title: "Product designer", location: "Remote · EU", type: "Full-time" },
    ],
  },
  {
    name: "Go-to-market",
    roles: [
      { title: "Developer advocate", location: "Remote · Americas", type: "Full-time" },
      { title: "Technical writer", location: "Remote · EU", type: "Part-time" },
    ],
  },
];

export default function CareersListings() {
  const total = departments.reduce((sum, d) => sum + d.roles.length, 0);

  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-4xl px-6 py-20 sm:py-24">
        <div className="mb-12 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
              Open positions
            </h2>
            <p className="mt-2 max-w-md text-muted-foreground">
              Small team, real ownership. Every role is remote-friendly and
              salary-transparent.
            </p>
          </div>
          <p className="font-mono text-xs text-muted-foreground tabular-nums">
            {String(total).padStart(2, "0")} roles open
          </p>
        </div>

        {departments.map((department) => (
          <div key={department.name} className="mb-8 last:mb-0">
            <h3 className="border-b border-border/60 pb-2.5 font-mono text-xs tracking-wide text-muted-foreground uppercase">
              {department.name}
            </h3>
            <ul>
              {department.roles.map((role) => (
                <li key={role.title} className="border-b border-border/60">
                  <Link
                    href="#"
                    className="group flex items-center justify-between gap-4 py-4 transition-colors hover:bg-accent/40 sm:px-3 sm:-mx-3"
                  >
                    <div>
                      <p className="text-sm font-medium group-hover:underline group-hover:underline-offset-4">
                        {role.title}
                      </p>
                      <p className="mt-0.5 font-mono text-xs text-muted-foreground">
                        {role.location} · {role.type}
                      </p>
                    </div>
                    <ArrowUpRight className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:transition-none" />
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}

        <p className="mt-8 text-sm text-muted-foreground">
          Nothing fits?{" "}
          <Link href="#" className="font-medium text-foreground underline-offset-4 hover:underline">
            Send a spontaneous application
          </Link>{" "}
          — we read every one.
        </p>
      </div>
    </section>
  );
}