@if (sent()) {
  <app-success-state
    context="contact"
    (action)="resetForm()"
  ></app-success-state>
} @else {
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- Request Type -->
    <div class="ui-form-group">
      <label class="ui-form-label"
        >{{ "CONTACT.REQ_TYPE_LABEL" | translate }} *</label
      >
      <select formControlName="requestType" class="ui-form-control">
        <option *ngFor="let type of requestTypes" [value]="type.value">
          {{ type.label | translate }}
        </option>
      </select>
    </div>

    <div class="ui-form-row">
      <!-- Phone -->
      <app-input
        formControlName="email"
        type="email"
        [label]="'CONTACT.LABEL_EMAIL' | translate"
        [placeholder]="'CONTACT.PLACEHOLDER_EMAIL' | translate"
        class="col"
      ></app-input>
      <!-- Phone -->
      <app-input
        formControlName="phone"
        type="tel"
        [label]="'CONTACT.PHONE' | translate"
        [placeholder]="'CONTACT.PLACEHOLDER_PHONE' | translate"
        class="col"
      ></app-input>
    </div>

    <!-- User Type Selector (Segmented Control) -->
    <app-toggle-selector
      class="mb-4"
      [options]="customerTypeOptions"
      [selectedValue]="isCompany"
      (selectionChange)="setCompanyMode($event)"
    ></app-toggle-selector>

    <!-- Personal Name (Only if NOT Company) -->
    <app-input
      *ngIf="!isCompany"
      formControlName="name"
      [label]="'CONTACT.LABEL_NAME' | translate"
      [placeholder]="'CONTACT.PLACEHOLDER_NAME' | translate"
    ></app-input>

    <!-- Company Fields (Only if Company) -->
    <div *ngIf="isCompany" class="ui-field-stack ui-field-stack--indented">
      <app-input
        formControlName="companyName"
        [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'"
        [placeholder]="'CONTACT.PLACEHOLDER_COMPANY' | translate"
      ></app-input>
      <app-input
        formControlName="referencePerson"
        [label]="('CONTACT.REF_PERSON' | translate) + ' *'"
        [placeholder]="'CONTACT.PLACEHOLDER_REF_PERSON' | translate"
      ></app-input>
    </div>

    <div class="ui-form-group">
      <label class="ui-form-label">{{
        "CONTACT.LABEL_MESSAGE" | translate
      }}</label>
      <textarea
        formControlName="message"
        class="ui-form-control"
        rows="4"
      ></textarea>
    </div>

    <!-- File Upload Section -->
    <div class="ui-form-group">
      <label class="ui-form-label">{{
        "CONTACT.UPLOAD_LABEL" | translate
      }}</label>
      <p class="ui-form-hint">{{ "CONTACT.UPLOAD_HINT" | translate }}</p>
      <p class="ui-form-hint upload-privacy-note">
        {{ "LEGAL.CONSENT.UPLOAD_NOTICE_PREFIX" | translate }}
        <a href="/privacy" target="_blank" rel="noopener">{{
          "LEGAL.CONSENT.UPLOAD_NOTICE_LINK" | translate
        }}</a
        >.
      </p>

      <div
        class="drop-zone"
        (click)="fileInput.click()"
        (dragover)="onDragOver($event)"
        (drop)="onDrop($event)"
      >
        <input
          #fileInput
          type="file"
          multiple
          (change)="onFileSelected($event)"
          hidden
          [accept]="acceptedFormats"
        />
        <p>{{ "CONTACT.DROP_FILES" | translate }}</p>
      </div>

      <div class="file-grid" *ngIf="files().length > 0">
        <div class="file-item" *ngFor="let file of files(); let i = index">
          <button
            type="button"
            class="remove-btn"
            (click)="removeFile(i)"
            [attr.aria-label]="'CONTACT.REMOVE_FILE' | translate"
          >
            ×
          </button>
          <img
            *ngIf="file.type === 'image'"
            [src]="file.url"
            class="preview-img"
          />
          <video
            *ngIf="file.type === 'video'"
            [src]="file.url"
            class="preview-video"
            muted
            playsinline
            preload="metadata"
          ></video>
          <div
            *ngIf="file.type !== 'image' && file.type !== 'video'"
            class="file-icon"
          >
            <span *ngIf="file.type === 'pdf'">{{
              "CONTACT.FILE_TYPE_PDF" | translate
            }}</span>
            <span *ngIf="file.type === '3d'">{{
              "CONTACT.FILE_TYPE_3D" | translate
            }}</span>
            <span *ngIf="file.type === 'document'">{{
              "CONTACT.FILE_TYPE_DOC" | translate
            }}</span>
            <span *ngIf="file.type === 'other'">{{
              "CONTACT.FILE_TYPE_FILE" | translate
            }}</span>
          </div>
          <div class="file-name" [title]="file.file.name">
            {{ file.file.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="legal-consent">
      <label class="ui-checkbox">
        <input type="checkbox" formControlName="acceptLegal" />
        <span class="ui-checkbox__mark"></span>
        <span>
          {{ "LEGAL.CONSENT.LABEL_PREFIX" | translate }}
          <a href="/terms" target="_blank" rel="noopener">{{
            "LEGAL.CONSENT.TERMS_LINK" | translate
          }}</a>
          {{ "LEGAL.CONSENT.AND" | translate }}
          <a href="/privacy" target="_blank" rel="noopener">{{
            "LEGAL.CONSENT.PRIVACY_LINK" | translate
          }}</a
          >.
        </span>
      </label>
      <div
        class="consent-error"
        *ngIf="
          form.get('acceptLegal')?.invalid && form.get('acceptLegal')?.touched
        "
      >
        {{ "LEGAL.CONSENT.REQUIRED_ERROR" | translate }}
      </div>
    </div>

    <div class="ui-actions ui-actions--end">
      <app-button type="submit" [disabled]="form.invalid || sent()">
        {{
          sent()
            ? ("CONTACT.MSG_SENT" | translate)
            : ("CONTACT.SEND" | translate)
        }}
      </app-button>
    </div>
  </form>
}
