FormQuick Forms

---
/**
 * FormQuick — compacte inline e-mail-capture: één invoer, één knop, korte sub.
 *
 * Props:
 * - placeholder?: string
 * - submitLabel?: string
 * - sub?: string
 */
interface Props {
  placeholder?: string;
  submitLabel?: string;
  sub?: string;
}
const {
  placeholder = 'Jouw e-mailadres',
  submitLabel = 'Aan de slag',
  sub = 'Gratis en vrijblijvend',
} = Astro.props;
---

<section class="bl-section fqk">
  <div class="bl-inner fqk-inner">
    <form class="fqk__form" novalidate>
      <div class="fqk__wrap">
        <input class="fqk__input" type="email" placeholder={placeholder} required />
        <button class="fqk__btn" type="submit">{submitLabel}</button>
      </div>
      {sub && <p class="fqk__sub">{sub}</p>}
    </form>
  </div>
</section>

<style>
.fqk-inner{display:flex;justify-content:center}
.fqk__form{width:100%;max-width:520px;display:flex;flex-direction:column;gap:.6rem}
.fqk__wrap{display:flex;border:1.5px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;transition:border-color .2s}
.fqk__wrap:focus-within{border-color:var(--color-accent, #6366f1)}
.fqk__input{flex:1;padding:.85rem 1.1rem;border:none;background:transparent;font-size:1rem;color:var(--color-primary, #0a0a0a);outline:none;font-family:inherit;min-width:0}
.fqk__input::placeholder{color:#888}
.fqk__btn{padding:.85rem 1.4rem;background:var(--color-accent, #6366f1);color:#fff;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap;font-family:inherit}
.fqk__btn:hover{opacity:.88}
.fqk__sub{font-size:.875rem;color:#555;text-align:center;margin:0}
@media(max-width:480px){.fqk__wrap{flex-direction:column}.fqk__btn{border-radius:0 0 8px 8px}}
</style>