'use client';

import * as React from 'react';
import { useState, useMemo, useEffect, useRef } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronRight, ChevronLeft, Send, Check, Sparkles, Info, ArrowRight } from 'lucide-react';
import * as QRCode from 'qrcode';
import * as confetti from 'canvas-confetti';

import { FormState, Step } from './ContactForm/types';
import { PRICING, initialState } from './ContactForm/constants';
import { calculateTotals } from '../logic/pricing/calculator';
import { PriceCalculation } from './ContactForm/components/PriceCalculation';
import { ShareModal } from './ShareModal';

// Steps
import { TypeStep } from './ContactForm/steps/TypeStep';
import { CompanyStep } from './ContactForm/steps/CompanyStep';
import { PresenceStep } from './ContactForm/steps/PresenceStep';
import { BaseStep } from './ContactForm/steps/BaseStep';
import { FeaturesStep } from './ContactForm/steps/FeaturesStep';
import { DesignStep } from './ContactForm/steps/DesignStep';
import { AssetsStep } from './ContactForm/steps/AssetsStep';
import { FunctionsStep } from './ContactForm/steps/FunctionsStep';
import { ApiStep } from './ContactForm/steps/ApiStep';
import { ContentStep } from './ContactForm/steps/ContentStep';
import { LanguageStep } from './ContactForm/steps/LanguageStep';
import { TimelineStep } from './ContactForm/steps/TimelineStep';
import { ContactStep } from './ContactForm/steps/ContactStep';
import { WebAppStep } from './ContactForm/steps/WebAppStep';

import {
  ConceptTarget,
  ConceptWebsite,
  ConceptPrototyping,
  ConceptCommunication,
  ConceptSystem,
  ConceptCode,
  ConceptAutomation,
  ConceptPrice,
  HeroArchitecture
} from './Landing/ConceptIllustrations';

export interface ContactFormProps {
  initialStepIndex?: number;
  initialState?: FormState;
  onStepChange?: (index: number) => void;
  onStateChange?: (state: FormState) => void;
}

export function ContactForm({ initialStepIndex, initialState: propState, onStepChange, onStateChange }: ContactFormProps = {}) {
  // Use a safe version of useRouter/useSearchParams that doesn't crash if not in a router context
  let router: any = null;
  let searchParams: any = null;
  try { router = useRouter(); } catch (e) { /* ignore */ }
  try { searchParams = useSearchParams(); } catch (e) { /* ignore */ }

  const [internalStepIndex, setInternalStepIndex] = useState(0);
  const [internalState, setInternalState] = useState<FormState>(initialState);

  // Sync with props if provided
  const stepIndex = initialStepIndex !== undefined ? initialStepIndex : internalStepIndex;
  const state = propState !== undefined ? propState : internalState;

  const setStepIndex = (val: number) => {
    setInternalStepIndex(val);
    onStepChange?.(val);
  };

  const setState = (val: any) => {
    if (typeof val === 'function') {
      setInternalState(prev => {
        const next = val(prev);
        onStateChange?.(next);
        return next;
      });
    } else {
      setInternalState(val);
      onStateChange?.(val);
    }
  };

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [qrCodeData, setQrCodeData] = useState<string>('');
  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
  const [hoveredStep, setHoveredStep] = useState<number | null>(null);
  const [isSticky, setIsSticky] = useState(false);
  const formContainerRef = useRef<HTMLDivElement>(null);

  const isRemotion = typeof window !== 'undefined' && (window as any).isRemotion;
  const [isClient, setIsClient] = useState(isRemotion);

  useEffect(() => {
    if (isRemotion) return;
    const handleScroll = () => {
      if (formContainerRef.current) {
        const rect = formContainerRef.current.getBoundingClientRect();
        setIsSticky(rect.top <= 80);
      }
    };
    window.addEventListener('scroll', handleScroll);
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, [isRemotion]);

  useEffect(() => {
    if (!isRemotion) setIsClient(true);
  }, [isRemotion]);

  // URL Binding
  useEffect(() => {
    if (!searchParams) return;
    const step = searchParams.get('step');
    if (step) setStepIndex(parseInt(step));

    const config = searchParams.get('config');
    if (config) {
      try {
        const decoded = JSON.parse(decodeURIComponent(escape(atob(config))));
        setInternalState((s: FormState) => ({ ...s, ...decoded }));
      } catch (e) {
        console.error("Failed to decode config", e);
      }
    }
  }, [searchParams]);

  const currentUrl = useMemo(() => {
    if (!isClient) return '';
    const params = new URLSearchParams();
    params.set('step', stepIndex.toString());

    const configData = {
      projectType: state.projectType,
      companyName: state.companyName,
      employeeCount: state.employeeCount,
      existingWebsite: state.existingWebsite,
      socialMedia: state.socialMedia,
      socialMediaUrls: state.socialMediaUrls,
      existingDomain: state.existingDomain,
      wishedDomain: state.wishedDomain,
      websiteTopic: state.websiteTopic,
      selectedPages: state.selectedPages,
      otherPages: state.otherPages,
      otherPagesCount: state.otherPagesCount,
      features: state.features,
      otherFeatures: state.otherFeatures,
      otherFeaturesCount: state.otherFeaturesCount,
      functions: state.functions,
      otherFunctions: state.otherFunctions,
      otherFunctionsCount: state.otherFunctionsCount,
      apiSystems: state.apiSystems,
      otherTech: state.otherTech,
      otherTechCount: state.otherTechCount,
      assets: state.assets,
      otherAssets: state.otherAssets,
      otherAssetsCount: state.otherAssetsCount,
      cmsSetup: state.cmsSetup,
      languagesList: state.languagesList,
      deadline: state.deadline,
      designVibe: state.designVibe,
      colorScheme: state.colorScheme,
      targetAudience: state.targetAudience,
      userRoles: state.userRoles,
      dataSensitivity: state.dataSensitivity,
      platformType: state.platformType,
      dontKnows: state.dontKnows,
      visualStaging: state.visualStaging,
      complexInteractions: state.complexInteractions
    };

    const stateString = btoa(unescape(encodeURIComponent(JSON.stringify(configData))));
    params.set('config', stateString);

    return `${window.location.origin}${window.location.pathname}?${params.toString()}`;
  }, [state, stepIndex, isClient]);

  useEffect(() => {
    if (isRemotion) return;
    if (currentUrl && router) {
      router.replace(currentUrl, { scroll: false });
      QRCode.toDataURL(currentUrl, { margin: 1, width: 200 }).then(setQrCodeData);
    }
  }, [currentUrl, router, isRemotion]);

  const totals = useMemo(() => {
    return calculateTotals(state, PRICING);
  }, [state]);

  const { totalPrice, monthlyPrice, totalPagesCount } = totals;

  const updateState = (updates: Partial<FormState>) => {
    setState((s: FormState) => ({ ...s, ...updates }));
  };

  const toggleItem = (list: string[], id: string) => {
    return list.includes(id) ? list.filter(i => i !== id) : [...list, id];
  };

  const scrollToTop = () => {
    if (isRemotion) return;
    if (formContainerRef.current) {
      const offset = 120;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = formContainerRef.current.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }
  };

  const nextStep = () => {
    if (stepIndex < activeSteps.length - 1) {
      setStepIndex(stepIndex + 1);
      if (!isRemotion) setTimeout(scrollToTop, 50);
    }
  };

  const prevStep = () => {
    if (stepIndex > 0) {
      setStepIndex(stepIndex - 1);
      if (!isRemotion) setTimeout(scrollToTop, 50);
    }
  };

  const steps: Step[] = [
    { id: 'type', title: 'Das Ziel', description: 'Was möchten Sie realisieren?', illustration: <ConceptTarget className="w-full h-full" />, chapter: 'strategy' },
    { id: 'company', title: 'Unternehmen', description: 'Wer sind Sie?', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'strategy' },
    { id: 'presence', title: 'Präsenz', description: 'Bestehende Kanäle von {company}.', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'strategy' },
    { id: 'features', title: 'Die Systeme', description: 'Welche inhaltlichen Bereiche planen wir für {company}?', illustration: <ConceptPrototyping className="w-full h-full" />, chapter: 'scope' },
    { id: 'base', title: 'Die Seiten', description: 'Welche Seiten benötigen wir?', illustration: <ConceptWebsite className="w-full h-full" />, chapter: 'scope' },
    { id: 'design', title: 'Design-Wünsche', description: 'Wie soll die neue Präsenz von {company} wirken?', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'creative' },
    { id: 'assets', title: 'Ihre Assets', description: 'Was bringen Sie bereits mit?', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'creative' },
    { id: 'functions', title: 'Die Logik', description: 'Welche Funktionen werden benötigt?', illustration: <ConceptCode className="w-full h-full" />, chapter: 'tech' },
    { id: 'api', title: 'Schnittstellen', description: 'Datenaustausch mit Drittsystemen.', illustration: <ConceptAutomation className="w-full h-full" />, chapter: 'tech' },
    { id: 'content', title: 'Die Pflege', description: 'Wer kümmert sich um die Daten?', illustration: <ConceptPrice className="w-full h-full" />, chapter: 'tech' },
    { id: 'language', title: 'Sprachen', description: 'Globale Reichweite planen.', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'tech' },
    { id: 'timeline', title: 'Zeitplan', description: 'Wann soll das Projekt live gehen?', illustration: <HeroArchitecture className="w-full h-full" />, chapter: 'final' },
    { id: 'contact', title: 'Abschluss', description: 'Erzählen Sie mir mehr über Ihr Vorhaben.', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'final' },
    { id: 'webapp', title: 'Web App Details', description: 'Spezifische Anforderungen für {company}.', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'scope' },
  ];

  const chapters = [
    { id: 'strategy', title: 'Strategie' },
    { id: 'scope', title: 'Umfang' },
    { id: 'creative', title: 'Design' },
    { id: 'tech', title: 'Technik' },
    { id: 'final', title: 'Start' },
  ];

  const activeSteps = useMemo(() => {
    if (state.projectType === 'website') {
      return steps.filter(s => s.id !== 'webapp');
    }
    // Web App flow
    return [
      steps.find(s => s.id === 'type')!,
      steps.find(s => s.id === 'company')!,
      steps.find(s => s.id === 'presence')!,
      steps.find(s => s.id === 'webapp')!,
      { ...steps.find(s => s.id === 'functions')!, title: 'Funktionen', description: 'Kern-Features Ihrer Anwendung.' },
      { ...steps.find(s => s.id === 'api')!, title: 'Integrationen', description: 'Anbindung an bestehende Systeme.' },
      steps.find(s => s.id === 'timeline')!,
      steps.find(s => s.id === 'contact')!,
    ];
  }, [state.projectType, state.companyName]);

  useEffect(() => {
    if (stepIndex >= activeSteps.length) setStepIndex(activeSteps.length - 1);
  }, [activeSteps, stepIndex]);

  const renderStepContent = () => {
    const currentStep = activeSteps[stepIndex];
    switch (currentStep.id) {
      case 'type':
        return <TypeStep state={state} updateState={updateState} />;
      case 'company':
        return <CompanyStep state={state} updateState={updateState} />;
      case 'presence':
        return <PresenceStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'base':
        return <BaseStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'features':
        return <FeaturesStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'design':
        return <DesignStep state={state} updateState={updateState} />;
      case 'assets':
        return <AssetsStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'functions':
        return <FunctionsStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'api':
        return <ApiStep state={state} updateState={updateState} toggleItem={toggleItem} />;
      case 'content':
        return <ContentStep state={state} updateState={updateState} />;
      case 'language':
        return <LanguageStep state={state} updateState={updateState} />;
      case 'timeline':
        return <TimelineStep state={state} updateState={updateState} />;
      case 'contact':
        return <ContactStep state={state} updateState={updateState} />;
      case 'webapp':
        return <WebAppStep state={state} updateState={updateState} />;
      default: return null;
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (stepIndex === activeSteps.length - 1) {
      // Handle submission
      const mailBody = `
        Name: ${state.name}
        Email: ${state.email}
        Rolle: ${state.role}
        Projekt: ${state.projectType}
        Konfiguration: ${currentUrl}
        
        Nachricht:
        ${state.message}
      `;
      window.location.href = `mailto:marc@mintel.me?subject=Projektanfrage: ${state.name}&body=${encodeURIComponent(mailBody)}`;

      // Celebration!
      const duration = 5 * 1000;
      const animationEnd = Date.now() + duration;
      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

      const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;

      const interval: any = !isRemotion ? setInterval(function () {
        const timeLeft = animationEnd - Date.now();

        if (timeLeft <= 0) {
          return clearInterval(interval);
        }

        const particleCount = 50 * (timeLeft / duration);
        (confetti as any)({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
        (confetti as any)({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
      }, 250) : null;

      setIsSubmitted(true);
    } else {
      nextStep();
    }
  };

  const handleShare = () => {
    setIsShareModalOpen(true);
  };

  if (isSubmitted) {
    return (
      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="p-12 md:p-24 bg-slate-900 text-white rounded-[4rem] text-center space-y-12">
        <div className="w-24 h-24 bg-white text-slate-900 rounded-full flex items-center justify-center mx-auto"><Check size={48} strokeWidth={3} /></div>
        <div className="space-y-6"><h2 className="text-5xl font-bold tracking-tight">Anfrage gesendet!</h2><p className="text-slate-400 text-2xl max-w-2xl mx-auto leading-relaxed">Vielen Dank, {state.name.split(' ')[0]}. Ich melde mich innerhalb von 24 Stunden bei Ihnen.</p></div>
        <button type="button" onClick={() => { setIsSubmitted(false); setStepIndex(0); setState(initialState); }} className="text-slate-400 hover:text-white transition-colors underline underline-offset-8 text-lg focus:outline-none overflow-hidden relative rounded-full">Neue Anfrage starten</button>
      </motion.div>
    );
  }

  return (
    <div ref={formContainerRef} className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
      <div className="lg:col-span-8 space-y-12">
        <div
          className={`sticky top-[80px] z-40 transition-all duration-500 ${isSticky ? 'bg-white/80 backdrop-blur-md py-4 -mx-12 px-12 -mt-px border-b border-slate-50' : 'bg-transparent py-6 border-none'}`}
        >
          <div className={`flex flex-col ${isSticky ? 'gap-4' : 'gap-8'}`}>
            <div className="flex flex-row items-center justify-between gap-8">
              <div className="flex items-center gap-6">
                <motion.div
                  animate={{
                    scale: isSticky ? 0.7 : 1,
                    width: isSticky ? 80 : 128,
                    height: isSticky ? 80 : 128,
                    borderRadius: isSticky ? '1.75rem' : '2.5rem'
                  }}
                  className="shrink-0 bg-slate-50 flex items-center justify-center relative shadow-inner z-10"
                >
                  <div className="p-3 w-full h-full flex items-center justify-center overflow-hidden rounded-[inherit]">
                    {activeSteps[stepIndex].illustration}
                  </div>
                  <AnimatePresence>
                    {!isSticky && (
                      <motion.div
                        initial={{ scale: 0, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        exit={{ scale: 0, opacity: 0 }}
                        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                        className="absolute -bottom-2 -right-2 w-10 h-10 bg-slate-900 text-white rounded-full flex items-center justify-center font-bold text-sm border-4 border-white shadow-xl z-20"
                      >
                        {stepIndex + 1}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>
                <div className="space-y-1 min-w-0">
                  <motion.div
                    animate={{ opacity: isSticky ? 0 : 1, height: isSticky ? 0 : 'auto', marginBottom: isSticky ? 0 : 4 }}
                    className="flex items-center gap-3 overflow-hidden"
                  >
                    <span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 flex items-center gap-2">
                      <Sparkles size={12} className="text-slate-300" />
                      Schritt {stepIndex + 1} / {activeSteps.length}
                    </span>
                  </motion.div>
                  <motion.h3
                    animate={{
                      fontSize: isSticky ? '1.5rem' : '2.25rem',
                      lineHeight: isSticky ? '2rem' : '2.5rem',
                      color: isSticky ? '#0f172a' : '#0f172a'
                    }}
                    className="font-black tracking-tight truncate"
                  >
                    {activeSteps[stepIndex].title.replace('{company}', state.companyName || 'Ihr Unternehmen')}
                  </motion.h3>
                  <motion.p
                    animate={{
                      fontSize: isSticky ? '0.875rem' : '1.125rem',
                      lineHeight: isSticky ? '1.25rem' : '1.75rem'
                    }}
                    className="text-slate-500 leading-relaxed max-w-2xl truncate overflow-hidden"
                  >
                    {activeSteps[stepIndex].description.replace('{company}', state.companyName || 'Ihr Unternehmen')}
                  </motion.p>
                </div>
              </div>

              <div className="flex items-center gap-3 shrink-0">
                {stepIndex > 0 ? (
                  <motion.button
                    whileHover={{ x: -3, backgroundColor: '#f8fafc' }}
                    whileTap={{ scale: 0.95 }}
                    type="button"
                    onClick={prevStep}
                    className={`flex items-center justify-center gap-2 rounded-full border-2 border-slate-100 transition-all font-bold focus:outline-none whitespace-nowrap ${isSticky ? 'px-5 py-2 text-sm' : 'px-8 py-4 text-lg'}`}
                  >
                    <ChevronLeft size={isSticky ? 16 : 20} /> Zurück
                  </motion.button>
                ) : <div className={isSticky ? 'w-0' : 'w-32'} />}

                {stepIndex < activeSteps.length - 1 ? (
                  <motion.button
                    id="focus-target-next"
                    whileHover={{ x: 3, scale: 1.02 }}
                    whileTap={{ scale: 0.95 }}
                    type="button"
                    onClick={nextStep}
                    className={`flex items-center justify-center gap-2 rounded-full bg-slate-900 text-white hover:bg-slate-800 transition-all font-bold shadow-xl shadow-slate-200 focus:outline-none group whitespace-nowrap ${isSticky ? 'px-6 py-2 text-sm' : 'px-10 py-4 text-lg'}`}
                  >
                    Weiter <ChevronRight size={isSticky ? 16 : 20} className="transition-transform group-hover:translate-x-1" />
                  </motion.button>
                ) : (
                  <motion.button
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    type="submit"
                    form="contact-form"
                    disabled={!state.email || !state.name}
                    className={`flex items-center justify-center gap-2 rounded-full bg-slate-900 text-white hover:bg-slate-800 transition-all font-bold disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-slate-200 focus:outline-none group whitespace-nowrap ${isSticky ? 'px-6 py-2 text-sm' : 'px-10 py-4 text-lg'}`}
                  >
                    Senden <Send size={isSticky ? 16 : 20} className="transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" />
                  </motion.button>
                )}
              </div>
            </div>

            <div className="relative">
              <div className={`flex gap-1.5 transition-all duration-500 ${isSticky ? 'h-1' : 'h-2.5'}`}>
                {activeSteps.map((step, i) => (
                  <div
                    key={i}
                    className="flex-1 h-full flex items-center relative"
                    onMouseEnter={() => setHoveredStep(i)}
                    onMouseLeave={() => setHoveredStep(null)}
                  >
                    <button
                      type="button"
                      onClick={() => {
                        setStepIndex(i);
                        setTimeout(scrollToTop, 50);
                      }}
                      className={`w-full h-full rounded-full transition-all duration-700 ${i === stepIndex ? 'bg-slate-900 scale-y-150 shadow-lg shadow-slate-200' :
                        i < stepIndex ? 'bg-slate-400' : 'bg-slate-100'
                        } cursor-pointer focus:outline-none p-0 border-none relative group`}
                    >
                      <AnimatePresence>
                        {hoveredStep === i && (
                          <motion.div
                            initial={{ opacity: 0, y: 5, x: "-50%", scale: 0.9 }}
                            animate={{ opacity: 1, y: isSticky ? -35 : -40, x: "-50%", scale: 1 }}
                            exit={{ opacity: 0, y: 5, x: "-50%", scale: 0.9 }}
                            className="absolute left-1/2 px-3 py-1.5 bg-white text-slate-900 text-[10px] font-black uppercase tracking-[0.15em] rounded-md whitespace-nowrap pointer-events-none z-50 shadow-[0_10px_30px_rgba(0,0,0,0.1)] border border-slate-100"
                          >
                            {step.title.replace('{company}', state.companyName || 'Unternehmen')}
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </button>
                  </div>
                ))}
              </div>

              {!isSticky && (
                <div className="flex justify-between mt-4 px-1">
                  {chapters.map((chapter, idx) => {
                    const chapterSteps = activeSteps.filter(s => s.chapter === chapter.id);
                    if (chapterSteps.length === 0) return null;

                    const firstStepIdx = activeSteps.indexOf(chapterSteps[0]);
                    const lastStepIdx = activeSteps.indexOf(chapterSteps[chapterSteps.length - 1]);
                    const isActive = stepIndex >= firstStepIdx && stepIndex <= lastStepIdx;

                    return (
                      <div
                        key={chapter.id}
                        className={`text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-500 ${isActive ? 'text-slate-900' : 'text-slate-300'
                          }`}
                      >
                        {chapter.title}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>

        <form id="contact-form" onSubmit={handleSubmit} className="min-h-[450px] relative pt-12">

          <AnimatePresence mode="wait">
            <motion.div
              key={activeSteps[stepIndex].id}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -20 }}
              transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
            >
              {renderStepContent()}
            </motion.div>
          </AnimatePresence>

          {/* Contextual Help / Why this matters */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8 }}
            className="mt-24 p-10 bg-slate-50 rounded-[3rem] border border-slate-100 flex gap-8 items-start relative overflow-hidden"
          >
            <div className="absolute top-0 right-0 p-12 opacity-[0.03] pointer-events-none">
              <Sparkles size={160} />
            </div>
            <div className="w-14 h-14 shrink-0 bg-white rounded-2xl flex items-center justify-center text-slate-900 shadow-sm relative z-10">
              <Info size={28} />
            </div>
            <div className="space-y-2 relative z-10">
              <h4 className="text-xl font-bold text-slate-900">Warum das wichtig ist</h4>
              <p className="text-lg text-slate-500 leading-relaxed max-w-2xl">
                {stepIndex === 0 && "Die Wahl zwischen Website und Web App bestimmt die technologische Basis. Web Apps nutzen oft Frameworks wie React oder Next.js für hochgradig interaktive Prozesse, während Websites auf Content-Präsentation optimiert sind."}
                {stepIndex === 1 && "Ihr Unternehmen und dessen Größe helfen mir, die Skalierbarkeit und die notwendige Infrastruktur von Beginn an richtig zu dimensionieren."}
                {stepIndex === 2 && "Bestehende Kanäle geben Aufschluss über Ihre aktuelle Markenidentität. Wir können diese entweder konsequent weiterführen oder einen bewussten Neuanfang wagen."}
                {stepIndex > 2 && "Jede Auswahl beeinflusst die Komplexität und damit auch die Entwicklungszeit. Mein Ziel ist es, für Sie das beste Preis-Leistungs-Verhältnis zu finden."}
              </p>
            </div>
          </motion.div>
        </form>
      </div>
      <PriceCalculation
        state={state}
        totals={totals}
        isClient={isClient}
        qrCodeData={qrCodeData}
        onShare={handleShare}
      />

      <ShareModal
        isOpen={isShareModalOpen}
        onClose={() => setIsShareModalOpen(false)}
        url={currentUrl}
        qrCodeData={qrCodeData}
      />
    </div>
  );
}
