'use client';

import * as React from 'react';
import { FormState } from '../types';
import { Globe, Minus, Plus, Info } from 'lucide-react';
import { motion } from 'framer-motion';

interface LanguageStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
}

export function LanguageStep({ state, updateState }: LanguageStepProps) {
  const basePriceExplanation = "Jede zusätzliche Sprache erhöht den Gesamtaufwand für Design, Entwicklung und Qualitätssicherung um ca. 20%. Dies deckt die technische Implementierung der Übersetzungsschicht sowie die Anpassung von Layouts für unterschiedliche Textlängen ab.";

  return (
    <div className="space-y-8">
      <div className="p-8 bg-white border border-slate-100 rounded-[2rem] space-y-6">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900">
            <Globe size={24} />
          </div>
          <div>
            <h4 className="text-xl font-bold text-slate-900">Mehrsprachigkeit</h4>
            <p className="text-sm text-slate-500">In wie vielen Sprachen soll Ihre Website verfügbar sein?</p>
          </div>
        </div>

        <div className="flex items-center gap-8 py-4">
          <button 
            type="button" 
            onClick={() => updateState({ languagesCount: Math.max(1, state.languagesCount - 1) })} 
            className="w-16 h-16 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
          >
            <Minus size={24} />
          </button>
          <div className="flex flex-col items-center">
            <span className="text-5xl font-bold text-slate-900">{state.languagesCount}</span>
            <span className="text-xs font-bold uppercase tracking-widest text-slate-400 mt-2">
              {state.languagesCount === 1 ? 'Sprache' : 'Sprachen'}
            </span>
          </div>
          <button 
            type="button" 
            onClick={() => updateState({ languagesCount: state.languagesCount + 1 })} 
            className="w-16 h-16 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
          >
            <Plus size={24} />
          </button>
        </div>
      </div>

      <motion.div 
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="p-8 bg-slate-900 text-white rounded-[2rem] space-y-4"
      >
        <div className="flex items-center gap-3 text-slate-400">
          <Info size={18} />
          <span className="text-xs font-bold uppercase tracking-widest">Warum dieser Faktor?</span>
        </div>
        <p className="text-sm leading-relaxed text-slate-300">
          {basePriceExplanation}
        </p>
        {state.languagesCount > 1 && (
          <div className="pt-4 border-t border-white/10">
            <div className="flex justify-between items-center">
              <span className="text-sm font-medium">Aktueller Aufschlagsfaktor:</span>
              <span className="text-xl font-bold text-white">+{((state.languagesCount - 1) * 20)}%</span>
            </div>
          </div>
        )}
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="p-6 bg-white border border-slate-100 rounded-2xl">
          <h5 className="font-bold text-slate-900 mb-2">Technische Basis</h5>
          <p className="text-xs text-slate-500 leading-relaxed">
            Wir nutzen moderne i18n-Frameworks, die SEO-optimierte URLs für jede Sprache generieren (z.B. /en, /fr).
          </p>
        </div>
        <div className="p-6 bg-white border border-slate-100 rounded-2xl">
          <h5 className="font-bold text-slate-900 mb-2">Content Management</h5>
          <p className="text-xs text-slate-500 leading-relaxed">
            Falls ein CMS gewählt wurde, können Sie alle Übersetzungen bequem selbst pflegen.
          </p>
        </div>
      </div>
    </div>
  );
}