MediaFeature Sections

---
/**
 * MediaFeature
 * Grote afbeelding met aan de andere kant een headline + bulletpoints.
 * imagePosition bepaalt of de afbeelding links of rechts staat.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  image: string;
  imageAlt?: string;
  points: { title?: string; body: string; icon?: string }[];
  cta?: { label: string; href: string };
  imagePosition?: 'left' | 'right';
}
const { eyebrow, headline, sub, image, imageAlt = '', points, cta, imagePosition = 'right' } = Astro.props;
---
<section class={`mf mf--img-${imagePosition}`}>
  <div class="mf-inner">
    <div class="mf-image">
      <img src={image} alt={imageAlt} class="mf-img" />
    </div>
    <div class="mf-content">
      {eyebrow && <span class="mf-eyebrow">{eyebrow}</span>}
      <h2 class="mf-headline">{headline}</h2>
      {sub && <p class="mf-sub">{sub}</p>}
      <ul class="mf-points">
        {points.map(p => (
          <li class="mf-point">
            <span class="mf-point-icon">{p.icon ?? '✓'}</span>
            <div>
              {p.title && <strong class="mf-point-title">{p.title}</strong>}
              <p class="mf-point-body">{p.body}</p>
            </div>
          </li>
        ))}
      </ul>
      {cta && <a href={cta.href} class="mf-cta">{cta.label} →</a>}
    </div>
  </div>
</section>
<style>
  .mf { padding: 5rem 2rem; background: #fff; }
  .mf-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .mf--img-left .mf-image { order: -1; }
  .mf--img-right .mf-image { order: 1; }
  .mf-img { width: 100%; border-radius: 1rem; object-fit: cover; height: 500px; display: block; }
  .mf-eyebrow { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin-bottom: 1rem; }
  .mf-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; }
  .mf-sub { font-size: 1.0625rem; color: #6b7280; line-height: 1.65; margin: 0 0 2rem; }
  .mf-points { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .mf-point { display: flex; align-items: flex-start; gap: 0.875rem; }
  .mf-point-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(99,102,241,0.1); color: var(--color-accent,#6366f1); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 0.125rem; }
  .mf-point-title { display: block; font-size: 0.9375rem; font-weight: 700; color: #0a0a0a; margin-bottom: 0.25rem; }
  .mf-point-body { font-size: 0.875rem; color: #6b7280; line-height: 1.55; margin: 0; }
  .mf-cta { display: inline-flex; align-items: center; font-size: 0.9375rem; font-weight: 700; color: var(--color-accent,#6366f1); text-decoration: none; }
  @media (max-width: 768px) { .mf-inner { grid-template-columns: 1fr; gap: 2rem; } .mf-img { height: 280px; } }
</style>