Simple call out

---
/**
 * Simple call out: A large heading over three plan cards with two actions each, the first marked most popular.
 *
 * @block pricing
 * @order 10
 */
import { Check, CornerLeftDown } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain, type Action } from '@/components/apogee/sections/_shared/spine.ts'
import type { PricingContent } from '@/components/apogee/sections/_shared/pricing.ts'

/** @composable */
interface Props extends PricingContent {
  /** 1 when the block opens a page; its items move one level down with it. */
  headingLevel?: 1 | 2
  /** The outline button on every plan card. @category content */
  salesAction?: Action | null
}

const {
  headingLevel = 2,
  eyebrow = 'Pricing',
  heading = 'Simple, transparent pricing',
  description = 'We believe good tools should be open to every company, whatever its size.',
  items = [
    { name: 'Basic plan', price: '$10', period: 'mth', description: 'Billed annually.', features: ['Access to all basic features', 'Basic reporting and analytics', 'Up to 10 individual users', '20 GB individual data', 'Basic chat and email support'], action: { label: 'Get started', href: '#' }, badge: 'Most popular' },
    { name: 'Business plan', price: '$20', period: 'mth', description: 'Billed annually.', features: ['200+ integrations', 'Advanced reporting and analytics', 'Up to 20 individual users', '40 GB individual data', 'Priority chat and email support'], action: { label: 'Get started', href: '#' } },
    { name: 'Enterprise plan', price: '$40', period: 'mth', description: 'Billed annually.', features: ['Advanced custom fields', 'Audit log and data history', 'Unlimited individual users', 'Unlimited individual data', 'Personalised and priority service'], action: { label: 'Get started', href: '#' } },
  ],
  salesAction = { label: 'Chat to sales', href: '#' },
} = Astro.props
const itemLevel = headingLevel === 1 ? (2 as const) : (3 as const)
---

<Section spacing="large">
  <div class="flex flex-col gap-16 md:gap-24">
    <SectionHeader headingLevel={headingLevel} eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="large" />
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 xl:grid-cols-3 pt-8">
    {items.map((plan) => (
    <div class="relative">
      {(plan.badge || plan.featured) && <p class="absolute -top-8 end-4 flex items-center gap-1 text-sm font-semibold text-primary"><CornerLeftDown class="size-4 rtl:-scale-x-100" aria-hidden="true" />{plan.badge ?? 'Most popular'}</p>}
      <div class="flex flex-col overflow-hidden rounded-2xl bg-elevation-raised shadow-raised ring-1 ring-neutral h-full">
      <div class="flex flex-col items-center gap-2 px-6 pt-8 text-center md:px-8 md:pt-10">
        <p class="flex items-baseline justify-center gap-1"><span class="text-5xl md:text-6xl font-semibold tracking-tight tabular-nums">{plan.price}</span>{plan.period && <span class="text-neutral-faded">/{plan.period}</span>}</p>
        <Heading as={itemLevel === 2 ? 'h2' : 'h3'} size="h5">{plan.name}</Heading>
        <p class="text-neutral-faded">{plan.description}</p>
      </div>
      <div class="flex-1 px-6 py-8 md:px-8">
      <ul class="flex list-none flex-col gap-4 p-0 text-neutral-faded">
        {plan.features.map((f) => <li class="flex gap-3"><span class="flex size-6 shrink-0 items-center justify-center rounded-full bg-positive-faded text-positive"><Check class="size-4" aria-hidden="true" /></span><span>{f}</span></li>)}
      </ul>
      </div>
      <div class="border-t border-neutral p-6 md:px-8">
      <div class="flex flex-col gap-3">
        <Button href={plan.action.href} size="large" fullWidth>{plan.action.label}</Button>
        {salesAction && <Button href={salesAction.href} size="large" variant="outline" color="neutral" fullWidth>{salesAction.label}</Button>}
      </div>
      </div>
      </div>
    </div>
    ))}
  </div>
  </div>
</Section>