Pricing Compare Mini Card

'use client';

import './PricingCompareMiniCard.css';

/** class:list → className */
function cx(...args: unknown[]): string {
  const out: string[] = [];
  const walk = (v: unknown) => {
    if (!v) return;
    if (typeof v === 'string' || typeof v === 'number') out.push(String(v));
    else if (Array.isArray(v)) v.forEach(walk);
    else if (typeof v === 'object') for (const [k, on] of Object.entries(v as Record<string, unknown>)) if (on) out.push(k);
  };
  args.forEach(walk);
  return out.join(' ');
}

/**
 * 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.
 */
export interface PricingCompareMiniCardProps {
  planName: string;
  price: string;
  period?: string;
  description?: string;
  features?: string[];
  featured?: boolean;
  ctaText?: string;
  ctaHref?: string;
}

export function PricingCompareMiniCard({
  planName = 'Pro Developer',
  price = '$29',
  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 = '#',
}: PricingCompareMiniCardProps) {
  return (
    <>
      <div className={cx(['mini-price-card', { 'mini-price-card--featured': featured }])} data-rk-d6e120="">
        {featured && <span className="mini-price-card__badge" data-rk-d6e120="">Most Popular</span>}
      
        <div className="mini-price-card__header" data-rk-d6e120="">
          <h3 className="mini-price-card__plan" data-rk-d6e120="">{planName}</h3>
          <p className="mini-price-card__desc" data-rk-d6e120="">{description}</p>
          <div className="mini-price-card__amount" data-rk-d6e120="">
            <span className="val" data-rk-d6e120="">{price}</span>
            <span className="period" data-rk-d6e120="">{period}</span>
          </div>
        </div>
      
        <ul className="mini-price-card__features" data-rk-d6e120="">
          {features.map((feat, __i: number) => (
            <li key={__i} className="mini-price-card__feature" data-rk-d6e120="">
              <svg className="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" data-rk-d6e120="">
                <polyline points="20 6 9 17 4 12" data-rk-d6e120="" />
              </svg>
              <span data-rk-d6e120="">{feat}</span>
            </li>
          ))}
        </ul>
      
        <a href={ctaHref} className="mini-price-card__btn" data-rk-d6e120="">
          {ctaText}
          <span aria-hidden="true" data-rk-d6e120="">→</span>
        </a>
      </div>
    </>
  );
}

export default PricingCompareMiniCard;

/* PricingCompareMiniCard — ported from astro-component-kit (cards/PricingCompareMiniCard.astro) */

.mini-price-card:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-text-1, #ffffff);
  margin: 0;
}

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

.mini-price-card__amount:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) .val:where([data-rk-d6e120]) {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-text-1, #ffffff);
  letter-spacing: -0.03em;
}

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

.mini-price-card__features:where([data-rk-d6e120]) {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px 0;
  padding: 0;
  flex: 1;
}

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

.check-icon:where([data-rk-d6e120]) {
  color: var(--c-primary-light, #d4a017);
  flex-shrink: 0;
}

.mini-price-card__btn:where([data-rk-d6e120]) {
  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:where([data-rk-d6e120]) .mini-price-card__btn:where([data-rk-d6e120]),
.mini-price-card__btn:hover:where([data-rk-d6e120]) {
  background: linear-gradient(135deg, #d4a017, #b8860b);
  color: #050505;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35);
}