'use client';

import * as React from 'react';
import { FormState } from '../types';
import { EMPLOYEE_OPTIONS } from '../constants';
import { motion } from 'framer-motion';
import { Building2, Users } from 'lucide-react';
import { Reveal } from '../../Reveal';

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

export function CompanyStep({ state, updateState }: CompanyStepProps) {
  return (
    <div className="space-y-16">
      <Reveal width="100%" delay={0.1}>
        <div className="space-y-8">
          <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 shadow-sm">
              <Building2 size={24} />
            </div>
            <h4 className="text-2xl font-bold text-slate-900">Unternehmen</h4>
          </div>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Name des Unternehmens</label>
            <input 
              type="text" 
              placeholder="z.B. Muster GmbH" 
              value={state.companyName} 
              onChange={(e) => updateState({ companyName: e.target.value })} 
              className="w-full p-8 bg-white border border-slate-100 rounded-[3rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl" 
            />
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <div className="space-y-8">
          <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 shadow-sm">
              <Users size={24} />
            </div>
            <h4 className="text-2xl font-bold text-slate-900">Mitarbeiteranzahl</h4>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {EMPLOYEE_OPTIONS.map((option, index) => (
              <motion.button
                key={option.id}
                whileHover={{ y: -5, boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
                whileTap={{ scale: 0.95 }}
                type="button"
                onClick={() => updateState({ employeeCount: option.id })}
                className={`p-6 rounded-[2rem] border-2 transition-all duration-300 font-bold text-lg ${
                  state.employeeCount === option.id ? 'border-slate-900 bg-slate-900 text-white shadow-lg' : 'border-slate-100 bg-white hover:border-slate-300 text-slate-600'
                }`}
              >
                {option.label}
              </motion.button>
            ))}
          </div>
        </div>
      </Reveal>
    </div>
  );
}
