| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <title>Cultural Intelligence Explorer - Global Edition with AI Analysis</title>
|
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
| <script src="https://cdn.tailwindcss.com"></script>
|
|
|
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
|
| <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| <style>
|
| html, body {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| min-height: 100%;
|
| margin: 0;
|
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
| }
|
|
|
| .glass {
|
| background: rgba(255, 255, 255, 0.9);
|
| backdrop-filter: blur(15px);
|
| border-radius: 1.5rem;
|
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
|
| border: 1px solid rgba(255, 255, 255, 0.18);
|
| }
|
|
|
| .country-dropdown {
|
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
| border-radius: 1rem;
|
| padding: 1.5rem;
|
| color: white;
|
| margin-bottom: 2rem;
|
| }
|
|
|
| .dropdown-container {
|
| position: relative;
|
| width: 100%;
|
| }
|
|
|
| .dropdown-input {
|
| width: 100%;
|
| padding: 1rem;
|
| border: 2px solid rgba(255,255,255,0.3);
|
| border-radius: 0.75rem;
|
| background: rgba(255,255,255,0.9);
|
| color: #333;
|
| font-size: 1rem;
|
| cursor: pointer;
|
| }
|
|
|
| .dropdown-input:focus {
|
| outline: none;
|
| border-color: #fbbf24;
|
| box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
|
| }
|
|
|
| .dropdown-list {
|
| position: absolute;
|
| top: 100%;
|
| left: 0;
|
| right: 0;
|
| background: white;
|
| border: 1px solid #e5e7eb;
|
| border-radius: 0.75rem;
|
| max-height: 300px;
|
| overflow-y: auto;
|
| z-index: 1000;
|
| box-shadow: 0 10px 25px rgba(0,0,0,0.15);
|
| }
|
|
|
| .dropdown-item {
|
| padding: 0.75rem 1rem;
|
| cursor: pointer;
|
| border-bottom: 1px solid #f3f4f6;
|
| display: flex;
|
| align-items: center;
|
| gap: 0.75rem;
|
| transition: background-color 0.2s;
|
| }
|
|
|
| .dropdown-item:hover {
|
| background-color: #f8fafc;
|
| }
|
|
|
| .dropdown-item:last-child {
|
| border-bottom: none;
|
| }
|
|
|
| .dropdown-item.highlighted {
|
| background-color: #eff6ff;
|
| }
|
|
|
| .theme-card {
|
| background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
| border-radius: 0.75rem;
|
| padding: 1rem;
|
| color: white;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| border: 2px solid transparent;
|
| text-align: center;
|
| }
|
|
|
| .theme-card:hover {
|
| transform: scale(1.05);
|
| border-color: rgba(255,255,255,0.5);
|
| }
|
|
|
| .theme-card.selected {
|
| border-color: #fbbf24;
|
| box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
|
| }
|
|
|
| .insight-section {
|
| background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
| border-radius: 1rem;
|
| padding: 1.5rem;
|
| margin: 1rem 0;
|
| border-left: 4px solid #667eea;
|
| }
|
|
|
| .reflection-card {
|
| background: rgba(255, 255, 255, 0.95);
|
| border-radius: 1rem;
|
| padding: 1.5rem;
|
| margin: 1rem 0;
|
| box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
| border: 1px solid rgba(102, 126, 234, 0.2);
|
| }
|
|
|
| .analysis-table {
|
| background: rgba(255, 255, 255, 0.98);
|
| border-radius: 1rem;
|
| overflow: hidden;
|
| box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
| border: 1px solid rgba(102, 126, 234, 0.2);
|
| }
|
|
|
| .analysis-table table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| }
|
|
|
| .analysis-table th {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| padding: 1rem;
|
| text-align: left;
|
| font-weight: 600;
|
| border-bottom: 2px solid rgba(255,255,255,0.2);
|
| }
|
|
|
| .analysis-table td {
|
| padding: 1rem;
|
| border-bottom: 1px solid #e5e7eb;
|
| vertical-align: top;
|
| }
|
|
|
| .analysis-table tr:last-child td {
|
| border-bottom: none;
|
| }
|
|
|
| .analysis-table tr:nth-child(even) {
|
| background-color: #f8fafc;
|
| }
|
|
|
| .analysis-table tr:hover {
|
| background-color: #eff6ff;
|
| }
|
|
|
| .insight-badge {
|
| display: inline-block;
|
| background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
| color: white;
|
| padding: 0.25rem 0.75rem;
|
| border-radius: 1rem;
|
| font-size: 0.75rem;
|
| font-weight: 600;
|
| margin: 0.25rem 0.25rem 0.25rem 0;
|
| }
|
|
|
| .comparison-badge {
|
| display: inline-block;
|
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
| color: white;
|
| padding: 0.25rem 0.75rem;
|
| border-radius: 1rem;
|
| font-size: 0.75rem;
|
| font-weight: 600;
|
| margin: 0.25rem 0.25rem 0.25rem 0;
|
| }
|
|
|
| .progress-bar {
|
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
| height: 6px;
|
| border-radius: 3px;
|
| transition: width 0.5s ease;
|
| }
|
|
|
| .typing-indicator {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
|
|
| .typing-dot {
|
| width: 8px;
|
| height: 8px;
|
| border-radius: 50%;
|
| background: #667eea;
|
| animation: typing 1.4s infinite ease-in-out;
|
| }
|
|
|
| .typing-dot:nth-child(1) { animation-delay: -0.32s; }
|
| .typing-dot:nth-child(2) { animation-delay: -0.16s; }
|
|
|
| @keyframes typing {
|
| 0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
|
| 40% { transform: scale(1); opacity: 1; }
|
| }
|
|
|
| .fade-in {
|
| animation: fadeIn 0.6s ease-in;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(20px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .slide-in {
|
| animation: slideIn 0.5s ease-out;
|
| }
|
|
|
| @keyframes slideIn {
|
| from { opacity: 0; transform: translateX(-30px); }
|
| to { opacity: 1; transform: translateX(0); }
|
| }
|
|
|
|
|
| .sr-only {
|
| position: absolute;
|
| width: 1px;
|
| height: 1px;
|
| padding: 0;
|
| margin: -1px;
|
| overflow: hidden;
|
| clip: rect(0, 0, 0, 0);
|
| white-space: nowrap;
|
| border: 0;
|
| }
|
|
|
| button:focus, input:focus, textarea:focus, select:focus {
|
| outline: 3px solid #fbbf24;
|
| outline-offset: 2px;
|
| }
|
|
|
| .theme-card:focus {
|
| outline: 3px solid #fbbf24;
|
| outline-offset: 2px;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .theme-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
|
|
| .analysis-table {
|
| overflow-x: auto;
|
| }
|
|
|
| .analysis-table table {
|
| min-width: 600px;
|
| }
|
| }
|
|
|
| @media (max-width: 640px) {
|
| .theme-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div id="root"></div>
|
| <script type="text/babel">
|
| const { useState, useEffect, useCallback, useRef } = React;
|
|
|
|
|
| const WORLD_COUNTRIES = [
|
|
|
| { id: 'algeria', name: 'Algeria', flag: '🇩🇿', region: 'North Africa' },
|
| { id: 'angola', name: 'Angola', flag: '🇦🇴', region: 'Central Africa' },
|
| { id: 'benin', name: 'Benin', flag: '🇧🇯', region: 'West Africa' },
|
| { id: 'botswana', name: 'Botswana', flag: '🇧🇼', region: 'Southern Africa' },
|
| { id: 'burkina-faso', name: 'Burkina Faso', flag: '🇧🇫', region: 'West Africa' },
|
| { id: 'burundi', name: 'Burundi', flag: '🇧🇮', region: 'East Africa' },
|
| { id: 'cameroon', name: 'Cameroon', flag: '🇨🇲', region: 'Central Africa' },
|
| { id: 'cape-verde', name: 'Cape Verde', flag: '🇨🇻', region: 'West Africa' },
|
| { id: 'chad', name: 'Chad', flag: '🇹🇩', region: 'Central Africa' },
|
| { id: 'comoros', name: 'Comoros', flag: '🇰🇲', region: 'East Africa' },
|
| { id: 'congo', name: 'Congo', flag: '🇨🇬', region: 'Central Africa' },
|
| { id: 'drc', name: 'Democratic Republic of Congo', flag: '🇨🇩', region: 'Central Africa' },
|
| { id: 'djibouti', name: 'Djibouti', flag: '🇩🇯', region: 'East Africa' },
|
| { id: 'egypt', name: 'Egypt', flag: '🇪🇬', region: 'North Africa' },
|
| { id: 'equatorial-guinea', name: 'Equatorial Guinea', flag: '🇬🇶', region: 'Central Africa' },
|
| { id: 'eritrea', name: 'Eritrea', flag: '🇪🇷', region: 'East Africa' },
|
| { id: 'eswatini', name: 'Eswatini', flag: '🇸🇿', region: 'Southern Africa' },
|
| { id: 'ethiopia', name: 'Ethiopia', flag: '🇪🇹', region: 'East Africa' },
|
| { id: 'gabon', name: 'Gabon', flag: '🇬🇦', region: 'Central Africa' },
|
| { id: 'gambia', name: 'Gambia', flag: '🇬🇲', region: 'West Africa' },
|
| { id: 'ghana', name: 'Ghana', flag: '🇬🇭', region: 'West Africa' },
|
| { id: 'guinea', name: 'Guinea', flag: '🇬🇳', region: 'West Africa' },
|
| { id: 'guinea-bissau', name: 'Guinea-Bissau', flag: '🇬🇼', region: 'West Africa' },
|
| { id: 'ivory-coast', name: 'Ivory Coast', flag: '🇨🇮', region: 'West Africa' },
|
| { id: 'kenya', name: 'Kenya', flag: '🇰🇪', region: 'East Africa' },
|
| { id: 'lesotho', name: 'Lesotho', flag: '🇱🇸', region: 'Southern Africa' },
|
| { id: 'liberia', name: 'Liberia', flag: '🇱🇷', region: 'West Africa' },
|
| { id: 'libya', name: 'Libya', flag: '🇱🇾', region: 'North Africa' },
|
| { id: 'madagascar', name: 'Madagascar', flag: '🇲🇬', region: 'East Africa' },
|
| { id: 'malawi', name: 'Malawi', flag: '🇲🇼', region: 'Southern Africa' },
|
| { id: 'mali', name: 'Mali', flag: '🇲🇱', region: 'West Africa' },
|
| { id: 'mauritania', name: 'Mauritania', flag: '🇲🇷', region: 'West Africa' },
|
| { id: 'mauritius', name: 'Mauritius', flag: '🇲🇺', region: 'East Africa' },
|
| { id: 'morocco', name: 'Morocco', flag: '🇲🇦', region: 'North Africa' },
|
| { id: 'mozambique', name: 'Mozambique', flag: '🇲🇿', region: 'Southern Africa' },
|
| { id: 'namibia', name: 'Namibia', flag: '🇳🇦', region: 'Southern Africa' },
|
| { id: 'niger', name: 'Niger', flag: '🇳🇪', region: 'West Africa' },
|
| { id: 'nigeria', name: 'Nigeria', flag: '🇳🇬', region: 'West Africa' },
|
| { id: 'rwanda', name: 'Rwanda', flag: '🇷🇼', region: 'East Africa' },
|
| { id: 'sao-tome', name: 'São Tomé and Príncipe', flag: '🇸🇹', region: 'Central Africa' },
|
| { id: 'senegal', name: 'Senegal', flag: '🇸🇳', region: 'West Africa' },
|
| { id: 'seychelles', name: 'Seychelles', flag: '🇸🇨', region: 'East Africa' },
|
| { id: 'sierra-leone', name: 'Sierra Leone', flag: '🇸🇱', region: 'West Africa' },
|
| { id: 'somalia', name: 'Somalia', flag: '🇸🇴', region: 'East Africa' },
|
| { id: 'south-africa', name: 'South Africa', flag: '🇿🇦', region: 'Southern Africa' },
|
| { id: 'south-sudan', name: 'South Sudan', flag: '🇸🇸', region: 'East Africa' },
|
| { id: 'sudan', name: 'Sudan', flag: '🇸🇩', region: 'North Africa' },
|
| { id: 'tanzania', name: 'Tanzania', flag: '🇹🇿', region: 'East Africa' },
|
| { id: 'togo', name: 'Togo', flag: '🇹🇬', region: 'West Africa' },
|
| { id: 'tunisia', name: 'Tunisia', flag: '🇹🇳', region: 'North Africa' },
|
| { id: 'uganda', name: 'Uganda', flag: '🇺🇬', region: 'East Africa' },
|
| { id: 'zambia', name: 'Zambia', flag: '🇿🇲', region: 'Southern Africa' },
|
| { id: 'zimbabwe', name: 'Zimbabwe', flag: '🇿🇼', region: 'Southern Africa' },
|
|
|
|
|
| { id: 'afghanistan', name: 'Afghanistan', flag: '🇦🇫', region: 'Central Asia' },
|
| { id: 'armenia', name: 'Armenia', flag: '🇦🇲', region: 'Western Asia' },
|
| { id: 'azerbaijan', name: 'Azerbaijan', flag: '🇦🇿', region: 'Western Asia' },
|
| { id: 'bahrain', name: 'Bahrain', flag: '🇧🇭', region: 'Western Asia' },
|
| { id: 'bangladesh', name: 'Bangladesh', flag: '🇧🇩', region: 'South Asia' },
|
| { id: 'bhutan', name: 'Bhutan', flag: '🇧🇹', region: 'South Asia' },
|
| { id: 'brunei', name: 'Brunei', flag: '🇧🇳', region: 'Southeast Asia' },
|
| { id: 'cambodia', name: 'Cambodia', flag: '🇰🇭', region: 'Southeast Asia' },
|
| { id: 'china', name: 'China', flag: '🇨🇳', region: 'East Asia' },
|
| { id: 'cyprus', name: 'Cyprus', flag: '🇨🇾', region: 'Western Asia' },
|
| { id: 'georgia', name: 'Georgia', flag: '🇬🇪', region: 'Western Asia' },
|
| { id: 'india', name: 'India', flag: '🇮🇳', region: 'South Asia' },
|
| { id: 'indonesia', name: 'Indonesia', flag: '🇮🇩', region: 'Southeast Asia' },
|
| { id: 'iran', name: 'Iran', flag: '🇮🇷', region: 'Western Asia' },
|
| { id: 'iraq', name: 'Iraq', flag: '🇮🇶', region: 'Western Asia' },
|
| { id: 'israel', name: 'Israel', flag: '🇮🇱', region: 'Western Asia' },
|
| { id: 'japan', name: 'Japan', flag: '🇯🇵', region: 'East Asia' },
|
| { id: 'jordan', name: 'Jordan', flag: '🇯🇴', region: 'Western Asia' },
|
| { id: 'kazakhstan', name: 'Kazakhstan', flag: '🇰🇿', region: 'Central Asia' },
|
| { id: 'kuwait', name: 'Kuwait', flag: '🇰🇼', region: 'Western Asia' },
|
| { id: 'kyrgyzstan', name: 'Kyrgyzstan', flag: '🇰🇬', region: 'Central Asia' },
|
| { id: 'laos', name: 'Laos', flag: '🇱🇦', region: 'Southeast Asia' },
|
| { id: 'lebanon', name: 'Lebanon', flag: '🇱🇧', region: 'Western Asia' },
|
| { id: 'malaysia', name: 'Malaysia', flag: '🇲🇾', region: 'Southeast Asia' },
|
| { id: 'maldives', name: 'Maldives', flag: '🇲🇻', region: 'South Asia' },
|
| { id: 'mongolia', name: 'Mongolia', flag: '🇲🇳', region: 'East Asia' },
|
| { id: 'myanmar', name: 'Myanmar', flag: '🇲🇲', region: 'Southeast Asia' },
|
| { id: 'nepal', name: 'Nepal', flag: '🇳🇵', region: 'South Asia' },
|
| { id: 'north-korea', name: 'North Korea', flag: '🇰🇵', region: 'East Asia' },
|
| { id: 'oman', name: 'Oman', flag: '🇴🇲', region: 'Western Asia' },
|
| { id: 'pakistan', name: 'Pakistan', flag: '🇵🇰', region: 'South Asia' },
|
| { id: 'palestine', name: 'Palestine', flag: '🇵🇸', region: 'Western Asia' },
|
| { id: 'philippines', name: 'Philippines', flag: '🇵🇭', region: 'Southeast Asia' },
|
| { id: 'qatar', name: 'Qatar', flag: '🇶🇦', region: 'Western Asia' },
|
| { id: 'saudi-arabia', name: 'Saudi Arabia', flag: '🇸🇦', region: 'Western Asia' },
|
| { id: 'singapore', name: 'Singapore', flag: '🇸🇬', region: 'Southeast Asia' },
|
| { id: 'south-korea', name: 'South Korea', flag: '🇰🇷', region: 'East Asia' },
|
| { id: 'sri-lanka', name: 'Sri Lanka', flag: '🇱🇰', region: 'South Asia' },
|
| { id: 'syria', name: 'Syria', flag: '🇸🇾', region: 'Western Asia' },
|
| { id: 'taiwan', name: 'Taiwan', flag: '🇹🇼', region: 'East Asia' },
|
| { id: 'tajikistan', name: 'Tajikistan', flag: '🇹🇯', region: 'Central Asia' },
|
| { id: 'thailand', name: 'Thailand', flag: '🇹🇭', region: 'Southeast Asia' },
|
| { id: 'timor-leste', name: 'Timor-Leste', flag: '🇹🇱', region: 'Southeast Asia' },
|
| { id: 'turkey', name: 'Turkey', flag: '🇹🇷', region: 'Western Asia' },
|
| { id: 'turkmenistan', name: 'Turkmenistan', flag: '🇹🇲', region: 'Central Asia' },
|
| { id: 'uae', name: 'United Arab Emirates', flag: '🇦🇪', region: 'Western Asia' },
|
| { id: 'uzbekistan', name: 'Uzbekistan', flag: '🇺🇿', region: 'Central Asia' },
|
| { id: 'vietnam', name: 'Vietnam', flag: '🇻🇳', region: 'Southeast Asia' },
|
| { id: 'yemen', name: 'Yemen', flag: '🇾🇪', region: 'Western Asia' },
|
|
|
|
|
| { id: 'albania', name: 'Albania', flag: '🇦🇱', region: 'Southern Europe' },
|
| { id: 'andorra', name: 'Andorra', flag: '🇦🇩', region: 'Southern Europe' },
|
| { id: 'austria', name: 'Austria', flag: '🇦🇹', region: 'Central Europe' },
|
| { id: 'belarus', name: 'Belarus', flag: '🇧🇾', region: 'Eastern Europe' },
|
| { id: 'belgium', name: 'Belgium', flag: '🇧🇪', region: 'Western Europe' },
|
| { id: 'bosnia', name: 'Bosnia and Herzegovina', flag: '🇧🇦', region: 'Southern Europe' },
|
| { id: 'bulgaria', name: 'Bulgaria', flag: '🇧🇬', region: 'Eastern Europe' },
|
| { id: 'croatia', name: 'Croatia', flag: '🇭🇷', region: 'Southern Europe' },
|
| { id: 'czech-republic', name: 'Czech Republic', flag: '🇨🇿', region: 'Central Europe' },
|
| { id: 'denmark', name: 'Denmark', flag: '🇩🇰', region: 'Northern Europe' },
|
| { id: 'estonia', name: 'Estonia', flag: '🇪🇪', region: 'Northern Europe' },
|
| { id: 'finland', name: 'Finland', flag: '🇫🇮', region: 'Northern Europe' },
|
| { id: 'france', name: 'France', flag: '🇫🇷', region: 'Western Europe' },
|
| { id: 'germany', name: 'Germany', flag: '🇩🇪', region: 'Central Europe' },
|
| { id: 'greece', name: 'Greece', flag: '🇬🇷', region: 'Southern Europe' },
|
| { id: 'hungary', name: 'Hungary', flag: '🇭🇺', region: 'Central Europe' },
|
| { id: 'iceland', name: 'Iceland', flag: '🇮🇸', region: 'Northern Europe' },
|
| { id: 'ireland', name: 'Ireland', flag: '🇮🇪', region: 'Northern Europe' },
|
| { id: 'italy', name: 'Italy', flag: '🇮🇹', region: 'Southern Europe' },
|
| { id: 'kosovo', name: 'Kosovo', flag: '🇽🇰', region: 'Southern Europe' },
|
| { id: 'latvia', name: 'Latvia', flag: '🇱🇻', region: 'Northern Europe' },
|
| { id: 'liechtenstein', name: 'Liechtenstein', flag: '🇱🇮', region: 'Central Europe' },
|
| { id: 'lithuania', name: 'Lithuania', flag: '🇱🇹', region: 'Northern Europe' },
|
| { id: 'luxembourg', name: 'Luxembourg', flag: '🇱🇺', region: 'Western Europe' },
|
| { id: 'malta', name: 'Malta', flag: '🇲🇹', region: 'Southern Europe' },
|
| { id: 'moldova', name: 'Moldova', flag: '🇲🇩', region: 'Eastern Europe' },
|
| { id: 'monaco', name: 'Monaco', flag: '🇲🇨', region: 'Western Europe' },
|
| { id: 'montenegro', name: 'Montenegro', flag: '🇲🇪', region: 'Southern Europe' },
|
| { id: 'netherlands', name: 'Netherlands', flag: '🇳🇱', region: 'Western Europe' },
|
| { id: 'north-macedonia', name: 'North Macedonia', flag: '🇲🇰', region: 'Southern Europe' },
|
| { id: 'norway', name: 'Norway', flag: '🇳🇴', region: 'Northern Europe' },
|
| { id: 'poland', name: 'Poland', flag: '🇵🇱', region: 'Central Europe' },
|
| { id: 'portugal', name: 'Portugal', flag: '🇵🇹', region: 'Southern Europe' },
|
| { id: 'romania', name: 'Romania', flag: '🇷🇴', region: 'Eastern Europe' },
|
| { id: 'russia', name: 'Russia', flag: '🇷🇺', region: 'Eastern Europe' },
|
| { id: 'san-marino', name: 'San Marino', flag: '🇸🇲', region: 'Southern Europe' },
|
| { id: 'serbia', name: 'Serbia', flag: '🇷🇸', region: 'Southern Europe' },
|
| { id: 'slovakia', name: 'Slovakia', flag: '🇸🇰', region: 'Central Europe' },
|
| { id: 'slovenia', name: 'Slovenia', flag: '🇸🇮', region: 'Central Europe' },
|
| { id: 'spain', name: 'Spain', flag: '🇪🇸', region: 'Southern Europe' },
|
| { id: 'sweden', name: 'Sweden', flag: '🇸🇪', region: 'Northern Europe' },
|
| { id: 'switzerland', name: 'Switzerland', flag: '🇨🇭', region: 'Central Europe' },
|
| { id: 'ukraine', name: 'Ukraine', flag: '🇺🇦', region: 'Eastern Europe' },
|
| { id: 'united-kingdom', name: 'United Kingdom', flag: '🇬🇧', region: 'Northern Europe' },
|
| { id: 'vatican', name: 'Vatican City', flag: '🇻🇦', region: 'Southern Europe' },
|
|
|
|
|
| { id: 'antigua', name: 'Antigua and Barbuda', flag: '🇦🇬', region: 'Caribbean' },
|
| { id: 'bahamas', name: 'Bahamas', flag: '🇧🇸', region: 'Caribbean' },
|
| { id: 'barbados', name: 'Barbados', flag: '🇧🇧', region: 'Caribbean' },
|
| { id: 'belize', name: 'Belize', flag: '🇧🇿', region: 'Central America' },
|
| { id: 'canada', name: 'Canada', flag: '🇨🇦', region: 'North America' },
|
| { id: 'costa-rica', name: 'Costa Rica', flag: '🇨🇷', region: 'Central America' },
|
| { id: 'cuba', name: 'Cuba', flag: '🇨🇺', region: 'Caribbean' },
|
| { id: 'dominica', name: 'Dominica', flag: '🇩🇲', region: 'Caribbean' },
|
| { id: 'dominican-republic', name: 'Dominican Republic', flag: '🇩🇴', region: 'Caribbean' },
|
| { id: 'el-salvador', name: 'El Salvador', flag: '🇸🇻', region: 'Central America' },
|
| { id: 'grenada', name: 'Grenada', flag: '🇬🇩', region: 'Caribbean' },
|
| { id: 'guatemala', name: 'Guatemala', flag: '🇬🇹', region: 'Central America' },
|
| { id: 'haiti', name: 'Haiti', flag: '🇭🇹', region: 'Caribbean' },
|
| { id: 'honduras', name: 'Honduras', flag: '🇭🇳', region: 'Central America' },
|
| { id: 'jamaica', name: 'Jamaica', flag: '🇯🇲', region: 'Caribbean' },
|
| { id: 'mexico', name: 'Mexico', flag: '🇲🇽', region: 'North America' },
|
| { id: 'nicaragua', name: 'Nicaragua', flag: '🇳🇮', region: 'Central America' },
|
| { id: 'panama', name: 'Panama', flag: '🇵🇦', region: 'Central America' },
|
| { id: 'saint-kitts', name: 'Saint Kitts and Nevis', flag: '🇰🇳', region: 'Caribbean' },
|
| { id: 'saint-lucia', name: 'Saint Lucia', flag: '🇱🇨', region: 'Caribbean' },
|
| { id: 'saint-vincent', name: 'Saint Vincent and the Grenadines', flag: '🇻🇨', region: 'Caribbean' },
|
| { id: 'trinidad', name: 'Trinidad and Tobago', flag: '🇹🇹', region: 'Caribbean' },
|
| { id: 'usa', name: 'United States', flag: '🇺🇸', region: 'North America' },
|
|
|
|
|
| { id: 'argentina', name: 'Argentina', flag: '🇦🇷', region: 'South America' },
|
| { id: 'bolivia', name: 'Bolivia', flag: '🇧🇴', region: 'South America' },
|
| { id: 'brazil', name: 'Brazil', flag: '🇧🇷', region: 'South America' },
|
| { id: 'chile', name: 'Chile', flag: '🇨🇱', region: 'South America' },
|
| { id: 'colombia', name: 'Colombia', flag: '🇨🇴', region: 'South America' },
|
| { id: 'ecuador', name: 'Ecuador', flag: '🇪🇨', region: 'South America' },
|
| { id: 'guyana', name: 'Guyana', flag: '🇬🇾', region: 'South America' },
|
| { id: 'paraguay', name: 'Paraguay', flag: '🇵🇾', region: 'South America' },
|
| { id: 'peru', name: 'Peru', flag: '🇵🇪', region: 'South America' },
|
| { id: 'suriname', name: 'Suriname', flag: '🇸🇷', region: 'South America' },
|
| { id: 'uruguay', name: 'Uruguay', flag: '🇺🇾', region: 'South America' },
|
| { id: 'venezuela', name: 'Venezuela', flag: '🇻🇪', region: 'South America' },
|
|
|
|
|
| { id: 'australia', name: 'Australia', flag: '🇦🇺', region: 'Oceania' },
|
| { id: 'fiji', name: 'Fiji', flag: '🇫🇯', region: 'Oceania' },
|
| { id: 'kiribati', name: 'Kiribati', flag: '🇰🇮', region: 'Oceania' },
|
| { id: 'marshall-islands', name: 'Marshall Islands', flag: '🇲🇭', region: 'Oceania' },
|
| { id: 'micronesia', name: 'Micronesia', flag: '🇫🇲', region: 'Oceania' },
|
| { id: 'nauru', name: 'Nauru', flag: '🇳🇷', region: 'Oceania' },
|
| { id: 'new-zealand', name: 'New Zealand', flag: '🇳🇿', region: 'Oceania' },
|
| { id: 'palau', name: 'Palau', flag: '🇵🇼', region: 'Oceania' },
|
| { id: 'papua-new-guinea', name: 'Papua New Guinea', flag: '🇵🇬', region: 'Oceania' },
|
| { id: 'samoa', name: 'Samoa', flag: '🇼🇸', region: 'Oceania' },
|
| { id: 'solomon-islands', name: 'Solomon Islands', flag: '🇸🇧', region: 'Oceania' },
|
| { id: 'tonga', name: 'Tonga', flag: '🇹🇴', region: 'Oceania' },
|
| { id: 'tuvalu', name: 'Tuvalu', flag: '🇹🇻', region: 'Oceania' },
|
| { id: 'vanuatu', name: 'Vanuatu', flag: '🇻🇺', region: 'Oceania' }
|
| ];
|
|
|
| const THEMES = [
|
| {
|
| id: 'family',
|
| name: 'Family Life',
|
| icon: '👨👩👧👦',
|
| description: 'Family structures, relationships, and traditions'
|
| },
|
| {
|
| id: 'education',
|
| name: 'Education',
|
| icon: '📚',
|
| description: 'Learning systems, values, and approaches to knowledge'
|
| },
|
| {
|
| id: 'traditions',
|
| name: 'Traditions & Festivals',
|
| icon: '🎭',
|
| description: 'Cultural celebrations, rituals, and customs'
|
| },
|
| {
|
| id: 'communication',
|
| name: 'Communication',
|
| icon: '💬',
|
| description: 'Language, non-verbal cues, and social interactions'
|
| },
|
| {
|
| id: 'work',
|
| name: 'Work & Business',
|
| icon: '💼',
|
| description: 'Professional culture, work ethics, and business practices'
|
| },
|
| {
|
| id: 'food',
|
| name: 'Food & Dining',
|
| icon: '🍽️',
|
| description: 'Culinary traditions, dining etiquette, and food culture'
|
| },
|
| {
|
| id: 'values',
|
| name: 'Core Values',
|
| icon: '⭐',
|
| description: 'Fundamental beliefs, principles, and worldviews'
|
| },
|
| {
|
| id: 'challenges',
|
| name: 'Modern Challenges',
|
| icon: '🌍',
|
| description: 'Contemporary issues and cultural adaptations'
|
| }
|
| ];
|
|
|
| const REFLECTION_PROMPTS = [
|
| {
|
| id: 'similarities',
|
| question: 'What similarities did you discover between this culture and your own?',
|
| icon: '🤝'
|
| },
|
| {
|
| id: 'differences',
|
| question: 'What differences surprised you the most?',
|
| icon: '🔍'
|
| },
|
| {
|
| id: 'assumptions',
|
| question: 'What assumptions about this culture were challenged?',
|
| icon: '💭'
|
| },
|
| {
|
| id: 'learning',
|
| question: 'What valuable lesson or practice could you adopt from this culture?',
|
| icon: '💡'
|
| },
|
| {
|
| id: 'empathy',
|
| question: 'How has this exploration changed your perspective on cultural diversity?',
|
| icon: '❤️'
|
| }
|
| ];
|
|
|
|
|
| function CountryDropdown({ selectedCountry, onCountrySelect }) {
|
| const [isOpen, setIsOpen] = useState(false);
|
| const [searchTerm, setSearchTerm] = useState('');
|
| const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
| const dropdownRef = useRef(null);
|
| const inputRef = useRef(null);
|
|
|
| const filteredCountries = WORLD_COUNTRIES.filter(country =>
|
| country.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
| country.region.toLowerCase().includes(searchTerm.toLowerCase())
|
| );
|
|
|
| useEffect(() => {
|
| function handleClickOutside(event) {
|
| if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
| setIsOpen(false);
|
| setHighlightedIndex(-1);
|
| }
|
| }
|
|
|
| document.addEventListener('mousedown', handleClickOutside);
|
| return () => document.removeEventListener('mousedown', handleClickOutside);
|
| }, []);
|
|
|
| const handleInputChange = (e) => {
|
| setSearchTerm(e.target.value);
|
| setIsOpen(true);
|
| setHighlightedIndex(-1);
|
| };
|
|
|
| const handleKeyDown = (e) => {
|
| if (!isOpen) {
|
| if (e.key === 'Enter' || e.key === 'ArrowDown') {
|
| setIsOpen(true);
|
| setHighlightedIndex(0);
|
| }
|
| return;
|
| }
|
|
|
| switch (e.key) {
|
| case 'ArrowDown':
|
| e.preventDefault();
|
| setHighlightedIndex(prev =>
|
| prev < filteredCountries.length - 1 ? prev + 1 : 0
|
| );
|
| break;
|
| case 'ArrowUp':
|
| e.preventDefault();
|
| setHighlightedIndex(prev =>
|
| prev > 0 ? prev - 1 : filteredCountries.length - 1
|
| );
|
| break;
|
| case 'Enter':
|
| e.preventDefault();
|
| if (highlightedIndex >= 0 && filteredCountries[highlightedIndex]) {
|
| handleCountrySelect(filteredCountries[highlightedIndex]);
|
| }
|
| break;
|
| case 'Escape':
|
| setIsOpen(false);
|
| setHighlightedIndex(-1);
|
| inputRef.current?.blur();
|
| break;
|
| }
|
| };
|
|
|
| const handleCountrySelect = (country) => {
|
| onCountrySelect(country);
|
| setSearchTerm('');
|
| setIsOpen(false);
|
| setHighlightedIndex(-1);
|
| };
|
|
|
| const displayValue = selectedCountry
|
| ? `${selectedCountry.flag} ${selectedCountry.name}`
|
| : searchTerm;
|
|
|
| return (
|
| <div className="dropdown-container" ref={dropdownRef}>
|
| <input
|
| ref={inputRef}
|
| type="text"
|
| className="dropdown-input"
|
| placeholder={selectedCountry ? `${selectedCountry.flag} ${selectedCountry.name}` : "Search for a country..."}
|
| value={isOpen ? searchTerm : displayValue}
|
| onChange={handleInputChange}
|
| onKeyDown={handleKeyDown}
|
| onFocus={() => setIsOpen(true)}
|
| autoComplete="off"
|
| aria-expanded={isOpen}
|
| aria-haspopup="listbox"
|
| role="combobox"
|
| />
|
|
|
| {isOpen && (
|
| <div className="dropdown-list" role="listbox">
|
| {filteredCountries.length > 0 ? (
|
| filteredCountries.map((country, index) => (
|
| <div
|
| key={country.id}
|
| className={`dropdown-item ${index === highlightedIndex ? 'highlighted' : ''}`}
|
| onClick={() => handleCountrySelect(country)}
|
| role="option"
|
| aria-selected={selectedCountry?.id === country.id}
|
| >
|
| <span className="text-xl">{country.flag}</span>
|
| <div>
|
| <div className="font-semibold text-gray-800">{country.name}</div>
|
| <div className="text-sm text-gray-500">{country.region}</div>
|
| </div>
|
| </div>
|
| ))
|
| ) : (
|
| <div className="dropdown-item text-gray-500">
|
| No countries found matching "{searchTerm}"
|
| </div>
|
| )}
|
| </div>
|
| )}
|
| </div>
|
| );
|
| }
|
|
|
| function CulturalIntelligenceExplorer() {
|
|
|
| const [phase, setPhase] = useState(1);
|
| const [selectedCountry, setSelectedCountry] = useState(null);
|
| const [selectedTheme, setSelectedTheme] = useState(null);
|
| const [apiKey, setApiKey] = useState('');
|
| const [showApiKeyModal, setShowApiKeyModal] = useState(false);
|
|
|
|
|
| const [insights, setInsights] = useState(null);
|
| const [isGeneratingInsights, setIsGeneratingInsights] = useState(false);
|
| const [aiError, setAiError] = useState('');
|
|
|
|
|
| const [reflections, setReflections] = useState({});
|
| const [explorationHistory, setExplorationHistory] = useState([]);
|
|
|
|
|
| const [analysis, setAnalysis] = useState(null);
|
| const [isGeneratingAnalysis, setIsGeneratingAnalysis] = useState(false);
|
|
|
|
|
| useEffect(() => {
|
| try {
|
| const savedApiKey = localStorage.getItem('cultural-explorer-api-key');
|
| const savedHistory = localStorage.getItem('cultural-explorer-history');
|
|
|
| if (savedApiKey) {
|
| setApiKey(savedApiKey);
|
| }
|
| if (savedHistory) {
|
| setExplorationHistory(JSON.parse(savedHistory));
|
| }
|
| } catch (error) {
|
| console.error('Error loading saved data:', error);
|
| }
|
| }, []);
|
|
|
|
|
| useEffect(() => {
|
| try {
|
| if (apiKey) {
|
| localStorage.setItem('cultural-explorer-api-key', apiKey);
|
| }
|
| } catch (error) {
|
| console.error('Error saving API key:', error);
|
| }
|
| }, [apiKey]);
|
|
|
| useEffect(() => {
|
| try {
|
| localStorage.setItem('cultural-explorer-history', JSON.stringify(explorationHistory));
|
| } catch (error) {
|
| console.error('Error saving history:', error);
|
| }
|
| }, [explorationHistory]);
|
|
|
| const handleCountrySelect = (country) => {
|
| setSelectedCountry(country);
|
| };
|
|
|
| const handleThemeSelect = (theme) => {
|
| setSelectedTheme(theme);
|
| };
|
|
|
| const proceedToInsights = () => {
|
| if (!selectedCountry) {
|
| alert('Please select a country to explore');
|
| return;
|
| }
|
|
|
| if (!apiKey) {
|
| setShowApiKeyModal(true);
|
| return;
|
| }
|
|
|
| setPhase(2);
|
| generateInsights();
|
| };
|
|
|
| const generateInsights = async () => {
|
| if (!apiKey || !selectedCountry) return;
|
|
|
| setIsGeneratingInsights(true);
|
| setAiError('');
|
|
|
| try {
|
| const prompt = createInsightPrompt();
|
| const response = await callOpenAI(prompt);
|
| setInsights(response);
|
| } catch (error) {
|
| console.error('Error generating insights:', error);
|
| setAiError(`Failed to generate insights: ${error.message}`);
|
| } finally {
|
| setIsGeneratingInsights(false);
|
| }
|
| };
|
|
|
| const createInsightPrompt = () => {
|
| const country = selectedCountry;
|
| const theme = selectedTheme;
|
|
|
| return `You are a cultural intelligence educator helping students develop empathy and global citizenship. Provide comprehensive, respectful insights about ${country.name} culture.
|
|
|
| ${theme ? `Focus specifically on: ${theme.name} - ${theme.description}` : 'Provide a general cultural overview.'}
|
|
|
| Structure your response with the following sections:
|
|
|
| **CULTURAL OVERVIEW:**
|
| Provide a respectful, nuanced introduction to ${country.name} culture, avoiding stereotypes.
|
|
|
| **KEY CULTURAL VALUES:**
|
| List and explain 4-5 core values that guide this culture.
|
|
|
| **DAILY LIFE INSIGHTS:**
|
| Describe how these values manifest in everyday life.
|
|
|
| ${theme ? `**${theme.name.toUpperCase()} FOCUS:**
|
| Provide detailed insights about ${theme.description} in ${country.name} culture.` : ''}
|
|
|
| **HISTORICAL CONTEXT:**
|
| Brief background on how history shaped current cultural practices.
|
|
|
| **MODERN ADAPTATIONS:**
|
| How this culture navigates contemporary global challenges while preserving traditions.
|
|
|
| **COMMON MISCONCEPTIONS:**
|
| Address 2-3 common stereotypes or misconceptions about this culture.
|
|
|
| **CULTURAL WISDOM:**
|
| Share a meaningful lesson or perspective this culture offers to the world.
|
|
|
| Keep the tone educational, respectful, and engaging. Use specific examples while avoiding overgeneralization. Aim for 800-1000 words total.`;
|
| };
|
|
|
| const callOpenAI = async (prompt) => {
|
| if (!apiKey) {
|
| throw new Error('API key not provided');
|
| }
|
|
|
| const response = await fetch('https://api.openai.com/v1/chat/completions', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| 'Authorization': `Bearer ${apiKey.trim()}`
|
| },
|
| body: JSON.stringify({
|
| model: 'gpt-4o-mini',
|
| messages: [
|
| { role: 'system', content: 'You are a cultural intelligence educator focused on promoting empathy, understanding, and global citizenship.' },
|
| { role: 'user', content: prompt }
|
| ],
|
| max_tokens: 1200,
|
| temperature: 0.7
|
| })
|
| });
|
|
|
| if (!response.ok) {
|
| const errorData = await response.json().catch(() => ({}));
|
| throw new Error(`OpenAI API error: ${response.status} ${response.statusText}${errorData.error ? ` - ${errorData.error.message}` : ''}`);
|
| }
|
|
|
| const data = await response.json();
|
|
|
| if (!data.choices || !data.choices[0] || !data.choices[0].message) {
|
| throw new Error('Invalid response format from OpenAI API');
|
| }
|
|
|
| return data.choices[0].message.content;
|
| };
|
|
|
| const proceedToReflection = () => {
|
| setPhase(3);
|
| };
|
|
|
| const handleReflectionChange = (promptId, value) => {
|
| setReflections(prev => ({
|
| ...prev,
|
| [promptId]: value
|
| }));
|
| };
|
|
|
| const proceedToAnalysis = () => {
|
| setPhase(4);
|
| generateAnalysis();
|
| };
|
|
|
| const generateAnalysis = async () => {
|
| if (!apiKey || !selectedCountry || !insights) return;
|
|
|
| setIsGeneratingAnalysis(true);
|
| setAiError('');
|
|
|
| try {
|
| const prompt = createAnalysisPrompt();
|
| const response = await callOpenAI(prompt);
|
| setAnalysis(response);
|
| } catch (error) {
|
| console.error('Error generating analysis:', error);
|
| setAiError(`Failed to generate analysis: ${error.message}`);
|
| } finally {
|
| setIsGeneratingAnalysis(false);
|
| }
|
| };
|
|
|
| const createAnalysisPrompt = () => {
|
| const country = selectedCountry;
|
| const theme = selectedTheme;
|
| const reflectionText = Object.entries(reflections)
|
| .map(([key, value]) => {
|
| const prompt = REFLECTION_PROMPTS.find(p => p.id === key);
|
| return `${prompt?.question}: ${value}`;
|
| })
|
| .join('\n\n');
|
|
|
| return `You are a cultural intelligence educator analyzing a student's cultural exploration journey. Based on the cultural insights and student reflections below, provide a comprehensive analysis in a structured tabular format.
|
|
|
| **CULTURAL CONTEXT:**
|
| Country: ${country.name} (${country.region})
|
| ${theme ? `Focus Theme: ${theme.name} - ${theme.description}` : 'General cultural exploration'}
|
|
|
| **CULTURAL INSIGHTS PROVIDED:**
|
| ${insights}
|
|
|
| **STUDENT REFLECTIONS:**
|
| ${reflectionText}
|
|
|
| **ANALYSIS REQUIREMENTS:**
|
| Create a detailed analysis table with the following structure. Format your response as a structured table with clear rows and columns:
|
|
|
| | Analysis Category | Cultural Theme Insights | Student Reflection Analysis | Comparison & Growth Indicators |
|
| |-------------------|------------------------|----------------------------|-------------------------------|
|
| | Cultural Understanding | [Key cultural insights from the theme] | [Analysis of student's understanding] | [Evidence of learning and growth] |
|
| | Personal Connection | [How culture relates to universal themes] | [Student's personal connections made] | [Depth of empathy development] |
|
| | Assumption Challenges | [Cultural misconceptions addressed] | [Student's assumption changes] | [Critical thinking evidence] |
|
| | Learning Integration | [Key cultural lessons identified] | [Student's learning takeaways] | [Application potential] |
|
| | Perspective Transformation | [Cultural wisdom shared] | [Student's perspective shifts] | [Global citizenship development] |
|
|
|
| For each row, provide:
|
| - 2-3 specific insights from the cultural theme
|
| - Detailed analysis of the student's reflection quality and depth
|
| - Evidence of learning, growth, and cultural intelligence development
|
| - Specific examples and quotes from student responses where relevant
|
|
|
| Keep the analysis educational, encouraging, and focused on cultural intelligence development. Highlight strengths and areas for continued growth.`;
|
| };
|
|
|
| const completeExploration = () => {
|
| const exploration = {
|
| id: Date.now(),
|
| timestamp: new Date().toISOString(),
|
| country: selectedCountry,
|
| theme: selectedTheme,
|
| insights: insights,
|
| reflections: reflections,
|
| analysis: analysis
|
| };
|
|
|
| setExplorationHistory(prev => [...prev, exploration]);
|
|
|
|
|
| setPhase(1);
|
| setSelectedCountry(null);
|
| setSelectedTheme(null);
|
| setInsights(null);
|
| setReflections({});
|
| setAnalysis(null);
|
| setAiError('');
|
| };
|
|
|
| const validateApiKey = async (key) => {
|
| try {
|
| const response = await fetch('https://api.openai.com/v1/models', {
|
| headers: {
|
| 'Authorization': `Bearer ${key.trim()}`
|
| }
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error('Invalid API key');
|
| }
|
|
|
| return true;
|
| } catch (error) {
|
| throw new Error('Invalid API key. Please check and try again.');
|
| }
|
| };
|
|
|
| const handleApiKeySubmit = async (key) => {
|
| try {
|
| await validateApiKey(key);
|
| setApiKey(key);
|
| setShowApiKeyModal(false);
|
| setPhase(2);
|
| generateInsights();
|
| } catch (error) {
|
| setAiError(error.message);
|
| }
|
| };
|
|
|
| const formatInsights = (content) => {
|
|
|
| let formatted = content
|
| .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
| .replace(/^• (.+)$/gm, '<li>$1</li>')
|
| .replace(/^- (.+)$/gm, '<li>$1</li>')
|
| .split('\n\n')
|
| .map(paragraph => {
|
| if (paragraph.includes('<li>')) {
|
| return `<ul class="list-disc list-inside space-y-1">${paragraph}</ul>`;
|
| }
|
| return paragraph.trim() ? `<p class="mb-3">${paragraph.trim()}</p>` : '';
|
| })
|
| .join('');
|
|
|
| return formatted;
|
| };
|
|
|
| const parseAnalysisTable = (content) => {
|
|
|
| const lines = content.split('\n').filter(line => line.trim());
|
| const tableData = [];
|
|
|
| let currentRow = null;
|
| let inTable = false;
|
|
|
| for (const line of lines) {
|
| if (line.includes('|') && line.includes('Analysis Category')) {
|
| inTable = true;
|
| continue;
|
| }
|
|
|
| if (line.includes('|') && line.includes('---')) {
|
| continue;
|
| }
|
|
|
| if (inTable && line.includes('|')) {
|
| const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell);
|
| if (cells.length >= 4) {
|
| tableData.push({
|
| category: cells[0],
|
| cultural: cells[1],
|
| reflection: cells[2],
|
| comparison: cells[3]
|
| });
|
| }
|
| }
|
| }
|
|
|
|
|
| if (tableData.length === 0) {
|
| const sections = content.split('\n\n');
|
| sections.forEach((section, index) => {
|
| if (section.trim()) {
|
| tableData.push({
|
| category: `Analysis ${index + 1}`,
|
| cultural: section.substring(0, 200) + '...',
|
| reflection: 'Detailed analysis provided',
|
| comparison: 'Growth indicators identified'
|
| });
|
| }
|
| });
|
| }
|
|
|
| return tableData;
|
| };
|
|
|
| const getProgressPercentage = () => {
|
| return (phase / 4) * 100;
|
| };
|
|
|
|
|
| const ApiKeyModal = () => {
|
| const [keyInput, setKeyInput] = useState('');
|
| const [isValidating, setIsValidating] = useState(false);
|
|
|
| const handleSubmit = async (e) => {
|
| e.preventDefault();
|
| if (!keyInput.trim()) return;
|
|
|
| setIsValidating(true);
|
| try {
|
| await handleApiKeySubmit(keyInput);
|
| } catch (error) {
|
|
|
| } finally {
|
| setIsValidating(false);
|
| }
|
| };
|
|
|
| return (
|
| <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
| <div className="glass p-6 max-w-md w-full">
|
| <h3 className="text-xl font-bold text-gray-800 mb-4">🔑 OpenAI API Key Required</h3>
|
| <p className="text-gray-600 mb-4">
|
| To generate cultural insights, please provide your OpenAI API key.
|
| This will be stored locally and used only for this application.
|
| </p>
|
| <form onSubmit={handleSubmit}>
|
| <input
|
| type="password"
|
| value={keyInput}
|
| onChange={(e) => setKeyInput(e.target.value)}
|
| placeholder="sk-..."
|
| className="w-full px-3 py-2 border rounded-lg mb-4"
|
| autoFocus
|
| />
|
| <div className="flex gap-2">
|
| <button
|
| type="submit"
|
| disabled={!keyInput.trim() || isValidating}
|
| className="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
| >
|
| {isValidating ? 'Validating...' : 'Continue'}
|
| </button>
|
| <button
|
| type="button"
|
| onClick={() => setShowApiKeyModal(false)}
|
| className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
|
| >
|
| Cancel
|
| </button>
|
| </div>
|
| </form>
|
| {aiError && (
|
| <div className="mt-3 text-red-600 text-sm">{aiError}</div>
|
| )}
|
| <p className="text-xs text-gray-500 mt-3">
|
| Get your API key at <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">OpenAI</a>
|
| </p>
|
| </div>
|
| </div>
|
| );
|
| };
|
|
|
| return (
|
| <div className="min-h-screen py-6">
|
| <div className="max-w-6xl mx-auto px-4">
|
| {/* Header */}
|
| <div className="glass p-6 mb-6 text-center">
|
| <h1 className="text-4xl font-bold text-gray-800 mb-2">
|
| 🌍 Cultural Intelligence Explorer
|
| </h1>
|
| <p className="text-gray-600 mb-4">
|
| Develop empathy and global citizenship through cultural exploration
|
| </p>
|
| <p className="text-sm text-blue-600 font-semibold">
|
| Global Edition with AI Analysis - Explore any country in the world!
|
| </p>
|
|
|
| {/* Progress Bar */}
|
| <div className="max-w-md mx-auto mt-4">
|
| <div className="flex justify-between text-xs text-gray-500 mb-2">
|
| <span className={phase >= 1 ? 'text-blue-600 font-semibold' : ''}>Selection</span>
|
| <span className={phase >= 2 ? 'text-blue-600 font-semibold' : ''}>Insights</span>
|
| <span className={phase >= 3 ? 'text-blue-600 font-semibold' : ''}>Reflection</span>
|
| <span className={phase >= 4 ? 'text-blue-600 font-semibold' : ''}>Analysis</span>
|
| </div>
|
| <div className="w-full bg-gray-200 rounded-full h-2">
|
| <div
|
| className="progress-bar rounded-full h-2"
|
| style={{ width: `${getProgressPercentage()}%` }}
|
| ></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| {/* Phase 1: Cultural Selection */}
|
| {phase === 1 && (
|
| <div className="fade-in">
|
| <div className="glass p-6 mb-6">
|
| <h2 className="text-2xl font-bold text-gray-800 mb-4">
|
| 🎯 Phase 1: Choose Your Cultural Journey
|
| </h2>
|
| <p className="text-gray-600 mb-6">
|
| Select any country in the world to explore and optionally choose a specific theme to focus on.
|
| </p>
|
|
|
| {/* Country Selection */}
|
| <div className="mb-8">
|
| <div className="country-dropdown">
|
| <h3 className="text-xl font-semibold mb-4">🌎 Select a Country</h3>
|
| <p className="text-sm opacity-90 mb-4">
|
| Search from {WORLD_COUNTRIES.length} countries worldwide
|
| </p>
|
| <CountryDropdown
|
| selectedCountry={selectedCountry}
|
| onCountrySelect={handleCountrySelect}
|
| />
|
| </div>
|
| </div>
|
|
|
| {/* Theme Selection */}
|
| <div className="mb-8">
|
| <h3 className="text-xl font-semibold text-gray-700 mb-4">
|
| Choose a Focus Theme (Optional)
|
| </h3>
|
| <div className="grid grid-cols-2 md:grid-cols-4 gap-3 theme-grid">
|
| {THEMES.map(theme => (
|
| <div
|
| key={theme.id}
|
| className={`theme-card ${selectedTheme?.id === theme.id ? 'selected' : ''}`}
|
| onClick={() => handleThemeSelect(selectedTheme?.id === theme.id ? null : theme)}
|
| tabIndex={0}
|
| role="button"
|
| aria-pressed={selectedTheme?.id === theme.id}
|
| onKeyPress={(e) => e.key === 'Enter' && handleThemeSelect(selectedTheme?.id === theme.id ? null : theme)}
|
| >
|
| <div className="text-2xl mb-2">{theme.icon}</div>
|
| <h4 className="font-semibold text-sm">{theme.name}</h4>
|
| <p className="text-xs opacity-80 mt-1">{theme.description}</p>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
|
|
| {/* Selection Summary */}
|
| {selectedCountry && (
|
| <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
| <h4 className="font-semibold text-blue-800 mb-2">Your Selection:</h4>
|
| <p className="text-blue-700">
|
| <strong>{selectedCountry.flag} {selectedCountry.name}</strong> ({selectedCountry.region})
|
| {selectedTheme && (
|
| <span> - Focus: {selectedTheme.icon} {selectedTheme.name}</span>
|
| )}
|
| </p>
|
| </div>
|
| )}
|
|
|
| {/* Continue Button */}
|
| <div className="text-center">
|
| <button
|
| onClick={proceedToInsights}
|
| disabled={!selectedCountry}
|
| className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
| >
|
| Explore Culture 🚀
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Phase 2: AI Cultural Insights */}
|
| {phase === 2 && (
|
| <div className="fade-in">
|
| <div className="glass p-6 mb-6">
|
| <div className="flex items-center justify-between mb-6">
|
| <div>
|
| <h2 className="text-2xl font-bold text-gray-800">
|
| 🧠 Phase 2: Cultural Insights
|
| </h2>
|
| <p className="text-gray-600">
|
| Exploring {selectedCountry?.flag} {selectedCountry?.name} ({selectedCountry?.region})
|
| {selectedTheme && ` - ${selectedTheme.icon} ${selectedTheme.name}`}
|
| </p>
|
| </div>
|
| <button
|
| onClick={() => setPhase(1)}
|
| className="text-blue-600 hover:text-blue-800 transition"
|
| >
|
| ← Back to Selection
|
| </button>
|
| </div>
|
|
|
| {isGeneratingInsights && (
|
| <div className="text-center py-12">
|
| <div className="typing-indicator mb-4">
|
| <span className="text-lg text-gray-600 mr-3">Generating cultural insights</span>
|
| <div className="typing-dot"></div>
|
| <div className="typing-dot"></div>
|
| <div className="typing-dot"></div>
|
| </div>
|
| <p className="text-gray-500">This may take a moment...</p>
|
| </div>
|
| )}
|
|
|
| {aiError && (
|
| <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
| <h4 className="font-semibold text-red-800 mb-2">Error:</h4>
|
| <p className="text-red-700">{aiError}</p>
|
| <button
|
| onClick={generateInsights}
|
| className="mt-3 bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition"
|
| >
|
| Try Again
|
| </button>
|
| </div>
|
| )}
|
|
|
| {insights && (
|
| <div className="slide-in">
|
| <div className="insight-section">
|
| <div
|
| className="prose prose-lg max-w-none"
|
| dangerouslySetInnerHTML={{ __html: formatInsights(insights) }}
|
| />
|
| </div>
|
|
|
| <div className="text-center mt-8">
|
| <button
|
| onClick={proceedToReflection}
|
| className="bg-gradient-to-r from-green-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-700 hover:to-blue-700 transition"
|
| >
|
| Reflect on Learning 💭
|
| </button>
|
| </div>
|
| </div>
|
| )}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Phase 3: Reflection & Comparison */}
|
| {phase === 3 && (
|
| <div className="fade-in">
|
| <div className="glass p-6 mb-6">
|
| <div className="flex items-center justify-between mb-6">
|
| <div>
|
| <h2 className="text-2xl font-bold text-gray-800">
|
| 💭 Phase 3: Reflection & Growth
|
| </h2>
|
| <p className="text-gray-600">
|
| Reflect on your cultural exploration and personal insights
|
| </p>
|
| </div>
|
| <button
|
| onClick={() => setPhase(2)}
|
| className="text-blue-600 hover:text-blue-800 transition"
|
| >
|
| ← Back to Insights
|
| </button>
|
| </div>
|
|
|
| <div className="space-y-6">
|
| {REFLECTION_PROMPTS.map(prompt => (
|
| <div key={prompt.id} className="reflection-card">
|
| <div className="flex items-start gap-3 mb-3">
|
| <span className="text-2xl">{prompt.icon}</span>
|
| <h3 className="font-semibold text-gray-800 flex-1">
|
| {prompt.question}
|
| </h3>
|
| </div>
|
| <textarea
|
| value={reflections[prompt.id] || ''}
|
| onChange={(e) => handleReflectionChange(prompt.id, e.target.value)}
|
| placeholder="Share your thoughts and insights..."
|
| className="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
| rows={4}
|
| />
|
| </div>
|
| ))}
|
| </div>
|
|
|
| <div className="text-center mt-8">
|
| <button
|
| onClick={proceedToAnalysis}
|
| className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition"
|
| >
|
| Generate AI Analysis 📊
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Phase 4: AI Analysis & Comparison */}
|
| {phase === 4 && (
|
| <div className="fade-in">
|
| <div className="glass p-6 mb-6">
|
| <div className="flex items-center justify-between mb-6">
|
| <div>
|
| <h2 className="text-2xl font-bold text-gray-800">
|
| 📊 Phase 4: AI Analysis & Insights
|
| </h2>
|
| <p className="text-gray-600">
|
| AI-powered comparison between cultural themes and your reflections
|
| </p>
|
| </div>
|
| <button
|
| onClick={() => setPhase(3)}
|
| className="text-blue-600 hover:text-blue-800 transition"
|
| >
|
| ← Back to Reflection
|
| </button>
|
| </div>
|
|
|
| {isGeneratingAnalysis && (
|
| <div className="text-center py-12">
|
| <div className="typing-indicator mb-4">
|
| <span className="text-lg text-gray-600 mr-3">Analyzing your cultural journey</span>
|
| <div className="typing-dot"></div>
|
| <div className="typing-dot"></div>
|
| <div className="typing-dot"></div>
|
| </div>
|
| <p className="text-gray-500">Creating personalized insights...</p>
|
| </div>
|
| )}
|
|
|
| {aiError && (
|
| <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
| <h4 className="font-semibold text-red-800 mb-2">Error:</h4>
|
| <p className="text-red-700">{aiError}</p>
|
| <button
|
| onClick={generateAnalysis}
|
| className="mt-3 bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition"
|
| >
|
| Try Again
|
| </button>
|
| </div>
|
| )}
|
|
|
| {analysis && (
|
| <div className="slide-in">
|
| <div className="mb-6">
|
| <h3 className="text-xl font-semibold text-gray-800 mb-4">
|
| 🎯 Cultural Intelligence Analysis
|
| </h3>
|
| <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
| <p className="text-blue-700">
|
| <strong>Analysis for:</strong> {selectedCountry?.flag} {selectedCountry?.name}
|
| {selectedTheme && ` - ${selectedTheme.icon} ${selectedTheme.name}`}
|
| </p>
|
| </div>
|
| </div>
|
|
|
| <div className="analysis-table mb-8">
|
| <table>
|
| <thead>
|
| <tr>
|
| <th className="w-1/4">Analysis Category</th>
|
| <th className="w-1/4">Cultural Theme Insights</th>
|
| <th className="w-1/4">Your Reflection Analysis</th>
|
| <th className="w-1/4">Growth Indicators</th>
|
| </tr>
|
| </thead>
|
| <tbody>
|
| {parseAnalysisTable(analysis).map((row, index) => (
|
| <tr key={index}>
|
| <td className="font-semibold text-gray-800">
|
| {row.category}
|
| <div className="mt-2">
|
| <span className="insight-badge">Cultural Insight</span>
|
| </div>
|
| </td>
|
| <td className="text-gray-700">
|
| {row.cultural}
|
| </td>
|
| <td className="text-gray-700">
|
| {row.reflection}
|
| <div className="mt-2">
|
| <span className="comparison-badge">Personal Growth</span>
|
| </div>
|
| </td>
|
| <td className="text-gray-700">
|
| {row.comparison}
|
| </td>
|
| </tr>
|
| ))}
|
| </tbody>
|
| </table>
|
| </div>
|
|
|
| <div className="text-center mt-8">
|
| <button
|
| onClick={completeExploration}
|
| className="bg-gradient-to-r from-green-600 to-teal-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-700 hover:to-teal-700 transition"
|
| >
|
| Complete Exploration ✨
|
| </button>
|
| </div>
|
| </div>
|
| )}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Exploration History */}
|
| {explorationHistory.length > 0 && (
|
| <div className="glass p-6">
|
| <h3 className="text-xl font-bold text-gray-800 mb-4">
|
| 📚 Your Cultural Journey
|
| </h3>
|
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
| {explorationHistory.slice(-6).map(exploration => (
|
| <div key={exploration.id} className="bg-white rounded-lg p-4 border border-gray-200">
|
| <div className="flex items-center gap-2 mb-2">
|
| <span className="text-xl">{exploration.country.flag}</span>
|
| <h4 className="font-semibold text-gray-800">{exploration.country.name}</h4>
|
| </div>
|
| <p className="text-xs text-gray-500 mb-1">{exploration.country.region}</p>
|
| {exploration.theme && (
|
| <p className="text-sm text-gray-600 mb-2">
|
| {exploration.theme.icon} {exploration.theme.name}
|
| </p>
|
| )}
|
| <div className="flex gap-1 mb-2">
|
| <span className="insight-badge text-xs">Insights</span>
|
| <span className="comparison-badge text-xs">Analysis</span>
|
| </div>
|
| <p className="text-xs text-gray-500">
|
| {new Date(exploration.timestamp).toLocaleDateString()}
|
| </p>
|
| </div>
|
| ))}
|
| </div>
|
| <p className="text-center text-gray-500 mt-4">
|
| {explorationHistory.length} culture{explorationHistory.length !== 1 ? 's' : ''} explored with AI analysis
|
| </p>
|
| </div>
|
| )}
|
| </div>
|
|
|
| {/* API Key Modal */}
|
| {showApiKeyModal && <ApiKeyModal />}
|
| </div>
|
| );
|
| }
|
|
|
| ReactDOM.createRoot(document.getElementById("root")).render(<CulturalIntelligenceExplorer />);
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
