Pricing Cards

<script lang="ts">
  import { Card, Badge, Button, Separator, SegmentGroup, SegmentItem, Tooltip } from '@urbicon-ui/blocks';

  let billing = $state<'monthly' | 'annual'>('annual');
  let annual = $derived(billing === 'annual');

  const plans = [
    {
      name: 'Starter', priceMonthly: 9, priceAnnual: 7, highlighted: false,
      description: 'Perfect for individuals and small projects.',
      features: [
        { text: '5 projects', included: true },
        { text: '10 GB storage', included: true },
        { text: 'Basic analytics', included: true },
        { text: 'Email support', included: true },
        { text: 'Custom domains', included: false },
        { text: 'Team collaboration', included: false }
      ]
    },
    {
      name: 'Professional', priceMonthly: 29, priceAnnual: 24, highlighted: true,
      description: 'Best for growing teams and businesses.',
      features: [
        { text: 'Unlimited projects', included: true },
        { text: '100 GB storage', included: true },
        { text: 'Advanced analytics', included: true },
        { text: 'Priority email support', included: true },
        { text: 'Custom domains', included: true },
        { text: 'Team collaboration (up to 10)', included: true }
      ]
    },
    {
      name: 'Enterprise', priceMonthly: 79, priceAnnual: 66, highlighted: false,
      description: 'For large organizations with advanced needs.',
      features: [
        { text: 'Unlimited projects', included: true },
        { text: 'Unlimited storage', included: true },
        { text: 'Enterprise analytics', included: true },
        { text: 'Dedicated support', included: true },
        { text: 'Custom domains', included: true },
        { text: 'Unlimited team members', included: true }
      ]
    }
  ];
</script>

<div class="text-center mb-10">
  <h3 class="text-2xl font-bold text-text-primary mb-2">Simple, transparent pricing</h3>
  <p class="text-text-secondary mb-6">Choose the plan that fits your needs.</p>

  <SegmentGroup bind:value={billing} size="sm">
    <SegmentItem value="monthly">Monthly</SegmentItem>
    <SegmentItem value="annual">
      Annual
      <Badge variant="soft" intent="success" size="sm" class="ml-1">Save 20%</Badge>
    </SegmentItem>
  </SegmentGroup>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
  {#each plans as plan (plan.name)}
    <Card class="relative overflow-hidden transition-shadow {plan.highlighted
      ? 'border-primary ring-1 ring-primary/20 scale-[1.02] shadow-lg'
      : 'hover:shadow-md'}">
      {#if plan.highlighted}
        <div class="bg-primary px-4 py-1.5 text-center text-xs font-semibold text-text-on-primary">
          Most Popular
        </div>
      {/if}
      <div class="p-6">
        <h4 class="text-lg font-semibold text-text-primary">{plan.name}</h4>
        <p class="text-sm text-text-tertiary mt-1">{plan.description}</p>
        <div class="my-6">
          <span class="text-4xl font-bold text-text-primary">
            ${annual ? plan.priceAnnual : plan.priceMonthly}
          </span>
          <span class="text-sm text-text-tertiary">/month</span>
          {#if annual}
            <p class="text-xs text-text-tertiary mt-1">Billed ${plan.priceAnnual * 12}/year</p>
          {/if}
        </div>
        <Button intent={plan.highlighted ? 'primary' : 'neutral'}
          variant={plan.highlighted ? 'filled' : 'outlined'} class="w-full">
          Get started
        </Button>
        <Separator class="my-6" />
        <ul class="space-y-3">
          {#each plan.features as feature (feature.text)}
            <li class="flex items-start gap-2 text-sm {feature.included
              ? 'text-text-secondary' : 'text-text-disabled'}">
              {#if feature.included}
                <CheckIcon size={16} class="text-success mt-0.5" />
                {feature.text}
              {:else}
                <CloseIcon size={16} class="mt-0.5" />
                <Tooltip label="Available on higher-tier plans">
                  <span>{feature.text}</span>
                </Tooltip>
              {/if}
            </li>
          {/each}
        </ul>
      </div>
    </Card>
  {/each}
</div>