</div>

<div data-field="files">
      <span class="mb-1 block text-sm font-medium text-stein-700">{t(T.mitmachen_label_files)}</span>
      <input
        bind:this={fileInputEl}
        type="file"
        multiple
        accept={FILE_ACCEPT}
        class="sr-only"
        onchange={onFilesChosen}
        tabindex="-1"
      />
      
      <button
        type="button"
        class="inline-flex h-9 items-center justify-center gap-2 rounded-xs border-[1.5px] border-wald-500 bg-transparent px-4 py-2 text-sm font-semibold text-wald-500 transition-colors duration-150 hover:bg-wald-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-300 focus-visible:ring-offset-2 active:bg-wald-100"
        onclick={() => fileInputEl?.click()}
      >{t(T.mitmachen_files_add)}</button>
      <p class="mt-1 text-[0.7rem] text-stein-500">
        {t(T.mitmachen_files_help, { n: LIMITS.MAX_FILES, mb: LIMITS.MAX_FILE_MB })}
      </p>
      {#if files.length > 0}
        <ul class="mt-2 space-y-1">
          {#each files as f, idx}
            <li class="flex items-center gap-2 rounded-sm border border-stein-200 bg-stein-50 px-2 py-1 text-xs">
              <span class="min-w-0 flex-1 truncate">{f.name}</span>
              <span class="shrink-0 text-stein-500">{fmtSize(f.size)}</span>
              <button
                type="button"
                class="shrink-0 text-stein-500 underline hover:text-stein-700"
                onclick={() => removeFile(idx)}
              >{t(T.mitmachen_files_remove)}</button>
            </li>
          {/each}
        </ul>
      {/if}
      {#if submitAttempted && fileError}
        <p class="mt-1 text-[0.7rem] text-error" role="alert">{t(fileError.key, fileError.params)}</p>
      {/if}
    </div>

<div data-field="consent" class="pt-1">
      <Checkbox
        size="sm"
        name="consent"
        bind:checked={consent}
        label={t(T.mitmachen_label_consent)}
      />
      {#if showError("consent")}
        <p class="mt-1 text-[0.7rem] text-error" role="alert">{showError("consent")}</p>
      {/if}
      <p class="mt-1 text-[0.7rem] leading-snug text-stein-500">{t(T.mitmachen_privacy_note)}</p>
    </div>

{#if TURNSTILE_ENABLED}
      <div bind:this={turnstileEl} class="pt-1"></div>
    {/if}

{#if serverError}
      <div class="rounded-sm border border-error bg-error-subtle px-3 py-2 text-sm text-error shadow-sm" role="alert">
        {serverError}
      </div>
    {/if}

<div class="flex items-center gap-3 pt-2">
      <Button
        type="submit"
        variant="primary"
        size="sm"
        loading={formState === "pending"}
        disabled={!isValid && submitAttempted}
        label={formState === "pending" ? t(T.contact_submitting) : t(T.mitmachen_submit)}
      />
      {#if !isValid && submitAttempted && !serverError}
        <span class="text-xs text-error">{t(T.contact_fix_errors)}</span>
      {/if}
    </div>
  </form>
{/if}