ContentHighlight content

---
interface Props {
  text: string;
  borderColor?: string;
  label?: string;
}

const {
  text = "Merken die investeren in strategische marketing groeien gemiddeld 3x sneller dan merken die dat niet doen.",
  borderColor = "#6366f1",
  label = "Inzicht",
} = Astro.props;
---

<div class="ch-wrap" style={`--ch-border: ${borderColor}`}>
  {label && <span class="ch-label">{label}</span>}
  <p class="ch-text">{text}</p>
</div>

<style>
  .ch-wrap {
    --ch-border: #6366f1;
    border-left: 4px solid var(--ch-border);
    padding: 1.5rem 2rem;
    background: #f9f9ff;
    border-radius: 0 8px 8px 0;
    margin: 2rem 0;
  }
  .ch-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent, #6366f1);
    margin-bottom: 0.75rem;
  }
  .ch-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    font-style: italic;
  }
</style>