AboutSplit Sections

---
/**
 * AboutSplit
 * Over ons sectie: grote afbeelding links, tekst + bulletpoints rechts.
 * Optioneel omgekeerd (afbeelding rechts).
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  image: string;
  imageAlt?: string;
  points?: string[];
  cta?: { label: string; href: string };
  reverse?: boolean;
}
const { eyebrow, headline, sub, image, imageAlt = '', points = [], cta, reverse = false } = Astro.props;
---
<section class={`abs ${reverse ? 'abs--reverse' : ''}`}>
  <div class="abs-inner">
    <div class="abs-image">
      <img src={image} alt={imageAlt} class="abs-img" />
    </div>
    <div class="abs-content">
      {eyebrow && <span class="abs-eyebrow">{eyebrow}</span>}
      <h2 class="abs-headline">{headline}</h2>
      {sub && <p class="abs-sub">{sub}</p>}
      {points.length > 0 && (
        <ul class="abs-points">
          {points.map(p => <li class="abs-point">{p}</li>)}
        </ul>
      )}
      {cta && <a href={cta.href} class="abs-cta">{cta.label} →</a>}
    </div>
  </div>
</section>
<style>
  .abs { padding: 5rem 2rem; background: #fff; }
  .abs-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .abs--reverse .abs-image { order: 2; }
  .abs--reverse .abs-content { order: 1; }
  .abs-image { border-radius: 1rem; overflow: hidden; }
  .abs-img { width: 100%; height: 480px; object-fit: cover; display: block; }
  .abs-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin-bottom: 1rem; display: block; }
  .abs-headline { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: #0a0a0a; margin: 0 0 1rem; }
  .abs-sub { font-size: 1.0625rem; color: #6b7280; line-height: 1.65; margin: 0 0 2rem; }
  .abs-points { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .abs-point { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: #374151; line-height: 1.5; }
  .abs-point::before { content: '→'; color: var(--color-accent,#6366f1); font-weight: 700; flex-shrink: 0; }
  .abs-cta { display: inline-flex; align-items: center; font-size: 0.9375rem; font-weight: 700; color: var(--color-accent,#6366f1); text-decoration: none; }
  .abs-cta:hover { gap: 0.25rem; }
  @media (max-width: 768px) { .abs-inner { grid-template-columns: 1fr; gap: 2rem; } .abs--reverse .abs-image, .abs--reverse .abs-content { order: unset; } .abs-img { height: 300px; } }
</style>