TextSplit text

---
/**
 * TextSplit
 * Twee-kolom gesplitste tekstlayout
 */
interface Props {
  headline?: string;
  left?: string;
  right?: string;
}
const { headline = 'Hoe wij marketing anders aanpakken', left = 'De meeste bureaus werken projectmatig: je betaalt voor uren, ontvangt een deliverable en daarna is het klaar. Bij BLURR werken we op basis van resultaten en langdurige samenwerking.\n\nWe investeren tijd in het begrijpen van jouw bedrijf, markt en klanten. Die kennis stelt ons in staat om niet alleen te uitvoeren maar ook te adviseren op strategisch niveau.', right = 'Onze aanpak is gebouwd op drie pijlers: data, creativiteit en snelheid. We combineren analytisch inzicht met creatieve executie en zorgen dat we snel kunnen schakelen als de markt verandert.\n\nJe hebt altijd inzicht in wat er speelt en waarom we bepaalde keuzes maken. Geen zwarte doos maar een transparant partnerschap gericht op duurzame groei.' } = Astro.props;
---

<div class="tspl-wrap">
  {headline && <h2 class="tspl-headline">{headline}</h2>}
  <div class="tspl-grid">
    <div class="tspl-col">
      {left && left.split('\n\n').map(p => <p class="tspl-para">{p}</p>)}
    </div>
    <div class="tspl-col">
      {right && right.split('\n\n').map(p => <p class="tspl-para">{p}</p>)}
    </div>
  </div>
</div>

<style>
  .tspl-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 900px;
    padding: 40px 32px;
    font-family: system-ui, sans-serif;
  }
  .tspl-headline {
    margin: 0 0 32px;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
  }
  .tspl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  @media (max-width: 600px) {
    .tspl-grid { grid-template-columns: 1fr; }
  }
  .tspl-col { display: flex; flex-direction: column; gap: 0; }
  .tspl-para {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #374151;
  }
  .tspl-para:last-child { margin-bottom: 0; }
  .tspl-col:first-child {
    padding-right: 16px;
    border-right: 1px solid #f0f0f0;
  }
  @media (max-width: 600px) {
    .tspl-col:first-child { padding-right: 0; border-right: none; }
  }
</style>