ContentBullets content

---
interface Props {
  heading?: string;
  intro?: string;
  items?: string[];
  style?: "check" | "arrow" | "dot" | "number";
}

const icons = { check: "✓", arrow: "→", dot: "•", number: "" };

const {
  heading = "Wat je krijgt met BLURR",
  intro = "Een samenwerking met BLURR is meer dan alleen campagnes uitvoeren. Dit is wat je kunt verwachten:",
  items = [
    "Een vaste strateeg die jouw business door en door kent",
    "Wekelijkse campagne-updates en directe communicatie via Slack",
    "Volledige transparantie over mediabudget en kosten",
    "Maandelijkse diepgaande rapportage met actiepunten",
    "Toegang tot ons netwerk van designers, developers en copywriters",
    "Proactieve optimalisaties — we wachten niet tot jij vraagt",
    "Garantie op responstijd binnen 4 uur tijdens werkdagen",
  ],
  style = "check",
} = Astro.props;

const icon = icons[style];
---

<div class="cbu-wrap">
  {heading && <h2 class="cbu-heading">{heading}</h2>}
  {intro && <p class="cbu-intro">{intro}</p>}
  <ul class={`cbu-list cbu-list--${style}`}>
    {items.map((item, i) => (
      <li class="cbu-item">
        <span class="cbu-marker" aria-hidden="true">
          {style === "number" ? `${i + 1}.` : icon}
        </span>
        <span class="cbu-text">{item}</span>
      </li>
    ))}
  </ul>
</div>

<style>
  .cbu-wrap { padding: 2rem 0; }
  .cbu-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.75rem;
  }
  .cbu-intro {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin: 0 0 1.5rem;
  }
  .cbu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cbu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.85rem 1.25rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ebebeb;
  }
  .cbu-marker {
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
  }
  .cbu-list--check .cbu-marker { color: #22c55e; }
  .cbu-list--arrow .cbu-marker { color: var(--color-accent, #6366f1); }
  .cbu-list--dot .cbu-marker { color: #999; }
  .cbu-list--number .cbu-marker {
    color: var(--color-accent, #6366f1);
    min-width: 1.5rem;
  }
  .cbu-text {
    font-size: 0.975rem;
    line-height: 1.5;
    color: #333;
  }
</style>