IconPricing icon

---
interface PricingFeature {
  icon: string;
  label: string;
  included: boolean;
}

interface PricingTier {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: PricingFeature[];
  cta: string;
  ctaHref?: string;
  featured?: boolean;
}

interface Props {
  tiers?: PricingTier[];
  title?: string;
}

const {
  tiers = [
    {
      name: 'Start',
      price: '€1.250',
      period: '/maand',
      description: 'Voor starters en kleine bedrijven.',
      features: [
        { icon: '🎯', label: 'Één advertentieplatform', included: true },
        { icon: '📊', label: 'Maandrapportage', included: true },
        { icon: '✏️', label: 'Creatives inbegrepen', included: true },
        { icon: '🔍', label: 'SEO optimalisatie', included: false },
        { icon: '💬', label: 'Strategiegesprekken', included: false },
      ],
      cta: 'Begin nu',
      ctaHref: '#',
    },
    {
      name: 'Groei',
      price: '€2.500',
      period: '/maand',
      description: 'Voor bedrijven met groeambities.',
      features: [
        { icon: '🎯', label: 'Twee advertentieplatforms', included: true },
        { icon: '📊', label: 'Wekelijkse rapportage', included: true },
        { icon: '✏️', label: 'Creatives inbegrepen', included: true },
        { icon: '🔍', label: 'SEO optimalisatie', included: true },
        { icon: '💬', label: 'Maandelijks strategiegesprek', included: true },
      ],
      cta: 'Start gesprek',
      ctaHref: '#',
      featured: true,
    },
  ],
  title = 'Tarieven',
} = Astro.props;
---

<section class="ipr">
  {title && <h2 class="ipr__title">{title}</h2>}
  <div class="ipr__tiers">
    {tiers.map((tier) => (
      <div class:list={['ipr__tier', tier.featured && 'ipr__tier--featured']}>
        {tier.featured && <span class="ipr__badge">Meest gekozen</span>}
        <p class="ipr__name">{tier.name}</p>
        <div class="ipr__price-wrap">
          <span class="ipr__price">{tier.price}</span>
          {tier.period && <span class="ipr__period">{tier.period}</span>}
        </div>
        <p class="ipr__desc">{tier.description}</p>
        <ul class="ipr__features">
          {tier.features.map((f) => (
            <li class:list={['ipr__feature', !f.included && 'ipr__feature--excluded']}>
              <span class="ipr__feat-icon" aria-hidden="true">{f.icon}</span>
              <span class="ipr__feat-label">{f.label}</span>
              <span class:list={['ipr__check', f.included ? 'ipr__check--yes' : 'ipr__check--no']} aria-hidden="true">
                {f.included ? '✓' : '✗'}
              </span>
            </li>
          ))}
        </ul>
        <a class:list={['ipr__cta', tier.featured && 'ipr__cta--featured']} href={tier.ctaHref ?? '#'}>{tier.cta}</a>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ipr { padding: 3rem 0; }
  .ipr__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 3rem;
  }
  .ipr__tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
  .ipr__tier {
    position: relative;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 14px;
    background: #fff;
  }
  .ipr__tier--featured {
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 8px 32px rgba(99,102,241,0.15);
  }
  .ipr__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent, #6366f1);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
  }
  .ipr__name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 0.5rem;
  }
  .ipr__price-wrap { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.5rem; }
  .ipr__price { font-size: 2.25rem; font-weight: 900; color: var(--color-primary, #0a0a0a); line-height: 1; }
  .ipr__period { font-size: 0.9rem; color: #999; }
  .ipr__desc { font-size: 0.88rem; color: #888; margin: 0 0 1.5rem; line-height: 1.5; }
  .ipr__features { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .ipr__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-primary, #0a0a0a);
  }
  .ipr__feature--excluded { opacity: 0.4; }
  .ipr__feat-icon { font-size: 1rem; }
  .ipr__feat-label { flex: 1; }
  .ipr__check { font-weight: 700; font-size: 0.9rem; }
  .ipr__check--yes { color: #16a34a; }
  .ipr__check--no { color: #dc2626; }
  .ipr__cta {
    display: block;
    text-align: center;
    padding: 0.8rem;
    background: #f0f0f0;
    color: var(--color-primary, #0a0a0a);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background 0.2s;
  }
  .ipr__cta--featured { background: var(--color-accent, #6366f1); color: #fff; }
  .ipr__cta:hover { opacity: 0.9; }
</style>