'use client';

import * as React from 'react';
import { FormState, ProjectType } from '../types';
import { ConceptWebsite, ConceptSystem } from '../../Landing/ConceptIllustrations';
import { motion } from 'framer-motion';
import { Reveal } from '../../Reveal';

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

export function TypeStep({ state, updateState }: TypeStepProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
      {[
        { id: 'website', label: 'Website', desc: 'Klassische Webpräsenz, Portfolio oder Blog.', illustration: <ConceptWebsite className="w-20 h-20 mb-6" /> },
        { id: 'web-app', label: 'Web App', desc: 'Internes Tool, Dashboard oder Prozess-Logik.', illustration: <ConceptSystem className="w-20 h-20 mb-6" /> },
      ].map((type, index) => (
        <Reveal key={type.id} width="100%" delay={index * 0.1}>
          <motion.button
            whileHover={{ y: -8, boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.15)' }}
            whileTap={{ scale: 0.98 }}
            type="button"
            onClick={() => updateState({ projectType: type.id as ProjectType })}
            className={`w-full p-10 rounded-[3rem] border-2 text-left transition-all duration-500 focus:outline-none overflow-hidden relative group ${
              state.projectType === type.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-300'
            }`}
          >
            <div className={`transition-transform duration-500 group-hover:scale-110 ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.illustration}</div>
            <h4 className={`text-4xl font-bold mb-4 ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.label}</h4>
            <p className={`text-xl leading-relaxed ${state.projectType === type.id ? 'text-slate-200' : 'text-slate-500'}`}>{type.desc}</p>
            
            {state.projectType === type.id && (
              <motion.div 
                layoutId="activeType"
                className="absolute top-6 right-6 w-4 h-4 bg-white rounded-full"
              />
            )}
          </motion.button>
        </Reveal>
      ))}
    </div>
  );
}
