<template>
  <div class="page">
    <Header />
    <main class="container">
      <header class="page-header">
        <h1>Planes y precios</h1>
        <p>Elige el plan que mejor se adapta a tu equipo.</p>
      </header>
      <section class="grid">
        <article v-for="plan in plans" :key="plan.id" class="card">
          <h2>{{ plan.name }}</h2>
          <p class="muted">{{ plan.description }}</p>
          <div class="price">
            <span class="value">{{ plan.priceMonthly }}</span>
            <span class="currency">{{ plan.currency }}/mes</span>
          </div>
          <ul>
            <li v-for="(value, key) in plan.features || {}" :key="key">
              <strong>{{ key }}</strong>: {{ value }}
            </li>
          </ul>
          <button class="btn">Solicitar acceso</button>
        </article>
      </section>
    </main>
  </div>
</template>

<script setup>
import Header from '~/components/Header.vue'
const config = useRuntimeConfig()
const { data } = await useFetch(`${config.public.apiBase}/plans`)
const plans = computed(() => data.value ?? [])
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #eef2f9;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.page-header {
  margin-bottom: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.card {
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.value {
  font-size: 2rem;
  font-weight: 700;
}
.currency {
  color: #64748b;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.btn {
  margin-top: auto;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: none;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
}
.muted {
  color: #64748b;
}
</style>
