Message

setMessage(e.target.value)}
        placeholder="How can we help?"
        rows={4}
        className={cn("resize-y min-h-24 max-h-48", errors.message && "border-destructive")}
      />
      {errors.message && (
        <p className="text-xs text-destructive">{errors.message}</p>
      )}
    </div>
  )

const additionalInfoField = showAdditionalInfo && (
    <div className="flex flex-col gap-1">
      <Label htmlFor="contact-additional-info" className="text-sm text-foreground">
        Additional Info
      </Label>
      <Textarea
        id="contact-additional-info"
        value={additionalInfo}
        onChange={(e) => setAdditionalInfo(e.target.value)}
        placeholder="Any additional information..."
        rows={3}
        className={cn("resize-y min-h-20 max-h-40", errors.additionalInfo && "border-destructive")}
      />
      {errors.additionalInfo && (
        <p className="text-xs text-destructive">{errors.additionalInfo}</p>
      )}
    </div>
  )

const submitButton = (
    <Button
      onClick={handleSubmit}
      disabled={!isValid || isSubmitting}
      className="w-full"
    >
      {isSubmitting ? "Sending..." : submitLabel}
    </Button>
  )

// Map field names to components
  const fieldMap: Record<FieldName, React.ReactNode> = {
    name: nameField,
    email: emailField,
    companyName: companyNameField,
    companySize: companySizeField,
    topic: topicField,
    message: messageField,
    additionalInfo: additionalInfoField,
  }

// Map field names to visibility
  const visibilityMap: Record<FieldName, boolean> = {
    name: showName,
    email: showEmail,
    companyName: showCompanyName,
    companySize: showCompanySize,
    topic: showTopic,
    message: showMessage,
    additionalInfo: showAdditionalInfo,
  }

// Render with rows layout
  if (rows && rows.length > 0) {
    const usedFields = new Set<string>()

// Track which fields are in rows
    rows.forEach(row => {
      row.forEach(fieldName => usedFields.add(fieldName))
    })

// All possible field names in default order
    const allFieldNames: FieldName[] = ['name', 'email', 'companyName', 'companySize', 'topic', 'message', 'additionalInfo']

// Fields not in any row that should still be shown
    const remainingFields = allFieldNames.filter(
      fieldName => visibilityMap[fieldName] && !usedFields.has(fieldName)
    )

return (
      <div className="flex flex-col gap-4">
        {rows.map((row, rowIndex) => {
          // Filter to only visible fields in this row
          const visibleFieldsInRow = row.filter(
            fieldName => visibilityMap[fieldName as FieldName]
          )

if (visibleFieldsInRow.length === 0) return null

const gridCols = visibleFieldsInRow.length === 1
            ? 'grid-cols-1'
            : visibleFieldsInRow.length === 2
              ? 'grid-cols-2'
              : visibleFieldsInRow.length === 3
                ? 'grid-cols-3'
                : 'grid-cols-4'

return (
            <div key={rowIndex} className={cn("grid gap-4", gridCols)}>
              {visibleFieldsInRow.map(fieldName => (
                <div key={fieldName}>
                  {fieldMap[fieldName as FieldName]}
                </div>
              ))}
            </div>
          )
        })}
        {/* Render remaining fields not in any row */}
        {remainingFields.map(fieldName => (
          <div key={fieldName}>
            {fieldMap[fieldName]}
          </div>
        ))}
        {submitButton}
      </div>
    )
  }

// Default stacked layout
  return (
    <div className="flex flex-col gap-4">
      {nameField}
      {emailField}
      {companyNameField}
      {companySizeField}
      {topicField}
      {messageField}
      {additionalInfoField}
      {submitButton}
    </div>
  )
}