Pierwszy wrzut promptstory

App.tsx

@@ -0,0 +1,319 @@
+
+import React, { useState, useEffect } from 'react';
+import { WizardState, Step, GeneratedContent } from './types';
+import StepContext from './components/StepContext';
+import StepPlatform from './components/StepPlatform';
+import StepEventType from './components/StepEventType';
+import StepToneGoal from './components/StepToneGoal';
+import StepDetails from './components/StepDetails';
+import StepResult from './components/StepResult';
+import { ChevronLeft, ExternalLink, Sparkles, User } from 'lucide-react';
+import { generateStoryContent } from './services/geminiService';
+
+const STORAGE_KEY = 'gpx-storyteller-state-v6'; // Incremented version for structure change
+
+const INITIAL_STATE: WizardState = {
+  step: Step.CONTEXT,
+  context: null,
+  storyStyle: null,
+  platform: null,
+  eventType: null,
+  tone: null,
+  goal: null,
+  title: 'Poznań Maraton 2025',
+  description: 'Byłem totalnie nieprzygotowany. Ostatnie pół roku prawie nie ćwiczyłem, a w dodatku biegłem na antybiotykach z zapaleniem osemki. To była walka a nie przyjemność z biegania. To było głupie. Ale było warto',
+  files: [],
+  stats: {
+    distance: '',
+    duration: '',
+    elevation: '',
+  },
+  waypoints: [],
+  tripData: {
+      startPoint: { place: '', description: '' },
+      endPoint: { place: '', description: '' },
+      stops: [],
+      travelMode: null,
+      googleMapsKey: ''
+  }
+};
+
+const App: React.FC = () => {
+  const [data, setData] = useState<WizardState>(INITIAL_STATE);
+  const [generatedContent, setGeneratedContent] = useState<GeneratedContent | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  
+  // Image loading states
+  const [logoError, setLogoError] = useState(false);
+  const [avatarError, setAvatarError] = useState(false);
+
+  // Persistence Logic
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        // Reset files because File objects cannot be serialized to local storage
+        parsed.files = []; 
+        
+        // Ensure new fields exist if loading from old state
+        if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
+        if (!parsed.waypoints) parsed.waypoints = [];
+        
+        // Ensure tripData exists
+        if (!parsed.tripData) {
+            parsed.tripData = { ...INITIAL_STATE.tripData };
+        }
+        
+        // Defaults for new fields if migrating
+        if (!parsed.tone) parsed.tone = null;
+        if (!parsed.goal) parsed.goal = null;
+        if (!parsed.storyStyle) parsed.storyStyle = null;
+
+        setData(parsed);
+      } catch (e) {
+        console.error("Failed to load state", e);
+      }
+    }
+    setIsLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (isLoaded) {
+      // Exclude files from persistence to avoid quota issues and serialization errors
+      const stateToSave = { ...data, files: [] };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
+    }
+  }, [data, isLoaded]);
+
+  // UPDATED: Now supports functional updates to prevent stale state issues
+  const updateData = (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => {
+    setData(prev => {
+        const newValues = typeof updates === 'function' ? updates(prev) : updates;
+        return { ...prev, ...newValues };
+    });
+  };
+
+  const nextStep = () => {
+    if (data.step < Step.RESULT) {
+      updateData({ step: data.step + 1 });
+    }
+  };
+
+  const prevStep = () => {
+    if (data.step > Step.CONTEXT) {
+      updateData({ step: data.step - 1 });
+    }
+  };
+
+  const handleGenerate = async () => {
+    setIsGenerating(true);
+    setErrorMessage(null);
+    try {
+      const content = await generateStoryContent(
+        data, 
+        process.env.API_KEY || ''
+      );
+      
+      setGeneratedContent(content);
+      updateData({ step: Step.RESULT });
+    } catch (error: any) {
+      console.error("Generowanie nie powiodło się:", error);
+      setErrorMessage("Błąd generowania. Sprawdź poprawność klucza API w pliku .env oraz połączenie z siecią. " + (error.message || ''));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleRegenerate = async (slideCount: number, feedback: string) => {
+    setIsGenerating(true);
+    setErrorMessage(null);
+    try {
+      const content = await generateStoryContent(
+        data, 
+        process.env.API_KEY || '',
+        { slideCount, feedback }
+      );
+      
+      setGeneratedContent(content);
+    } catch (error: any) {
+      console.error("Regenerowanie nie powiodło się:", error);
+      setErrorMessage("Błąd regenerowania: " + (error.message || ''));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const resetApp = () => {
+    setData({ ...INITIAL_STATE });
+    setGeneratedContent(null);
+    localStorage.removeItem(STORAGE_KEY);
+    // Force reload to clear any hung states
+    window.location.reload();
+  };
+
+  if (!isLoaded) return null;
+
+  // Step Labels for Progress Bar (Order Changed)
+  const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'];
+
+  return (
+    <div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans">
+      {/* Header */}
+      <header className="bg-white sticky top-0 z-10 border-b border-gray-100">
+        <div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
+          <div className="flex items-center space-x-3">
+             {!logoError ? (
+               <img 
+                src="logo.png" 
+                onError={() => setLogoError(true)}
+                alt="PromptStory Logo" 
+                className="w-10 h-10 object-contain" 
+               />
+             ) : (
+               <div className="text-[#EA4420]">
+                  <Sparkles size={32} strokeWidth={2} />
+               </div>
+             )}
+             <h1 className="text-xl font-bold tracking-tight text-gray-900">PromptStory</h1>
+          </div>
+          <button onClick={resetApp} className="text-xs font-medium text-gray-400 hover:text-[#EA4420] transition-colors uppercase tracking-wide">
+            Resetuj
+          </button>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-6 py-10 flex-grow w-full">
+        
+        {/* Progress Bar */}
+        {data.step !== Step.RESULT && (
+          <div className="mb-12">
+            <div className="flex justify-between mb-3">
+               {stepsLabels.map((label, idx) => (
+                 <span key={label} className={`text-xs font-bold uppercase tracking-wider transition-colors ${data.step >= idx ? 'text-[#EA4420]' : 'text-gray-300'}`}>
+                   0{idx + 1}. {label}
+                 </span>
+               ))}
+            </div>
+            <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
+               <div 
+                  className="h-full bg-[#EA4420] transition-all duration-500 ease-out"
+                  style={{ width: `${((data.step + 1) / 5) * 100}%` }}
+               />
+            </div>
+          </div>
+        )}
+
+        {/* Dynamic Content Container */}
+        <div className="bg-white min-h-[400px]">
+          {/* STEP 1: CONTEXT */}
+          {data.step === Step.CONTEXT && <StepContext data={data} updateData={updateData} nextStep={nextStep} />}
+          
+          {/* STEP 2: EVENT TYPE (Moved UP) */}
+          {data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />}
+          
+          {/* STEP 3: PLATFORM (Moved DOWN) */}
+          {data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />}
+
+          {/* STEP 4: TONE & GOAL (NEW) */}
+          {data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />}
+
+          {/* STEP 5: DETAILS */}
+          {data.step === Step.DETAILS && (
+            <StepDetails 
+                data={data} 
+                updateData={updateData as any} 
+                onGenerate={handleGenerate} 
+                isGenerating={isGenerating} 
+            />
+          )}
+
+          {/* STEP 6: RESULT */}
+          {data.step === Step.RESULT && generatedContent && (
+            <StepResult 
+              content={generatedContent} 
+              onRegenerate={handleRegenerate}
+              isRegenerating={isGenerating}
+              tripData={data.tripData}
+            />
+          )}
+          
+          {/* Error Message */}
+          {errorMessage && (
+            <div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
+              {errorMessage}
+            </div>
+          )}
+        </div>
+
+        {/* Navigation Controls (Back Only) */}
+        {data.step > Step.CONTEXT && data.step < Step.RESULT && (
+           <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 md:static md:bg-transparent md:border-0 md:p-0 mt-12 mb-8">
+             <div className="max-w-4xl mx-auto">
+                <button 
+                  onClick={prevStep}
+                  disabled={isGenerating}
+                  className="flex items-center space-x-2 text-gray-500 hover:text-gray-900 font-semibold px-6 py-3 rounded-md border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50"
+                >
+                  <ChevronLeft size={20} />
+                  <span>Wróć</span>
+                </button>
+             </div>
+           </div>
+        )}
+      </main>
+
+      {/* Footer / Author Info */}
+      <footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto">
+        <div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
+           <div className="flex items-start md:items-center gap-5">
+              {/* Avatar */}
+              <div className="relative group cursor-pointer flex-shrink-0">
+                  <div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div>
+                  {!avatarError ? (
+                    <img 
+                      src="avatar.jpeg"
+                      onError={() => setAvatarError(true)}
+                      alt="Arkadiusz Bykowski" 
+                      className="relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white"
+                    />
+                  ) : (
+                     <div className="relative w-20 h-20 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-300">
+                        <User size={40} />
+                     </div>
+                  )}
+              </div>
+              
+              {/* Text Info */}
+              <div className="text-left">
+                 <h3 className="text-gray-900 font-bold text-xl leading-tight">Arkadiusz Bykowski</h3>
+                 <p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg">
+                    Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy. Od 12 lat projektuję strony, które sprzedają bez Twojego udziału – póki Ty śpisz, one robią za Ciebie robotę. Specjalizuję się w landing page'ach, które budują zaufanie i zmieniają odwiedzających w płacących klientów.
+                 </p>
+                 <div className="flex flex-wrap gap-2 mt-3">
+                    <span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">Product Design</span>
+                    <span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">AI Automation</span>
+                    <span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">No-Code</span>
+                 </div>
+              </div>
+           </div>
+
+           {/* Button */}
+           <a 
+            href="https://bykowski.pro/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="flex-shrink-0 flex items-center space-x-2 text-sm font-bold text-gray-700 hover:text-[#EA4420] transition-all bg-white border border-gray-200 px-6 py-3 rounded-full hover:shadow-md hover:border-[#EA4420]/30 active:scale-95"
+           >
+             <span>Odwiedź stronę</span>
+             <ExternalLink size={16} />
+           </a>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1Fk1GjH6OOteqHMS-IChAeMvr785qR6xS
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

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;

index.html

@@ -0,0 +1,34 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PromptStory</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: #FFFFFF;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "@google/genai": "https://esm.sh/@google/genai@^1.41.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
+    "react/": "https://esm.sh/react@^19.2.4/",
+    "react": "https://esm.sh/react@^19.2.4",
+    "lucide-react": "https://esm.sh/lucide-react@^0.564.0",
+    "html2canvas": "https://esm.sh/html2canvas@^1.4.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "PromptStory",
+  "description": "Convert workout data and notes into engaging Instagram carousel content using AI.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "promptstory",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.41.0",
+    "react-dom": "^19.2.4",
+    "react": "^19.2.4",
+    "lucide-react": "^0.564.0",
+    "html2canvas": "^1.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

prompts/index.ts

@@ -0,0 +1,72 @@
+import { WizardState } from '../types';
+import { 
+  CONTEXT_PROMPTS,
+  STORY_STYLE_PROMPTS,
+  EVENT_PROMPTS, 
+  PLATFORM_PROMPTS, 
+  TONE_PROMPTS, 
+  GOAL_PROMPTS 
+} from './modular';
+
+export const getSystemPrompt = (data: WizardState): string => {
+  
+  // 1. KROK 1: KONTEKST
+  let contextPrompt = data.context 
+    ? CONTEXT_PROMPTS[data.context]
+    : CONTEXT_PROMPTS.relacja;
+
+  // 1b. KROK 1b: STYL OPOWIEŚCI (Jeśli wybrano Opowieść i podano styl)
+  if (data.context === 'opowiesc' && data.storyStyle) {
+    const stylePrompt = STORY_STYLE_PROMPTS[data.storyStyle];
+    contextPrompt += `\n\n${stylePrompt}`;
+  }
+
+  // 2. KROK 2: TYP WYDARZENIA
+  const eventPrompt = data.eventType 
+    ? EVENT_PROMPTS[data.eventType] 
+    : EVENT_PROMPTS.other;
+
+  // 3. KROK 3: PLATFORMA
+  const platformPrompt = data.platform 
+    ? PLATFORM_PROMPTS[data.platform] 
+    : PLATFORM_PROMPTS.instagram;
+
+  // 4a. KROK 4a: TON
+  const tonePrompt = data.tone 
+    ? TONE_PROMPTS[data.tone] 
+    : TONE_PROMPTS.funny;
+
+  // 4b. KROK 4b: CEL
+  const goalPrompt = data.goal 
+    ? GOAL_PROMPTS[data.goal] 
+    : GOAL_PROMPTS.engagement;
+
+  // SKLEJANIE MASTER PROMPTU
+  return `
+Jesteś światowej klasy ekspertem od Content Marketingu i Social Media.
+Twoim zadaniem jest stworzenie treści idealnie dopasowanej do poniższej konfiguracji "puzzli".
+
+=== KONFIGURACJA MASTER PROMPT (PUZZLE) ===
+
+${contextPrompt}
+
+${eventPrompt}
+
+${platformPrompt}
+
+${tonePrompt}
+
+${goalPrompt}
+
+=== INSTRUKCJA KOŃCOWA ===
+Twoim zadaniem jest synteza powyższych elementów w jedną spójną całość.
+1. Przyjmij perspektywę czasową z kroku 1 (KONTEKST).
+2. Jeśli zdefiniowano STYL (Noir/Fantasy), bezwzględnie narzuć ten klimat na całą narrację.
+3. Użyj słownictwa i atmosfery z kroku 2 (TYP).
+4. Sformatuj wynik technicznie zgodnie z wymogami kroku 3 (PLATFORMA).
+5. Nadaj wypowiedzi charakter i styl z kroku 4a (TON).
+6. Zrealizuj cel biznesowy/społeczny z kroku 4b (CEL).
+
+Nie dodawaj meta-komentarzy. Zwróć czysty JSON zgodny ze schematem zdefiniowanym w sekcji PLATFORMA.
+  `;
+};

prompts/modular.ts

@@ -0,0 +1,203 @@
+// === ELEMENT 1: KONTEKST (RAMY CZASOWE I NARRACYJNE) ===
+export const CONTEXT_PROMPTS = {
+  relacja: `
+### KROK 1: KONTEKST - RELACJA (VLOG)
+Twoim zadaniem jest opisanie wydarzenia, w którym brałeś bezpośredni udział. Piszesz z pierwszej osoby ("ja"). Skup się na autentyczności, tym co widziałeś, czułeś i robiłeś. To ma być dynamiczny zapis Twoich doświadczeń, a nie suchy raport.
+  `,
+  opowiesc: `
+### KROK 1: KONTEKST - OPOWIEŚĆ (STORYTELLING)
+- RAMY CZASOWE: Przeszłość. Spojrzenie z dystansu.
+- NARRACJA: Refleksyjna, uporządkowana, posiadająca morał.
+- CEL: Zainspirowanie lub wyciągnięcie wniosków z minionego wydarzenia.
+- ZASADA: Buduj klasyczny łuk narracyjny (Wstęp -> Punkt zwrotny -> Zakończenie).
+  `
+};
+
+// === ELEMENT 1B: STYL OPOWIEŚCI (OPCJONALNY DLA KONTEKSTU OPOWIEŚĆ) ===
+export const STORY_STYLE_PROMPTS = {
+  noir: `
+### KROK 1B: STYL - KRYMINAŁ NOIR
+- KLIMAT: Mroczny, deszczowy, cyniczny, pełen cieni i kontrastów.
+- NARRATOR: Zmęczony życiem detektyw/bohater, który widział już wszystko.
+- JĘZYK: Krótkie, cięte zdania. Wewnętrzny monolog. Metafory związane z miastem, nocą, zbrodnią i brudem.
+- PRZYKŁAD: "To nie był zwykły bieg. To była ucieczka przed własnymi demonami w strugach brudnego deszczu."
+  `,
+  fantasy: `
+### KROK 1B: STYL - PRZYGODA FANTASY (EPIC)
+- KLIMAT: Epicki, magiczny, heroiczny, tajemniczy.
+- NARRATOR: Bohater wyruszający na wyprawę (Quest).
+- JĘZYK: Stylizowany, podniosły. Traktuj zwykłe obiekty jak artefakty (np. buty biegowe to "Siedmiomilowe Buty Prędkości"). Przeszkody to "potwory" lub "klątwy".
+- PRZYKŁAD: "Wyruszyłem o świcie, gdy mgła wciąż spowijała Dolinę Cieni, uzbrojony jedynie w wolę przetrwania."
+  `
+};
+
+// === ELEMENT 2: TYP WYDARZENIA (SŁOWNICTWO I BRANŻA) ===
+export const EVENT_PROMPTS = {
+  sport: `
+### KROK 2: TYP - SPORT & WYSIŁEK
+- SŁOWNICTWO: Kadencja, strefy tętna, PB (Personal Best), bomba, ściana, endorfiny, laktat, tempo, waty, regeneracja.
+- FOKUS: Walka ze słabościami, liczby, progres, fizyczne odczucia (ból, euforia).
+  `,
+  culture: `
+### KROK 2: TYP - KULTURA & SZTUKA
+- SŁOWNICTWO: Kompozycja, estetyka, światło, interpretacja, wernisaż, performance, akt, scena, nastrojowość, głębia.
+- FOKUS: Wrażliwość na piękno, detale, intelektualna stymulacja, atmosfera.
+  `,
+  trip: `
+### KROK 2: TYP - PODRÓŻE (TRAVEL)
+- SŁOWNICTWO: Hidden gems, lokalsi, vibe, bucket list, view, golden hour, backpack, eksploracja, off-road, wanderlust.
+- FOKUS: Odkrywanie nieznanego, wolność, zachwyt naturą/architekturą, przygoda.
+  `,
+  party: `
+### KROK 2: TYP - IMPREZA & FESTIWAL
+- SŁOWNICTWO: Line-up, drop, bas, parkiet, after, before, ekipa, energia, sunrise, vibe check, main stage.
+- FOKUS: Energia tłumu, muzyka, taniec, radość, chaos, nocne życie.
+  `,
+  work: `
+### KROK 2: TYP - PRACA & ROZWÓJ
+- SŁOWNICTWO: Networking, insights, key takeaways, branża, innowacja, leadership, hustle, growth mindset, B2B.
+- FOKUS: Budowanie autorytetu, wymiana wiedzy, lekcje biznesowe, profesjonalizm.
+  `,
+  other: `
+### KROK 2: TYP - LIFESTYLE / CODZIENNOŚĆ
+- SŁOWNICTWO: Rutyna, małe rzeczy, wdzięczność, storytime, plot twist, lifehack, cozy, day-in-the-life.
+- FOKUS: Autentyczność, relacje, codzienne wyzwania i radości.
+  `
+};
+
+// === ELEMENT 3: PLATFORMA (FORMAT TECHNICZNY I STRUKTURA) ===
+export const PLATFORM_PROMPTS = {
+  instagram: `
+### KROK 3: PLATFORMA - INSTAGRAM (PROFESSIONAL CAROUSEL)
+- ZASADA GŁÓWNA: Twoim celem jest zatrzymanie scrollowania (Stop the scroll).
+- FORMAT: Karuzela (Slide Deck).
+- LICZBA SLAJDÓW: Dobierz automatycznie optymalną liczbę z zakresu 5-12. Nie rozciągaj historii na siłę, ale też jej nie ucinaj.
+
+### STRUKTURA SLAJDÓW (JSON 'slides'):
+1. SLAJD 1 (HOOK): Musi być mocnym nagłówkiem, który obiecuje wartość lub szokuje. Krótko i dosadnie.
+2. ŚRODEK: Storytelling wizualny. Jeden slajd = jedna główna myśl.
+3. OSTATNI SLAJD (CTA): Wezwanie do akcji.
+
+### INSTRUKCJA GRAFICZNA ('image_prompt'):
+- JĘZYK: Polski.
+- CEL: Sugeruj użytkownikowi, jakie zdjęcie z własnej galerii powinien wybrać.
+- PRZYKŁAD: "Zdjęcie z perspektywy pierwszej osoby (POV) na buty", "Selfie z szerokim uśmiechem", "Detale medalu", "Szeroki kadr krajobrazu".
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+To NIE MOŻE być ściana tekstu. Formatuj tekst tak, by był czytelny (scannable).
+- NAGŁÓWEK: Pierwsza linia WIELKIMI LITERAMI jako tytuł.
+- ODSTĘPY: Używaj podwójnych enterów między akapitami.
+- LISTY: Używaj emoji jako punktorów (np. 👉, ✅, 🔥) zamiast myślników.
+- PODKREŚLENIA: Używaj WIELKICH LITER do najważniejszych słów (Instagram nie obsługuje **bold**).
+- STRUKTURA OPISU:
+  [MOCNY NAGŁÓWEK]
+  
+  [Krótki wstęp łapiący kontekst]
+  
+  👇 KLUCZOWE MOMENTY / WNIOSKI:
+  👉 Punkt 1
+  👉 Punkt 2
+  👉 Punkt 3
+  
+  [Podsumowanie / Emocje]
+  
+  [Call To Action - Pytanie do odbiorców]
+  
+  [Hashtagi - 3 bloki po 5 hashtagów]
+  `,
+
+  youtube: `
+### KROK 3: PLATFORMA - YOUTUBE SHORTS / TIKTOK / REELS
+- ZASADA GŁÓWNA: Retencja. Widz musi obejrzeć do końca.
+- FORMAT: Scenariusz wideo wertykalnego (9:16).
+
+### STRUKTURA SCENARIUSZA (JSON 'slides' jako SCENY):
+- TEMPO: Bardzo szybkie. Zmiana kadru co 2-4 sekundy.
+- SCENA 1 (0-3s): VISUAL HOOK. Coś dziwnego/szokującego/pięknego na start.
+- TREŚĆ: Buduj napięcie. Nie zdradzaj puenty od razu.
+- AUDIO: Sugeruj efekty dźwiękowe w polu 'notes' (np. [Dźwięk przyspieszonego oddechu], [Bass drop]).
+
+### INSTRUKCJA GRAFICZNA ('image_prompt'):
+- JĘZYK: Polski.
+- CEL: Opisz reżysersko, co ma być widać w kadrze.
+- PRZYKŁAD: "Szybki montaż ujęć z trasy", "Zbliżenie na twarz mówiącą do kamery", "Widok z drona (lub symulacja)".
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+- SEO: Opis musi zawierać słowa kluczowe dla danej niszy.
+- STRUKTURA:
+  [Chwytliwy Tytuł Filmu]
+  
+  [2-3 zdania opisu sytuacji dla algorytmu SEO]
+  
+  [Hashtagi wertykalne np. #shorts #fyp]
+  `,
+
+  strava: `
+### KROK 3: PLATFORMA - STRAVA (2026 TRENDS: DIRTY REALISM & MICRO-BLOGGING)
+- ZASADA GŁÓWNA: Autentyczność i Dane > Perfekcja. To platforma "anty-scrollowania", gdzie liczy się "Brudny Realizm".
+- FORMAT: "Micro-blog" z galerią zdjęć (Vertical 4:5).
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+- TYTUŁ (HOOK): Zamiast "Poranny bieg", daj konkret lub pytanie. Np. "Test nowych butów – czy oddają energię?" lub "Bomba na 30km".
+- TREŚĆ (MICRO-BLOG):
+  1. ANALIZA NERDA: Opisz cierpienie lub sukces przez cyferki (tętno, waty, tempo). Np. "Czułem się ciężko, tętno +10 ud/min, chyba wchodzi choroba".
+  2. LOKALNE WSKAZÓWKI: Buduj ekspertyzę. Np. "Rozkopali drogę na 5km", "Idealny asfalt pod interwały".
+  3. WERDYKT: Krótkie podsumowanie. Czy było warto?
+- HASHTAGI: Minimalistyczne, tylko kluczowe dla sportu (np. #marathontraining #garmin).
+
+### GALERIA ZDJĘĆ (JSON 'slides' - Sugestie dla użytkownika):
+Strava to nie Instagram. Zdjęcia mają być pionowe (4:5) i dokumentować wysiłek, a nie wyglądać jak z reklamy.
+Generuj sugestie w polu 'image_prompt' w języku polskim:
+
+1. ZDJĘCIE 1 (SOCIAL PROOF): Najlepsze ujęcie krajobrazu LUB Twoja twarz (zmęczona/szczęśliwa). Żadnych stockowych uśmiechów.
+2. ZDJĘCIE 2 (HARD DATA): Zbliżenie na zegarek (Garmin/Apple), licznik rowerowy lub screen wykresu ze strefami tętna/mocy. "Dirty Realism" - pot, brud, cyfry.
+3. ZDJĘCIE 3 (THE REWARD): "Nagroda" po treningu - kawa, ciastko, piwo, nogi w górze na kanapie.
+4. ZDJĘCIE 4 (OPCJONALNIE): Detal sprzętu (błoto na butach, kokpit roweru, nowa część).
+
+W polu 'overlay_text' dla Stravy wpisuj tylko krótkie hasła typu: "DANE", "TWARZ", "NAGRODA", "SPRZĘT" - jako etykiety dla użytkownika.
+  `
+};
+
+// === ELEMENT 4A: TON (VIBE / OSOBOWOŚĆ) ===
+export const TONE_PROMPTS = {
+  funny: `
+### KROK 4A: TON - LUZAK / ŚMIESZEK (Funny & Casual)
+- STYL: Autoironia, żarty sytuacyjne, slang, memiczny język.
+- ZASADA: "Nie bierz życia zbyt serio". Jeśli była porażka - wyśmiej ją.
+- PRZYKŁAD: Zamiast "Było ciężko", napisz "Moje nogi właśnie złożyły pozew o rozwód z resztą ciała 💀".
+  `,
+  serious: `
+### KROK 4A: TON - EKSPERT / PROFESJONALISTA (Serious & Direct)
+- STYL: Konkretny, merytoryczny, analityczny, pewny siebie.
+- ZASADA: "Fakty ponad uczucia". Dostarczaj wiedzę i konkrety. Unikaj "lania wody".
+- PRZYKŁAD: Zamiast "Fajnie biegałem", napisz "Średnie tempo 4:30/km utrzymane przez 21km mimo narastającego zmęczenia".
+  `,
+  inspirational: `
+### KROK 4A: TON - MENTOR / MOTYWATOR (Inspirational)
+- STYL: Podniosły, emocjonalny, głęboki, storytellingowy.
+- ZASADA: "Każda historia ma morał". Szukaj głębszego sensu i uniwersalnej prawdy.
+- PRZYKŁAD: Zamiast "Wygrałem", napisz "To nie jest medal za bieg. To medal za te wszystkie poranki, gdy chciałem się poddać, a jednak wstałem".
+  `
+};
+
+// === ELEMENT 4B: CEL (STRATEGIA I CTA) ===
+export const GOAL_PROMPTS = {
+  engagement: `
+### KROK 4B: CEL - BUDOWANIE SPOŁECZNOŚCI (Engagement)
+- STRATEGIA: Zadawaj pytania, bądź kontrowersyjny lub bardzo "relatable" (buduj tożsamość).
+- CTA (Call to Action): Zachęcaj do dyskusji w komentarzach. Pytaj o doświadczenia odbiorców.
+- HOOK: Musi zatrzymać scrollowanie poprzez szok lub identyfikację ("Też tak masz?").
+  `,
+  viral: `
+### KROK 4B: CEL - ZASIĘG (Viral Reach)
+- STRATEGIA: Krótko, dynamicznie, szokująco. Emocje muszą być skrajne (śmiech lub płacz).
+- CTA: Zachęcaj do udostępniania (Share) i zapisywania (Save).
+- HOOK: Bardzo wizualny, obiecujący natychmiastową nagrodę (dopaminę) lub rozwiązanie problemu w 5 sekund.
+  `,
+  sales: `
+### KROK 4B: CEL - AKCJA / SPRZEDAŻ (Conversion)
+- STRATEGIA: Model AIDA (Attention, Interest, Desire, Action). Buduj autorytet -> Pokaż problem -> Daj rozwiązanie.
+- CTA: Jasna instrukcja (Kliknij link w BIO, Kup teraz, Zapisz się).
+- HOOK: Obietnica korzyści lub rozwiązania palącego problemu.
+  `
+};

services/geminiService.ts

@@ -0,0 +1,164 @@
+
+import { GoogleGenAI, Type, Schema } from "@google/genai";
+import { WizardState, GeneratedContent } from "../types";
+import { getSystemPrompt } from "../prompts";
+
+// SCHEMAT ODPOWIEDZI JSON
+const responseSchema: Schema = {
+  type: Type.OBJECT,
+  properties: {
+    caption: {
+      type: Type.STRING,
+      description: "Gotowy opis pod post na Instagram/YouTube/Strava.",
+    },
+    slides: {
+      type: Type.ARRAY,
+      description: "Lista elementów wizualnych. Dla Instagrama są to slajdy karuzeli. Dla Stravy są to sugestie zdjęć do galerii (Social Proof, Data, Reward).",
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          overlay_text: {
+            type: Type.STRING,
+            description: "Tekst na grafikę (Instagram) LUB Etykieta typu zdjęcia (Strava: np. 'DANE', 'TWARZ').",
+          },
+          image_prompt: {
+            type: Type.STRING,
+            description: "Sugestia dla użytkownika w języku polskim, jakie zdjęcie wykonać lub wybrać z galerii (np. 'Zbliżenie na zegarek z tętnem', 'Selfie z błotem na twarzy').",
+          },
+          notes: {
+             type: Type.STRING,
+             description: "Uzasadnienie, dlaczego to zdjęcie buduje zasięg/historię.",
+          }
+        },
+        required: ["overlay_text", "image_prompt"],
+      },
+    },
+  },
+  required: ["caption", "slides"],
+};
+
+export interface RefinementOptions {
+  slideCount: number;
+  feedback: string;
+}
+
+export const generateStoryContent = async (
+  data: WizardState,
+  apiKey: string,
+  refinement?: RefinementOptions
+): Promise<GeneratedContent> => {
+  if (!apiKey) {
+    throw new Error("API Key is missing.");
+  }
+
+  const ai = new GoogleGenAI({ apiKey });
+
+  // 1. POBIERZ PROMPT SYSTEMOWY (TERAZ SKLEJANY Z PUZLI)
+  const BASE_SYSTEM_PROMPT = getSystemPrompt(data);
+
+  // 2. PRZYGOTUJ DANE (STATYSTYKI I WAYPOINTS) ZAMIAST SUROWEGO GPX
+  const statsInfo = `
+    DYSTANS: ${data.stats.distance}
+    CZAS TRWANIA: ${data.stats.duration}
+    PRZEWYŻSZENIA: ${data.stats.elevation}
+  `;
+
+  const waypointsInfo = data.waypoints.length > 0 
+    ? data.waypoints.map((wp, i) => `   - Moment ${i+1}: "${wp.header}" (Kontekst: ${wp.context})`).join('\n')
+    : "Brak zdefiniowanych kluczowych punktów.";
+
+  // 2b. PRZYGOTUJ DANE Z WYCIECZKI (JEŚLI SĄ)
+  let tripInfo = "";
+  if (data.eventType === 'trip' && data.tripData) {
+    const stopsList = data.tripData.stops
+        .filter(s => s.place.trim() !== '')
+        .map((s, i) => `   ${i+1}. PRZYSTANEK: ${s.place} - Opis: ${s.description}`)
+        .join('\n');
+
+    tripInfo = `
+    === SZCZEGÓŁY WYCIECZKI (TRIP ITINERARY) ===
+    PUNKT STARTOWY: ${data.tripData.startPoint.place} (Opis: ${data.tripData.startPoint.description})
+    PUNKT KOŃCOWY: ${data.tripData.endPoint.place} (Opis: ${data.tripData.endPoint.description})
+    
+    PLAN TRASY:
+    ${stopsList}
+    
+    INSTRUKCJA DODATKOWA: Wykorzystaj te konkretne miejsca w narracji i sugestiach zdjęć.
+    `;
+  }
+
+  // 3. OBSŁUGA POPRAWEK (REFINEMENT)
+  let refinementInstruction = "";
+  if (refinement) {
+    refinementInstruction = `
+    
+    !!! WAŻNA AKTUALIZACJA OD UŻYTKOWNIKA (PRIORYTET) !!!
+    Użytkownik prosi o poprawki do poprzedniej wersji. Zignoruj poprzednie wytyczne dotyczące liczby slajdów, jeśli są inne.
+    
+    1. WYMAGANA LICZBA SLAJDÓW: Dokładnie ${refinement.slideCount}. Dostosuj tempo historii, aby idealnie wypełnić tę liczbę.
+    2. UWAGI MERYTORYCZNE: "${refinement.feedback}"
+    
+    Wprowadź te zmiany do narracji.
+    `;
+  }
+
+  // 4. SKLEJANIE PEŁNEJ INSTRUKCJI
+  const FULL_SYSTEM_INSTRUCTION = `
+    ${BASE_SYSTEM_PROMPT}
+
+    === DANE WYDARZENIA (META DANE) ===
+    TYTUŁ: "${data.title}"
+    OPIS UŻYTKOWNIKA: "${data.description}"
+    
+    === STATYSTYKI AKTYWNOŚCI (Z PLIKU GPX) ===
+    ${statsInfo}
+
+    === KLUCZOWE MOMENTY (WAYPOINTS) ===
+    ${waypointsInfo}
+
+    ${tripInfo}
+
+    ${refinementInstruction}
+    
+    Instrukcja: Wykorzystaj powyższe statystyki, konfigurację i opis użytkownika do stworzenia narracji.
+  `;
+
+  // Budowanie zapytania z tekstem i plikami (tylko obrazy/PDF, bez surowego GPX)
+  const promptParts: any[] = [];
+
+  // Dodaj pełną instrukcję
+  promptParts.push({ text: FULL_SYSTEM_INSTRUCTION });
+
+  // Dodaj pliki (Tylko obrazy i PDFy. GPX jest już przetworzony wyżej jako tekst)
+  data.files.forEach(file => {
+      // Ignorujemy treść pliku GPX w promptcie
+      if (!file.file.name.toLowerCase().endsWith('.gpx')) {
+          promptParts.push({
+              inlineData: {
+                  mimeType: file.mimeType,
+                  data: file.content as string
+              }
+          });
+      }
+  });
+
+  try {
+    const response = await ai.models.generateContent({
+      model: "gemini-3-flash-preview", 
+      contents: { parts: promptParts },
+      config: {
+        responseMimeType: "application/json",
+        responseSchema: responseSchema,
+      },
+    });
+
+    if (response.text) {
+      return JSON.parse(response.text) as GeneratedContent;
+    } else {
+      throw new Error("Nie udało się wygenerować treści.");
+    }
+  } catch (error) {
+    console.error("Gemini API Error:", error);
+    throw error;
+  }
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,84 @@
+
+export type Platform = 'instagram' | 'youtube' | 'strava';
+export type ContextType = 'relacja' | 'opowiesc';
+export type StoryStyle = 'noir' | 'fantasy'; // New sub-step type
+export type EventType = 'sport' | 'culture' | 'trip' | 'party' | 'work' | 'other';
+export type Tone = 'funny' | 'serious' | 'inspirational';
+export type Goal = 'engagement' | 'viral' | 'sales';
+
+export interface ActivityStats {
+  distance: string;
+  duration: string;
+  elevation: string;
+}
+
+export interface Waypoint {
+  id: string;
+  header: string;
+  context: string;
+}
+
+export interface UploadedFile {
+  id: string;
+  file: File;
+  previewUrl?: string; // For images
+  content?: string; // Base64 or Text content
+  mimeType: string;
+}
+
+export interface TripPoint {
+  place: string;
+  description: string;
+  addressPreview?: string; // Full address for UI confirmation
+}
+
+export interface TripStop {
+  id: string;
+  place: string;
+  description: string;
+  addressPreview?: string; // Full address for UI confirmation
+}
+
+export interface TripData {
+  startPoint: TripPoint;
+  endPoint: TripPoint;
+  stops: TripStop[];
+  travelMode: 'DRIVING' | 'WALKING' | null;
+  googleMapsKey?: string; // Restored for manual fallback
+}
+
+export interface WizardState {
+  step: number;
+  context: ContextType | null;
+  storyStyle: StoryStyle | null; // New field
+  platform: Platform | null;
+  eventType: EventType | null;
+  tone: Tone | null;
+  goal: Goal | null;
+  title: string;
+  description: string;
+  files: UploadedFile[];
+  stats: ActivityStats;
+  waypoints: Waypoint[];
+  tripData?: TripData; // Optional, only for eventType === 'trip'
+}
+
+export interface SlideContent {
+  overlay_text: string;
+  image_prompt: string;
+  notes: string;
+}
+
+export interface GeneratedContent {
+  caption: string;
+  slides: SlideContent[];
+}
+
+export enum Step {
+  CONTEXT = 0,
+  EVENT_TYPE = 1,
+  PLATFORM = 2,
+  TONE_GOAL = 3,
+  DETAILS = 4,
+  RESULT = 5,
+}

utils/fileUtils.ts

@@ -0,0 +1,43 @@
+import { UploadedFile } from '../types';
+
+export const processFile = async (file: File): Promise<UploadedFile> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      const result = e.target?.result as string;
+      
+      // Determine simplified MIME type for Gemini
+      let mimeType = file.type;
+      
+      // Handle GPX explicitly as text if the browser doesn't detect it perfectly
+      if (file.name.toLowerCase().endsWith('.gpx')) {
+        mimeType = 'text/plain'; // Treat GPX as text for the prompt
+      } else if (file.name.toLowerCase().endsWith('.pdf')) {
+        mimeType = 'application/pdf';
+      }
+
+      // Extract base64 data if it's an image or PDF
+      let content = result;
+      if (result.includes('base64,')) {
+         content = result.split('base64,')[1];
+      }
+
+      resolve({
+        id: crypto.randomUUID(),
+        file,
+        previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+        content: content,
+        mimeType: mimeType
+      });
+    };
+
+    reader.onerror = () => reject(new Error('Error reading file'));
+
+    if (file.name.toLowerCase().endsWith('.gpx')) {
+        reader.readAsText(file); // Read GPX as text
+    } else {
+        reader.readAsDataURL(file); // Read Images/PDFs as Base64
+    }
+  });
+};

utils/gpxUtils.ts

@@ -0,0 +1,100 @@
+import { ActivityStats } from '../types';
+
+export const parseGpxFile = async (file: File): Promise<ActivityStats> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const text = e.target?.result as string;
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(text, 'text/xml');
+
+        const trkpts = Array.from(xmlDoc.getElementsByTagName('trkpt'));
+        
+        if (trkpts.length === 0) {
+           // Fallback for rtept if no trkpt
+           const rtepts = Array.from(xmlDoc.getElementsByTagName('rtept'));
+           if (rtepts.length === 0) {
+             throw new Error('No track points found in GPX');
+           }
+        }
+
+        let totalDistance = 0;
+        let totalTime = 0;
+        let elevationGain = 0;
+        let startTime: Date | null = null;
+        let endTime: Date | null = null;
+        let lastEle: number | null = null;
+
+        for (let i = 0; i < trkpts.length; i++) {
+          const lat1 = parseFloat(trkpts[i].getAttribute('lat') || '0');
+          const lon1 = parseFloat(trkpts[i].getAttribute('lon') || '0');
+          const ele = parseFloat(trkpts[i].getElementsByTagName('ele')[0]?.textContent || '0');
+          const timeStr = trkpts[i].getElementsByTagName('time')[0]?.textContent;
+
+          if (i > 0) {
+            const lat2 = parseFloat(trkpts[i - 1].getAttribute('lat') || '0');
+            const lon2 = parseFloat(trkpts[i - 1].getAttribute('lon') || '0');
+            totalDistance += getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2);
+
+            // Elevation gain
+            if (lastEle !== null && ele > lastEle) {
+                elevationGain += (ele - lastEle);
+            }
+          }
+
+          if (timeStr) {
+            const time = new Date(timeStr);
+            if (!startTime) startTime = time;
+            endTime = time;
+          }
+          
+          if (!isNaN(ele)) lastEle = ele;
+        }
+
+        if (startTime && endTime) {
+            totalTime = (endTime.getTime() - startTime.getTime()); // ms
+        }
+
+        resolve({
+          distance: `${totalDistance.toFixed(2)} km`,
+          duration: msToTime(totalTime),
+          elevation: `${Math.round(elevationGain)}m`,
+        });
+
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    reader.onerror = () => reject(new Error('Error reading file'));
+    reader.readAsText(file);
+  });
+};
+
+// Haversine formula
+function getDistanceFromLatLonInKm(lat1: number, lon1: number, lat2: number, lon2: number) {
+  const R = 6371; // Radius of the earth in km
+  const dLat = deg2rad(lat2 - lat1);
+  const dLon = deg2rad(lon2 - lon1);
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
+    Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  const d = R * c; // Distance in km
+  return d;
+}
+
+function deg2rad(deg: number) {
+  return deg * (Math.PI / 180);
+}
+
+function msToTime(duration: number) {
+    if (duration <= 0) return "0h 00m";
+    const minutes = Math.floor((duration / (1000 * 60)) % 60);
+    const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+  
+    return `${hours}h ${minutes}m`;
+  }

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});