ContentWithSidebar content

---
interface SidebarItem {
  label: string;
  value?: string;
}

interface Props {
  heading?: string;
  body?: string;
  sidebarTitle?: string;
  sidebarItems?: SidebarItem[];
  cta?: { label: string; href: string };
}

const {
  heading = "Waarom bedrijven kiezen voor BLURR",
  body = `Marketing is geen kostenpost — het is de motor van je groei. Maar alleen als het goed wordt gedaan. Bij BLURR combineren we strategie, creatie en technologie om campagnes te bouwen die echt werken.

We geloven niet in one-size-fits-all. Elk bedrijf heeft een uniek verhaal en een uniek publiek. Daarom beginnen we altijd met luisteren. Pas als we begrijpen waar jij naartoe wilt, beginnen we met bouwen.

Onze klanten kiezen niet alleen voor onze expertise — ze kiezen voor transparantie, snelheid en een directe lijn naar het team dat aan hun merk werkt.`,
  sidebarTitle = "Snelle feiten",
  sidebarItems = [
    { label: "Opgericht", value: "2019" },
    { label: "Klanten geholpen", value: "140+" },
    { label: "Team", value: "18 specialisten" },
    { label: "Gem. ROAS", value: "4.8×" },
    { label: "Locatie", value: "Amsterdam" },
  ],
  cta = { label: "Plan een gesprek", href: "/contact" },
} = Astro.props;
---

<div class="cws-wrap">
  <div class="cws-main">
    <h2 class="cws-heading">{heading}</h2>
    {body.split("\n\n").map(para => (
      <p class="cws-para">{para}</p>
    ))}
  </div>
  <aside class="cws-sidebar">
    <div class="cws-sidebar-inner">
      <h3 class="cws-sidebar-title">{sidebarTitle}</h3>
      <dl class="cws-facts">
        {sidebarItems.map(item => (
          <div class="cws-fact">
            <dt class="cws-fact-label">{item.label}</dt>
            {item.value && <dd class="cws-fact-value">{item.value}</dd>}
          </div>
        ))}
      </dl>
      {cta && (
        <a class="cws-cta" href={cta.href}>{cta.label}</a>
      )}
    </div>
  </aside>
</div>

<style>
  .cws-wrap {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
    padding: 2.5rem 0;
    align-items: start;
  }
  @media (max-width: 768px) {
    .cws-wrap {
      grid-template-columns: 1fr;
    }
  }
  .cws-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.5rem;
  }
  .cws-para {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin: 0 0 1.25rem;
  }
  .cws-sidebar-inner {
    background: #f9f9f9;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 1.75rem;
    position: sticky;
    top: 2rem;
  }
  .cws-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .cws-facts {
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cws-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
  }
  .cws-fact-label { color: #777; }
  .cws-fact-value {
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
  }
  .cws-cta {
    display: block;
    text-align: center;
    background: var(--color-accent, #6366f1);
    color: #fff;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity 0.2s;
  }
  .cws-cta:hover { opacity: 0.88; }
</style>