TextLetter text

---
interface Props {
  greeting?: string;
  body: string;
  closing?: string;
  signature?: string;
}
const { greeting = "Beste ondernemer,", body = "Je hebt dit niet voor niets gelezen. Je weet dat er meer in zit dan je nu haalt uit je marketing. Misschien heb je eerder slechte ervaringen gehad met bureaus die meer beloven dan ze leveren. Dat begrijpen wij.\n\nWij vragen je dan ook niet om ons te vertrouwen. We vragen je om één gesprek aan te gaan — zonder verplichtingen, zonder verkooppraat. Gewoon een eerlijk gesprek over jouw situatie en wat er mogelijk is.", closing = "Met oprechte groet,", signature = "Joost & het BLURR team" } = Astro.props;
---

<div class="tx-letter">
  {greeting && <p class="tx-letter__greeting">{greeting}</p>}
  {body.split('\n\n').map(para => (
    <p class="tx-letter__para">{para}</p>
  ))}
  {closing && <p class="tx-letter__closing">{closing}</p>}
  {signature && <p class="tx-letter__sig">{signature}</p>}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-letter {
    max-width: 600px;
    padding: 2rem 2.5rem;
    background: #fafafa;
    border-radius: 0.75rem;
    border: 1px solid #e5e5e5;
  }
  .tx-letter__greeting {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  .tx-letter__para {
    margin: 0 0 1rem;
    font-size: 0.975rem;
    color: #444;
    line-height: 1.75;
  }
  .tx-letter__para:last-of-type { margin-bottom: 1.5rem; }
  .tx-letter__closing {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    color: #666;
  }
  .tx-letter__sig {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    font-style: italic;
  }
</style>