Pierwszy wrzut promptstory

components/StepContext.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { WizardState, Step } from '../types';
+import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';
+
+interface StepContextProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep }) => {
+  
+  const handleContextSelect = (context: WizardState['context']) => {
+    // If selecting Relacja, clear storyStyle and move on
+    if (context === 'relacja') {
+        updateData({ context, storyStyle: null });
+        setTimeout(nextStep, 150);
+    } else {
+        // If selecting Opowiesc, just update context and stay for sub-step
+        updateData({ context, storyStyle: null }); // Reset style if switching back to opowiesc
+    }
+  };
+
+  const handleStyleSelect = (storyStyle: WizardState['storyStyle']) => {
+      updateData({ storyStyle });
+      setTimeout(nextStep, 150);
+  };
+
+  return (
+    <div className="space-y-8 animate-fade-in">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Kontekst</h2>
+        <p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
+        
+        {/* Main Context Selection */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <button
+            onClick={() => handleContextSelect('relacja')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.context === 'relacja'
+                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <Camera size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'relacja' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
+            <span className="text-xl font-bold tracking-tight">Relacja (Vlog)</span>
+            <span className="text-sm opacity-75 mt-2 font-medium">Tu i teraz, emocje, akcja.</span>
+          </button>
+
+          <button
+            onClick={() => handleContextSelect('opowiesc')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.context === 'opowiesc'
+                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <BookOpen size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'opowiesc' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
+            <span className="text-xl font-bold tracking-tight">Opowieść</span>
+            <span className="text-sm opacity-75 mt-2 font-medium">Wspomnienia, refleksja, morał.</span>
+          </button>
+        </div>
+
+        {/* Sub-step for Opowiesc: Story Style */}
+        {data.context === 'opowiesc' && (
+            <div className="animate-fade-in border-t border-gray-100 pt-8">
+                <h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Styl Opowieści</h3>
+                <p className="text-gray-500 mb-6 text-sm">Nadaj historii unikalny klimat.</p>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <button
+                        onClick={() => handleStyleSelect('noir')}
+                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
+                        data.storyStyle === 'noir'
+                            ? 'border-gray-800 bg-gray-900 text-white shadow-lg'
+                            : 'border-gray-200 hover:border-gray-800 hover:shadow-md text-gray-600 bg-white'
+                        }`}
+                    >
+                        <Ghost size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'noir' ? 'text-white' : 'text-gray-400 group-hover:text-gray-900'}`} />
+                        <div>
+                            <span className="text-lg font-bold tracking-tight block">Kryminał NOIR</span>
+                            <span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>Mrok, deszcz, cyniczny detektyw.</span>
+                        </div>
+                    </button>
+
+                    <button
+                        onClick={() => handleStyleSelect('fantasy')}
+                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
+                        data.storyStyle === 'fantasy'
+                            ? 'border-purple-600 bg-purple-50 text-purple-700'
+                            : 'border-gray-200 hover:border-purple-600 hover:shadow-md text-gray-600 bg-white'
+                        }`}
+                    >
+                        <Sword size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'fantasy' ? 'text-purple-600' : 'text-gray-400 group-hover:text-purple-600'}`} />
+                        <div>
+                            <span className="text-lg font-bold tracking-tight block">Przygoda Fantasy</span>
+                            <span className="text-xs text-gray-500 block mt-1">Epicka podróż, magia, artefakty.</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default StepContext;

components/StepData.tsx

@@ -0,0 +1,128 @@
+import React, { useRef, useState } from 'react';
+import { WizardState } from '../types';
+import { UploadCloud, FileJson, AlertCircle } from 'lucide-react';
+import { parseGpxFile } from '../utils/gpxUtils';
+
+interface StepDataProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+}
+
+const StepData: React.FC<StepDataProps> = ({ data, updateData }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isParsing, setIsParsing] = useState(false);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.name.toLowerCase().endsWith('.gpx')) {
+      setError('Proszę wybrać plik .gpx');
+      return;
+    }
+
+    setError(null);
+    setIsParsing(true);
+
+    try {
+      const stats = await parseGpxFile(file);
+      updateData({ stats });
+    } catch (err) {
+      console.error(err);
+      setError('Błąd parsowania pliku GPX. Spróbuj innego pliku lub wpisz dane ręcznie.');
+    } finally {
+      setIsParsing(false);
+    }
+  };
+
+  const handleStatsChange = (key: keyof typeof data.stats, value: string) => {
+    updateData({
+      stats: {
+        ...data.stats,
+        [key]: value
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-10 animate-fade-in">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Dane Aktywności</h2>
+        <p className="text-gray-500 mb-8 text-lg">Wgraj plik GPX lub wpisz dane ręcznie.</p>
+      </div>
+
+      {/* Upload Zone */}
+      <div 
+        className={`border-2 border-dashed rounded-md p-10 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
+          error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
+        }`}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <input 
+          type="file" 
+          ref={fileInputRef} 
+          onChange={handleFileChange} 
+          accept=".gpx"
+          className="hidden" 
+        />
+        
+        {isParsing ? (
+           <div className="animate-pulse flex flex-col items-center">
+             <FileJson size={48} className="text-[#EA4420] mb-4 stroke-1" />
+             <p className="text-[#EA4420] font-semibold">Analizowanie pliku...</p>
+           </div>
+        ) : (
+          <>
+            <UploadCloud size={48} className="text-gray-300 group-hover:text-[#EA4420] mb-4 stroke-1 transition-colors" />
+            <p className="text-gray-900 font-bold text-lg">Kliknij, aby wgrać plik GPX</p>
+            <p className="text-gray-500 text-sm mt-2">lub przeciągnij i upuść tutaj</p>
+          </>
+        )}
+      </div>
+
+      {error && (
+        <div className="flex items-center space-x-2 text-red-600 bg-red-50 p-4 rounded-md text-sm border border-red-100">
+          <AlertCircle size={18} />
+          <span className="font-medium">{error}</span>
+        </div>
+      )}
+
+      {/* Manual Override Inputs */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div>
+          <label className="block text-sm font-bold text-gray-700 mb-2">Dystans</label>
+          <input 
+            type="text" 
+            value={data.stats.distance}
+            onChange={(e) => handleStatsChange('distance', e.target.value)}
+            className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
+            placeholder="np. 12.5 km"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-bold text-gray-700 mb-2">Czas trwania</label>
+          <input 
+            type="text" 
+            value={data.stats.duration}
+            onChange={(e) => handleStatsChange('duration', e.target.value)}
+            className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
+            placeholder="np. 1h 45m"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-bold text-gray-700 mb-2">Przewyższenia</label>
+          <input 
+            type="text" 
+            value={data.stats.elevation}
+            onChange={(e) => handleStatsChange('elevation', e.target.value)}
+            className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
+            placeholder="np. 350m"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepData;

components/StepDetails.tsx

@@ -0,0 +1,581 @@
+
+import React, { useRef, useState, useEffect } from 'react';
+import { WizardState } from '../types';
+import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints } from 'lucide-react';
+import { processFile } from '../utils/fileUtils';
+
+// --- HELPER COMPONENT: PLACE AUTOCOMPLETE INPUT (WIDGET VERSION) ---
+interface PlaceAutocompleteInputProps {
+    value: string;
+    onChange: (val: string, preview?: string) => void;
+    placeholder: string;
+    icon: React.ReactNode;
+    scriptLoaded: boolean;
+    disabled?: boolean;
+    onError?: (msg: string) => void;
+    addressPreview?: string;
+}
+
+const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value, onChange, placeholder, icon, scriptLoaded, disabled, onError, addressPreview }) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const autocompleteRef = useRef<any>(null);
+
+    // Initialize Google Autocomplete Widget
+    useEffect(() => {
+        if (!scriptLoaded || !inputRef.current || !(window as any).google || autocompleteRef.current) return;
+
+        try {
+            const google = (window as any).google;
+            
+            // Use the standard Autocomplete widget attached to the input
+            const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
+                fields: ["place_id", "geometry", "name", "formatted_address"],
+                types: ["geocode", "establishment"]
+            });
+            
+            autocompleteRef.current = autocomplete;
+
+            autocomplete.addListener("place_changed", () => {
+                const place = autocomplete.getPlace();
+                
+                if (!place.geometry) {
+                    return;
+                }
+
+                // FIX: Use formatted_address as fallback if name is empty/missing
+                const name = place.name || place.formatted_address || "";
+                const address = place.formatted_address;
+                
+                // Update parent state
+                onChange(name, address);
+            });
+        } catch (e) {
+            console.error("Autocomplete init error", e);
+            if(onError) onError("Błąd inicjalizacji widgetu Google Maps.");
+        }
+    }, [scriptLoaded, onError, onChange]);
+
+    return (
+        <div className="relative w-full">
+            <div className="absolute left-3 top-3.5 z-10 pointer-events-none">
+                {icon}
+            </div>
+            <input 
+                ref={inputRef}
+                type="text"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                disabled={disabled}
+                className="w-full pl-9 p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none font-medium disabled:bg-gray-100 disabled:text-gray-400 transition-colors"
+                placeholder={placeholder}
+                autoComplete="off"
+            />
+            
+            {/* Address Confirmation Hint */}
+            {addressPreview && (
+                <div className="text-[10px] text-gray-500 mt-1 ml-1 flex items-center gap-1 animate-fade-in">
+                    <CheckCircle2 size={10} className="text-green-500" />
+                    <span className="truncate">{addressPreview}</span>
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+// --- MAIN COMPONENT ---
+interface StepDetailsProps {
+  data: WizardState;
+  // Update Type Definition to allow functional updates
+  updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
+  onGenerate: () => void;
+  isGenerating: boolean;
+}
+
+const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate, isGenerating }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Specific Error State
+  const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+
+  // --- HARDCODED FALLBACK KEY ---
+  const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
+
+  const getEffectiveKey = () => {
+    if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
+    // @ts-ignore
+    if (import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_KEY) return import.meta.env.VITE_GOOGLE_MAPS_KEY;
+    if (process.env.GOOGLE_MAPS_KEY) return process.env.GOOGLE_MAPS_KEY;
+    return AUTO_PASTE_KEY;
+  };
+
+  const effectiveKey = getEffectiveKey();
+  const isEnvKeyMissing = !process.env.GOOGLE_MAPS_KEY && 
+                          // @ts-ignore
+                          !import.meta.env?.VITE_GOOGLE_MAPS_KEY &&
+                          data.tripData?.googleMapsKey !== AUTO_PASTE_KEY;
+
+  // --- GOOGLE MAPS LOADING ---
+  const loadMapsScript = (apiKey: string) => {
+      if (!apiKey) {
+          setMapError({
+              title: "Brak klucza API",
+              msg: "System nie mógł znaleźć klucza. Skontaktuj się z administratorem."
+          });
+          return;
+      }
+      
+      if ((window as any).google?.maps?.places) {
+          setScriptLoaded(true);
+          return;
+      }
+      
+      const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
+      if (existingScript) {
+          const interval = setInterval(() => {
+              if ((window as any).google?.maps?.places) {
+                  setScriptLoaded(true);
+                  setMapError(null);
+                  clearInterval(interval);
+              }
+          }, 500);
+          return;
+      }
+      
+      const script = document.createElement('script');
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&v=weekly`;
+      script.async = true;
+      script.onload = () => {
+          setTimeout(() => {
+            if ((window as any).google?.maps?.places) {
+                setScriptLoaded(true);
+                setMapError(null);
+            }
+          }, 200);
+      };
+      script.onerror = () => {
+          setMapError({ title: "Błąd sieci", msg: "Nie udało się pobrać skryptu Google Maps." });
+      };
+      document.head.appendChild(script);
+  };
+
+  useEffect(() => {
+    if (data.eventType === 'trip') {
+        (window as any).gm_authFailure = () => {
+            setMapError({ title: "Klucz odrzucony przez Google", msg: "Podany klucz jest niepoprawny." });
+            setScriptLoaded(false); 
+        };
+        if (effectiveKey) loadMapsScript(effectiveKey);
+    }
+  }, [data.eventType, effectiveKey]); 
+
+  // Initialize Trip Data if missing
+  useEffect(() => {
+    if (data.eventType === 'trip') {
+        if (!data.tripData) {
+            updateData({
+                tripData: {
+                startPoint: { place: '', description: '' },
+                endPoint: { place: '', description: '' },
+                stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
+                travelMode: null, 
+                googleMapsKey: AUTO_PASTE_KEY 
+                }
+            });
+        } 
+        else if (!data.tripData.googleMapsKey) {
+            updateData(prev => ({
+                tripData: { ...prev.tripData!, googleMapsKey: AUTO_PASTE_KEY }
+            }));
+        }
+    }
+  }, [data.eventType, updateData]); // Removed data.tripData dependency to avoid loops, handled by logic
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = Array.from(e.target.files || []);
+    if (newFiles.length === 0) return;
+    if (data.files.length + newFiles.length > 3) {
+      setError('Maksymalnie 3 pliki.');
+      return;
+    }
+    setError(null);
+    const processedFiles = await Promise.all(newFiles.map(processFile));
+    updateData(prev => ({ files: [...prev.files, ...processedFiles] }));
+  };
+
+  const removeFile = (id: string) => {
+    updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
+  };
+
+  // --- TRIP DATA HELPERS (UPDATED TO USE FUNCTIONAL STATE UPDATES) ---
+  const updateApiKey = (val: string) => {
+      updateData(prev => ({
+          tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
+      }));
+      if (val.length > 10) setMapError(null);
+  };
+
+  const updatePoint = (pointType: 'startPoint' | 'endPoint', field: 'place' | 'description' | 'addressPreview', value: string) => {
+      updateData(prev => {
+          if (!prev.tripData) return {};
+          return {
+              tripData: {
+                  ...prev.tripData,
+                  [pointType]: {
+                      ...prev.tripData[pointType],
+                      [field]: value
+                  }
+              }
+          };
+      });
+  };
+
+  const updateStop = (id: string, field: 'place' | 'description' | 'addressPreview', value: string) => {
+    updateData(prev => {
+        if (!prev.tripData) return {};
+        const newStops = prev.tripData.stops.map(s => s.id === id ? { ...s, [field]: value } : s);
+        return {
+            tripData: { ...prev.tripData, stops: newStops }
+        };
+    });
+  };
+
+  const addStop = () => {
+    updateData(prev => {
+        if (!prev.tripData) return {};
+        return {
+             tripData: {
+                ...prev.tripData,
+                stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }]
+            }
+        };
+    });
+  };
+
+  const removeStop = (id: string) => {
+    updateData(prev => {
+        if (!prev.tripData) return {};
+        return {
+            tripData: {
+                ...prev.tripData,
+                stops: prev.tripData.stops.filter(s => s.id !== id)
+            }
+        };
+    });
+  };
+
+  const setTravelMode = (mode: 'DRIVING' | 'WALKING') => {
+      updateData(prev => {
+          if (!prev.tripData) return {};
+          return {
+              tripData: { ...prev.tripData, travelMode: mode }
+          };
+      });
+  };
+
+  // Validation Check
+  const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
+  const isReadyToGenerate = data.title && isTripModeValid;
+
+  return (
+    <div className="space-y-10 animate-fade-in">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Szczegóły</h2>
+        <p className="text-gray-500 mb-8 text-lg">
+          {data.eventType === 'trip' ? 'Zaplanuj trasę i opisz przebieg podróży.' : 'Uzupełnij informacje o wydarzeniu.'}
+        </p>
+      </div>
+
+      <div className="space-y-8">
+         
+         {/* SEKCJA DLA WYCIECZEK (TRIP) */}
+         {data.eventType === 'trip' && data.tripData && (
+           <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
+              
+              {/* Fallback Input */}
+              {(!data.tripData.googleMapsKey && isEnvKeyMissing) && (
+                <div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
+                    <div className="flex items-start gap-3">
+                        <AlertCircle className="text-yellow-600 mt-0.5" size={20} />
+                        <div className="flex-1">
+                            <h4 className="font-bold text-yellow-800 text-sm">Nie wykryto klucza w .env</h4>
+                            <p className="text-xs text-yellow-700 mt-1 mb-2">
+                                System automatycznie wklei klucz zapasowy. Jeśli to nie nastąpiło, wklej go poniżej.
+                            </p>
+                            <input 
+                                type="text" 
+                                value={data.tripData?.googleMapsKey || ''}
+                                onChange={(e) => updateApiKey(e.target.value)}
+                                placeholder="Wklej klucz Google Maps API (AIza...)"
+                                className="w-full p-2 text-sm border border-yellow-300 rounded bg-white focus:border-[#EA4420] outline-none"
+                            />
+                        </div>
+                    </div>
+                </div>
+              )}
+
+              {/* Detailed Error Banner for Maps */}
+              {mapError && (
+                  <div className="bg-red-50 border border-red-200 p-4 rounded-lg flex items-start gap-3 text-red-700">
+                      <AlertCircle className="flex-shrink-0 mt-0.5" size={20} />
+                      <div className="text-sm">
+                          <p className="font-bold text-red-800">{mapError.title}</p>
+                          <p className="mt-1 leading-relaxed">{mapError.msg}</p>
+                      </div>
+                  </div>
+              )}
+
+              <div className="flex items-center justify-between gap-2 mb-2 pt-1">
+                 <div className="flex items-center gap-2">
+                    <Navigation className="text-[#EA4420]" size={24} />
+                    <h3 className="text-xl font-bold text-gray-900">Plan Podróży</h3>
+                    {scriptLoaded && !mapError && (
+                        <span className="hidden sm:flex text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-bold items-center gap-1">
+                            <CheckCircle2 size={12} /> API OK
+                        </span>
+                    )}
+                 </div>
+              </div>
+              
+              {/* BIG TRAVEL MODE SELECTOR */}
+              <div className="grid grid-cols-2 gap-4 w-full">
+                  <button 
+                      onClick={() => setTravelMode('DRIVING')}
+                      className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
+                          data.tripData.travelMode === 'DRIVING' 
+                          ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420] ring-1 ring-[#EA4420] shadow-sm' 
+                          : 'border-gray-200 bg-white text-gray-600 hover:border-[#EA4420]/50 hover:bg-gray-50'
+                      }`}
+                  >
+                      <Car size={32} className="mb-2" />
+                      <span className="font-bold text-sm sm:text-base">Samochód / Droga</span>
+                  </button>
+                  <button 
+                      onClick={() => setTravelMode('WALKING')}
+                      className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
+                          data.tripData.travelMode === 'WALKING' 
+                          ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420] ring-1 ring-[#EA4420] shadow-sm' 
+                          : 'border-gray-200 bg-white text-gray-600 hover:border-[#EA4420]/50 hover:bg-gray-50'
+                      }`}
+                  >
+                      <Footprints size={32} className="mb-2" />
+                      <span className="font-bold text-sm sm:text-base">Pieszo / Szlak</span>
+                  </button>
+              </div>
+
+              {/* Validation Message if missing */}
+              {!data.tripData.travelMode && (
+                  <p className="text-center text-xs text-red-500 font-bold animate-pulse">
+                      * Wybór rodzaju trasy jest wymagany
+                  </p>
+              )}
+
+              <div className="space-y-4 pt-2">
+                
+                {/* START POINT */}
+                <div className="flex gap-3 items-start">
+                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                        <div className="relative">
+                            <PlaceAutocompleteInput
+                                value={data.tripData.startPoint.place}
+                                onChange={(val, preview) => {
+                                    updatePoint('startPoint', 'place', val);
+                                    if(preview) updatePoint('startPoint', 'addressPreview', preview);
+                                }}
+                                addressPreview={data.tripData.startPoint.addressPreview}
+                                placeholder="Punkt Startowy (np. Kraków)"
+                                icon={<Flag size={16} className="text-green-600" />}
+                                scriptLoaded={scriptLoaded}
+                                onError={(msg) => setMapError({title: "Błąd API Places", msg})}
+                            />
+                        </div>
+                        <input 
+                            type="text"
+                            value={data.tripData.startPoint.description}
+                            onChange={(e) => updatePoint('startPoint', 'description', e.target.value)}
+                            className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
+                            placeholder="Opis startu (np. Zbiórka o 6:00)"
+                        />
+                    </div>
+                    {/* Placeholder for alignment */}
+                    <div className="w-[42px]"></div>
+                </div>
+
+                {/* STOPS */}
+                {data.tripData.stops.map((stop, index) => (
+                    <div key={stop.id} className="flex gap-3 items-start group">
+                       <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                          <div className="relative">
+                             <PlaceAutocompleteInput
+                                value={stop.place}
+                                onChange={(val, preview) => {
+                                    updateStop(stop.id, 'place', val);
+                                    if(preview) updateStop(stop.id, 'addressPreview', preview);
+                                }}
+                                addressPreview={stop.addressPreview}
+                                placeholder={`Przystanek ${index + 1}`}
+                                icon={<MapPin size={16} className="text-blue-500" />}
+                                scriptLoaded={scriptLoaded}
+                                onError={(msg) => setMapError({title: "Błąd API Places", msg})}
+                             />
+                          </div>
+                          <input 
+                             type="text"
+                             value={stop.description}
+                             onChange={(e) => updateStop(stop.id, 'description', e.target.value)}
+                             className="w-full p-3 border border-gray-200 rounded-md focus:border-[#EA4420] outline-none"
+                             placeholder="Co tam robiliście?"
+                          />
+                       </div>
+                       <button 
+                         onClick={() => removeStop(stop.id)}
+                         className="p-3 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
+                         title="Usuń przystanek"
+                       >
+                         <Trash2 size={18} />
+                       </button>
+                    </div>
+                ))}
+
+                <div className="pl-1">
+                    <button 
+                        onClick={addStop}
+                        className="flex items-center space-x-2 text-sm font-bold text-[#EA4420] hover:bg-[#EA4420]/5 px-4 py-2 rounded-md transition-colors"
+                    >
+                        <Plus size={16} />
+                        <span>Dodaj przystanek</span>
+                    </button>
+                </div>
+
+                {/* END POINT */}
+                <div className="flex gap-3 items-start">
+                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
+                        <div className="relative">
+                            <PlaceAutocompleteInput
+                                value={data.tripData.endPoint.place}
+                                onChange={(val, preview) => {
+                                    updatePoint('endPoint', 'place', val);
+                                    if(preview) updatePoint('endPoint', 'addressPreview', preview);
+                                }}
+                                addressPreview={data.tripData.endPoint.addressPreview}
+                                placeholder="Punkt Końcowy (np. Zakopane)"
+                                icon={<Target size={16} className="text-red-600" />}
+                                scriptLoaded={scriptLoaded}
+                                onError={(msg) => setMapError({title: "Błąd API Places", msg})}
+                            />
+                        </div>
+                        <input 
+                            type="text"
+                            value={data.tripData.endPoint.description}
+                            onChange={(e) => updatePoint('endPoint', 'description', e.target.value)}
+                            className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
+                            placeholder="Opis końca (np. Nareszcie piwo)"
+                        />
+                    </div>
+                    {/* Placeholder for alignment */}
+                    <div className="w-[42px]"></div>
+                </div>
+
+              </div>
+           </div>
+         )}
+
+         {/* STANDARDOWE POLA */}
+         <div className="space-y-6">
+             <div>
+                <label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label>
+                <input 
+                  type="text" 
+                  value={data.title}
+                  onChange={(e) => updateData({ title: e.target.value })}
+                  className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
+                  placeholder="np. Roadtrip po Bałkanach"
+                />
+             </div>
+
+             <div>
+                <label className="block text-sm font-bold text-gray-700 mb-2">Krótki opis / Notatki</label>
+                <textarea
+                  value={data.description}
+                  onChange={(e) => updateData({ description: e.target.value })}
+                  placeholder="Ogólny klimat, emocje, dodatkowe szczegóły, których nie ma w planie wycieczki..."
+                  rows={4}
+                  className="w-full border border-gray-200 rounded-md p-4 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300"
+                />
+             </div>
+
+             {/* File Upload */}
+             <div>
+                <label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
+                <div 
+                  className={`border-2 border-dashed rounded-md p-8 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
+                    error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
+                  }`}
+                  onClick={() => data.files.length < 3 && fileInputRef.current?.click()}
+                >
+                  <input 
+                    type="file" 
+                    ref={fileInputRef} 
+                    onChange={handleFileChange} 
+                    multiple
+                    accept=".gpx,.pdf,image/*"
+                    className="hidden" 
+                  />
+                  <UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
+                  <p className="text-gray-600 font-medium">Kliknij, aby dodać pliki</p>
+                  <p className="text-gray-400 text-xs mt-1">GPX, PDF, JPG, PNG</p>
+                </div>
+                
+                {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
+
+                {/* File List */}
+                {data.files.length > 0 && (
+                  <div className="mt-4 grid grid-cols-1 gap-3">
+                    {data.files.map((file) => (
+                      <div key={file.id} className="flex items-center justify-between bg-gray-50 border border-gray-200 p-3 rounded-md">
+                        <div className="flex items-center space-x-3 overflow-hidden">
+                           <div className="w-10 h-10 bg-white rounded border border-gray-200 flex items-center justify-center flex-shrink-0 text-gray-400">
+                              {file.mimeType.includes('image') ? <ImageIcon size={20} /> : <FileText size={20} />}
+                           </div>
+                           <span className="text-sm font-medium text-gray-700 truncate">{file.file.name}</span>
+                        </div>
+                        <button 
+                          onClick={() => removeFile(file.id)}
+                          className="text-gray-400 hover:text-red-500 p-1"
+                        >
+                          <X size={18} />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+             </div>
+         </div>
+      </div>
+
+      <div className="pt-6">
+        <button 
+            onClick={onGenerate}
+            disabled={isGenerating || !isReadyToGenerate}
+            className="w-full flex items-center justify-center space-x-2 bg-[#EA4420] text-white px-8 py-4 rounded-md hover:bg-[#d63b1a] transition-all disabled:opacity-75 disabled:cursor-not-allowed font-bold text-lg shadow-sm hover:shadow-md"
+        >
+            {isGenerating ? (
+            <>
+                <Loader2 size={24} className="animate-spin" />
+                <span>Generowanie Historii...</span>
+            </>
+            ) : (
+            <>
+                <Sparkles size={24} />
+                <span>Generuj Relację</span>
+            </>
+            )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default StepDetails;

components/StepEventType.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { WizardState, EventType } from '../types';
+import { Trophy, Tent, Ticket, PartyPopper, Briefcase, Sparkles } from 'lucide-react';
+
+interface StepEventTypeProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextStep }) => {
+
+  const handleSelect = (eventType: EventType) => {
+    updateData({ eventType });
+    setTimeout(nextStep, 150);
+  };
+
+  const types: { id: EventType; label: string; icon: React.ReactNode }[] = [
+    { id: 'sport', label: 'Wydarzenie Sportowe', icon: <Trophy size={32} /> },
+    { id: 'culture', label: 'Wydarzenie Kulturalne', icon: <Ticket size={32} /> },
+    { id: 'trip', label: 'Wycieczka / Podróż', icon: <Tent size={32} /> },
+    { id: 'party', label: 'Impreza', icon: <PartyPopper size={32} /> },
+    { id: 'work', label: 'Praca / Konferencja', icon: <Briefcase size={32} /> },
+    { id: 'other', label: 'Inne', icon: <Sparkles size={32} /> },
+  ];
+
+  return (
+    <div className="space-y-8 animate-fade-in">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Rodzaj Wydarzenia</h2>
+        <p className="text-gray-500 mb-8 text-lg">Czego dotyczy Twoja relacja?</p>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {types.map((type) => (
+             <button
+                key={type.id}
+                onClick={() => handleSelect(type.id)}
+                className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-40 ${
+                  data.eventType === type.id
+                    ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                    : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+                }`}
+             >
+               <div className={`mb-4 transition-colors ${data.eventType === type.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
+                 {type.icon}
+               </div>
+               <span className="font-bold text-sm leading-tight">{type.label}</span>
+             </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepEventType;

components/StepPlatform.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { WizardState } from '../types';
+import { Instagram, Youtube, Activity } from 'lucide-react';
+
+interface StepPlatformProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep }) => {
+
+  const handleSelect = (platform: WizardState['platform']) => {
+    updateData({ platform });
+    setTimeout(nextStep, 150);
+  };
+
+  return (
+    <div className="space-y-8 animate-fade-in">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Platformę</h2>
+        <p className="text-gray-500 mb-8 text-lg">Gdzie opublikujesz materiał?</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <button
+            onClick={() => handleSelect('instagram')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.platform === 'instagram'
+                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <Instagram size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'instagram' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
+            <span className="text-xl font-bold tracking-tight">Instagram</span>
+            <span className="text-sm opacity-75 mt-2 font-medium">Carousel / Post</span>
+          </button>
+
+          <button
+            onClick={() => handleSelect('youtube')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.platform === 'youtube'
+                 ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                 : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <Youtube size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'youtube' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
+            <span className="text-xl font-bold tracking-tight">YouTube</span>
+            <span className="text-sm opacity-75 mt-2 font-medium">Shorts / Video</span>
+          </button>
+
+          <button
+            onClick={() => handleSelect('strava')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.platform === 'strava'
+                 ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                 : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <Activity size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'strava' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
+            <span className="text-xl font-bold tracking-tight">Strava</span>
+            <span className="text-sm opacity-75 mt-2 font-medium">Activity / Photos</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepPlatform;

components/StepResult.tsx

@@ -0,0 +1,212 @@
+
+import React, { useState } from 'react';
+import { GeneratedContent, WizardState } from '../types';
+import { Copy, Check, Instagram, Image as ImageIcon, MessageSquare, Edit2, RefreshCw, X } from 'lucide-react';
+import TripMap from './TripMap';
+
+interface StepResultProps {
+  content: GeneratedContent;
+  onRegenerate: (slideCount: number, feedback: string) => void;
+  isRegenerating: boolean;
+  // We need to access the wizard state to check for trip data
+  // But standard props here only have content. 
+  // Ideally, StepResult should receive `data` too, but for now I'll check if I can pass it from App.tsx or infer it.
+  // Wait, I can't access `data` unless I modify App.tsx to pass it to StepResult.
+  // Let's assume the parent updates the props.
+  // Actually, I'll modify the StepResultProps in this file, but I also need to modify App.tsx to pass 'data'.
+  // However, looking at App.tsx, StepResult is rendered inside App.tsx. I can pass `data` there easily.
+  // But wait, the previous code block for StepResult didn't show 'data' in props.
+  // I will add `tripData` to the props.
+}
+
+// Extending interface to include tripData optionally passed from parent
+// Note: I will update App.tsx to pass this prop.
+interface ExtendedStepResultProps extends StepResultProps {
+    tripData?: WizardState['tripData'];
+}
+
+const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate, isRegenerating, tripData }) => {
+  const [copiedSection, setCopiedSection] = useState<string | null>(null);
+  const [copiedSlideIndex, setCopiedSlideIndex] = useState<number | null>(null);
+  
+  // Edit Mode State
+  const [isEditing, setIsEditing] = useState(false);
+  const [slideCount, setSlideCount] = useState(content.slides.length || 12);
+  const [feedback, setFeedback] = useState("");
+
+  const copyToClipboard = (text: string, sectionId: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedSection(sectionId);
+    setTimeout(() => setCopiedSection(null), 2000);
+  };
+
+  const copySlideText = (text: string, index: number) => {
+    navigator.clipboard.writeText(text);
+    setCopiedSlideIndex(index);
+    setTimeout(() => setCopiedSlideIndex(null), 2000);
+  };
+
+  const handleApplyChanges = () => {
+    onRegenerate(slideCount, feedback);
+    setIsEditing(false); // Close edit panel on submit, assumes success or loading state handles visual feedback
+  };
+
+  return (
+    <div className="space-y-12 animate-fade-in pb-20 relative">
+      
+      {/* Top Header with Edit Button */}
+      <div className="text-center max-w-2xl mx-auto relative">
+        <h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">Twój Vibe Gotowy! 🎉</h2>
+        <p className="text-gray-500 text-lg mb-6">Oto kompletna struktura Twojego posta. Skopiuj i publikuj.</p>
+        
+        {!isEditing && !isRegenerating && (
+          <button 
+            onClick={() => setIsEditing(true)}
+            className="inline-flex items-center space-x-2 text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 rounded-full transition-colors"
+          >
+            <Edit2 size={16} />
+            <span>Edytuj / Popraw</span>
+          </button>
+        )}
+      </div>
+
+      {/* Edit Panel (Conditional) */}
+      {(isEditing || isRegenerating) && (
+        <div className="bg-white border-2 border-[#EA4420]/20 rounded-xl p-6 shadow-sm mb-10 animate-fade-in relative overflow-hidden">
+           {isRegenerating && (
+             <div className="absolute inset-0 bg-white/80 z-10 flex flex-col items-center justify-center backdrop-blur-[1px]">
+                <RefreshCw size={32} className="text-[#EA4420] animate-spin mb-3" />
+                <p className="font-bold text-gray-800">Nanuszę poprawki...</p>
+             </div>
+           )}
+           
+           <div className="flex justify-between items-start mb-6">
+              <h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
+                <Edit2 size={20} className="text-[#EA4420]" />
+                Wprowadź poprawki
+              </h3>
+              {!isRegenerating && (
+                <button onClick={() => setIsEditing(false)} className="text-gray-400 hover:text-gray-600">
+                  <X size={24} />
+                </button>
+              )}
+           </div>
+
+           <div className="space-y-6">
+              {/* Slider */}
+              <div>
+                <label className="flex justify-between text-sm font-bold text-gray-700 mb-3">
+                  <span>Liczba slajdów / Elementów</span>
+                  <span className="text-[#EA4420]">{slideCount}</span>
+                </label>
+                <input 
+                  type="range" 
+                  min="3" 
+                  max="20" 
+                  value={slideCount} 
+                  onChange={(e) => setSlideCount(parseInt(e.target.value))}
+                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#EA4420]"
+                />
+                <div className="flex justify-between text-xs text-gray-400 mt-2 font-medium">
+                  <span>3 (Minimum)</span>
+                  <span>20 (Maksimum)</span>
+                </div>
+              </div>
+
+              {/* Feedback Textarea */}
+              <div>
+                 <label className="block text-sm font-bold text-gray-700 mb-2">Co chcesz zmienić w treści?</label>
+                 <textarea
+                   value={feedback}
+                   onChange={(e) => setFeedback(e.target.value)}
+                   placeholder="np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji w slajdzie nr 3. Zrób bardziej agresywny wstęp."
+                   rows={3}
+                   className="w-full border border-gray-200 rounded-md p-3 text-sm focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none"
+                 />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end pt-2">
+                <button
+                  onClick={handleApplyChanges}
+                  className="bg-[#EA4420] text-white px-6 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-colors flex items-center gap-2"
+                >
+                  <RefreshCw size={18} />
+                  Zastosuj poprawki
+                </button>
+              </div>
+           </div>
+        </div>
+      )}
+      
+      {/* TRIP MAP (IF APPLICABLE) */}
+      {tripData && tripData.startPoint && (
+          <TripMap tripData={tripData} />
+      )}
+
+      {/* Caption Section */}
+      <div className="bg-white rounded-md border border-gray-200 overflow-hidden">
+        <div className="bg-gray-50 px-8 py-5 border-b border-gray-200 flex justify-between items-center">
+          <div className="flex items-center space-x-3 text-gray-900">
+            <MessageSquare size={20} className="text-[#EA4420]" />
+            <span className="font-bold">Post Caption (Opis)</span>
+          </div>
+          <button
+            onClick={() => copyToClipboard(content.caption, 'caption')}
+            className="flex items-center space-x-2 text-sm font-semibold text-[#EA4420] hover:text-[#d63b1a] transition-colors bg-white border border-gray-200 px-4 py-2 rounded-md hover:bg-gray-50"
+          >
+            {copiedSection === 'caption' ? <Check size={16} /> : <Copy size={16} />}
+            <span>{copiedSection === 'caption' ? 'Skopiowano!' : 'Kopiuj'}</span>
+          </button>
+        </div>
+        <div className="p-8 text-gray-700 whitespace-pre-wrap font-sans text-base leading-relaxed">
+            {content.caption}
+        </div>
+      </div>
+
+      {/* Slides Grid */}
+      <div>
+        <div className="flex items-center space-x-3 text-gray-900 mb-8 px-1">
+           <ImageIcon size={28} className="text-[#EA4420]" />
+           <h3 className="text-2xl font-bold tracking-tight">Struktura Wizualna (Slajdy / Zdjęcia)</h3>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+           {content.slides.map((slide, idx) => (
+             <div key={idx} className="bg-white rounded-md border border-gray-200 flex flex-col h-full hover:border-[#EA4420]/30 transition-colors group">
+                <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
+                   <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">
+                     Element {idx + 1}
+                   </span>
+                </div>
+                <div className="p-6 flex-1 flex flex-col space-y-6">
+                   <div>
+                     <div className="flex justify-between items-start mb-2">
+                        <span className="text-xs text-[#EA4420] uppercase font-bold tracking-wider">Nagłówek / Typ</span>
+                        <button 
+                          onClick={() => copySlideText(slide.overlay_text, idx)}
+                          className="text-gray-300 hover:text-[#EA4420] transition-colors"
+                          title="Kopiuj tekst"
+                        >
+                          {copiedSlideIndex === idx ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+                        </button>
+                     </div>
+                     <p className="font-bold text-gray-900 text-xl leading-tight">"{slide.overlay_text}"</p>
+                   </div>
+                   
+                   <div className="pt-4 border-t border-gray-100 mt-auto">
+                     <div className="flex items-start space-x-3 text-gray-500">
+                        <ImageIcon size={16} className="mt-1 flex-shrink-0 text-gray-400" />
+                        <p className="text-sm italic leading-relaxed">{slide.image_prompt}</p>
+                     </div>
+                   </div>
+                </div>
+             </div>
+           ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepResult;

components/StepToneGoal.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { WizardState, Tone, Goal } from '../types';
+import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
+
+interface StepToneGoalProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep }) => {
+
+  const handleToneSelect = (tone: Tone) => {
+    updateData({ tone });
+  };
+
+  const handleGoalSelect = (goal: Goal) => {
+    updateData({ goal });
+  };
+
+  const isComplete = data.tone && data.goal;
+
+  const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
+    { id: 'funny', label: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
+    { id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
+    { id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
+  ];
+
+  const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
+    { id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
+    { id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
+    { id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', icon: <ShoppingBag size={32} /> },
+  ];
+
+  return (
+    <div className="space-y-12 animate-fade-in">
+      
+      {/* Sekcja 1: TON */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Ton (Vibe)</h2>
+        <p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {tones.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => handleToneSelect(t.id)}
+              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
+                data.tone === t.id
+                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+              }`}
+            >
+              <div className={`mb-4 transition-colors ${data.tone === t.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
+                {t.icon}
+              </div>
+              <span className="text-xl font-bold tracking-tight mb-2">{t.label}</span>
+              <span className="text-sm opacity-75 font-medium">{t.desc}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Sekcja 2: CEL */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Cel</h2>
+        <p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {goals.map((g) => (
+            <button
+              key={g.id}
+              onClick={() => handleGoalSelect(g.id)}
+              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
+                data.goal === g.id
+                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+              }`}
+            >
+              <div className={`mb-4 transition-colors ${data.goal === g.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
+                {g.icon}
+              </div>
+              <span className="text-xl font-bold tracking-tight mb-2">{g.label}</span>
+              <span className="text-sm opacity-75 font-medium">{g.desc}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Next Button */}
+      <div className="flex justify-end pt-4">
+        <button
+          onClick={nextStep}
+          disabled={!isComplete}
+          className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
+        >
+          Przejdź do szczegółów
+        </button>
+      </div>
+
+    </div>
+  );
+};
+
+export default StepToneGoal;

components/StepWaypoints.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { WizardState, Waypoint } from '../types';
+import { Plus, Trash2, MapPin } from 'lucide-react';
+
+interface StepWaypointsProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+}
+
+const StepWaypoints: React.FC<StepWaypointsProps> = ({ data, updateData }) => {
+  
+  const addWaypoint = () => {
+    if (data.waypoints.length >= 10) return;
+    const newWaypoint: Waypoint = {
+      id: crypto.randomUUID(),
+      header: '',
+      context: ''
+    };
+    updateData({ waypoints: [...data.waypoints, newWaypoint] });
+  };
+
+  const removeWaypoint = (id: string) => {
+    if (data.waypoints.length <= 1) return; // Keep at least one
+    updateData({ waypoints: data.waypoints.filter(wp => wp.id !== id) });
+  };
+
+  const updateWaypoint = (id: string, field: keyof Waypoint, value: string) => {
+    const updatedWaypoints = data.waypoints.map(wp => 
+      wp.id === id ? { ...wp, [field]: value } : wp
+    );
+    updateData({ waypoints: updatedWaypoints });
+  };
+
+  return (
+    <div className="space-y-10 animate-fade-in">
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Opisz Kluczowe Momenty</h2>
+          <p className="text-gray-500 text-lg">Gdzie nastąpił przełom? Co czułeś?</p>
+        </div>
+        <div className="text-sm font-bold bg-gray-100 px-4 py-2 rounded-md text-gray-600">
+          {data.waypoints.length} / 10
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {data.waypoints.map((wp, index) => (
+          <div key={wp.id} className="group relative bg-white border border-gray-200 rounded-md p-6 hover:border-[#EA4420]/30 transition-all">
+            <div className="flex gap-5">
+              <div className="mt-2 text-[#EA4420]">
+                <MapPin size={28} strokeWidth={1.5} />
+              </div>
+              <div className="flex-1 space-y-4">
+                 <div>
+                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
+                      Moment {index + 1} - Nagłówek
+                    </label>
+                    <input
+                      type="text"
+                      value={wp.header}
+                      onChange={(e) => updateWaypoint(wp.id, 'header', e.target.value)}
+                      placeholder="np. 10km - Ściana"
+                      className="w-full border-b border-gray-200 pb-2 focus:border-[#EA4420] focus:outline-none text-gray-900 font-bold text-lg placeholder-gray-300 bg-transparent transition-colors"
+                    />
+                 </div>
+                 <div>
+                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
+                      Kontekst / Emocje
+                    </label>
+                    <textarea
+                      value={wp.context}
+                      onChange={(e) => updateWaypoint(wp.id, 'context', e.target.value)}
+                      placeholder="Co się działo w głowie? Walka ze sobą czy euforia?"
+                      rows={2}
+                      className="w-full border border-gray-200 rounded-md p-3 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300 bg-gray-50/50"
+                    />
+                 </div>
+              </div>
+              
+              {data.waypoints.length > 1 && (
+                <button 
+                  onClick={() => removeWaypoint(wp.id)}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity self-start p-2 text-gray-400 hover:text-[#EA4420] hover:bg-red-50 rounded-md"
+                  title="Usuń punkt"
+                >
+                  <Trash2 size={20} />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {data.waypoints.length < 10 && (
+        <button
+          onClick={addWaypoint}
+          className="w-full py-5 border border-dashed border-gray-300 rounded-md text-gray-500 hover:border-[#EA4420] hover:text-[#EA4420] hover:bg-[#EA4420]/5 transition-all flex items-center justify-center space-x-2 group"
+        >
+          <Plus size={20} className="group-hover:scale-110 transition-transform" />
+          <span className="font-semibold">Dodaj kolejny punkt</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default StepWaypoints;

components/TripMap.tsx

@@ -0,0 +1,331 @@
+
+import React, { useRef, useState, useEffect } from 'react';
+import { TripData } from '../types';
+import { Download, Map as MapIcon, AlertTriangle, ImageOff, Loader2, Navigation, RefreshCw } from 'lucide-react';
+import html2canvas from 'html2canvas';
+
+interface TripMapProps {
+  tripData: TripData;
+}
+
+const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const [imgError, setImgError] = useState(false);
+  const [encodedPolyline, setEncodedPolyline] = useState<string | null>(null);
+  const [isRouting, setIsRouting] = useState(false);
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [routingError, setRoutingError] = useState<string | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+
+  // --- HARDCODED FALLBACK KEY ---
+  const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
+
+  // Directly access the environment variable OR fallback to manual input OR auto-paste
+  const getEffectiveKey = () => {
+    // 1. Check manual override
+    if (tripData.googleMapsKey) return tripData.googleMapsKey;
+    
+    // 2. Check Vite env
+    // @ts-ignore
+    if (import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_KEY) {
+        // @ts-ignore
+        return import.meta.env.VITE_GOOGLE_MAPS_KEY;
+    }
+    
+    // 3. Check Standard process.env
+    if (process.env.GOOGLE_MAPS_KEY) return process.env.GOOGLE_MAPS_KEY;
+    
+    // 4. Fallback
+    return AUTO_PASTE_KEY;
+  };
+  
+  const apiKey = getEffectiveKey();
+
+  // Load script if not present (e.g. refreshed on Result page)
+  useEffect(() => {
+    if ((window as any).google?.maps) {
+        setScriptLoaded(true);
+        return;
+    }
+
+    if (!apiKey) return;
+
+    // Check if script exists in DOM
+    if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) {
+        const check = setInterval(() => {
+             if ((window as any).google?.maps) {
+                 setScriptLoaded(true);
+                 clearInterval(check);
+             }
+        }, 500);
+        return;
+    }
+
+    const script = document.createElement('script');
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&loading=async&v=weekly`;
+    script.async = true;
+    script.onload = () => setScriptLoaded(true);
+    document.head.appendChild(script);
+  }, [apiKey]);
+
+
+  // Calculate Route using Directions Service
+  useEffect(() => {
+    if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return;
+    if (!(window as any).google) return;
+
+    const fetchRoute = async () => {
+        setIsRouting(true);
+        setRoutingError(null);
+        
+        try {
+            const directionsService = new (window as any).google.maps.DirectionsService();
+            
+            // Prepare valid waypoints (exclude empty stops)
+            const waypoints = tripData.stops
+                .filter(s => s.place && s.place.trim().length > 2)
+                .map(s => ({ location: s.place, stopover: true }));
+
+            // Determine Travel Mode
+            const gMaps = (window as any).google.maps;
+            const mode = tripData.travelMode === 'WALKING' ? gMaps.TravelMode.WALKING : gMaps.TravelMode.DRIVING;
+
+            console.log("TripMap: Requesting route...", { 
+                origin: tripData.startPoint.place, 
+                dest: tripData.endPoint.place, 
+                mode: tripData.travelMode,
+                waypointsCount: waypoints.length 
+            });
+
+            const result = await new Promise<any>((resolve, reject) => {
+                directionsService.route({
+                    origin: tripData.startPoint.place,
+                    destination: tripData.endPoint.place,
+                    waypoints: waypoints,
+                    travelMode: mode,
+                }, (response: any, status: any) => {
+                    if (status === 'OK') {
+                        resolve(response);
+                    } else {
+                        console.warn("TripMap: Directions API Error", status);
+                        reject(status);
+                    }
+                });
+            });
+
+            // Extract overview polyline
+            const polyline = result.routes[0].overview_polyline;
+            
+            setEncodedPolyline(polyline);
+            setImgError(false);
+        } catch (error: any) {
+            console.error("Directions Service Failed:", error);
+            
+            // Specific Error Handling
+            if (error === 'REQUEST_DENIED') {
+                setRoutingError("API 'Directions API' nie jest włączone w Google Cloud. Mapa pokazuje linię prostą.");
+            } else if (error === 'ZERO_RESULTS') {
+                const modeName = tripData.travelMode === 'WALKING' ? 'pieszej' : 'samochodowej';
+                setRoutingError(`Nie znaleziono drogi ${modeName} pomiędzy tymi punktami.`);
+            } else {
+                setRoutingError(`Błąd wyznaczania trasy: ${error}`);
+            }
+            
+            setEncodedPolyline(null); // Fallback to straight lines
+        } finally {
+            setIsRouting(false);
+        }
+    };
+
+    fetchRoute();
+  }, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]);
+
+
+  // Construct Google Static Maps URL
+  const getMapUrl = () => {
+    if (!apiKey) return null;
+
+    const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
+    const size = '600x400';
+    const scale = '2'; // Retina
+    const format = 'png';
+    const maptype = 'roadmap';
+
+    const startPlace = tripData.startPoint.place;
+    const endPlace = tripData.endPoint.place;
+
+    if (!startPlace || !endPlace) return null;
+
+    // Markers
+    const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
+    const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
+    
+    // Stop Markers
+    const stopMarkers = tripData.stops
+      .filter(s => s.place.trim() !== '')
+      .map((s, i) => `markers=color:blue|label:${i+1}|${encodeURIComponent(s.place)}`)
+      .join('&');
+
+    let path = '';
+    
+    if (encodedPolyline && encodedPolyline.length < 8000) {
+        path = `path=color:0xEA4420ff|weight:5|enc:${encodedPolyline}`;
+    } else {
+        const pathPoints = [
+            startPlace,
+            ...tripData.stops.filter(s => s.place.trim() !== '').map(s => s.place),
+            endPlace
+        ].map(p => encodeURIComponent(p)).join('|');
+        
+        path = `path=color:0xEA4420ff|weight:5|${pathPoints}`;
+    }
+
+    let url = `${baseUrl}?size=${size}&scale=${scale}&format=${format}&maptype=${maptype}&${startMarker}&${endMarker}&${path}&key=${apiKey}`;
+    
+    if (stopMarkers) {
+        url += `&${stopMarkers}`;
+    }
+
+    return url;
+  };
+
+  const mapUrl = getMapUrl();
+
+  const handleDownload = async () => {
+    if (!mapContainerRef.current) return;
+    
+    try {
+        const canvas = await html2canvas(mapContainerRef.current, {
+            useCORS: true, 
+            allowTaint: true,
+            backgroundColor: '#ffffff'
+        });
+        
+        const link = document.createElement('a');
+        link.download = 'trasa-wycieczki.png';
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+    } catch (e) {
+        console.error("Download failed", e);
+        alert("Nie udało się pobrać mapy.");
+    }
+  };
+
+  // ERROR STATE 1: MISSING KEY
+  if (!apiKey) {
+      return (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-6 flex flex-col items-center text-center">
+              <AlertTriangle className="text-red-500 mb-2" size={32} />
+              <h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3>
+              <p className="text-sm text-red-700 max-w-sm">
+                 Wprowadź klucz w kroku "Szczegóły" lub dodaj go do pliku .env.
+              </p>
+          </div>
+      );
+  }
+
+  return (
+    <div className="space-y-4">
+        <div className="flex items-center justify-between">
+            <h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
+                <MapIcon size={24} className="text-[#EA4420]" />
+                Mapa Trasy
+            </h3>
+            <div className="flex gap-2">
+                {routingError && (
+                    <button 
+                        onClick={() => setRetryCount(c => c + 1)}
+                        className="text-sm flex items-center gap-2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-2 rounded-md font-bold transition-colors"
+                        title="Spróbuj ponownie wyznaczyć trasę"
+                    >
+                        <RefreshCw size={14} /> Ponów trasę
+                    </button>
+                )}
+                <button 
+                    onClick={handleDownload}
+                    className="text-sm flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md font-bold transition-colors"
+                >
+                    <Download size={16} />
+                    Pobierz Obrazek
+                </button>
+            </div>
+        </div>
+
+        {/* Warning Banner for Directions API issues */}
+        {routingError && (
+            <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-md flex items-start gap-3">
+                <Navigation className="text-yellow-600 flex-shrink-0 mt-0.5" size={18} />
+                <div className="text-xs text-yellow-800">
+                    <p className="font-bold">Widzisz prostą linię zamiast drogi?</p>
+                    <p>{routingError}</p>
+                    <p className="mt-1 opacity-75">
+                        {routingError.includes("Directions API") 
+                           ? <>Rozwiązanie: Wejdź w Google Cloud Console → APIs & Services → Włącz <b>"Directions API"</b>.</> 
+                           : <>Jeśli idziesz szlakiem, upewnij się, że wybrałeś tryb <b>"Pieszo"</b>.</>}
+                    </p>
+                </div>
+            </div>
+        )}
+
+        <div 
+            ref={mapContainerRef} 
+            className="bg-white p-2 border border-gray-200 rounded-xl shadow-sm overflow-hidden relative group min-h-[250px] flex items-center justify-center"
+        >
+             {/* Map Image */}
+             {mapUrl && !imgError && !isRouting ? (
+                 <img 
+                    src={mapUrl} 
+                    alt="Mapa trasy" 
+                    className="w-full h-auto rounded-lg object-cover"
+                    crossOrigin="anonymous" 
+                    onError={() => setImgError(true)}
+                 />
+             ) : (
+                 <div className="h-64 w-full bg-gray-50 flex flex-col items-center justify-center text-gray-400 p-6 text-center">
+                     {isRouting ? (
+                        <>
+                           <Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
+                           <p className="text-xs font-bold text-gray-500">Rysowanie dokładnej trasy ({tripData.travelMode})...</p>
+                        </>
+                     ) : imgError ? (
+                        <div className="max-w-md">
+                            <div className="flex justify-center mb-2">
+                                <ImageOff size={32} className="text-red-400" />
+                            </div>
+                            <p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania obrazka mapy (Static Maps API)</p>
+                            <div className="bg-red-50 p-3 rounded text-left mt-2">
+                                <p className="text-xs text-gray-700 font-bold mb-1">Możliwe przyczyny błędu "g.co/staticmaperror":</p>
+                                <ul className="text-[10px] text-gray-600 list-disc pl-4 space-y-1">
+                                    <li><b>Maps Static API</b> nie jest włączone w konsoli Google Cloud (To inne API niż Places/JavaScript!).</li>
+                                    <li>Brak podpiętej karty płatniczej w projekcie Google Cloud.</li>
+                                    <li>Klucz API: <b>{apiKey.slice(0,6)}...</b> jest niepoprawny lub ma restrykcje HTTP, które blokują serwer zdjęć.</li>
+                                </ul>
+                            </div>
+                        </div>
+                     ) : (
+                        <p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
+                     )}
+                 </div>
+             )}
+
+             {/* Branding Overlay */}
+             {!imgError && mapUrl && !isRouting && (
+                <div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-[10px] font-bold text-gray-500 shadow-sm">
+                    Generated by PromptStory
+                </div>
+             )}
+        </div>
+        
+        {/* Helper Text below map */}
+        <div className="text-xs text-gray-400 text-center space-y-1">
+            <p>
+                {encodedPolyline && encodedPolyline.length < 8000
+                    ? `*Trasa wyznaczona automatycznie (${tripData.travelMode === 'WALKING' ? 'szlaki/chodniki' : 'drogi'}).`
+                    : "*Trasa uproszczona (linia prosta) - włącz Directions API lub zmień tryb."}
+            </p>
+        </div>
+    </div>
+  );
+};
+
+export default TripMap;