{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-careers",
  "title": "Agency: Careers",
  "description": "The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json",
    "https://eased.dev/r/button.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/careers.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../../button/button\";\nimport { latest, type RoleSlug } from \"./content\";\nimport { careers, jobPosts } from \"./content-careers\";\nimport { Arrow, COLUMN, LABEL, PageHead, Reveal, Section, useHref } from \"./kit\";\n\n/**\n * The careers index, /careers: the open roles as one ruled grid (title, team, place, arrow) so\n * every column lines up (rule 103), then what everyone gets and how the studio hires.\n */\nexport function CareersIndex() {\n  const to = useHref();\n  return (\n    <>\n      <div className={`${COLUMN} pt-section-sm`}>\n        <PageHead title={careers.title} lead={careers.lead} />\n      </div>\n\n      <Section id=\"roles\" label={careers.roles.label}>\n        <ul className=\"grid grid-cols-[minmax(0,1fr)_auto] border-t border-line-subtle md:grid-cols-[minmax(0,5fr)_minmax(0,4fr)_minmax(0,3fr)_auto]\">\n          {latest.roles.items.map((role, i) => (\n            <li key={role.slug} className=\"col-span-full grid grid-cols-subgrid\">\n              <Reveal\n                index={i}\n                className=\"group relative col-span-full grid grid-cols-subgrid items-center gap-x-pad-md border-b border-line-subtle py-pad-md\"\n              >\n                <span className=\"flex min-w-0 flex-col gap-1 md:contents\">\n                  <a\n                    href={to(`/careers/${role.slug}`)}\n                    className=\"focus-ring self-start rounded-control-xs text-display-xl font-medium text-text transition-colors duration-(--eased-duration-fast) ease-standard group-hover-fine:text-text-secondary after:absolute after:inset-0 md:self-center\"\n                  >\n                    {role.title}\n                  </a>\n                  <span className=\"text-ui text-text-secondary\">{jobPosts[role.slug].team}</span>\n                  <span className=\"text-ui text-text-muted\">{role.place}</span>\n                </span>\n                <Arrow className=\"text-text-muted\" />\n              </Reveal>\n            </li>\n          ))}\n        </ul>\n      </Section>\n\n      <Section id=\"benefits\" label={careers.benefits.label}>\n        <ul className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2 lg:grid-cols-4\">\n          {careers.benefits.items.map((b, i) => (\n            <li key={b.title}>\n              <Reveal index={i} className=\"flex flex-col gap-1.5 border-t border-line-subtle pt-in\">\n                <h3 className=\"text-display-xl font-medium text-text\">{b.title}</h3>\n                <p className=\"text-ui-md text-pretty text-text-secondary\">{b.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ul>\n      </Section>\n\n      <Section id=\"hiring\" label={careers.process.label}>\n        <ol className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2 lg:grid-cols-4\">\n          {careers.process.items.map((step, i) => (\n            <li key={step.title}>\n              <Reveal index={i} className=\"flex flex-col gap-1.5 border-t border-line-subtle pt-in\">\n                <span className=\"text-ui-sm text-text-muted tabular-nums\">{String(i + 1).padStart(2, \"0\")}</span>\n                <h3 className=\"text-display-xl font-medium text-text\">{step.title}</h3>\n                <p className=\"text-ui-md text-pretty text-text-secondary\">{step.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ol>\n      </Section>\n    </>\n  );\n}\n\n/**\n * A job post, /careers/<slug>: the role's title, its facts in a ruled list beside the post (the\n * role, what you will do, what you bring), and how to apply, by email with the role as subject.\n */\nexport function JobPost({ slug }: { slug: RoleSlug }) {\n  const role = latest.roles.items.find((r) => r.slug === slug) ?? latest.roles.items[0];\n  const post = jobPosts[slug];\n  const { facts, labels, apply } = careers.post;\n  const rows = [\n    { term: facts.team, value: post.team },\n    { term: facts.place, value: role.place },\n    { term: facts.type, value: post.type },\n    { term: facts.salary, value: post.salary },\n  ];\n  const mail = `mailto:${apply.email}?subject=${encodeURIComponent(role.title)}`;\n\n  return (\n    <article aria-labelledby=\"page-title\" className={`${COLUMN} pt-section-sm pb-group`}>\n      <PageHead back={careers.back} title={role.title} size=\"md\" />\n      <div className=\"mt-group grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg\">\n        <Reveal className=\"lg:sticky lg:top-pad-lg lg:self-start\">\n          <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-pad-md border-t border-line-subtle text-ui\">\n            {rows.map((f) => (\n              <div key={f.term} className=\"col-span-full grid grid-cols-subgrid border-b border-line-subtle py-in\">\n                <dt className=\"text-text-muted\">{f.term}</dt>\n                <dd className=\"text-text tabular-nums\">{f.value}</dd>\n              </div>\n            ))}\n          </dl>\n          <Button variant=\"primary\" className=\"mt-pad-md\" nativeButton={false} render={<a href={mail} />}>\n            {careers.roles.apply}\n          </Button>\n        </Reveal>\n\n        <Reveal index={1} className=\"flex max-w-2xl flex-col gap-group\">\n          <PostPart label={labels.role}>\n            {post.intro.map((p) => (\n              <p key={p.slice(0, 24)} className=\"text-ui-md text-pretty text-text-secondary sm:text-ui-lg\">\n                {p}\n              </p>\n            ))}\n          </PostPart>\n          <PostPart label={labels.doing}>\n            <PostList items={post.doing} />\n          </PostPart>\n          <PostPart label={labels.bring}>\n            <PostList items={post.bring} />\n          </PostPart>\n          <PostPart label={labels.bonus}>\n            <PostList items={post.bonus} />\n          </PostPart>\n          <div className=\"flex flex-col items-start gap-pad-base rounded-panel bg-surface-sunken p-pad-md\">\n            <h2 className=\"text-display-xl font-medium text-text\">{apply.title}</h2>\n            <p className=\"max-w-lg text-ui-md text-pretty text-text-secondary\">{apply.body}</p>\n            <a\n              href={mail}\n              className=\"focus-ring rounded-control-xs font-display text-display-2xl font-medium tracking-display break-all text-text underline decoration-line-strong decoration-2 underline-offset-[0.18em] transition-colors duration-(--eased-duration-fast) ease-standard hover-fine:decoration-text\"\n            >\n              {apply.email}\n            </a>\n          </div>\n        </Reveal>\n      </div>\n    </article>\n  );\n}\n\nfunction PostPart({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <section className=\"flex flex-col gap-pad-base\">\n      <h2 className={`${LABEL} border-t border-line-subtle pt-in`}>{label}</h2>\n      {children}\n    </section>\n  );\n}\n\n/** A post's list: a short rule for a bullet, so each line starts on the text's own edge. */\nfunction PostList({ items }: { items: readonly string[] }) {\n  return (\n    <ul className=\"flex flex-col gap-2.5\">\n      {items.map((item) => (\n        <li key={item} className=\"grid grid-cols-[1rem_minmax(0,1fr)] items-baseline gap-2 text-ui-md text-pretty text-text-secondary\">\n          <span aria-hidden className=\"h-px w-2.5 translate-y-[-0.3em] bg-text-muted\" />\n          {item}\n        </li>\n      ))}\n    </ul>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/careers.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}