ContactSplitAccent Forms

---
interface Props {
  image: string;
  imageAlt?: string;
  headline?: string;
  body?: string;
  submitLabel?: string;
}
const {
  image,
  imageAlt = '',
  headline = 'Neem contact op',
  body = 'Ik help je graag bij het overwinnen van mentale en fysieke obstakels in je dagelijkse leven.',
  submitLabel = 'Word lid',
} = Astro.props;
---
<section class="csa">
  <div class="csa-container">
    <div class="csa-card">
      <div class="csa-image" style={`background-image: url('${image}')`} aria-label={imageAlt}></div>

      <form class="csa-form" onsubmit="event.preventDefault();">
        <h2>{headline}</h2>
        <p>{body}</p>

        <label>
          E-mail (verplicht)
          <input type="email" required name="email" autocomplete="email" />
        </label>

        <label>
          Bericht (verplicht)
          <textarea required name="message" rows="3"></textarea>
        </label>

        <button class="csa-btn">{submitLabel}</button>
      </form>
    </div>
  </div>
</section>

<style>
  .csa {
    --ink: #131313;
    --ink-2: #2d2d2d;
    --accent: #ecf86e;
    --white: #ffffff;
    --radius: 28px;
    --pill: 999px;
    padding-block: clamp(48px, 8vw, 96px);
    background: #f4f4f2;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
  }
  .csa-container { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
  .csa-card { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .csa-image {
    background-size: cover; background-position: center;
    border-radius: var(--radius); min-height: 540px;
  }
  .csa-form {
    background: var(--accent); border-radius: var(--radius);
    padding: clamp(32px, 4vw, 56px);
    display: flex; flex-direction: column; gap: 18px;
    color: var(--ink);
  }
  .csa-form h2 { font-size: clamp(36px, 4vw, 56px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
  .csa-form p { max-width: 420px; opacity: 0.8; margin: 0; line-height: 1.55; }
  .csa-form label {
    display: flex; flex-direction: column; gap: 8px;
    font-size: 14px; color: var(--ink-2); margin-top: 12px;
  }
  .csa-form input, .csa-form textarea {
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.4);
    font: inherit; font-size: 16px; color: var(--ink);
    padding: 8px 0; resize: none; outline: none;
    transition: border-color .15s;
    font-family: inherit;
  }
  .csa-form input:focus, .csa-form textarea:focus { border-bottom-color: var(--ink); }
  .csa-btn {
    align-self: flex-start; margin-top: 16px;
    background: var(--ink); color: var(--white);
    border: 0; padding: 14px 26px; border-radius: var(--pill);
    font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  @media (max-width: 800px) {
    .csa-card { grid-template-columns: 1fr; }
    .csa-image { min-height: 320px; }
  }
</style>