ContentTwoUp content

---
interface Block {
  icon?: string;
  title: string;
  text: string;
  link?: { href: string; label: string };
}

interface Props {
  blocks?: [Block, Block];
}

const {
  blocks = [
    {
      icon: "🚀",
      title: "Snelle lancering",
      text: "Binnen twee weken staat je campagne live. We werken met bewezen templates en processen zodat we geen tijd verliezen aan eindeloze revisies en goedkeuringsrondes.",
      link: { href: "/diensten", label: "Bekijk ons aanbod" },
    },
    {
      icon: "📊",
      title: "Data-gedreven beslissingen",
      text: "Elk besluit baseren we op cijfers, niet op meningen. We koppelen alle kanalen aan één dashboard zodat je altijd weet wat werkt en waar de kansen liggen.",
      link: { href: "/cases", label: "Zie onze resultaten" },
    },
  ],
} = Astro.props;
---

<div class="ctu-wrap">
  {blocks.map(block => (
    <div class="ctu-block">
      {block.icon && <div class="ctu-icon" aria-hidden="true">{block.icon}</div>}
      <h3 class="ctu-title">{block.title}</h3>
      <p class="ctu-text">{block.text}</p>
      {block.link && (
        <a class="ctu-link" href={block.link.href}>
          {block.link.label} →
        </a>
      )}
    </div>
  ))}
</div>

<style>
  .ctu-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }
  @media (max-width: 600px) {
    .ctu-wrap { grid-template-columns: 1fr; }
  }
  .ctu-block {
    padding: 2rem;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #ebebeb;
  }
  .ctu-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .ctu-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.75rem;
  }
  .ctu-text {
    font-size: 0.975rem;
    line-height: 1.7;
    color: #555;
    margin: 0 0 1.25rem;
  }
  .ctu-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent, #6366f1);
    text-decoration: none;
  }
  .ctu-link:hover {
    text-decoration: underline;
  }
</style>