leads4less/src/components/PricingCards.tsx

import { Check } from 'lucide-react';
import { getPlanCardBullets, getPlanDisplayMeta, getPublicPricingPlansForInterval, type BillingInterval } from '../../shared/billing/plans';
import { Button } from './ui';
import { formatPlanPeriod, formatPlanPrice } from '../lib/billing-ui';

interface PricingCardsProps {
  billingInterval: Extract<BillingInterval, 'monthly' | 'annual'>;
  onGoToAuth: (mode: 'sign_in' | 'sign_up') => void;
}

export function PricingCards({ billingInterval, onGoToAuth }: PricingCardsProps) {
  const pricingPlans = getPublicPricingPlansForInterval(billingInterval);

  return (
    <div className="grid gap-5 xl:grid-cols-4">
      {pricingPlans.map((plan) => {
        const display = getPlanDisplayMeta(plan.code);
        const isFeatured = display.badgeLabel === 'Best Value';

        return (
          <div
            key={plan.code}
            className={`rounded-[2rem] border p-7 shadow-sm ${
              isFeatured ? 'border-emerald-300 bg-emerald-50/60 shadow-emerald-100' : 'border-stone-200 bg-white'
            }`}
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-xl font-bold tracking-tight text-stone-900">{plan.name}</p>
                <p className="mt-2 text-sm text-stone-600">{display.audience}</p>
              </div>
              {display.badgeLabel ? (
                <span className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
                  {display.badgeLabel}
                </span>
              ) : null}
            </div>

            <div className="mt-8 flex items-end gap-1">
              <span className="text-4xl font-bold tracking-tight text-stone-950">{formatPlanPrice(plan.priceCents, plan.currencyCode)}</span>
              <span className="pb-1 text-sm text-stone-500">{formatPlanPeriod(plan.billingInterval, plan.contactSalesRequired)}</span>
            </div>

            <p className="mt-3 text-sm leading-7 text-stone-600">{display.summary}</p>

            <Button
              type="button"
              onClick={() => onGoToAuth(display.ctaMode)}
              className={`mt-8 w-full rounded-2xl ${isFeatured ? 'bg-emerald-600 hover:bg-emerald-700' : ''}`}
              variant={isFeatured ? 'primary' : 'secondary'}
            >
              {display.ctaLabel}
            </Button>

            <div className="mt-8 space-y-3">
              {getPlanCardBullets(plan.code).map((item) => (
                <div key={item} className="flex items-start gap-3 text-sm text-stone-700">
                  <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
                    <Check className="h-3.5 w-3.5" />
                  </div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}