IconWithText icon

---
/**
 * IconWithText
 * Icoon links, koptekst + tekst rechts
 */
interface Props {
  icon?: string;
  headline?: string;
  sub?: string;
  body?: string;
}
const { icon = '🎯', headline = 'Marketing die rendeert', sub = 'Voor ambitieuze bedrijven die willen groeien', body = 'BLURR is geen traditioneel bureau. We werken als verlengstuk van jouw team — strategisch, transparant en volledig gericht op resultaten die tellen. Van de eerste campagne tot een volledig geautomatiseerd marketing ecosysteem.' } = Astro.props;
---

<div class="iwt-wrap">
  <div class="iwt-icon-col">
    <div class="iwt-icon-ring">
      <span class="iwt-icon">{icon}</span>
    </div>
  </div>
  <div class="iwt-text-col">
    {sub && <span class="iwt-sub">{sub}</span>}
    {headline && <h2 class="iwt-headline">{headline}</h2>}
    {body && <p class="iwt-body">{body}</p>}
  </div>
</div>

<style>
  .iwt-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 40px 32px;
    font-family: system-ui, sans-serif;
    max-width: 720px;
  }
  @media (max-width: 560px) {
    .iwt-wrap { flex-direction: column; }
  }
  .iwt-icon-col { flex-shrink: 0; }
  .iwt-icon-ring {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(99,102,241,0.3);
  }
  .iwt-icon { font-size: 2rem; }
  .iwt-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .iwt-sub {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
  }
  .iwt-headline {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
  }
  .iwt-body {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #4b5563;
  }
</style>