---
import { monthlyEquivalent, type Plan } from '@/lib/pricing';

interface Props {
  plans: Plan[];
  whatsappUrl: string;
}

const { plans, whatsappUrl } = Astro.props;

const categoryLabel: Record<Plan['category'], string> = {
  entry: 'Entrada',
  mid: 'Profesional',
  business: 'Business',
  premium: 'Premium',
};

const categoryColor: Record<Plan['category'], string> = {
  entry: 'var(--color-hds-durazno)',
  mid: 'var(--color-hds-naranja)',
  business: 'var(--color-hds-coral)',
  premium: 'var(--hds-tinta)',
};
---
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
  {plans.map((plan) => (
    <article class="group relative rounded-xl p-6 transition-all hover:-translate-y-0.5 hover:shadow-md" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
      <div class="absolute top-0 left-0 right-0 h-1 rounded-t-xl" style={`background: ${categoryColor[plan.category]};`}></div>

      <div class="flex items-start justify-between gap-3 mb-4">
        <div>
          <div class="text-[10px] font-bold tracking-[0.2em] uppercase mb-1" style="color: var(--hds-fg-muted);">
            {categoryLabel[plan.category]}
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--hds-fg);">{plan.name}</h3>
        </div>
        <div class="text-right">
          <div class="font-display leading-none" style="font-size: 2.5rem; color: var(--color-hds-naranja); font-weight: 500; letter-spacing: -0.02em;">${plan.priceUsdYear}</div>
          <div class="text-[10px] font-semibold tracking-wider uppercase" style="color: var(--hds-fg-muted);">USD/año</div>
        </div>
      </div>

      <div class="text-xs mb-4" style="color: var(--hds-fg-muted);">
        ~USD {monthlyEquivalent(plan.priceUsdYear)}/mes · {plan.technical} USD técnico · {plan.pricePerMb} USD/MB
      </div>

      <div class="grid grid-cols-2 gap-2 text-xs mb-4 pb-4 border-b" style="border-color: var(--hds-line);">
        <div>
          <div class="font-semibold" style="color: var(--hds-fg);">{plan.features[0]?.match(/\d+/)?.[0] || '—'} GB</div>
          <div style="color: var(--hds-fg-muted);">disco</div>
        </div>
        <div>
          <div class="font-semibold" style="color: var(--hds-fg);">{plan.features[2]?.includes('∞') ? '∞' : (plan.features[2]?.match(/\d+/)?.[0] || '—')}</div>
          <div style="color: var(--hds-fg-muted);">cuentas FTP</div>
        </div>
        <div>
          <div class="font-semibold" style="color: var(--hds-fg);">{plan.features[3]?.match(/\d+/)?.[0] || '—'}</div>
          <div style="color: var(--hds-fg-muted);">correos</div>
        </div>
        <div>
          <div class="font-semibold" style="color: var(--hds-fg);">{plan.features[5]?.match(/\d+/)?.[0] || '0'}</div>
          <div style="color: var(--hds-fg-muted);">bases de datos</div>
        </div>
      </div>

      <a
        href={`https://wa.me/59899812487?text=${encodeURIComponent(`Hola, me interesa el plan ${plan.name} (USD ${plan.priceUsdYear}/año)`)}`}
        target="_blank"
        rel="noopener noreferrer"
        class="btn-ghost text-sm"
      >
        Ver detalles
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12 5 19 12 12 19"/>
        </svg>
      </a>
    </article>
  ))}
</div>
