import { createFileRoute } from "@tanstack/react-router";
import { SiteLayout, PageHero } from "@/components/site/SiteLayout";
import { MapPin, Briefcase } from "lucide-react";

export const Route = createFileRoute("/careers")({
  head: () => ({
    meta: [
      { title: "Careers — AxiomPlay" },
      { name: "description", content: "Join AxiomPlay. We're building the infrastructure layer for modern iGaming. Hiring across engineering, product and ops." },
      { property: "og:url", content: "/careers" },
    ],
    links: [{ rel: "canonical", href: "/careers" }],
  }),
  component: CareersPage,
});

const jobs = [
  { title: "Senior Platform Engineer (Go)", team: "Engineering", loc: "Remote · EU" },
  { title: "Sportsbook Risk Engineer", team: "Engineering", loc: "Malta / Remote" },
  { title: "Product Manager, Aggregation", team: "Product", loc: "London / Remote" },
  { title: "Solutions Architect", team: "GTM", loc: "São Paulo" },
  { title: "Compliance Counsel", team: "Legal", loc: "Malta" },
  { title: "Site Reliability Engineer", team: "Engineering", loc: "Remote · Global" },
  { title: "Senior Designer, Product", team: "Design", loc: "Remote · EU" },
  { title: "Technical Account Manager", team: "GTM", loc: "Manila" },
];

const values = [
  { t: "Ship the work", b: "We measure progress in production deployments, not slide decks." },
  { t: "Operator empathy", b: "Most of us came from the operator side. We design for the people on call." },
  { t: "High autonomy", b: "Small teams, deep ownership, async by default." },
];

function CareersPage() {
  return (
    <SiteLayout>
      <PageHero
        eyebrow="Careers"
        title={<>Help us build the <span className="text-gradient">network</span>.</>}
        description="We're a remote-first team of 140 across 22 countries — engineers, designers and operators who've shipped real iGaming products."
      />

      <section className="container-page py-16 grid gap-10 lg:grid-cols-3">
        {values.map((v) => (
          <div key={v.t} className="surface-card p-6">
            <h3 className="font-display text-lg font-semibold">{v.t}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{v.b}</p>
          </div>
        ))}
      </section>

      <section className="container-page pb-20">
        <h2 className="font-display text-2xl font-semibold mb-6">Open roles</h2>
        <div className="surface-card divide-y divide-border">
          {jobs.map((j) => (
            <a key={j.title} href="#" className="flex items-center justify-between px-5 py-4 hover:bg-surface transition group">
              <div className="flex items-center gap-4">
                <div className="h-9 w-9 rounded-md grid place-items-center bg-surface-2 border border-border">
                  <Briefcase className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="font-medium group-hover:text-primary transition">{j.title}</p>
                  <p className="text-xs text-muted-foreground">{j.team}</p>
                </div>
              </div>
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <MapPin className="h-3.5 w-3.5" /> {j.loc}
              </div>
            </a>
          ))}
        </div>
      </section>
    </SiteLayout>
  );
}