Simple cards 03

---
/**
 * Simple cards 03: A centred heading over three plan cards with two actions and a features panel.
 *
 * @block pricing
 * @order 3
 */
import { CircleCheck } 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 Badge from '@/components/apogee/Badge/Badge.astro'
import { accentRuns, 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 {
  /** The outline button on every plan card. @category content */
  salesAction?: Action | null
  /** The small label over each features list. @category content */
  featuresLabel?: string | null
  /** The line under that label, one per plan in order; *asterisks* bold a part. @category content */
  featuresIntros?: string[]
}

const {
  eyebrow = 'Pricing',
  heading = 'Plans that fit your scale',
  description = 'Simple, transparent pricing that grows with you. Try any plan free for 30 days.',
  items = [
    { name: 'Basic plan', price: '$10', period: 'month', description: 'Basic features for up to 10 users.', features: ['Access to 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: 'Popular' },
    { name: 'Business plan', price: '$20', period: 'month', description: 'Advanced features and reporting.', features: ['Access to 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: '#' } },
    { name: 'Enterprise plan', price: '$40', period: 'month', description: 'Unlimited features.', features: ['Access to 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: '#' } },
  ],
  salesAction = { label: 'Chat to sales', href: '#' },
  featuresLabel = 'Features',
  featuresIntros = ['Everything in *Starter*, plus:', 'Everything in *Basic*, plus:', 'Everything in *Business*, plus:'],
} = Astro.props
---

<Section spacing="large">
  <div class="flex flex-col gap-12 md:gap-16">
    <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="medium" align="center" />
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 xl:grid-cols-3">
    {items.map((plan, i) => {
      const intro = featuresIntros[i]
      return (
    <div class="flex flex-col overflow-hidden rounded-2xl bg-elevation-raised shadow-raised ring-1 ring-neutral">
      <div class="flex flex-col gap-4 p-6 md:p-8">
        <div class="flex items-center justify-between gap-2"><Heading as="h3" size="h6" class="text-neutral-faded">{plan.name}</Heading>{(plan.badge || plan.featured) && <Badge color="primary" rounded>{plan.badge ?? 'Popular'}</Badge>}</div>
        <p class="flex items-baseline gap-1"><span class="text-5xl font-semibold tracking-tight tabular-nums md:text-6xl">{plan.price}</span>{plan.period && <span class="text-neutral-faded">per {plan.period}</span>}</p>
        <p class="text-neutral-faded">{plan.description}</p>
        <div class="flex flex-col gap-3 mt-4">
        <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 class="flex flex-1 flex-col gap-6 border-t border-neutral bg-neutral-faded p-6 md:p-8">
        {(featuresLabel || intro) && (
        <div class="flex flex-col gap-1">
          {featuresLabel && <p class="text-sm font-semibold uppercase tracking-wide">{featuresLabel}</p>}
          {intro && <p class="text-neutral-faded">{accentRuns(intro).map((r) => (r.accent ? <strong class="font-semibold text-neutral">{r.text}</strong> : r.text))}</p>}
        </div>
        )}
      <ul class="flex list-none flex-col gap-4 p-0 text-neutral-faded">
        {plan.features.map((f) => <li class="flex gap-3"><CircleCheck class="size-6 shrink-0 text-primary" aria-hidden="true" /><span>{f}</span></li>)}
      </ul>
      </div>
    </div>
      )
    })}
  </div>
  </div>
</Section>