FormMini Forms

---
/**
 * FormMini — compacte inline nieuwsbrief-aanmelding: label, e-mailveld + knop, hint.
 *
 * Props:
 * - label?: string
 * - placeholder?: string
 * - button?: string
 * - hint?: string
 * - action?: string
 */
interface Props {
  label?: string;
  placeholder?: string;
  button?: string;
  hint?: string;
  action?: string;
}
const {
  label = 'Nieuwsbrief',
  placeholder = 'Jouw e-mailadres',
  button = 'Aanmelden',
  hint = 'Geen spam. Afmelden kan altijd.',
  action = '#',
} = Astro.props;
---

<section class="bl-section fmn">
  <div class="bl-inner fmn-inner">
    <div class="fmn-wrap">
      {label && <span class="fmn-label">{label}</span>}
      <form class="fmn-form" action={action} novalidate>
        <input class="fmn-input" type="email" name="email" placeholder={placeholder} required autocomplete="email" aria-label={placeholder} />
        <button class="fmn-btn" type="submit">{button}</button>
      </form>
      {hint && <p class="fmn-hint">{hint}</p>}
    </div>
  </div>
</section>

<style>
.fmn-wrap{display:inline-flex;flex-direction:column;gap:.5rem}
.fmn-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent, #6366f1)}
.fmn-form{display:flex;align-items:stretch;background:#fff;border:1.5px solid #ddd;border-radius:8px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fmn-form:focus-within{border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fmn-input{flex:1;padding:.7rem .9rem;border:none;font-size:1rem;color:var(--color-primary, #0a0a0a);background:transparent;font-family:inherit;min-width:0}
.fmn-input:focus{outline:none}
.fmn-btn{padding:.7rem 1.1rem;background:var(--color-accent, #6366f1);color:#fff;border:none;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap;flex-shrink:0}
.fmn-btn:hover{opacity:.88}
.fmn-hint{font-size:.8125rem;color:#6b7280;margin:0}
</style>