ContentIntro content

---
interface Props {
  eyebrow?: string;
  heading?: string;
  lead?: string;
  subtext?: string;
  align?: "left" | "center";
}

const {
  eyebrow = "Over BLURR",
  heading = "We bouwen marketing die écht werkt",
  lead = "BLURR is een full-service digitaal marketingbureau uit Amsterdam. We combineren strategisch denken met creatieve executie om merken te laten groeien in een steeds competitiever landschap.",
  subtext = "Opgericht in 2019, groeiden we uit van een klein performance-team naar een bureau van 18 specialisten. We werken voor ambitieuze merken in e-commerce, B2B en scale-ups.",
  align = "left",
} = Astro.props;
---

<div class={`cin-wrap cin-wrap--${align}`}>
  {eyebrow && <span class="cin-eyebrow">{eyebrow}</span>}
  <h1 class="cin-heading">{heading}</h1>
  <p class="cin-lead">{lead}</p>
  {subtext && <p class="cin-subtext">{subtext}</p>}
</div>

<style>
  .cin-wrap {
    padding: 3rem 0 2rem;
    max-width: 860px;
  }
  .cin-wrap--center {
    text-align: center;
    margin: 0 auto;
  }
  .cin-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent, #6366f1);
    margin-bottom: 1rem;
  }
  .cin-heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
  }
  .cin-lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 1.25rem;
    font-weight: 400;
  }
  .cin-subtext {
    font-size: 1rem;
    line-height: 1.75;
    color: #666;
    margin: 0;
  }
</style>