/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const ENGAGEMENT_LEVELS = { CURIOUS: "🕵️ Περίεργος Εξερευνητής", ADVENTUROUS: "🚀 Τολμηρός Ταξιδιώτης", STRATEGIC: "🧠 Στρατηγικός Σχεδιαστής", SPONTANEOUS: "🌈 Αυθόρμητος Νομάδας" }; const ULTRA_QUESTIONS = [ { question: "Πώς θα περιέγραφες το ιδανικό σου ταξίδι με ένα emoji;", type: "emoji", options: ["🏝️", "🏔️", "🚀", "🍹", "🏰"] }, { question: "Ποιο είναι το πιο τρελό πράγμα που έχεις κάνει ποτέ;", type: "free-text", hint: "Μοιραστείτε μια απίστευτη ιστορία!" }, { question: "Αν ήσουν ένα ταξιδιωτικό αντικείμενο, τι θα ήσουν;", type: "creative", options: [ "Διαβατήριο με άπειρες σφραγίδες", "Πυξίδα που δείχνει μόνο περιπέτειες", "Σακίδιο με μαγικές τσέπες", "Χάρτης που αλλάζει συνέχεια" ] } ]; const FALLBACK_RECOMMENDATIONS = [ "Ένα μαγευτικό ταξίδι στα ελληνικά νησιά θα σου προσφέρει απίστευτες εμπειρίες!", "Εξερεύνησε τα μυστικά της Κρήτης, ένα νησί με πλούσια ιστορία και απίστευτες παραλίες.", "Μια περιπέτεια στα ορεινά χωριά της Πελοποννήσου θα σου μείνει αξέχαστη!", "Ανακάλυψε τις κρυμμένες ομορφιές της Ηπείρου με τις γραφικές λίμνες και τα παραδοσιακά χωριά." ]; function AIRecommendationModal({ preferences, onClose }) { const [recommendation, setRecommendation] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function generateRecommendation() { try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "Είσαι ένας έμπειρος ταξιδιωτικός σύμβουλος που δημιουργεί εξατομικευμένες προτάσεις διακοπών στην Ελλάδα." }, { role: "user", content: `Δημιούργησε μια εξατομικευμένη πρόταση ταξιδιού βασισμένη σε αυτές τις προτιμήσεις: ${JSON.stringify(preferences)}` } ], model: "gpt-4o-mini", max_tokens: 250 }); setRecommendation(completion.choices[0].message.content); setLoading(false); } catch (error) { console.error("AI Recommendation Error", error); // Fallback to random recommendation if AI fails const fallbackRec = FALLBACK_RECOMMENDATIONS[ Math.floor(Math.random() * FALLBACK_RECOMMENDATIONS.length) ]; setRecommendation(fallbackRec); setLoading(false); } } generateRecommendation(); }, [preferences]); return (

🤖 Η Προσωπική σου AI Σύσταση 🌍

{loading ? (

Δημιουργία εξατομικευμένης πρότασης...

) : (

{recommendation}

)}

); } function UltraEngagedSurvey({ onComplete }) { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [answers, setAnswers] = useState([]); const [animationClass, setAnimationClass] = useState(''); const [showAIRecommendation, setShowAIRecommendation] = useState(false); const textareaRef = useRef(null); const currentQuestion = ULTRA_QUESTIONS[currentQuestionIndex]; const handleAnswer = (answer) => { const newAnswers = [...answers, answer]; setAnimationClass('slide-out'); setTimeout(() => { if (currentQuestionIndex < ULTRA_QUESTIONS.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); setAnswers(newAnswers); setAnimationClass('slide-in'); } else { setAnswers(newAnswers); setShowAIRecommendation(true); } }, 300); }; const handleFreeTextSubmit = () => { if (textareaRef.current) { const textValue = textareaRef.current.value.trim(); if (textValue) { handleAnswer(textValue); } else { alert("Παρακαλώ εισάγετε κάποιο κείμενο πριν υποβάλετε."); } } }; const renderQuestionContent = () => { switch(currentQuestion.type) { case "emoji": return (

{currentQuestion.options.map((emoji, index) => ( ))}

); case "free-text": return (

<button onClick={handleFreeTextSubmit}>
              Υποβολή
            </button>
          </div>
        );
      case "creative":
        return (
          <div className="creative-selector">
            {currentQuestion.options.map((option, index) => (
              <button 
                key={index} 
                onClick={() => handleAnswer(option)}
                className="creative-option"
              >
                {option}
              </button>
            ))}
          </div>
        );
    }
  };

const handleAIRecommendationClose = () => {
    onComplete(answers);
    setShowAIRecommendation(false);
  };

return (
    <div className={`ultra-engaged-survey ${animationClass}`}>
      {showAIRecommendation ? (
        <AIRecommendationModal 
          preferences={answers} 
          onClose={handleAIRecommendationClose} 
        />
      ) : (
        <>
          <div className="survey-progress">
            <div 
              className="progress-bar" 
              style={{width: `${(currentQuestionIndex / ULTRA_QUESTIONS.length) * 100}%`}}
            />
          </div>
          <h2>{currentQuestion.question}</h2>
          {renderQuestionContent()}
          <div className="question-counter">
            Ερώτηση {currentQuestionIndex + 1} από {ULTRA_QUESTIONS.length}
          </div>
        </>
      )}
    </div>
  );
}

function TravelPersonalityTest() {
  const [engagementLevel, setEngagementLevel] = useState(null);
  const [showUltraSurvey, setShowUltraSurvey] = useState(false);

const determineEngagementLevel = (answers) => {
    const randomLevel = Object.values(ENGAGEMENT_LEVELS)[
      Math.floor(Math.random() * Object.values(ENGAGEMENT_LEVELS).length)
    ];
    setEngagementLevel(randomLevel);
  };

return (
    <div className="travel-personality-container">
      {!showUltraSurvey ? (
        <div className="personality-intro">
          <h1>🌍 Ανακάλυψε τον Ταξιδιωτικό σου Εαυτό 🧭</h1>
          <p>Μια διασκεδαστική και βαθιά προσωπική εμπειρία που θα σε εκπλήξει!</p>
          <button 
            onClick={() => setShowUltraSurvey(true)}
            className="start-journey-btn"
          >
            Ξεκίνα το Ταξίδι σου 🚀
          </button>
        </div>
      ) : (
        <UltraEngagedSurvey onComplete={determineEngagementLevel} />
      )}

{engagementLevel && (
        <div className="engagement-result">
          <h2>Η Ταξιδιωτική σου Προσωπικότητα 🌈</h2>
          <div className="personality-badge">
            {engagementLevel}
          </div>
          <p>Κάθε ταξίδι είναι μια μοναδική περιπέτεια. Η δική σου είναι απίστευτη!</p>
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<TravelPersonalityTest />);
}

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Ταξιδιωτική Προσωπικότητα</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}

const css = `
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  color: #333;
}

.travel-personality-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  transition: all 0.3s ease;
}

.personality-intro h1 {
  font-size: 2.2em;
  margin-bottom: 20px;
}

.start-journey-btn {
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.1em;
  cursor: pointer;
  transition: transform 0.2s;
}

.start-journey-btn:hover {
  transform: scale(1.05);
}

.ultra-engaged-survey {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.emoji-selector, .creative-selector {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.emoji-button, .creative-option {
  font-size: 2em;
  background: transparent;
  border: 2px solid #2575fc;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.emoji-button:hover, .creative-option:hover {
  background: #2575fc;
  color: white;
}

.free-text-input textarea {
  width: 100%;
  min-height: 100px;
  border: 2px solid #2575fc;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
}

.engagement-result {
  margin-top: 20px;
}

.personality-badge {
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 15px;
  border-radius: 10px;
  font-size: 1.2em;
  margin: 20px 0;
}

.ai-recommendation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 20px;
  max-width: 500px;
  text-align: center;
}

.slide-in {
  animation: slideIn 0.3s forwards;
}

.slide-out {
  animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}
`;</article></body></html>

travelSurveyApp