FormUpload Forms

---
/**
 * FormUpload — uploadformulier met naam/e-mail, toelichting en een dropzone.
 *
 * Props:
 * - heading?: string
 * - sub?: string
 * - dropTitle?: string
 * - dropHint?: string
 * - acceptMeta?: string
 * - accept?: string
 * - submitLabel?: string
 */
interface Props {
  heading?: string;
  sub?: string;
  dropTitle?: string;
  dropHint?: string;
  acceptMeta?: string;
  accept?: string;
  submitLabel?: string;
}
const {
  heading = 'Bestanden uploaden',
  sub = 'Upload je logo, huisstijlgids of campagnemateriaal zodat we direct aan de slag kunnen.',
  dropTitle = 'Klik om bestanden te kiezen',
  dropHint = 'of sleep ze hier naartoe',
  acceptMeta = 'Toegestaan: .pdf, .jpg, .png, .ai, .psd, .zip · Max 25MB per bestand',
  accept = '.pdf,.jpg,.png,.ai,.psd,.zip',
  submitLabel = 'Bestanden versturen',
} = Astro.props;
---

<section class="bl-section ful">
  <div class="bl-inner bl-inner--narrow ful-inner">
    <div class="ful-header">
      <h2 class="ful-heading">{heading}</h2>
      <p class="ful-subtext">{sub}</p>
    </div>
    <form class="ful-form" novalidate>
      <div class="ful-field">
        <label class="ful-label" for="ful-name">Jouw naam *</label>
        <input class="ful-input" type="text" id="ful-name" name="name" placeholder="Jouw naam" required autocomplete="name" />
      </div>
      <div class="ful-field">
        <label class="ful-label" for="ful-email">E-mailadres *</label>
        <input class="ful-input" type="email" id="ful-email" name="email" placeholder="Je e-mailadres" required autocomplete="email" />
      </div>
      <div class="ful-field">
        <label class="ful-label" for="ful-context">Toelichting (optioneel)</label>
        <textarea class="ful-textarea" id="ful-context" name="context" rows="3" placeholder="Wat zijn we met de bestanden?"></textarea>
      </div>
      <div class="ful-dropzone">
        <label class="ful-drop-label" for="ful-files">
          <div class="ful-drop-icon" aria-hidden="true">⬆</div>
          <div class="ful-drop-text"><strong>{dropTitle}</strong> {dropHint}</div>
          <div class="ful-drop-meta">{acceptMeta}</div>
          <input class="ful-file-input" type="file" id="ful-files" name="files" accept={accept} multiple aria-label="Bestanden kiezen" />
        </label>
      </div>
      <button class="ful-submit" type="submit">{submitLabel}</button>
    </form>
  </div>
</section>

<style>
.ful-header{margin-bottom:1.75rem}
.ful-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.ful-subtext{font-size:1rem;color:#555;margin:0;line-height:1.6}
.ful-form{display:flex;flex-direction:column;gap:1.25rem}
.ful-field{display:flex;flex-direction:column;gap:.4rem}
.ful-label{font-size:.95rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.ful-input,.ful-textarea{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.ful-input:focus,.ful-textarea:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.ful-textarea{resize:vertical;min-height:80px}
.ful-dropzone{border:2px dashed #ddd;border-radius:12px;transition:border-color .2s,background .2s}
.ful-dropzone:hover{border-color:var(--color-accent, #6366f1);background:#f9f9ff}
.ful-drop-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;text-align:center;cursor:pointer;gap:.5rem}
.ful-drop-icon{font-size:2.25rem;margin-bottom:.25rem;color:#888}
.ful-drop-text{font-size:1rem;color:#374151}
.ful-drop-text strong{color:var(--color-accent, #6366f1)}
.ful-drop-meta{font-size:.8125rem;color:#555}
.ful-file-input{display:none}
.ful-submit{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;align-self:flex-start}
.ful-submit:hover{opacity:.88}
</style>