form

src/components/ContactForm/steps/TimelineStep.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import { FormState } from '../types';
+import { AlertCircle } from 'lucide-react';
+
+interface TimelineStepProps {
+  state: FormState;
+  updateState: (updates: Partial<FormState>) => void;
+}
+
+export function TimelineStep({ state, updateState }: TimelineStepProps) {
+  return (
+    <div className="space-y-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {[
+          { id: 'asap', label: 'So schnell wie möglich', desc: 'Priorisierter Start gewünscht.' },
+          { id: '2-3-months', label: 'In 2-3 Monaten', desc: 'Normaler Projektvorlauf.' },
+          { id: '3-6-months', label: 'In 3-6 Monaten', desc: 'Langfristige Planung.' },
+          { id: 'flexible', label: 'Flexibel', desc: 'Kein fester Termindruck.' },
+        ].map(opt => (
+          <button
+            key={opt.id}
+            type="button"
+            onClick={() => updateState({ deadline: opt.id })}
+            className={`p-8 rounded-[2rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative rounded-[2rem] ${
+              state.deadline === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-200'
+            }`}
+          >
+            <h4 className={`font-bold mb-1 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
+            <p className={`text-sm ${state.deadline === opt.id ? 'text-white opacity-80' : 'text-slate-500'}`}>{opt.desc}</p>
+          </button>
+        ))}
+      </div>
+      {state.deadline === 'asap' && (
+        <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100 flex gap-4 items-start">
+          <AlertCircle className="text-slate-900 shrink-0 mt-1" size={20} />
+          <p className="text-xs text-slate-600 leading-relaxed">
+            <strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu priorisieren.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}