TextInset text

---
/**
 * TextInset
 * Tekst met ingesprongen inset citaat/aside
 */
interface Props {
  body?: string;
  aside?: string;
}
const { body = 'De meeste bedrijven weten wel dát ze aan marketing moeten doen, maar niet hoe ze het slim aanpakken. Ze posten op social media zonder strategie, adverteren zonder tracking en publiceren content zonder duidelijk doel. Het resultaat: veel activiteit, weinig groei.\n\nBij BLURR beginnen we met de vraag waarom voordat we iets doen. Welk probleem lossen we op? Wie heeft dat probleem? Hoe zoekt die persoon naar een oplossing? Pas als we die vragen beantwoord hebben, beginnen we aan de uitvoering.', aside = 'Goede marketing is geen geluk — het is een systeem. En systemen zijn ontworpen, niet gevonden.' } = Astro.props;
---

<div class="tins-wrap">
  <div class="tins-body">
    {body.split('\n\n').map(para => (
      <p>{para}</p>
    ))}
  </div>
  {aside && (
    <aside class="tins-aside">
      <p>{aside}</p>
    </aside>
  )}
</div>

<style>
  .tins-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 680px;
    padding: 32px;
    font-family: system-ui, sans-serif;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 32px;
    align-items: start;
  }
  @media (max-width: 640px) {
    .tins-wrap { grid-template-columns: 1fr; }
  }
  .tins-body p {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #374151;
  }
  .tins-body p:last-child { margin-bottom: 0; }
  .tins-aside {
    border-left: 3px solid var(--color-accent);
    padding: 16px 20px;
    background: #f5f3ff;
    border-radius: 0 8px 8px 0;
    position: sticky;
    top: 24px;
  }
  .tins-aside p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
    color: #4b5563;
    font-weight: 500;
  }
</style>