TextColumns text

---
/**
 * TextColumns — tekst in twee of drie kolommen, met optionele eyebrow/kop,
 * dropcap en scheidingslijnen.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - columns?: Array<{ title?: string; body: string }>
 * - cols?: 2 | 3
 * - dropcap?: boolean
 * - dividers?: boolean
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  columns?: { title?: string; body: string }[];
  cols?: 2 | 3;
  dropcap?: boolean;
  dividers?: boolean;
}
const {
  eyebrow,
  headline,
  columns = [
    { title: 'Eerste kolom', body: 'Beschrijvende tekst voor de eerste kolom. Vervang deze inhoud met je eigen verhaal of toelichting.' },
    { title: 'Tweede kolom', body: 'Beschrijvende tekst voor de tweede kolom. Vervang deze inhoud met je eigen verhaal of toelichting.' },
  ],
  cols = 2,
  dropcap = false,
  dividers = false,
} = Astro.props;
const classes = [
  'txc__section',
  `txc__cols-${cols}`,
  dropcap && 'txc--dropcap',
  dividers && 'txc--dividers',
].filter(Boolean).join(' ');
---

<section class={`bl-section ${classes}`}>
  <div class="bl-inner txc__inner">
    {(eyebrow || headline) && (
      <header class="txc__header">
        {eyebrow && <p class="txc__eyebrow">{eyebrow}</p>}
        {headline && <h2 class="txc__headline">{headline}</h2>}
      </header>
    )}
    <div class="txc__grid">
      {columns.map(c => (
        <div class="txc__col">
          {c.title && <h3 class="txc__col-title">{c.title}</h3>}
          <p class="txc__body">{c.body}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.txc__header{text-align:left;margin-bottom:3rem;display:flex;flex-direction:column;gap:.75rem}
.txc__eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.txc__headline{margin:0;font-size:clamp(1.75rem,3vw,2.75rem);font-weight:800;letter-spacing:-.02em;color:var(--color-primary);line-height:1.15}
.txc__grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.txc--dividers .txc__col:not(:last-child){border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:2rem}
.txc__col-title{margin:0 0 .75rem;font-size:1.0625rem;font-weight:700;color:var(--color-primary);letter-spacing:-.01em}
.txc__body{margin:0;font-size:1rem;line-height:1.75;color:var(--color-muted)}
.txc--dropcap .txc__col:first-child .txc__body:first-letter{font-size:3.5em;font-weight:900;float:left;line-height:.85;margin-right:.1em;color:var(--color-primary)}
@media(min-width:760px){
  .txc__cols-2 .txc__grid{grid-template-columns:repeat(2,1fr)}
  .txc__cols-3 .txc__grid{grid-template-columns:repeat(3,1fr)}
  .txc--dividers .txc__col:not(:last-child){border-bottom:none;border-right:1px solid rgba(0,0,0,.08);padding-bottom:0;padding-right:2.5rem}
}
</style>