Simple 01

---
/**
 * Simple 01: A centred heading over a list of open positions.
 *
 * @block careers
 * @order 1
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import JobCard from '@/components/apogee/JobCard/JobCard.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { CareersContent, Job } from '@/components/apogee/sections/_shared/careers.ts'

const demoJobs: Job[] = [
  {
    title: 'Product Designer',
    href: '#',
    description: "We're looking for a mid-level product designer to join our team.",
    department: 'Design',
    location: 'Remote',
    type: 'Full-time',
    salary: '80k – 100k',
    badge: { label: 'Design', color: 'primary' },
  },
  {
    title: 'Engineering Manager',
    href: '#',
    description: "We're looking for an experienced engineering manager to lead a product team.",
    department: 'Software Development',
    location: 'Remote',
    type: 'Full-time',
    salary: '120k – 150k',
    badge: { label: 'Software', color: 'neutral' },
  },
  {
    title: 'Customer Success Manager',
    href: '#',
    description: "Help our customers get the most out of the product, from first call to renewal.",
    department: 'Customer Success',
    location: 'Lisbon, Portugal',
    type: 'Full-time',
    salary: '70k – 90k',
    badge: { label: 'Customer success', color: 'positive' },
  },
  {
    title: 'Account Executive',
    href: '#',
    description: "Work with teams who are choosing their next design system.",
    department: 'Sales',
    location: 'London, UK',
    type: 'Full-time',
    salary: '90k – 120k',
    badge: { label: 'Sales', color: 'warning' },
  },
  {
    title: 'Content Marketing Lead',
    href: '#',
    description: "Write and plan the guides, notes and case studies people share.",
    department: 'Marketing',
    location: 'Remote',
    type: 'Part-time',
    salary: '60k – 80k',
    badge: { label: 'Marketing', color: 'primary' },
  },
]

/** @composable */
interface Props extends CareersContent {}

const {
  eyebrow = "We're hiring!",
  heading = 'Open positions',
  description = 'Our philosophy is simple: hire a team of diverse, passionate people and foster a culture that empowers you to do your best work.',
  items = demoJobs,
} = Astro.props
---

<Section spacing="large" containerWidth="small">
  <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} align="center" class="mb-12" />
  <ul class="list-none p-0 flex flex-col gap-8">
    {items.map((job) => <li><JobCard job={job} /></li>)}
  </ul>
</Section>