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

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

const { plans, whatsappUrl } = Astro.props;
---
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
  {plans.map((plan) => (
    <div
      class="relative rounded-2xl p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
      style={plan.recommended
        ? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
        : `background: var(--hds-card); border: 1px solid var(--hds-line);`}
    >
      {plan.recommended && (
        <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 16px rgba(238,118,35,0.4);">
          ⭐ Recomendado
        </div>
      )}

      <div class="mb-6">
        <div class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style={`color: ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-fg-muted)'};`}>
          {plan.name}
        </div>
        <div class="flex items-baseline gap-1.5">
          <span class="text-2xl font-semibold" style="color: var(--hds-fg);">USD</span>
          <span class="font-display leading-none" style="font-size: 4.5rem; color: var(--hds-fg); font-weight: 500; letter-spacing: -0.03em;">{plan.priceUsdYear}</span>
        </div>
        <div class="text-sm mt-2" style="color: var(--hds-fg-muted);">
          por año · ~USD {monthlyEquivalent(plan.priceUsdYear)}/mes
        </div>
      </div>

      <div class="border-t pt-6 mb-6 flex-grow" style="border-color: var(--hds-line);">
        <ul class="space-y-2.5 text-sm" style="color: var(--hds-fg-soft);">
          {plan.features.slice(0, 6).map((feature) => (
            <li class="flex items-start gap-2.5">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" style="color: var(--color-hds-naranja);" aria-hidden="true">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
              <span>{feature}</span>
            </li>
          ))}
          {plan.features.length > 6 && (
            <li class="text-xs italic" style="color: var(--hds-fg-muted);">
              + {plan.features.length - 6} características más
            </li>
          )}
        </ul>
      </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={plan.recommended ? 'btn-primary justify-center' : 'btn-secondary justify-center'}
      >
        Elegir {plan.name}
      </a>
    </div>
  ))}
</div>