"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-4">
      {[
        {
          id: "website",
          label: "Website",
          desc: "Klassische Webpräsenz, Portfolio oder Blog.",
          illustration: <ConceptWebsite className="w-12 h-12 mb-3" />,
        },
        {
          id: "web-app",
          label: "Web App",
          desc: "Internes Tool, Dashboard oder Prozess-Logik.",
          illustration: <ConceptSystem className="w-12 h-12 mb-3" />,
        },
      ].map((type, index) => (
        <Reveal key={type.id} width="100%" delay={index * 0.1}>
          <motion.button
            id={`focus-target-${type.id}`}
            whileHover={{ y: -8 }}
            whileTap={{ scale: 0.98 }}
            type="button"
            onClick={() => updateState({ projectType: type.id as ProjectType })}
            className={`w-full p-8 rounded-2xl border-2 text-left transition-all duration-700 focus:outline-none overflow-hidden relative group ${
              state.projectType === type.id
                ? "border-slate-900 bg-slate-900 text-white shadow-2xl shadow-slate-400"
                : "border-slate-100 bg-white hover:border-slate-300 hover:shadow-xl"
            }`}
          >
            <div
              className={`transition-all duration-700 group-hover:scale-110 group-hover:rotate-3 ${state.projectType === type.id ? "text-white" : "text-slate-900"}`}
            >
              {type.illustration}
            </div>
            <div className="flex items-center gap-3 mb-3">
              <h4
                className={`text-2xl font-bold tracking-tight ${state.projectType === type.id ? "text-white" : "text-slate-900"}`}
              >
                {type.label}
              </h4>
              <span
                className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest ${state.projectType === type.id ? "bg-white/20 text-white" : "bg-slate-100 text-slate-500"}`}
              >
                Grundlage
              </span>
            </div>
            <p
              className={`text-base 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-4 right-4 w-5 h-5 bg-white rounded-full shadow-lg flex items-center justify-center"
              >
                <div className="w-2 h-2 bg-slate-900 rounded-full" />
              </motion.div>
            )}
          </motion.button>
        </Reveal>
      ))}
    </div>
  );
}
