Career 5

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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyTitle,
} from "@/components/ui/empty";
import { cn } from "@/lib/utils";

import type { CareerContent } from "../_types/career";
import type { Surface } from "../_types/common";
import { defaultCareer5Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

/** Open roles as full-width rows on a hairline rule, each with its own
 *  apply button. Shows an empty state when nothing is open. */
export default function Career5({
  content = defaultCareer5Content,
  surface = "default",
}: {
  content?: CareerContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <SectionHeader
          className="border-border border-b pb-8"
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        {content.roles.length > 0 ? (
          <div className="mt-10 grid gap-px overflow-hidden rounded-lg bg-border">
            {content.roles.map((role) => (
              <article
                className="grid gap-6 bg-card p-8 lg:grid-cols-12 lg:items-center lg:gap-12 lg:p-10"
                key={role.title}
              >
                <div className="lg:col-span-8">
                  <div className="flex flex-wrap items-center gap-3">
                    <Badge className="bg-muted px-3 py-1 font-medium text-primary text-xs uppercase tracking-[0.14em]">
                      {role.type}
                    </Badge>
                    <span className="flex items-center gap-1.5 text-muted-foreground text-sm">
                      <MapPin className="size-3.5" />
                      {role.location}
                    </span>
                  </div>
                  <h3 className="mt-4 font-display text-2xl text-primary sm:text-3xl">
                    {role.title}
                  </h3>
                  <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
                    {role.body}
                  </p>
                </div>

                <div className="lg:col-span-4 lg:justify-self-end">
                  <Button
                    className="w-full border-input bg-background px-7 text-primary shadow-none before:shadow-none hover:bg-muted sm:w-fit"
                    render={<Link href={role.href} />}
                    size="xl"
                    variant="outline"
                  >
                    {content.applyLabel}
                  </Button>
                </div>
              </article>
            ))}
          </div>
        ) : (
          <Empty className="mt-10 rounded-lg border border-border border-dashed bg-card py-16">
            <EmptyTitle className="font-display font-normal text-2xl text-primary">
              {content.empty.title}
            </EmptyTitle>
            <EmptyDescription>{content.empty.description}</EmptyDescription>
            {content.empty.action && (
              <EmptyContent className="mt-6">
                <Button
                  className="border-none bg-primary px-7 text-primary-foreground shadow-none hover:bg-primary/90"
                  render={<Link href={content.empty.action.href} />}
                  size="xl"
                >
                  {content.empty.action.label}
                </Button>
              </EmptyContent>
            )}
          </Empty>
        )}
      </div>
    </section>
  );
}