function MainComponent() { const [currentLanguage, setCurrentLanguage] = React.useState("en"); const [currentPage, setCurrentPage] = React.useState("home"); const [galleryImages, setGalleryImages] = React.useState([]); const [currentImageIndex, setCurrentImageIndex] = React.useState(0); const [translations, setTranslations] = React.useState({}); const [isTranslating, setIsTranslating] = React.useState(false); const languages = { en: "English", tr: "Türkçe", ku: "Kurdî", ar: "العربية" }; const baseTranslations = { en: { title: "Desen", subtitle: "Where Stories Become Patterns", description: "Create AI-generated patterns that fuse traditional cultural motifs with your personal journey.", startCreating: "Start Creating", exploreGallery: "Explore Gallery", howItWorks: "How it works", step1: "1. Choose Motif - select from nature patterns", step2: "2. Pick Style - Choose from traditional to modern interpretations", step3: "3. Share Story - Upload image and answer personal questions", step4: "4. Generate Pattern - AI creates your unique pattern and story", about: "About", fusionTool: "Fusion Tool", gallery: "Gallery", whatIsDesen: "What is Desen?", theTeam: "The Team", researchMethodology: "Research & Methodology", theVision: "The Vision", stepChooseMotif: "Step 1: Choose your motif", stepChooseStyle: "Step 2: Choose your Style", stepUploadImage: "Step 3: Upload Your Image", stepTellStory: "Step 4: Tell Your Story", stepGeneratedPattern: "Your Unique Pattern", selectMotifDesc: "Select a traditional motif that resonates with your cultural story. Click on any motif below to continue.", selectStyleDesc: "Select an artistic style for your", uploadImageDesc: "Upload an image that represents your story, journey, or cultural background. This will help influence the colors and mood of your pattern.", shareJourneyDesc: "Share your journey to help create a personalized story for your pattern.", clickToUpload: "Click to upload an image", clickToChange: "Click to change image", supportedFormats: "JPG, PNG, or GIF (max 10MB)", greatChoice: "Great choice!", selected: "selected.", perfect: "Perfect!", styleSelected: "style selected.", imageUploaded: "Image uploaded successfully!", continueToStyle: "Continue to Style Selection →", continueToImage: "Continue to Image Upload →", continueToStory: "Continue to Your Story →", back: "← Back", whereFrom: "Where are you from? *", whereLiveNow: "Where do you live now? *", feelsAtHome: "Do you feel at home where you live?", areHomesick: "Are you homesick?", missingCultural: "What cultural elements do you miss most?", selectOption: "Select...", yesFeelHome: "Yes, I feel at home", noFeelHome: "No, I don't feel at home", sometimes: "Sometimes", yesOften: "Yes, often", noNotReally: "No, not really", requiredFields: "* Required fields. This may take 30-60 seconds to generate.", generatePattern: "Generate My Pattern", creatingPattern: "Creating Your Pattern...", patternStory: "Your Pattern's Story", createAnother: "Create Another Pattern", downloadPattern: "Download Pattern", extractedColors: "Extracted Colors:", extractingColors: "Extracting colors...", noPatterns: "No patterns created yet. Be the first to create one!", journey: "Journey:", feelsAtHomeLabel: "Feels at home:", homesickLabel: "Homesick:", missingLabel: "Missing:", yes: "Yes", no: "No", loadingGallery: "Loading gallery...", translating: "Translating...", aboutDesen: "Desen is an innovative AI-powered platform that bridges traditional cultural motifs with personal narratives of migration and belonging. Through advanced machine learning, we create unique patterns that tell stories of identity, memory, and cultural fusion.", teamDescription: "Our interdisciplinary team combines expertise in artificial intelligence, cultural studies, textile arts, and migration research to create meaningful digital experiences that honor traditional craftsmanship while embracing technological innovation.", researchDescription: "Our approach combines traditional pattern analysis with contemporary machine learning techniques. We study historical textile patterns from various cultures and use AI to create new interpretations that reflect modern migration stories while respecting cultural heritage.", visionDescription: "We envision a world where technology serves as a bridge between cultures, allowing people to express their unique stories through the universal language of pattern and design. Desen represents the future of cultural preservation and innovation." }, tr: { title: "Desen", subtitle: "Hikayelerin Desene Dönüştüğü Yer", description: "Kişisel yolculuğunuzla geleneksel kültürel motifleri birleştiren benzersiz AI destekli desenler yaratın. Her desen göç, hafıza ve aidiyet hikayesi anlatır.", startCreating: "Yaratmaya Başla", exploreGallery: "Galeriyi Keşfet", howItWorks: "Nasıl çalışır", step1: "1. Motif Seç - doğa desenlerinden seç", step2: "2. Stil Seç - Ji kevnar heta modern şêweyan hilbijêre", step3: "3. Çîroka xwe Parve bike - wêne bar bike û bersivên pirsên kesane bide", step4: "4. Nexş Afirandin - AI nexş û çîroka te ya taybetî diafirîne", about: "Hakkında", fusionTool: "Füzyon Aracı", gallery: "Galeri", whatIsDesen: "Desen Nedir?", theTeam: "Ekip", researchMethodology: "Araştırma ve Metodoloji", theVision: "Dîtin", stepChooseMotif: "Adım 1: Motifini seç", stepChooseStyle: "Adım 2: Stilini seç", stepUploadImage: "Adım 3: Fotoğrafını Yükle", stepTellStory: "Adım 4: Hikayeni Anlat", stepGeneratedPattern: "Benzersiz Desenin", selectMotifDesc: "Select a traditional motif that resonates with your cultural story. Click on any motif below to continue.", selectStyleDesc: "Select an artistic style for your", uploadImageDesc: "Upload an image that represents your story, journey, or cultural background. This will help influence the colors and mood of your pattern.", shareJourneyDesc: "Share your journey to help create a personalized story for your pattern.", clickToUpload: "Click to upload an image", clickToChange: "Click to change image", supportedFormats: "JPG, PNG, or GIF (max 10MB)", greatChoice: "Hilbijartinek hêja!", selected: "hate hilbijartin.", perfect: "Bêkêmasî!", styleSelected: "şêwe hate hilbijartin.", imageUploaded: "Wêne bi serkeftî hate barkirin!", continueToStyle: "Berbi Hilbijartina Şêweyê Biçe →", continueToImage: "Berbi Barkirina Wêneyê Biçe →", continueToStory: "Berbi Çîroka xwe Biçe →", back: "← Paşve", whereFrom: "Tu ji ku derî? *", whereLiveNow: "Niha tu li ku dijî? *", feelsAtHome: "Tu li cîhê ku tê de dijî xwe li malê his dikey?", areHomesick: "Tu bêrîya malê dikişînî?", missingCultural: "Tu herî zêde kîjan hêmanên çandî winda dikî?", selectOption: "Hilbijêre...", yesFeelHome: "Erê, ez xwe li malê his dikim", noFeelHome: "Na, ez xwe li malê his nakim", sometimes: "Carinan", yesOften: "Erê, pir caran", noNotReally: "Na, ne pir", requiredFields: "* Qadên pêwîst. Ev dikare 30-60 çirke bigire.", generatePattern: "Nexşa Min Afirandin", creatingPattern: "Nexşa te tê afirandin...", patternStory: "Çîroka Nexşa te", createAnother: "Nexşek Din Biafirîne", downloadPattern: "Nexşê Daxe", extractedColors: "Rengên Derxistî:", extractingColors: "Reng tên derxistin...", noPatterns: "Hêj nexş nehatine afirandin. Yekemîn tu be!", journey: "Rêwît:", feelsAtHomeLabel: "Li malê his dike:", homesickLabel: "Bêrîya malê:", missingLabel: "Winda dike:", yes: "Erê", no: "Na", loadingGallery: "Galerî tê barkirin...", translating: "Tê wergerandin...", aboutDesen: "Desen platformeke nûjen a bi AI ve ye ku motîfên çandî yên kevnar bi vegotinên kesane yên koçberî û jîyanê girê dide. Bi fêrbûna makîneyê ya pêşketî, em nexşên bêhempa diafirînin ku çîrokên nasname, bîr û hevgirtina çandî vedibêjin.", teamDescription: "Tîma me ya navdîsîplîner pisporiya di zîrekyakirinê, lêkolînên çandî, hunerên tekstîl û lêkolînên koçberiyê de dihêne hev da ku ezmûnên dîjîtal ên watedar çêbikininî ku karsaziya kevnar rêz digirin û nûvekirina teknolojîk qebûl dikin.", researchDescription: "Nêzîkatiya me şirovekirina nexşên kevnar bi teknîkên fêrbûna makîneyê yên nûjen re dihêne hev. Em nexşên tekstîlê yên dîrokî ji çandên cûrbecûr dixwînin û AI bi kar tînin da ku şirovekirinên nû çêbikin ku çîrokên koçberiya nûjen nîşan bidin dema ku rêzdarî mirata çandî dikin.", visionDescription: "Em cîhanek xuya dikin ku teknolojî wek pirê di navbera çandan de xizmet bike, rê bide mirov ku çîrokên xwe yên taybetî bi zimanê gerdûnî yê nexş û sêwiran diyar bikin. Desen pêşeroja parastina çandî û nûvekirinê temsîll dike." }, ku: { title: "Desen", subtitle: "Deh Çîrok Dibin Naxş", description: "Nexşên taybetî yên AI-yê afirandin ku motîfên çandî yên kevnar bi rêwîtiya te ya kesane re dihêne pev. Her nexş çîrokek koçberî, bîr û jîyanê vedibêje.", startCreating: "Dest bi Afirandine bike", exploreGallery: "Galeriyê Vekolîne", howItWorks: "Çawa dixebite", step1: "1. Motîff Hilbijêre - ji nexşên xwezayê hilbijêre", step2: "2. Şêwe Hilbijêre - Ji kevnar heta modern şêweyan hilbijêre", step3: "3. Çîroka xwe Parve bike - wêne bar bike û bersivên pirsên kesane bide", step4: "4. Nexş Afirandin - AI nexş û çîroka te ya taybetî diafirîne", about: "Derbar", fusionTool: "Amûra Hevgirtinê", gallery: "Galerî", whatIsDesen: "Desen Çi ye?", theTeam: "Tîm", researchMethodology: "Lêkolînû Metodolojî", theVision: "Dîtin", stepChooseMotif: "Gav 1: Motîfa xwe hilbijêre", stepChooseStyle: "Gav 2: Şêweya xwe hilbijêre", stepUploadImage: "Gav 3: Wêneya xwe Bar bike", stepTellStory: "Gav 4: Çîroka xwe Bibêje", stepGeneratedPattern: "Nexşa Te ya Taybetî", selectMotifDesc: "Motîffek kevnar hilbijêre ku bi çîroka te ya çandî re li hev bike. Ji bo berdewamkirinê li her motîfek li jêr bitikîne.", selectStyleDesc: "Ji bo hilbijartina xwe şêweyek hunerî hilbijêre", uploadImageDesc: "Wêneyek bar bike ku çîrok, rêwît an jî paşxaneya te ya çandî nîşan bide. Ev ê ji bo bandorkirina reng û rewşa nexşa te alîkar be.", shareJourneyDesc: "Rêwîtiya xwe parve bike da ku ji bo nexşa te çîrokek kesane çêbibe.", clickToUpload: "Ji bo barkirina wêneyê bitikîne", clickToChange: "Ji bo guhertina wêneyê bitikîne", supportedFormats: "JPG, PNG an GIF (herî zêde 10MB)", greatChoice: "Hilbijartinek hêja!", selected: "hate hilbijartin.", perfect: "Bêkêmasî!", styleSelected: "şêwe hate hilbijartin.", imageUploaded: "Wêne bi serkeftî hate barkirin!", continueToStyle: "Berbi Hilbijartina Şêweyê Biçe →", continueToImage: "Berbi Barkirina Wêneyê Biçe →", continueToStory: "Berbi Çîroka xwe Biçe →", back: "← Paşve", whereFrom: "Tu ji ku derî? *", whereLiveNow: "Niha tu li ku dijî? *", feelsAtHome: "Tu li cîhê ku tê de dijî xwe li malê his dikey?", areHomesick: "Tu bêrîya malê dikişînî?", missingCultural: "Tu herî zêde kîjan hêmanên çandî winda dikî?", selectOption: "Hilbijêre...", yesFeelHome: "Erê, ez xwe li malê his dikim", noFeelHome: "Na, ez xwe li malê his nakim", sometimes: "Carinan", yesOften: "Erê, pir caran", noNotReally: "Na, ne pir", requiredFields: "* Qadên pêwîst. Ev dikare 30-60 çirke bigire.", generatePattern: "Nexşa Min Afirandin", creatingPattern: "Nexşa te tê afirandin...", patternStory: "Çîroka Nexşa te", createAnother: "Nexşek Din Biafirîne", downloadPattern: "Nexşê Daxe", extractedColors: "Rengên Derxistî:", extractingColors: "Reng tên derxistin...", noPatterns: "Hêj nexş nehatine afirandin. Yekemîn tu be!", journey: "Rêwît:", feelsAtHomeLabel: "Li malê his dike:", homesickLabel: "Bêrîya malê:", missingLabel: "Winda dike:", yes: "Erê", no: "Na", loadingGallery: "Galerî tê barkirin...", translating: "Tê wergerandin...", aboutDesen: "Desen platformeê nûjen a bi AI ve ye ku motîfên çandî yên kevnar bi vegotinên kesane yên koçberî û jîyanê girê dide. Bi fêrbûna makîneyê ya pêşketî, em nexşên bêhempa diafirînin ku çîrokên nasname, bîr û hevgirtina çandî vedibêjin.", teamDescription: "Tîma me ya navdîsîplîner pisporiya di zîrekyakirinê, lêkolînên çandî, hunerên tekstîl û lêkolînên koçberiyê de dihêne hev da ku ezmûnên dîjîtal ên watedar çêbikin ku karsaziya kevnar rêz digirin û nûvekirina teknolojîk qebûl dikin.", researchDescription: "Nêzîkatiya me şirovekirina nexşên kevnar bi teknîkên fêrbûna makîneyê yên nûjen re dihêne hev. Em nexşên tekstîlê yên dîrokî ji çandên cûrbecûr dixwînin û AI bi kar tînin da ku şirovekirinên nû çêbikin ku çîrokên koçberiya nûjen nîşanan bidin dema ku rêzdarî mirata çandî dikin.", visionDescription: "Em cîhanek xuya dikin ku teknolojî wek pirê di navbera çandan de xizmet bike, rê bide mirov ku çîrokên xwe yên taybetî bi zimanê gerdûnî yê nexş û sêwiran diyar bikin. Desen pêşeroja parastina çandî û nûvekirinê temsîl dike." }, ar: { title: "ديسن", subtitle: "حيث تصبح القصص أنماطاً", description: "أنشئ أنماطاً فريدة مدعومة بالذكاء الاصطناعي تدمج الزخارف الثقافية التقليدية مع رحلتك الشخصية. كل نمط يحكي قصة الهجرة والذاكرة والانتماء.", startCreating: "ابدأ الإنشاء", exploreGallery: "استكشف المعرض", howItWorks: "كيف يعمل", step1: "1. اختر الزخرفة - اختر من أنماط الطبيعة", step2: "2. اختر الأسلوب - اختر من التفسيرات التقليدية إلى الحديثة", step3: "3. شارك قصتك - ارفع صورة وأجب على الأسئلة الشخصية", step4: "4. إنشاء النمط - الذكاء الاصطناعي ينشئ نمطك وقصتك الفريدة", about: "حول", fusionTool: "أداة الدمج", gallery: "المعرض", whatIsDesen: "ما هو ديسن؟", theTeam: "الفريق", researchMethodology: "البحث والمنهجية", theVision: "الرؤية", stepChooseMotif: "الخطوة 1: اختر زخرفتك", stepChooseStyle: "الخطوة 2: اختر أسلوبك", stepUploadImage: "الخطوة 3: ارفع صورتك", stepTellStory: "الخطوة 4: احك قصتك", stepGeneratedPattern: "نمطك الفريد", selectMotifDesc: "اختر زخرفة تقليدية تتردد مع قصتك الثقافية. انقر على أي زخرفة أدناه للمتابعة.", selectStyleDesc: "اختر أسلوباً فنياً لاختيارك", uploadImageDesc: "ارفع صورة تمثل قصتك أو رحلتك أو خلفيتك الثقافية. هذا سيساعد في التأثير على ألوان ومزاج نمطك.", shareJourneyDesc: "شارك رحلتك للمساعدة في إنشاء قصة شخصية لنمطك.", clickToUpload: "انقر لرفع صورة", clickToChange: "انقر لتغيير الصورة", supportedFormats: "JPG أو PNG أو GIF (حد أقصى 10 ميجابايت)", greatChoice: "اختيار رائع!", selected: "مُختارة.", perfect: "مثالي!", styleSelected: "الأسلوب مُختار.", imageUploaded: "تم رفع الصورة بنجاح!", continueToStyle: "المتابعة إلى اختيار الأسلوب ←", continueToImage: "المتابعة إلى رفع الصورة ←", continueToStory: "المتابعة إلى قصتك ←", back: "← العودة", whereFrom: "من أين أنت؟ *", whereLiveNow: "أين تعيش الآن؟ *", feelsAtHome: "هل تشعر بأنك في المنزل حيث تعيش؟", areHomesick: "هل تشعر بالحنين للوطن؟", missingCultural: "ما هي العناصر الثقافية التي تفتقدها أكثر؟", selectOption: "اختر...", yesFeelHome: "نعم، أشعر بأنني في المنزل", noFeelHome: "لا، لا أشعر بأنني في المنزل", sometimes: "أحياناً", yesOften: "نعم، كثيراً", noNotReally: "لا، ليس حقاً", requiredFields: "* الحقول المطلوبة. قد يستغرق هذا 30-60 ثانية.", generatePattern: "إنشاء نمطي", creatingPattern: "يتم إنشاء نمطك...", patternStory: "قصة نمطك", createAnother: "إنشاء نمط آخر", downloadPattern: "تحميل النمط", extractedColors: "الألوان المستخرجة:", extractingColors: "يتم استخراج الألوان...", noPatterns: "لم يتم إنشاء أنماط بعد. كن الأول!", journey: "الرحلة:", feelsAtHomeLabel: "يشعر بأنه في المنزل:", homesickLabel: "الحنين للوطن:", missingLabel: "يفتقد:", yes: "نعم", no: "لا", loadingGallery: "يتم تحميل المعرض...", translating: "يتم الترجمة...", aboutDesen: "ديسن هي منصة مبتكرة مدعومة بالذكاء الاصطناعي تربط بين الزخارف الثقافية التقليدية والسرديات الشخصية للهجرة والانتماء. من خلال التعلم الآلي المتقدم، ننشئ أنماطاً فريدة تحكي قصص الهوية والذاكرة والدمج الثقافي.", teamDescription: "يجمع فريقنا متعدد التخصصات بين الخبرة في الذكاء الاصطناعي والدراسات الثقافية وفنون النسيج وبحوث الهجرة لإنشاء تجارب رقمية ذات معنى تكرم الحرفية التقليدية وتحتضن الابتكار التكنولوجي.", researchDescription: "يجمع نهجنا بين تحليل الأنماط التقليدية وتقنيات التعلم الآلي المعاصرة. ندرس أنماط النسيج التاريخية من ثقافات مختلفة ونستخدم الذكاء الاصطناعي لإنشاء تفسيرات جديدة تعكس قصص الهجرة الحديثة مع احترام التراث الثقافي.", visionDescription: "نتصور عالماً تكون فيه التكنولوجيا جسراً بين الثقافات، تسمح للناس بالتعبير عن قصصهم الفريدة من خلال اللغة العالمية للنمط والتصميم. يمثل ديسن مستقبل الحفاظ على الثقافة والابتكار." } }; React.useEffect(()=>{ setTranslations(baseTranslations[currentLanguage] || baseTranslations.en); setIsTranslating(false); }, [ currentLanguage ]); React.useEffect(()=>{ const loadGalleryImages = async ()=>{ try { const response = await fetch("/api/get-patterns", { method: "POST" }); const data = await response.json(); if (data && data.patterns) { setGalleryImages(data.patterns.map((p)=>p.pattern_image_url)); } } catch (error) { console.error("Error loading gallery:", error); } }; loadGalleryImages(); }, []); React.useEffect(()=>{ if (galleryImages.length > 0) { const interval = setInterval(()=>{ setCurrentImageIndex((prev)=>(prev + 1) % galleryImages.length); }, 2000); return ()=>clearInterval(interval); } }, [ galleryImages.length ]); const renderHomePage = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white flex items-start justify-center px-4 relative overflow-hidden pt-16", __source: { fileName: "", lineNumber: 373, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-between px-2 sm:px-4 md:px-8 lg:px-16 pointer-events-none", __source: { fileName: "", lineNumber: 374, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] sm:w-[300px] md:w-[400px] lg:w-[500px] xl:w-[550px] 2xl:w-[600px] flex-shrink-0 -ml-4 sm:-ml-8 md:-ml-12 lg:-ml-20 xl:-ml-24 2xl:-ml-28 mt-8 sm:mt-12 md:mt-16 lg:mt-20", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bc9f7d83-0a96-48d9-90a6-0520b5c078a5/-/format/auto/", alt: "Pomegranate illustration", className: "w-full h-auto", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[200px] sm:w-[300px] md:w-[400px] lg:w-[500px] xl:w-[550px] 2xl:w-[600px] flex-shrink-0 -mr-4 sm:-mr-8 md:-mr-12 lg:-mr-20 xl:-mr-24 2xl:-mr-28", __source: { fileName: "", lineNumber: 382, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/5fe15719-7bab-4cc6-ba44-675d740633a2/-/format/auto/", alt: "Pomegranate illustration", className: "w-full h-auto", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-2xl mx-auto relative z-10", __source: { fileName: "", lineNumber: 390, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 391, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/646cc2e2-7f57-4348-a775-d4106d883ff2/-/format/auto/", alt: "Desen Logo", className: "mx-auto h-24 sm:h-32 md:h-40 lg:h-48 w-auto", __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl md:text-3xl text-gray-800 mb-8 font-light", __source: { fileName: "", lineNumber: 398, columnNumber: 11 }, __self: this }, translations.subtitle || "Where Stories Become Patterns"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-0 items-center", __source: { fileName: "", lineNumber: 401, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("fusion"), className: "px-6 sm:px-8 py-2 text-blue-800 text-lg sm:text-xl font-semibold hover:text-blue-900 transition-colors", __source: { fileName: "", lineNumber: 402, columnNumber: 13 }, __self: this }, translations.startCreating || "Start Creating"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("gallery"), className: "px-6 sm:px-8 py-2 text-blue-800 text-lg sm:text-xl font-semibold hover:text-blue-900 transition-colors", __source: { fileName: "", lineNumber: 408, columnNumber: 13 }, __self: this }, translations.exploreGallery || "Explore Gallery"))))); const renderAboutPage = ()=>/*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative overflow-hidden py-16 px-4", __source: { fileName: "", lineNumber: 421, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed w-full h-full z-0", style: { top: "80px", left: "0", right: "0", bottom: "0" }, __source: { fileName: "", lineNumber: 422, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/7ffbbdac-8dc7-4556-afe5-c1f99c4872b4/-/format/auto/", alt: "Blue tulips background", className: "w-full h-full object-contain", style: { objectPosition: "center top" }, __source: { fileName: "", lineNumber: 426, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto relative z-10 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 433, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-red-700 mb-12 text-center lobster-font", __source: { fileName: "", lineNumber: 434, columnNumber: 9 }, __self: this }, translations.about || "About"), /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 437, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 sm:p-8 lg:p-12 shadow-lg", __source: { fileName: "", lineNumber: 439, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-red-700 mb-6 lobster-font", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, "Plants Don't Care About Borders"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 text-gray-700 leading-relaxed", __source: { fileName: "", lineNumber: 443, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-[#3F51B5]", __source: { fileName: "", lineNumber: 444, columnNumber: 15 }, __self: this }, "Desen: A digital platform exploring migration through nature motifs"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 448, columnNumber: 15 }, __self: this }, "Istanbul has always been a crossroads, a catalyst, and a hub for movement; especially for people, plants, and crafts. It's a city shaped by migration, hybridity, and transformation. Today, it holds tension: with a record number of migrants navigate a transitory purgatory, disconnected from land and uncertain of future, while locals watch the city change beyond recognition."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 456, columnNumber: 15 }, __self: this }, "We created a digital tool to engage with this moment.", " ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this }, "Desen"), ' means "pattern" in Turkish. In the phrase', " ", /*#__PURE__*/ React.createElement("em", { __source: { fileName: "", lineNumber: 459, columnNumber: 17 }, __self: this }, "desen desen insanlar"), ', it also means "all kinds of people." Operated through AI, it allows users to design personalized patterns using traditional motifs and cultural styles—infused with their own memories and imagery. Desen offers a way to reconnect with heritage, make space for this transitory present, and imagine new forms of belonging.'), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 466, columnNumber: 15 }, __self: this }, "Desen creates a visual and narrated story of movement, connecting geographic, social, and creative threads. Motifs like the tulip, pomegranate, and carnation have crossed empires and centuries—reimagined by palace artisans, village craftspeople, and political resistance movements. The tulip alone has traveled through over 75 countries, causing economic crises, inspiring poetry, and surviving exile. It does not care about borders. People, by contrast, often face restrictions, disconnection, and displacement."), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-[#3F51B5] text-center", __source: { fileName: "", lineNumber: 477, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 478, columnNumber: 17 }, __self: this }, "Plants move freely. People often cannot.")))), /*#__PURE__*/ React.createElement("div", { className: "h-32", __source: { fileName: "", lineNumber: 484, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 sm:p-8 lg:p-12 shadow-lg", __source: { fileName: "", lineNumber: 487, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#3F51B5] mb-6 text-center lobster-font", __source: { fileName: "", lineNumber: 488, columnNumber: 13 }, __self: this }, "A speculative design approach"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 text-gray-700 leading-relaxed", __source: { fileName: "", lineNumber: 491, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 492, columnNumber: 15 }, __self: this }, "Desen explores this contradiction: Why do we welcome the movement of ecology and craft, but not the carriers of it? Why is there resistance to seeing our shared threads?"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 497, columnNumber: 15 }, __self: this }, "Through Desen, these patterns become a living archive that users can contribute to and reimagine as:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-6 space-y-2", __source: { fileName: "", lineNumber: 501, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 502, columnNumber: 17 }, __self: this }, "Visual carriers of memory and resilience"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 503, columnNumber: 17 }, __self: this }, "Acts of cultural agency and resistance"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, "Tools for reclaiming craft and identity"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 505, columnNumber: 17 }, __self: this }, "Bridges between heritage and contemporary experience")))), /*#__PURE__*/ React.createElement("div", { className: "h-32", __source: { fileName: "", lineNumber: 511, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 sm:p-8 lg:p-12 shadow-lg", __source: { fileName: "", lineNumber: 514, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#3F51B5] mb-6 text-center lobster-font", __source: { fileName: "", lineNumber: 515, columnNumber: 13 }, __self: this }, "Who are we?"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 text-gray-700 leading-relaxed", __source: { fileName: "", lineNumber: 518, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 519, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-[#3F51B5] mb-3", __source: { fileName: "", lineNumber: 520, columnNumber: 17 }, __self: this }, "Lama Hasan"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 523, columnNumber: 17 }, __self: this }, "is a landscape architect, researcher, and educator working across ecological restoration, public space, and heritage storytelling. She leads ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 526, columnNumber: 43 }, __self: this }, "Baladi Creative"), ", a platform exploring how design can support healing in contexts of displacement. Lama teaches at City College New York, and her work has been supported by AADK Spain and Gate 27 Istanbul.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 534, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-red-700 mb-3", style: { backgroundColor: "white" }, __source: { fileName: "", lineNumber: 535, columnNumber: 17 }, __self: this }, "Anna Rebecca Unterholzner (PhD)"), /*#__PURE__*/ React.createElement("p", { style: { backgroundColor: "white" }, __source: { fileName: "", lineNumber: 541, columnNumber: 17 }, __self: this }, "is a transdisciplinary artist, designer, researcher, and lecturer working at the intersection of immersive systems, interactive media, and human-centered design. Her practice explores how affect, embodiment, and narrative shape emotional experiences through technology. She teaches at different universities in Portugal and Germany.")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 551, columnNumber: 15 }, __self: this }, "Together as ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 552, columnNumber: 29 }, __self: this }, "Baladi x aru"), ", our work is grounded in culture and heritage, but is open to new forms of storytelling, collaboration, and collective authorship. This work is supported by ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 555, columnNumber: 38 }, __self: this }, "Gate 27"), "."))), /*#__PURE__*/ React.createElement("div", { className: "h-32", __source: { fileName: "", lineNumber: 561, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 sm:p-8 lg:p-12 shadow-lg", __source: { fileName: "", lineNumber: 564, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center text-[#3F51B5] mb-12 lobster-font", __source: { fileName: "", lineNumber: 565, columnNumber: 13 }, __self: this }, translations.howItWorks || "How it works"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 568, columnNumber: 13 }, __self: this }, [ "Choose Motif", "Pick Style", "Share Story", "Generate Pattern" ].map((title, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-center p-6 rounded-lg bg-white shadow-sm", __source: { fileName: "", lineNumber: 575, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#3F51B5] mb-4", __source: { fileName: "", lineNumber: 579, columnNumber: 19 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-red-700 mb-2", __source: { fileName: "", lineNumber: 582, columnNumber: 19 }, __self: this }, title)))))))); const renderFusionTool = ()=>/*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative overflow-hidden py-16 px-4", __source: { fileName: "", lineNumber: 595, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed w-full h-full z-0", style: { top: "80px", left: "0", right: "0", bottom: "0" }, __source: { fileName: "", lineNumber: 596, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f832fe6f-3151-4cee-be65-59d9c08f820a/-/format/auto/", alt: "Turquoise carnation background", className: "w-full h-full object-contain", style: { objectPosition: "center top" }, __source: { fileName: "", lineNumber: 600, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto relative z-10", __source: { fileName: "", lineNumber: 607, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FusionTool, { translations: translations, setCurrentPage: setCurrentPage, __source: { fileName: "", lineNumber: 608, columnNumber: 9 }, __self: this }))); const renderGallery = ()=>/*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative overflow-hidden py-8 sm:py-16 px-4", __source: { fileName: "", lineNumber: 617, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed w-full h-full z-0", style: { top: "80px", left: "0", right: "0", bottom: "0" }, __source: { fileName: "", lineNumber: 618, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/b6dd7ba1-0c7b-43cd-b29e-09cc0abb888c/-/format/auto/", alt: "Leaf background", className: "w-full h-full object-contain", style: { objectPosition: "center top" }, __source: { fileName: "", lineNumber: 622, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto relative z-10 pb-16 sm:pb-0", __source: { fileName: "", lineNumber: 629, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Gallery, { translations: translations, __source: { fileName: "", lineNumber: 630, columnNumber: 9 }, __self: this }))); const [showMobileMenu, setShowMobileMenu] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 638, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 639, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); .lobster-font { font-family: 'Lobster', cursive; } `), /*#__PURE__*/ React.createElement("nav", { className: "bg-white relative z-50", __source: { fileName: "", lineNumber: 646, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 647, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 648, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("home"), className: "flex items-center", __source: { fileName: "", lineNumber: 649, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/88adc483-872f-4529-be8d-fd705402fc3c/-/format/auto/", alt: "Desen Logo", className: "h-8 sm:h-10 md:h-12 w-auto", __source: { fileName: "", lineNumber: 653, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:flex items-center space-x-8", __source: { fileName: "", lineNumber: 659, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("about"), className: `px-4 py-2 text-lg ${currentPage === "about" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 660, columnNumber: 15 }, __self: this }, translations.about || "About"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("fusion"), className: `px-4 py-2 text-lg ${currentPage === "fusion" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 666, columnNumber: 15 }, __self: this }, translations.fusionTool || "Fusion Tool"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("gallery"), className: `px-4 py-2 text-lg ${currentPage === "gallery" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 672, columnNumber: 15 }, __self: this }, translations.gallery || "Gallery"), /*#__PURE__*/ React.createElement("select", { value: currentLanguage, onChange: (e)=>setCurrentLanguage(e.target.value), className: "px-3 py-2 border border-gray-300 rounded bg-white text-gray-700", __source: { fileName: "", lineNumber: 678, columnNumber: 15 }, __self: this }, Object.entries(languages).map(([code, name])=>/*#__PURE__*/ React.createElement("option", { key: code, value: code, __source: { fileName: "", lineNumber: 684, columnNumber: 19 }, __self: this }, name)))), /*#__PURE__*/ React.createElement("div", { className: "lg:hidden flex items-center space-x-4", __source: { fileName: "", lineNumber: 690, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: currentLanguage, onChange: (e)=>setCurrentLanguage(e.target.value), className: "px-2 py-1 border border-gray-300 rounded bg-white text-gray-700 text-sm", __source: { fileName: "", lineNumber: 691, columnNumber: 15 }, __self: this }, Object.entries(languages).map(([code, name])=>/*#__PURE__*/ React.createElement("option", { key: code, value: code, __source: { fileName: "", lineNumber: 697, columnNumber: 19 }, __self: this }, name))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMobileMenu(!showMobileMenu), className: "p-2 text-gray-600 hover:text-black focus:outline-none", __source: { fileName: "", lineNumber: 702, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 706, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `bg-current block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${showMobileMenu ? "rotate-45 translate-y-1" : "-translate-y-0.5"}`, __source: { fileName: "", lineNumber: 707, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `bg-current block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm my-0.5 ${showMobileMenu ? "opacity-0" : "opacity-100"}`, __source: { fileName: "", lineNumber: 710, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `bg-current block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${showMobileMenu ? "-rotate-45 -translate-y-1" : "translate-y-0.5"}`, __source: { fileName: "", lineNumber: 713, columnNumber: 19 }, __self: this }))))), showMobileMenu && /*#__PURE__*/ React.createElement("div", { className: "lg:hidden mt-4 pb-4 bg-white relative z-50", __source: { fileName: "", lineNumber: 721, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 pt-4", __source: { fileName: "", lineNumber: 722, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCurrentPage("about"); setShowMobileMenu(false); }, className: `px-4 py-2 text-left text-lg ${currentPage === "about" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 723, columnNumber: 17 }, __self: this }, translations.about || "About"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCurrentPage("fusion"); setShowMobileMenu(false); }, className: `px-4 py-2 text-left text-lg ${currentPage === "fusion" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 732, columnNumber: 17 }, __self: this }, translations.fusionTool || "Fusion Tool"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCurrentPage("gallery"); setShowMobileMenu(false); }, className: `px-4 py-2 text-left text-lg ${currentPage === "gallery" ? "text-black font-semibold" : "text-gray-600 hover:text-black"}`, __source: { fileName: "", lineNumber: 741, columnNumber: 17 }, __self: this }, translations.gallery || "Gallery"))))), currentPage === "home" && renderHomePage(), currentPage === "about" && renderAboutPage(), currentPage === "fusion" && renderFusionTool(), currentPage === "gallery" && renderGallery()); } function FusionTool({ translations, setCurrentPage }) { const [currentStep, setCurrentStep] = React.useState(1); const [selectedMotif, setSelectedMotif] = React.useState(""); const [selectedStyle, setSelectedStyle] = React.useState(""); const [uploadedImage, setUploadedImage] = React.useState(null); const [extractedColors, setExtractedColors] = React.useState([]); const [isExtractingColors, setIsExtractingColors] = React.useState(false); const [userAnswers, setUserAnswers] = React.useState({ from: "", currentLocation: "", isHome: "", whereIsHome: "", istanbulFeelings: "", storyFeeling: "" }); const [generatedPattern, setGeneratedPattern] = React.useState(null); const [generatedStory, setGeneratedStory] = React.useState(""); const [isGenerating, setIsGenerating] = React.useState(false); const [error, setError] = React.useState(""); const motifs = [ "Tulip", "Carnation", "Cypress Tree", "Saz Leaf", "Pomegranate", "Tree of Life", "Hyacinth", "Lotus Flower", "Rose" ]; const styles = [ "Tatreez", "Embroidery", "Kilim", "Copperwork", "Needlelace", "Pixel Art", "Cyber Punk", "Kütahya", "Manga/Anime", "Surrealism" ]; const handleImageUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = async (e)=>{ setUploadedImage(e.target.result); setIsExtractingColors(true); setError(""); // Clear any previous errors try { console.log("🎨 Starting color extraction for uploaded image..."); // Add timeout for mobile devices const controller = new AbortController(); const timeoutId = setTimeout(()=>controller.abort(), 30000); // 30 seconds timeout for color extraction const response = await fetch("/api/extract-colors", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ base64Image: e.target.result }), signal: controller.signal }); clearTimeout(timeoutId); console.log("🎨 Color extraction response status:", response.status); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const data = await response.json(); console.log("🎨 Color extraction response data:", data); // Handle the response properly - check for colors array if (data && data.colors && Array.isArray(data.colors) && data.colors.length > 0) { console.log("✅ Successfully got colors:", data.colors); setExtractedColors(data.colors); // Only show error if extraction actually failed AND we don't have colors if (data.warning && !data.success && data.colors.length === 0) { console.warn("⚠️ Warning:", data.warning); setError(data.warning); } else if (data.warning) { console.log("ℹ️ Info (but colors extracted successfully):", data.warning); // Don't show as error if we got colors successfully } } else { console.warn("⚠️ Invalid response format, using fallback colors"); console.log("Response data:", data); // Use fallback colors if extraction failed const fallbackColors = [ "#8B4513", "#CD853F", "#DEB887", "#F4A460", "#D2691E" ]; setExtractedColors(fallbackColors); console.log("✅ Using fallback colors for mobile compatibility"); // Don't show error message - just use fallback colors silently } } catch (error) { console.error("❌ Color extraction failed:", error); // Use fallback colors on any error const fallbackColors = [ "#8B4513", "#CD853F", "#DEB887", "#F4A460", "#D2691E" ]; setExtractedColors(fallbackColors); console.log("✅ Using fallback colors due to error"); // Only show error for timeout, not for other failures if (error.name === "AbortError") { setError("Color extraction timed out - using default colors"); } // For other errors, silently use fallback colors } finally{ setIsExtractingColors(false); } }; reader.readAsDataURL(file); } }; const generatePattern = async ()=>{ setIsGenerating(true); setError(""); try { console.log("🚀 Starting pattern generation..."); console.log("📊 Data being sent:", { motif: selectedMotif, style: selectedStyle, userImage: uploadedImage ? "present" : "missing", extractedColors: extractedColors, userAnswers: userAnswers }); // Add timeout for mobile devices const controller = new AbortController(); const timeoutId = setTimeout(()=>controller.abort(), 120000); // 2 minutes timeout const response = await fetch("/api/generate-pattern", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ motif: selectedMotif, style: selectedStyle, userImage: uploadedImage, extractedColors: extractedColors, userAnswers: userAnswers }), signal: controller.signal }); clearTimeout(timeoutId); console.log("📡 Response status:", response.status); if (!response.ok) { const errorText = await response.text(); console.error("❌ Response error:", errorText); throw new Error(`Server error: ${response.status} - ${errorText}`); } const data = await response.json(); console.log("📦 Response data:", data); // Better error handling - check if data exists first if (!data) { console.error("❌ No data received from server"); setError("No response from server. Please try again."); return; } if (data.error) { console.error("❌ API returned error:", data.error); setError(data.error); return; } // Check for success flag if (data.success === false) { console.error("❌ Generation failed:", data.error || "Unknown error"); setError(data.error || "Pattern generation failed. Please try again."); return; } if (data.patternUrl) { console.log("✅ Pattern generated successfully:", data.patternUrl); // IMPORTANT: Keep the pattern permanently - don't reset it setGeneratedPattern(data.patternUrl); setGeneratedStory(data.story || "Your unique pattern has been created!"); setCurrentStep(5); // Show warning if database save failed but pattern was created if (data.warning) { console.warn("⚠️ Warning:", data.warning); } } else { console.error("❌ No pattern URL in response:", data); setError("Pattern was generated but no image was returned. Please try again."); } } catch (err) { console.error("❌ Pattern generation failed:", err); if (err.name === "AbortError") { setError("Request timed out. Please check your connection and try again."); } else { setError(`Failed to generate pattern: ${err.message || "Unknown error"}`); } } finally{ setIsGenerating(false); } }; // Function to create another pattern - resets form but keeps current pattern visible const createAnotherPattern = ()=>{ // Reset form data but keep the current pattern visible setCurrentStep(1); setSelectedMotif(""); setSelectedStyle(""); setUploadedImage(null); setExtractedColors([]); setUserAnswers({ from: "", currentLocation: "", isHome: "", whereIsHome: "", istanbulFeelings: "", storyFeeling: "" }); setError(""); // NOTE: We DON'T reset generatedPattern and generatedStory // so the previous pattern stays visible in the gallery }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-[#3F51B5] mb-12 text-center lobster-font", __source: { fileName: "", lineNumber: 1026, columnNumber: 7 }, __self: this }, translations.fusionTool || "Fusion Tool"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 1029, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 1030, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 1031, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 1032, columnNumber: 13 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((step)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: step, __source: { fileName: "", lineNumber: 1034, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${currentStep >= step ? "bg-[#3F51B5] text-white" : "bg-[#A0E0E0] text-[#424242]"}`, __source: { fileName: "", lineNumber: 1035, columnNumber: 19 }, __self: this }, step), step < 5 && /*#__PURE__*/ React.createElement("div", { className: `flex-1 h-2 mx-2 rounded ${currentStep > step ? "bg-[#3F51B5]" : "bg-[#E0E0E0]"}`, __source: { fileName: "", lineNumber: 1045, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-xs text-[#424242] mt-1", __source: { fileName: "", lineNumber: 1056, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1057, columnNumber: 11 }, __self: this }, "Motif"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1058, columnNumber: 11 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1059, columnNumber: 11 }, __self: this }, "Image"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1060, columnNumber: 11 }, __self: this }, "Story"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1061, columnNumber: 11 }, __self: this }, "Pattern"))), currentStep === 1 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 1066, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#D32F2F] mb-6 lobster-font", __source: { fileName: "", lineNumber: 1067, columnNumber: 11 }, __self: this }, "Step 1: Choose a motif"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] mb-6", __source: { fileName: "", lineNumber: 1070, columnNumber: 11 }, __self: this }, "Which botanical motif speaks most to you today? Click on any motif below to continue."), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 1074, columnNumber: 11 }, __self: this }, motifs.map((motif)=>/*#__PURE__*/ React.createElement("button", { key: motif, onClick: ()=>setSelectedMotif(motif), className: `p-4 rounded-lg border-2 transition-all hover:scale-105 ${selectedMotif === motif ? "border-[#3F51B5] bg-[#E8EAF6] shadow-lg" : "border-[#A0E0E0] hover:border-[#3F51B5]"}`, __source: { fileName: "", lineNumber: 1076, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1085, columnNumber: 17 }, __self: this }, motif)))), selectedMotif && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 1092, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(2), className: "px-6 py-3 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F] transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 1093, columnNumber: 15 }, __self: this }, "Continue to Style Selection →"))), currentStep === 2 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 1105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#D32F2F] mb-6 lobster-font", __source: { fileName: "", lineNumber: 1106, columnNumber: 11 }, __self: this }, "Step 2: Choose a Style"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] mb-6", __source: { fileName: "", lineNumber: 1109, columnNumber: 11 }, __self: this }, "What style should your", " ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 1111, columnNumber: 13 }, __self: this }, translations.motifs && translations.motifs[selectedMotif] ? translations.motifs[selectedMotif] : selectedMotif), " ", "pattern carry?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 1118, columnNumber: 11 }, __self: this }, styles.map((style)=>/*#__PURE__*/ React.createElement("button", { key: style, onClick: ()=>setSelectedStyle(style), className: `p-4 rounded-lg border-2 text-left transition-all hover:scale-102 ${selectedStyle === style ? "border-[#3F51B5] bg-[#E8EAF6] shadow-lg" : "border-[#E0E0E0] hover:border-[#3F51B5]"}`, __source: { fileName: "", lineNumber: 1120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-[#424242]", __source: { fileName: "", lineNumber: 1129, columnNumber: 17 }, __self: this }, translations.styles && translations.styles[style] ? translations.styles[style] : style.split(" - ")[0]), style.includes(" - ") && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#424242]", __source: { fileName: "", lineNumber: 1135, columnNumber: 19 }, __self: this }, style.split(" - ")[1])))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-6", __source: { fileName: "", lineNumber: 1142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(1), className: "px-6 py-3 bg-[#424242] text-white rounded-lg hover:bg-[#212121]", __source: { fileName: "", lineNumber: 1143, columnNumber: 13 }, __self: this }, translations.back || "← Back"), selectedStyle && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(3), className: "px-6 py-3 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F] transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 1150, columnNumber: 15 }, __self: this }, translations.continueToImage || "Continue to Image Upload →"))), currentStep === 3 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 1162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#D32F2F] mb-6 lobster-font", __source: { fileName: "", lineNumber: 1163, columnNumber: 11 }, __self: this }, translations.stepUploadImage || "Step 3: Upload Your Image"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] mb-6", __source: { fileName: "", lineNumber: 1166, columnNumber: 11 }, __self: this }, translations.uploadImageDesc || "Upload an image that represents your story, journey, or cultural background, This will help influence the colors and mood of your pattern."), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 1170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", id: "image-upload", __source: { fileName: "", lineNumber: 1171, columnNumber: 13 }, __self: this }), uploadedImage ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 1180, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg mb-4 shadow-sm", __source: { fileName: "", lineNumber: 1181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#3F51B5] mb-4", __source: { fileName: "", lineNumber: 1182, columnNumber: 19 }, __self: this }, "Your Uploaded Image:"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg inline-block", __source: { fileName: "", lineNumber: 1185, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Your uploaded image", className: "max-w-full max-h-96 rounded-lg shadow-lg", style: { minHeight: "200px", minWidth: "200px" }, __source: { fileName: "", lineNumber: 1186, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 1193, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: "inline-block px-4 py-2 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F] cursor-pointer transition-all", __source: { fileName: "", lineNumber: 1194, columnNumber: 21 }, __self: this }, translations.clickToChange || "Click to change image")))) : /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: "block cursor-pointer border-2 border-dashed border-[#00BCD4] rounded-lg p-12 text-center hover:border-[#0097A7] transition-colors bg-white hover:bg-[#E0F7FA]", __source: { fileName: "", lineNumber: 1204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#00BCD4] text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 1208, columnNumber: 17 }, __self: this }, translations.clickToUpload || "Click to upload an image"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] text-sm", __source: { fileName: "", lineNumber: 1211, columnNumber: 17 }, __self: this }, translations.supportedFormats || "JPG, PNG, or GIF (max 10MB)"))), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 1220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#3F51B5] mb-3", __source: { fileName: "", lineNumber: 1221, columnNumber: 15 }, __self: this }, isExtractingColors ? translations.extractingColors || "Extracting colors..." : translations.extractedColors || "Extracted Colors:"), isExtractingColors ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 1227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#3F51B5] mr-3", __source: { fileName: "", lineNumber: 1228, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#3F51B5]", __source: { fileName: "", lineNumber: 1229, columnNumber: 19 }, __self: this }, translations.analyzingImage || "Analyzing your image...")) : extractedColors.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "", lineNumber: 1234, columnNumber: 17 }, __self: this }, extractedColors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1236, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-lg border-2 border-[#E0E0E0] shadow-sm", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 1237, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-mono text-[#424242]", __source: { fileName: "", lineNumber: 1241, columnNumber: 23 }, __self: this }, color)))) : null), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-6", __source: { fileName: "", lineNumber: 1251, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(2), className: "px-6 py-3 bg-[#424242] text-white rounded-lg hover:bg-[#212121]", __source: { fileName: "", lineNumber: 1252, columnNumber: 13 }, __self: this }, translations.back || "← Back"), uploadedImage && extractedColors.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 1259, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 1260, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#3F51B5] mb-3", __source: { fileName: "", lineNumber: 1261, columnNumber: 19 }, __self: this }, translations.imageUploaded || "Image uploaded successfully!"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(4), className: "px-6 py-3 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F] transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 1265, columnNumber: 19 }, __self: this }, translations.continueToStory || "Continue to Your Story →"))))), currentStep === 4 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 1279, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#D32F2F] mb-6 lobster-font", __source: { fileName: "", lineNumber: 1280, columnNumber: 11 }, __self: this }, translations.stepTellStory || "Step 4: Tell Your Story"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] mb-6", __source: { fileName: "", lineNumber: 1283, columnNumber: 11 }, __self: this }, translations.shareJourneyDesc || "Share your journey to help create a personalized story for your pattern."), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 1288, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1290, columnNumber: 15 }, __self: this }, translations.whereFrom || "Where are you from? *"), /*#__PURE__*/ React.createElement("input", { type: "text", value: userAnswers.from, onChange: (e)=>setUserAnswers({ ...userAnswers, from: e.target.value }), placeholder: "i.e., Damascus, Syria", className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none", __source: { fileName: "", lineNumber: 1293, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1304, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1305, columnNumber: 15 }, __self: this }, translations.whereLiveNow || "Where do you live now? *"), /*#__PURE__*/ React.createElement("input", { type: "text", value: userAnswers.currentLocation, onChange: (e)=>setUserAnswers({ ...userAnswers, currentLocation: e.target.value }), placeholder: "i.e., Berlin, Germany", className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none", __source: { fileName: "", lineNumber: 1308, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1322, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1323, columnNumber: 15 }, __self: this }, "Is the place you live now 'home' for you? *"), /*#__PURE__*/ React.createElement("select", { value: userAnswers.isHome, onChange: (e)=>setUserAnswers({ ...userAnswers, isHome: e.target.value }), className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none", __source: { fileName: "", lineNumber: 1326, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 1336, columnNumber: 17 }, __self: this }, translations.selectOption || "Select..."), /*#__PURE__*/ React.createElement("option", { value: "yes", __source: { fileName: "", lineNumber: 1339, columnNumber: 17 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("option", { value: "no", __source: { fileName: "", lineNumber: 1340, columnNumber: 17 }, __self: this }, "No"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1344, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1345, columnNumber: 15 }, __self: this }, "If not, where is home? *"), /*#__PURE__*/ React.createElement("input", { type: "text", value: userAnswers.whereIsHome, onChange: (e)=>setUserAnswers({ ...userAnswers, whereIsHome: e.target.value }), placeholder: "i.e., The mountains of Kurdistan, My grandmother's kitchen...", className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none", __source: { fileName: "", lineNumber: 1348, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1363, columnNumber: 15 }, __self: this }, "How do you feel about Istanbul?"), /*#__PURE__*/ React.createElement("textarea", { value: userAnswers.istanbulFeelings, onChange: (e)=>setUserAnswers({ ...userAnswers, istanbulFeelings: e.target.value }), className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none h-24", placeholder: "Share your thoughts about Istanbul...", __source: { fileName: "", lineNumber: 1366, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1379, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1380, columnNumber: 15 }, __self: this }, "Choose the feeling you want your story to hold: *"), /*#__PURE__*/ React.createElement("select", { value: userAnswers.storyFeeling, onChange: (e)=>setUserAnswers({ ...userAnswers, storyFeeling: e.target.value }), className: "w-full px-4 py-3 border border-[#E0E0E0] rounded-lg focus:border-[#3F51B5] focus:outline-none", __source: { fileName: "", lineNumber: 1383, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 1393, columnNumber: 17 }, __self: this }, translations.selectOption || "Select..."), /*#__PURE__*/ React.createElement("option", { value: "longing", __source: { fileName: "", lineNumber: 1396, columnNumber: 17 }, __self: this }, "Longing"), /*#__PURE__*/ React.createElement("option", { value: "hope", __source: { fileName: "", lineNumber: 1397, columnNumber: 17 }, __self: this }, "Hope"), /*#__PURE__*/ React.createElement("option", { value: "resilience", __source: { fileName: "", lineNumber: 1398, columnNumber: 17 }, __self: this }, "Resilience"), /*#__PURE__*/ React.createElement("option", { value: "joy", __source: { fileName: "", lineNumber: 1399, columnNumber: 17 }, __self: this }, "Joy"), /*#__PURE__*/ React.createElement("option", { value: "nostalgia", __source: { fileName: "", lineNumber: 1400, columnNumber: 17 }, __self: this }, "Nostalgia"), /*#__PURE__*/ React.createElement("option", { value: "connection", __source: { fileName: "", lineNumber: 1401, columnNumber: 17 }, __self: this }, "Connection"), /*#__PURE__*/ React.createElement("option", { value: "sadness", __source: { fileName: "", lineNumber: 1402, columnNumber: 17 }, __self: this }, "Sadness"), /*#__PURE__*/ React.createElement("option", { value: "wonder", __source: { fileName: "", lineNumber: 1403, columnNumber: 17 }, __self: this }, "Wonder"), /*#__PURE__*/ React.createElement("option", { value: "gratitude", __source: { fileName: "", lineNumber: 1404, columnNumber: 17 }, __self: this }, "Gratitude"), /*#__PURE__*/ React.createElement("option", { value: "serenity", __source: { fileName: "", lineNumber: 1405, columnNumber: 17 }, __self: this }, "Serenity")))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded", __source: { fileName: "", lineNumber: 1411, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-8", __source: { fileName: "", lineNumber: 1416, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(3), className: "px-6 py-3 bg-[#424242] text-white rounded-lg hover:bg-[#212121]", __source: { fileName: "", lineNumber: 1417, columnNumber: 13 }, __self: this }, translations.back || "← Back"), /*#__PURE__*/ React.createElement("button", { onClick: generatePattern, disabled: isGenerating || !userAnswers.from || !userAnswers.currentLocation || !userAnswers.isHome || !userAnswers.whereIsHome || !userAnswers.storyFeeling, className: "px-8 py-3 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F] disabled:bg-[#E0E0E0] disabled:text-[#424242] transition-all transform hover:scale-105 disabled:transform-none", __source: { fileName: "", lineNumber: 1423, columnNumber: 13 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 1436, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-3", __source: { fileName: "", lineNumber: 1437, columnNumber: 19 }, __self: this }), translations.creatingPattern || "Creating Your Pattern...") : translations.generatePattern || "Generate My Pattern")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#424242] mt-2", __source: { fileName: "", lineNumber: 1445, columnNumber: 11 }, __self: this }, translations.requiredFields || "* Required fields. This may take 30-60 seconds to generate.")), currentStep === 5 && generatedPattern && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 1453, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#D32F2F] mb-6 lobster-font", __source: { fileName: "", lineNumber: 1454, columnNumber: 11 }, __self: this }, translations.stepGeneratedPattern || "Your Pattern"), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 1458, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedPattern, alt: "Generated pattern", className: "max-w-full h-96 mx-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 1459, columnNumber: 13 }, __self: this })), extractedColors.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 1467, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#3F51B5] mb-1", __source: { fileName: "", lineNumber: 1468, columnNumber: 15 }, __self: this }, "Pattern Colors (from your image):"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "", lineNumber: 1471, columnNumber: 15 }, __self: this }, extractedColors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1473, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 rounded-full border border-[#E0E0E0]", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 1474, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-mono text-[#424242]", __source: { fileName: "", lineNumber: 1478, columnNumber: 21 }, __self: this }, color))))), generatedStory && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg mb-6 shadow-sm", __source: { fileName: "", lineNumber: 1488, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#3F51B5] mb-3", __source: { fileName: "", lineNumber: 1489, columnNumber: 15 }, __self: this }, translations.patternStory || "Your Pattern's Story"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] leading-relaxed text-lg", __source: { fileName: "", lineNumber: 1492, columnNumber: 15 }, __self: this }, generatedStory)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", __source: { fileName: "", lineNumber: 1498, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: createAnotherPattern, className: "px-6 py-3 bg-[#00BCD4] text-white rounded-lg hover:bg-[#0097A7] transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 1499, columnNumber: 13 }, __self: this }, translations.createAnother || "Create Another Pattern"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("gallery"), className: "px-6 py-3 bg-[#00BCD4] text-white rounded-lg hover:bg-[#0097A7] transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 1505, columnNumber: 13 }, __self: this }, "Go to Gallery")))); } function Gallery({ translations }) { const [patterns, setPatterns] = React.useState([]); const [loading, setLoading] = React.useState(true); const [selectedPattern, setSelectedPattern] = React.useState(null); React.useEffect(()=>{ const loadPatterns = async ()=>{ try { const response = await fetch("/api/get-patterns", { method: "POST" }); const data = await response.json(); console.log("🎨 Gallery received data:", data); if (data && data.patterns) { console.log("🎨 First pattern in gallery:", data.patterns[0]); setPatterns(data.patterns); } } catch (error) { console.error("Error loading patterns:", error); } finally{ setLoading(false); } }; loadPatterns(); }, []); if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white flex items-center justify-center", __source: { fileName: "", lineNumber: 1544, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-[#3F51B5]", __source: { fileName: "", lineNumber: 1545, columnNumber: 9 }, __self: this }, translations.loadingGallery || "Loading gallery...")); } // Create display items with empty spaces every third position const displayItems = []; patterns.forEach((pattern, index)=>{ displayItems.push({ type: "pattern", data: pattern }); // Add empty space after every 3rd pattern (positions 2, 5, 8, etc.) if ((index + 1) % 3 === 0) { displayItems.push({ type: "empty" }); } }); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-[#3F51B5] mb-12 text-center lobster-font", __source: { fileName: "", lineNumber: 1564, columnNumber: 7 }, __self: this }, translations.gallery || "Gallery"), patterns.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-16", __source: { fileName: "", lineNumber: 1569, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4 text-[#E0E0E0]", __source: { fileName: "", lineNumber: 1570, columnNumber: 11 }, __self: this }, translations.galleryEmpty || "[Gallery Empty]"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#424242]", __source: { fileName: "", lineNumber: 1573, columnNumber: 11 }, __self: this }, translations.noPatterns || "No patterns created yet. Be the first to create one!")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-8 lg:gap-8", __source: { fileName: "", lineNumber: 1580, columnNumber: 11 }, __self: this }, displayItems.map((item, index)=>{ if (item.type === "empty") { return /*#__PURE__*/ React.createElement("div", { key: `empty-${index}`, className: "flex items-center justify-center py-16 md:py-8", __source: { fileName: "", lineNumber: 1584, columnNumber: 19 }, __self: this }); } const pattern = item.data; return /*#__PURE__*/ React.createElement("div", { key: pattern.id, className: "bg-white rounded-lg shadow-lg overflow-hidden cursor-pointer hover:shadow-xl transition-shadow mb-12 md:mb-0", onClick: ()=>setSelectedPattern(pattern), __source: { fileName: "", lineNumber: 1595, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-square bg-gray-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 1600, columnNumber: 19 }, __self: this }, pattern.pattern_image_url ? /*#__PURE__*/ React.createElement("img", { src: pattern.pattern_image_url, alt: "Generated Pattern", className: "max-w-full max-h-full object-contain rounded-lg shadow-sm", onError: (e)=>{ console.error("Failed to load pattern image:", pattern.pattern_image_url); e.target.src = "https://via.placeholder.com/300x300?text=Pattern+Not+Found"; }, __source: { fileName: "", lineNumber: 1602, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-[#E0E0E0] text-center", __source: { fileName: "", lineNumber: 1616, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 1617, columnNumber: 25 }, __self: this }, "🎨"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1618, columnNumber: 25 }, __self: this }, "Pattern"))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 1622, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 1624, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#E8EAF6] text-[#3F51B5] rounded-full text-sm font-medium", __source: { fileName: "", lineNumber: 1625, columnNumber: 23 }, __self: this }, pattern.motif), /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#FFEBEE] text-[#D32F2F] rounded-full text-sm font-medium", __source: { fileName: "", lineNumber: 1628, columnNumber: 23 }, __self: this }, pattern.art_style), pattern.story_feeling && /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#E0F7FA] text-[#00BCD4] rounded-full text-sm font-medium capitalize", __source: { fileName: "", lineNumber: 1632, columnNumber: 25 }, __self: this }, pattern.story_feeling)), pattern.extracted_colors && pattern.extracted_colors.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 1640, columnNumber: 25 }, __self: this }, pattern.extracted_colors.slice(0, 3).map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-6 h-6 rounded-full border border-[#E0E0E0]", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 1644, columnNumber: 31 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xs text-[#424242] space-y-2", __source: { fileName: "", lineNumber: 1653, columnNumber: 21 }, __self: this }, pattern.user_from_location && pattern.user_current_location && /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 1656, columnNumber: 27 }, __self: this }, translations.journey || "Journey:", " ", pattern.user_from_location, " →", " ", pattern.user_current_location), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 1663, columnNumber: 23 }, __self: this }, pattern.feels_at_home !== null && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1665, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1666, columnNumber: 29 }, __self: this }, translations.feelsAtHomeLabel || "Feels at home:"), " ", pattern.feels_at_home ? translations.yes || "Yes" : translations.no || "No"), pattern.where_is_home && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1677, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1678, columnNumber: 29 }, __self: this }, "Home is:"), " ", pattern.where_is_home), pattern.missing_style && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1684, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1685, columnNumber: 29 }, __self: this }, translations.missingLabel || "Missing:"), " ", pattern.missing_style))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 1695, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#3F51B5] text-sm font-medium", __source: { fileName: "", lineNumber: 1696, columnNumber: 23 }, __self: this }, "Click to read the full story →")))); })), selectedPattern && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 1708, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg max-w-2xl max-h-[80vh] overflow-y-auto", __source: { fileName: "", lineNumber: 1709, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 1710, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 1711, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1712, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#3F51B5] lobster-font", __source: { fileName: "", lineNumber: 1713, columnNumber: 23 }, __self: this }, selectedPattern.pattern_title || "Pattern Story"), selectedPattern.pattern_title && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#424242] mt-1", __source: { fileName: "", lineNumber: 1717, columnNumber: 25 }, __self: this }, "Pattern Story")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPattern(null), className: "text-[#424242] hover:text-[#212121] text-2xl", __source: { fileName: "", lineNumber: 1722, columnNumber: 21 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 1731, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedPattern.pattern_image_url, alt: "Pattern", className: "max-w-full h-64 mx-auto rounded-lg shadow-lg object-contain", __source: { fileName: "", lineNumber: 1732, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1740, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 1741, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#A0F7FA] text-[#00BCD4] rounded-full text-sm font-medium", __source: { fileName: "", lineNumber: 1742, columnNumber: 23 }, __self: this }, selectedPattern.motif), /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#FFEBEE] text-[#D32F2F] rounded-full text-sm font-medium", __source: { fileName: "", lineNumber: 1745, columnNumber: 23 }, __self: this }, selectedPattern.art_style), selectedPattern.story_feeling && /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-[#A0F7FA] text-[#00BCD4] rounded-full text-sm font-medium capitalize", __source: { fileName: "", lineNumber: 1749, columnNumber: 25 }, __self: this }, selectedPattern.story_feeling)), selectedPattern.extracted_colors && selectedPattern.extracted_colors.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1757, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1758, columnNumber: 27 }, __self: this }, "Colors from Image:"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1761, columnNumber: 27 }, __self: this }, selectedPattern.extracted_colors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1764, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 rounded-full border border-[#E0E0E0]", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 1768, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-mono text-[#424242]", __source: { fileName: "", lineNumber: 1772, columnNumber: 35 }, __self: this }, color))))), selectedPattern.generated_story && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1783, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-[#424242] mb-2", __source: { fileName: "", lineNumber: 1784, columnNumber: 25 }, __self: this }, "Story:"), /*#__PURE__*/ React.createElement("p", { className: "text-[#424242] leading-relaxed", __source: { fileName: "", lineNumber: 1787, columnNumber: 25 }, __self: this }, selectedPattern.generated_story)), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4 text-sm text-[#424242] space-y-2", __source: { fileName: "", lineNumber: 1793, columnNumber: 21 }, __self: this }, selectedPattern.user_from_location && selectedPattern.user_current_location && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1796, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1797, columnNumber: 29 }, __self: this }, "Journey:"), " ", selectedPattern.user_from_location, " →", " ", selectedPattern.user_current_location), selectedPattern.where_is_home && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1804, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1805, columnNumber: 27 }, __self: this }, "Home is:"), " ", selectedPattern.where_is_home), selectedPattern.feels_at_home !== null && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1811, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1812, columnNumber: 27 }, __self: this }, "Feels at home:"), " ", selectedPattern.feels_at_home ? "Yes" : "No"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 1819, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPattern(null), className: "px-6 py-2 bg-[#3F51B5] text-white rounded-lg hover:bg-[#303F9F]", __source: { fileName: "", lineNumber: 1820, columnNumber: 21 }, __self: this }, "Close"))))))); }