Comparator Stack

import type { Field } from 'payload'

/**
 * Shared field core for the Comparator component family.
 *
 * Every comparator variant (comparator-table, comparator-grid, comparator-stack)
 * spreads this optional section header first and then appends its own plan/feature
 * shape — the feature matrix for the table and grid layouts, or the per-plan
 * checklists for the stacked layout. Editing the shared title/description here
 * updates every installed comparator block at once, so the family never drifts
 * field-by-field across a repo.
 *
 * Installed once per repo at `src/blocks/shared/comparatorFields.ts`; re-running
 * `payload-components add comparator-*` never overwrites a copy you have already edited.
 */
export const comparatorFields: Field[] = [
  {
    name: 'title',
    type: 'text',
    custom: { payloadComponents: { localization: 'localized' } },
  },
  {
    name: 'description',
    type: 'textarea',
    custom: { payloadComponents: { localization: 'localized' } },
  },
]

import type { Block } from 'payload'

import { comparatorFields } from '@/blocks/shared/comparatorFields'
import { linkGroup } from '@/fields/linkGroup'

export const ComparatorStack: Block = {
  slug: 'comparatorStack',
  // Existing apps must migrate stored data before adopting this identifier:
  // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations
  dbName: 'pc_com_sta',
  interfaceName: 'ComparatorStackBlock',
  fields: [
    // Shared comparator header (title, description). Variant-specific fields
    // follow; edit the shared shape in @/blocks/shared/comparatorFields.
    ...comparatorFields,
    {
      name: 'plans',
      type: 'array',
      required: true,
      minRows: 2,
      maxRows: 4,
      admin: {
        initCollapsed: true,
      },
      fields: [
        {
          name: 'name',
          type: 'text',
          custom: { payloadComponents: { localization: 'localized' } },
          required: true,
        },
        {
          name: 'description',
          type: 'text',
          custom: { payloadComponents: { localization: 'localized' } },
        },
        {
          name: 'price',
          type: 'text',
          custom: { payloadComponents: { localization: 'global' } },
        },
        {
          name: 'period',
          type: 'text',
          custom: { payloadComponents: { localization: 'localized' } },
          admin: {
            description: 'Shown next to the price, e.g. "/month".',
          },
        },
        {
          name: 'badge',
          type: 'text',
          custom: { payloadComponents: { localization: 'localized' } },
          admin: {
            description: 'Optional pill beside the plan name, e.g. "Most popular".',
          },
        },
        {
          name: 'highlighted',
          type: 'checkbox',
          admin: {
            description: 'Adds an accent ring to draw the eye to the recommended plan.',
          },
        },
        linkGroup({
          overrides: {
            maxRows: 1,
          },
        }),
        {
          name: 'features',
          type: 'array',
          admin: {
            initCollapsed: true,
          },
          fields: [
            {
              name: 'label',
              type: 'text',
              custom: { payloadComponents: { localization: 'localized' } },
              required: true,
            },
            {
              name: 'included',
              type: 'checkbox',
            },
            {
              name: 'value',
              type: 'text',
              custom: { payloadComponents: { localization: 'localized' } },
              admin: {
                description:
                  'Text value for this feature. Leave "included" unticked and this empty for an excluded feature.',
              },
            },
          ],
        },
      ],
    },
  ],
  labels: {
    plural: 'Comparator Stack Blocks',
    singular: 'Comparator Stack',
  },
}

import React from 'react'

import { Check, Minus } from 'lucide-react'

import type { ComparatorStackBlock as ComparatorStackBlockData } from '@/payload-types'

import { CMSLink } from '@/components/Link'
import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'
import { cn } from '@/utilities/ui'

type Props = ComparatorStackBlockData & {
  id?: string
  className?: string
  disableInnerContainer?: boolean
}

export const ComparatorStackBlock: React.FC<Props> = ({
  className,
  description,
  disableInnerContainer,
  id,
  plans,
  title,
}) => {
  return (
    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>
      <div className="overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-10 sm:px-8 lg:px-12 lg:py-14">
        <div
          className={cn('flex flex-col gap-10', {
            'mx-auto max-w-3xl': !disableInnerContainer,
          })}
        >
          {title || description ? (
            <div className="flex flex-col items-center gap-4 text-center">
              {title ? (
                <h2 className="text-4xl font-medium tracking-display text-balance sm:text-5xl">{title}</h2>
              ) : null}

              {description ? (
                <p className="max-w-xl text-base leading-7 text-muted-foreground sm:text-lg">{description}</p>
              ) : null}
            </div>
          ) : null}

          {plans && plans.length > 0 ? (
            <div className="flex flex-col gap-4">
              {plans.map((plan, planIndex) => (
                <Card
                  key={plan.id ?? planIndex}
                  className={cn('border-border/70 bg-background/60 p-6 shadow-none', {
                    'ring-1 ring-primary': plan.highlighted,
                  })}
                >
                  <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                    <div className="lg:max-w-xs">
                      <div className="flex flex-wrap items-center gap-2">
                        <h3 className="text-lg font-medium text-foreground">{plan.name}</h3>

                        {plan.badge ? (
                          <Badge
                            variant="outline"
                            className="rounded-full px-2 py-0.5 text-xs uppercase tracking-eyebrow"
                          >
                            {plan.badge}
                          </Badge>
                        ) : null}
                      </div>

                      {plan.description ? (
                        <p className="mt-1 text-sm text-muted-foreground">{plan.description}</p>
                      ) : null}

                      <div className="mt-4 flex items-baseline gap-1">
                        <span className="text-3xl font-medium tracking-title text-foreground">{plan.price}</span>
                        {plan.period ? <span className="text-sm text-muted-foreground">{plan.period}</span> : null}
                      </div>

                      {plan.links && plan.links.length > 0 ? (
                        <div className="mt-4 flex flex-col gap-2">
                          {plan.links.map(({ link }, linkIndex) => (
                            <CMSLink
                              key={linkIndex}
                              appearance={link.appearance === 'outline' ? 'outline' : 'default'}
                              {...link}
                            />
                          ))}
                        </div>
                      ) : null}
                    </div>

                    {plan.features && plan.features.length > 0 ? (
                      <div className="w-full lg:w-72 lg:shrink-0">
                        {plan.features.map((feature, featureIndex) => (
                          <div
                            key={feature.id ?? featureIndex}
                            className="flex items-center justify-between border-b border-border/70 py-3 text-sm last:border-b-0"
                          >
                            <span className="text-muted-foreground">{feature.label}</span>

                            {feature.included ? (
                              <Check aria-label="Included" className="size-4 text-primary" role="img" />
                            ) : feature.value ? (
                              <span className="font-medium text-foreground">{feature.value}</span>
                            ) : (
                              <Minus aria-label="Not included" className="size-4 text-muted-foreground" role="img" />
                            )}
                          </div>
                        ))}
                      </div>
                    ) : null}
                  </div>
                </Card>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  )
}