Pricing Compare Mini Card

---
/**
 * PricingCompareMiniCard — High-conversion mini pricing card with plan perks, price tier, and action button.
 * 
 * @param {string} planName - Plan name (e.g. 'Pro Developer').
 * @param {string} price - Price figure (e.g. '$29').
 * @param {string} period - Frequency string (e.g. '/month').
 * @param {string} description - Plan highlight subtitle.
 * @param {string[]} features - List of plan feature bullet points.
 * @param {boolean} featured - Whether the card is visually emphasized.
 * @param {string} ctaText - Label for the call to action button. Default is 'Get Started'.
 * @param {string} ctaHref - Link URL for the button.
 */
interface Props {
  planName: string;
  price: string;
  period?: string;
  description?: string;
  features?: string[];
  featured?: boolean;
  ctaText?: string;
  ctaHref?: string;
}

const {
  planName,
  price,
  period = '/month',
  description = 'For growing teams and fast production workflows.',
  features = [
    'Unlimited UI components',
    'Full source code access',
    'Commercial license',
    'Community Discord support',
  ],
  featured = false,
  ctaText = 'Get Started',
  ctaHref = '#',
} = Astro.props;
---

<div class:list={['mini-price-card', { 'mini-price-card--featured': featured }]}>
  {featured && <span class="mini-price-card__badge">Most Popular</span>}

  <div class="mini-price-card__header">
    <h3 class="mini-price-card__plan">{planName}</h3>
    <p class="mini-price-card__desc">{description}</p>
    <div class="mini-price-card__amount">
      <span class="val">{price}</span>
      <span class="period">{period}</span>
    </div>
  </div>

  <ul class="mini-price-card__features">
    {features.map((feat) => (
      <li class="mini-price-card__feature">
        <svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="20 6 9 17 4 12" />
        </svg>
        <span>{feat}</span>
      </li>
    ))}
  </ul>

  <a href={ctaHref} class="mini-price-card__btn">
    {ctaText}
    <span aria-hidden="true">→</span>
  </a>
</div>

<style>
  .mini-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6, 1.5rem);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl, 24px);
    width: 100%;
    max-width: 320px;
    font-family: var(--font-sans, system-ui, sans-serif);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .mini-price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 134, 11, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }

  .mini-price-card--featured {
    border-color: rgba(184, 134, 11, 0.5);
    background: radial-gradient(circle at top, rgba(184, 134, 11, 0.12), rgba(255, 255, 255, 0.02) 60%);
    box-shadow: 0 12px 36px rgba(184, 134, 11, 0.15);
  }

  .mini-price-card__badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #050505;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-full, 9999px);
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
  }

  .mini-price-card__plan {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-text-1, #ffffff);
    margin: 0;
  }

  .mini-price-card__desc {
    font-size: 0.8rem;
    color: var(--c-text-2, #a3a3a3);
    margin: 4px 0 16px 0;
    line-height: 1.45;
  }

  .mini-price-card__amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: var(--sp-4, 1rem);
    padding-bottom: var(--sp-4, 1rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mini-price-card__amount .val {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--c-text-1, #ffffff);
    letter-spacing: -0.03em;
  }

  .mini-price-card__amount .period {
    font-size: 0.82rem;
    color: var(--c-text-3, #737373);
  }

  .mini-price-card__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px 0;
    padding: 0;
    flex: 1;
  }

  .mini-price-card__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--c-text-2, #a3a3a3);
  }

  .check-icon {
    color: var(--c-primary-light, #d4a017);
    flex-shrink: 0;
  }

  .mini-price-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text-1, #ffffff);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--r-md, 12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease;
  }

  .mini-price-card--featured .mini-price-card__btn,
  .mini-price-card__btn:hover {
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #050505;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35);
  }
</style>