'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { AUTOMATION_TILES } from '../_tiles'

export function Step4Automation({ form, updateForm }: StepProps) {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-gray-900">Grad der Automatisierung</h2>
      <p className="text-sm text-gray-600">
        Wie stark greift die KI in Entscheidungen ein? Je hoeher der Automatisierungsgrad, desto strenger die regulatorischen Anforderungen.
      </p>

      <div className="grid grid-cols-1 gap-3">
        {AUTOMATION_TILES.map(item => (
          <button
            key={item.value}
            type="button"
            onClick={() => updateForm({ automation: item.value })}
            className={`p-4 rounded-xl border-2 text-left transition-all ${
              form.automation === item.value
                ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
            }`}
          >
            <div className="flex items-center gap-3 mb-1">
              <span className="text-2xl">{item.icon}</span>
              <span className="text-sm font-semibold text-gray-900">{item.label}</span>
            </div>
            <p className="text-sm text-gray-500 ml-11">{item.desc}</p>
            <p className="text-xs text-gray-400 ml-11 mt-1">Beispiele: {item.examples}</p>
          </button>
        ))}
      </div>

      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
        <div className="font-medium mb-1">Warum ist das wichtig?</div>
        <p>
          Art. 22 DSGVO regelt automatisierte Einzelentscheidungen. Vollautomatisierte Systeme, die Personen
          erheblich beeinflussen (z.B. Kreditvergabe, Bewerbungsauswahl), unterliegen strengen Auflagen:
          Informationspflicht, Recht auf menschliche Ueberpruefung und Anfechtungsmoeglichkeit.
        </p>
      </div>
    </div>
  )
}