Primary dark badge

---
/**
 * Primary dark badge: A heading and billing switch on a brand band, with three plan cards overlapping it.
 *
 * @block pricing
 * @order 16
 */
import { CircleCheck } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Badge from '@/components/apogee/Badge/Badge.astro'
import Divider from '@/components/apogee/Divider/Divider.astro'
import SegmentedControl from '@/components/apogee/SegmentedControl/SegmentedControl.astro'
import { plain } 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. */
  headingLevel?: 1 | 2
}

const {
  headingLevel = 2,
  eyebrow = 'Pricing',
  heading = 'Pricing plans',
  description = 'Simple, transparent pricing that grows with you. Try any plan free for 30 days.',
  periodLabel = 'Billing period',
  periods = { monthly: 'Monthly billing', annual: 'Annual billing' },
  items = [
    { name: 'Basic plan', price: '$10', annualPrice: '$9', period: 'mth', description: 'Our most popular plan.', 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: '#' } },
    { name: 'Business plan', price: '$20', annualPrice: '$15', period: 'mth', description: 'Growing teams up to 20 users.', 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: '#' }, badge: 'Most popular' },
    { name: 'Enterprise plan', price: '$40', annualPrice: '$39', period: 'mth', description: 'Advanced features and unlimited users.', features: ['Advanced custom fields', 'Audit log and data history', 'Unlimited individual users', 'Unlimited individual data', 'Personalised and priority service'], action: { label: 'Get started', href: '#' } },
  ],
} = Astro.props
---

<Section spacing="none" container={false}>
  <div class="group/pricing">
    <div class="bg-primary pt-section-lg pb-32 text-on-primary md:pb-48">
      <div class="mx-auto flex max-w-7xl flex-col items-stretch gap-8 px-gutter sm:items-center md:gap-12">
        <SectionHeader headingLevel={headingLevel} eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="large" align="center" background="primary" />
        <SegmentedControl name="billing" options={[{ label: periods.monthly, value: 'monthly' }, { label: periods.annual, value: 'annual' }]} value="monthly" aria-label={periodLabel} size="large" class="bg-page" />
      </div>
    </div>
    <div class="mx-auto -mt-16 max-w-7xl px-gutter pb-section-lg md:-mt-24">
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 xl:grid-cols-3">
    {items.map((plan) => (
    <div class="flex flex-col overflow-hidden rounded-2xl bg-elevation-raised shadow-raised ring-1 ring-neutral">
      <div class="flex flex-col items-center gap-4 px-6 pt-8 text-center md:px-8 md:pt-10">
        <p class="inline-flex items-center gap-2 rounded-full bg-primary-faded py-1 ps-1 pe-3 text-sm text-primary"><Badge color="primary" variant="solid" rounded>{plan.name}</Badge>{(plan.badge || plan.featured) && <span class="font-medium">{plan.badge ?? 'Most popular'}</span>}</p>
        <p class="flex items-baseline justify-center gap-1"><span class="text-5xl md:text-6xl font-semibold tracking-tight tabular-nums"><span class="group-has-[[value=annual]:checked]/pricing:hidden">{plan.price}</span><span class="hidden group-has-[[value=annual]:checked]/pricing:inline">{plan.annualPrice ?? plan.price}</span></span>{plan.period && <span class="text-neutral-faded">/{plan.period}</span>}</p>
        <p class="text-neutral-faded">{plan.description}</p>
      </div>
      <div class="flex flex-1 flex-col gap-8 px-6 py-8 md:px-8">
        <Divider />
      <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>
        <Divider class="mt-auto" />
        <Button href={plan.action.href} size="large" fullWidth>{plan.action.label}</Button>
      </div>
    </div>
    ))}
  </div>
    </div>
  </div>
</Section>