export function Step1({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <p className="text-slate-600">{t('fa_step1_desc')}</p>
      <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <p className="text-sm text-blue-700">{t('fa_wizard_next')}</p>
      </div>
    </div>
  )
}

export function Step2({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step2_title')} *</label>
        <input type="text" className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step2_subtitle')}</label>
          <input type="number" className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step2_subtitle')}</label>
          <input type="number" className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
      </div>
    </div>
  )
}

export function Step3({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step3_desc')}</label>
        <select className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
          <option>16 Mbit/s</option>
          <option>16-50 Mbit/s</option>
          <option>50-100 Mbit/s</option>
          <option>100-250 Mbit/s</option>
          <option>250+ Mbit/s</option>
        </select>
      </div>
    </div>
  )
}

export function Step4({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step4_desc')} *</label>
        <textarea className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows={3} />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step4_subtitle')} *</label>
        <textarea className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows={4} />
      </div>
    </div>
  )
}

export function Step5({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <p className="text-slate-600">{t('fa_step5_desc')}</p>
      <div className="border border-slate-200 rounded-lg overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-4 py-2 text-left font-medium text-slate-700">{t('fa_step5_subtitle')}</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-slate-200">
              <td className="px-4 py-2">
                <button className="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
                  +
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}

export function Step6({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step6_desc')}</label>
        <div className="flex items-center gap-4">
          <input type="range" min="50" max="100" defaultValue="90" className="flex-1" />
          <span className="text-lg font-semibold text-slate-900">90%</span>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="p-4 bg-slate-50 rounded-lg">
          <div className="text-sm text-slate-500">{t('fa_step6_subtitle')}</div>
          <div className="text-xl font-bold text-slate-900">0,00 EUR</div>
        </div>
        <div className="p-4 bg-blue-50 rounded-lg">
          <div className="text-sm text-blue-600">{t('fa_step6_title')}</div>
          <div className="text-xl font-bold text-blue-700">0,00 EUR</div>
        </div>
      </div>
    </div>
  )
}

export function Step7({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step7_subtitle')} *</label>
          <input type="date" className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step7_subtitle')} *</label>
          <input type="date" className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
      </div>
    </div>
  )
}

export function Step8({ t }: { t: (key: string) => string }) {
  return (
    <div className="space-y-6">
      <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
        <h3 className="font-semibold text-green-800">{t('fa_step8_title')}</h3>
        <p className="text-sm text-green-700 mt-1">{t('fa_step8_desc')}</p>
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('fa_step8_subtitle')} *</label>
        <textarea className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows={4} />
      </div>
      <div className="space-y-3">
        <label className="flex items-center gap-3">
          <input type="checkbox" className="w-4 h-4 rounded border-slate-300" />
          <span className="text-sm text-slate-700">{t('fa_info_text')}</span>
        </label>
      </div>
    </div>
  )
}