ListPrice list

---
/**
 * ListPrice
 * Inbegrepen/niet-inbegrepen checklist voor een prijspakket. Vinkje = inbegrepen, kruis = niet inbegrepen.
 *
 * Props:
 * - items?: Array<{ text: string; included?: boolean }>
 */
interface Props {
  items?: { text: string; included?: boolean }[];
}

const {
  items = [
    { text: 'Campagne setup & structuur', included: true },
    { text: 'Maandelijkse optimalisatie', included: true },
    { text: 'Wekelijkse rapportage', included: true },
    { text: 'Dedicated accountmanager', included: true },
    { text: 'Landing page ontwerp', included: false },
    { text: 'Content creatie', included: false },
  ],
} = Astro.props;
---

<section class="bl-section lst-price-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-price">
      {items.map(item => (
        <li class={`lst-price__item${item.included === false ? ' lst-price__item--off' : ''}`}>
          <span class="lst-price__icon" aria-hidden="true">
            {item.included === false
              ? <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="#e5e5e5"></circle><path d="M6 12l6-6M12 12L6 6" stroke="#aaa" stroke-width="1.8" stroke-linecap="round"></path></svg>
              : <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="currentColor"></circle><path d="M5 9l3 3 5-5.5" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>
            }
          </span>
          <span class="lst-price__text">{item.text}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-price{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.lst-price__item{display:flex;align-items:center;gap:.65rem;font-size:1rem;color:var(--color-primary, #0a0a0a)}
.lst-price__item--off .lst-price__text{color:#aaa;text-decoration:line-through}
.lst-price__icon{display:flex;flex-shrink:0;color:var(--color-accent, #6366f1)}
</style>