const { useState } = React;

// Wrapper para usar os ícones do Lucide
const LucideIcon = ({ name, ...props }) => {
  React.useEffect(() => {
    lucide.createIcons();
  });
  return React.createElement('i', { 'data-lucide': name, ...props });
};

// Helper para Analytics (Vercel Analytics + Supabase)
const trackEvent = (eventName, properties = {}) => {
  // Vercel Analytics
  if (typeof window !== 'undefined' && window.va) {
    window.va('track', eventName, properties);
  }
};

// Supabase Analytics Helper
const Analytics = typeof window !== 'undefined' && window.ChironAnalytics
  ? window.ChironAnalytics
  : null;

// --- CONFIGURAÇÃO DO QUIZ ---

// Lista de profissões (chaves para tradução)
const professionKeys = [
  'nursing',
  'medicine',
  'nutrition',
  'physiotherapy',
  'psychology',
  'pharmacy',
  'biomedicine',
  'healthTech',
  'hospitalAdmin',
  'otherClinical',
];

// As 8 perguntas diagnósticas
const coreQuestions = [
  {
    id: 1,
    question: 'Na sua documentação clínica (prontuário, relatórios), o que mais te atrai?',
    options: [
      {
        text: 'A coleta, o cálculo de scores e a análise de tendências ao longo do tempo.',
        category: 'data',
      },
      {
        text: 'Garantir que o prontuário seja intuitivo e a informação esteja organizada e legível.',
        category: 'design',
      },
      {
        text: 'Definir quais informações são essenciais para o diagnóstico e qual o fluxo de entrada desses dados.',
        category: 'product',
      },
      {
        text: 'Desenvolver um sistema ou lógica que garanta a segurança e a integridade dos dados sigilosos.',
        category: 'dev',
      },
    ],
  },
  {
    id: 2,
    question:
      'Qual aspecto do fluxo de trabalho diário (triagem, internação, alta) mais te frustra?',
    options: [
      {
        text: 'A falta de padronização na coleta de dados que impede comparações entre pacientes/setores.',
        category: 'data',
      },
      {
        text: 'Softwares clínicos confusos ou com UX ruim, que causam erros de preenchimento ou lentidão.',
        category: 'design',
      },
      {
        text: 'A ineficiência da jornada do paciente (exames, consultas, alta) e a falta de priorização de tarefas.',
        category: 'product',
      },
      {
        text: 'Sistemas lentos, que travam ou com falhas de lógica interna que geram retrabalho.',
        category: 'dev',
      },
    ],
  },
  {
    id: 3,
    question: 'Você precisa criar um material novo. O que você gosta de produzir?',
    options: [
      {
        text: 'Relatórios estatísticos complexos ou artigos baseados em evidências.',
        category: 'data',
      },
      {
        text: 'Materiais visuais (banners, guias, manuais) que simplificam informações complexas para o paciente.',
        category: 'design',
      },
      {
        text: 'Planos de tratamento estratégicos de longo prazo, definindo metas e recursos.',
        category: 'product',
      },
      {
        text: 'Ferramentas de automação (planilhas avançadas, macros) para eliminar tarefas repetitivas.',
        category: 'dev',
      },
    ],
  },
  {
    id: 4,
    question: 'Onde está sua maior atenção ao lidar com uma patologia ou caso complexo?',
    options: [
      {
        text: 'Nas variáveis (laboratoriais, scores, históricos) e como elas se correlacionam estatisticamente.',
        category: 'data',
      },
      {
        text: 'Na experiência do paciente/usuário, entendendo suas barreiras emocionais e usabilidade da informação.',
        category: 'design',
      },
      {
        text: 'Na otimização do recurso e do tempo (alta, encaminhamento, gestão de leitos/agenda).',
        category: 'product',
      },
      {
        text: 'Na lógica interna da patologia/fisiologia, entendendo a exata cadeia de causa-e-efeito do corpo.',
        category: 'dev',
      },
    ],
  },
  {
    id: 5,
    question: 'Qual tipo de ferramenta tecnológica mais te fascina, mesmo que você não saiba usar?',
    options: [
      {
        text: 'Softwares de Business Intelligence (Power BI, Tableau) que transformam dados brutos em gráficos.',
        category: 'data',
      },
      {
        text: 'Softwares de prototipagem e design (Figma) que criam a interface que vemos.',
        category: 'design',
      },
      {
        text: 'Ferramentas de gestão de projetos (Jira, Trello) que organizam o caos de uma equipe.',
        category: 'product',
      },
      {
        text: 'Linguagens de programação que constroem a infraestrutura invisível (Python, Javascript).',
        category: 'dev',
      },
    ],
  },
  {
    id: 6,
    question: 'Qual é o seu maior desafio de comunicação em ambientes multidisciplinares?',
    options: [
      {
        text: 'Explicar a significância estatística dos resultados complexos para a equipe não-técnica.',
        category: 'data',
      },
      {
        text: 'Lidar com a resistência do paciente/usuário a uma mudança ou nova tecnologia/procedimento.',
        category: 'design',
      },
      {
        text: 'Conseguir o consenso e a priorização entre várias áreas (médico, enfermagem, gestão).',
        category: 'product',
      },
      {
        text: "Entender a 'linguagem' técnica de sistemas e TI (APIs, Backend, Servidores).",
        category: 'dev',
      },
    ],
  },
  {
    id: 7,
    question: 'Se você pudesse criar um App de Saúde inovador, qual seria o foco?',
    options: [
      {
        text: 'Um que preveja surtos ou problemas de saúde baseados em dados de uma população em tempo real.',
        category: 'data',
      },
      {
        text: 'Um que seja tão intuitivo que o paciente nem precise de treinamento para usá-lo, elevando a adesão.',
        category: 'design',
      },
      {
        text: 'Um que organize perfeitamente toda a jornada hospitalar, definindo prioridades e recursos automaticamente.',
        category: 'product',
      },
      {
        text: 'Um que fosse robusto e ultrarrápido, capaz de processar milhões de requisições de prontuário por segundo.',
        category: 'dev',
      },
    ],
  },
  {
    id: 8,
    question: 'Em uma transição de carreira, qual o maior impacto que você quer gerar?',
    options: [
      {
        text: 'Ajudar a tomar decisões críticas e estratégicas baseadas em evidências irrefutáveis.',
        category: 'data',
      },
      {
        text: 'Criar produtos que sejam amados, utilizados e que realmente melhorem a experiência do usuário/paciente.',
        category: 'design',
      },
      {
        text: 'Liderar a direção e a estratégia de um produto, garantindo que ele gere valor para o negócio e para a saúde.',
        category: 'product',
      },
      {
        text: 'Construir a infraestrutura tecnológica sólida e segura onde o futuro da saúde digital vai rodar.',
        category: 'dev',
      },
    ],
  },
];

const results = {
  data: {
    title: 'Analista/Cientista de Dados de Saúde',
    icon: 'database',
    description:
      'Você é o nosso *Epidemiologista Digital*. Seu foco em variáveis, estatísticas e evidências é o motor do Big Data em saúde. Você transforma dados clínicos complexos em decisões estratégicas para hospitais, seguradoras e governos.',
    bridge: profession =>
      `Seu DNA Híbrido: Você sabe o que o dado significa! Diferente de um analista 'puro', você, como ${profession}, entende o peso clínico de um resultado laboratorial ou de um score de risco.`,
    courses: [
      'Google Data Analytics (Coursera)',
      'Python para Data Science',
      'Power BI',
      'SQL',
      'Estatística Aplicada',
    ],
    color: 'blue',
  },
  design: {
    title: 'UX/UI Designer (Foco em Experiência do Paciente)',
    icon: 'palette',
    description:
      'Você é o *Arquiteto da Jornada*. Sua empatia e capacidade de ouvir a dor do paciente são inestimáveis. UX é sobre resolver problemas de usabilidade, e ninguém conhece as barreiras do usuário de saúde melhor do que você.',
    bridge: profession =>
      `Seu DNA Híbrido: Como ${profession}, você mapeou a 'Jornada do Paciente' centenas de vezes. Você pode projetar prontuários, apps e sistemas que realmente simplificam a vida do profissional e do paciente.`,
    courses: [
      'Google UX Design Professional Certificate',
      'Figma',
      'Design Thinking',
      'UX Research',
      'Psicologia do Usuário',
    ],
    color: 'purple',
  },
  product: {
    title: 'Product Manager (PM) de Saúde ou Product Owner (PO)',
    icon: 'clipboard-list',
    description:
      "Você é o *Maestro da Solução*. Seu perfil estratégico, focado em priorização, gestão de recursos e eficiência de processos, se encaixa perfeitamente na Gestão de Produtos. Você define 'o que' deve ser construído.",
    bridge: profession =>
      `Seu DNA Híbrido: Você é o tradutor ideal. Como ${profession}, você fala a língua da clínica e pode traduzir as necessidades médicas/assistenciais para o time de Desenvolvimento, garantindo que o produto tenha valor real.`,
    courses: [
      'Certificação Scrum/Agile',
      'Product Management (PM3 ou Cursos Livres)',
      'Gestão de Stakeholders',
      'Business Agility',
    ],
    color: 'emerald',
  },
  dev: {
    title: 'Desenvolvedor(a) Back-end ou Full Stack',
    icon: 'code',
    description:
      "Você é o *Engenheiro do Sistema*. Se você se interessa pela lógica interna, pelo 'como funciona por dentro' (seja o corpo ou o software), a construção lógica de sistemas é o seu caminho. Você constrói a fundação.",
    bridge: profession =>
      `Seu DNA Híbrido: Seu pensamento sistêmico é uma vantagem. Você, como ${profession}, entende que 'Se A acontece, B tem que acontecer' (Protocolos Clínicos/Fisiologia). Essa lógica é a essência da programação e crucial para sistemas de saúde seguros.`,
    courses: [
      'Lógica de Programação',
      'Python ou JavaScript',
      'Estrutura de Dados e Algoritmos',
      'Bootcamps de Web Development',
    ],
    color: 'indigo',
  },
};

// Idiomas disponíveis
const languages = [
  { code: 'pt', name: 'Português', flag: '🇧🇷' },
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'fr', name: 'Français', flag: '🇫🇷' },
  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
  { code: 'it', name: 'Italiano', flag: '🇮🇹' },
  { code: 'zh', name: '中文', flag: '🇨🇳' },
  { code: 'ja', name: '日本語', flag: '🇯🇵' },
  { code: 'ko', name: '한국어', flag: '🇰🇷' },
  { code: 'ar', name: 'العربية', flag: '🇸🇦' },
  { code: 'hi', name: 'हिन्दी', flag: '🇮🇳' },
  { code: 'ru', name: 'Русский', flag: '🇷🇺' },
  { code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
  { code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
  { code: 'pl', name: 'Polski', flag: '🇵🇱' },
  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
  { code: 'th', name: 'ไทย', flag: '🇹🇭' },
  { code: 'uk', name: 'Українська', flag: '🇺🇦' },
  { code: 'bn', name: 'বাংলা', flag: '🇧🇩' },
  { code: 'pa', name: 'ਪੰਜਾਬੀ', flag: '🇮🇳' },
];

// --- FUNÇÕES DE COOKIE ---

// Função para obter cookie
const getCookie = name => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
};

// Função para definir cookie (365 dias de validade)
const setCookie = (name, value, days = 365) => {
  const expires = new Date();
  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
};

// Função para detectar idioma do navegador
const detectBrowserLanguage = () => {
  const browserLang = navigator.language || navigator.userLanguage;
  const langCode = browserLang.split('-')[0].toLowerCase();

  // Lista de idiomas suportados
  const supportedLanguages = [
    'pt',
    'en',
    'es',
    'fr',
    'de',
    'it',
    'zh',
    'ja',
    'ko',
    'ar',
    'hi',
    'ru',
    'tr',
    'nl',
    'pl',
    'vi',
    'th',
    'uk',
    'bn',
    'pa',
  ];

  // Retorna o idioma se suportado, senão retorna inglês como fallback
  return supportedLanguages.includes(langCode) ? langCode : 'en';
};

// --- COMPONENTE PRINCIPAL ---

function ChironApp() {
  const [step, setStep] = useState('intro'); // intro, profession, quiz, confirm, result
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [scores, setScores] = useState({ data: 0, design: 0, product: 0, dev: 0 });
  const [profession, setProfession] = useState(null);
  const [professionKey, setProfessionKey] = useState(null);
  const [finalResult, setFinalResult] = useState(null);
  const [showLanguageMenu, setShowLanguageMenu] = useState(false);
  const [translations, setTranslations] = useState(null);
  const [loading, setLoading] = useState(true);
  const [selectedAnswer, setSelectedAnswer] = useState(null); // Para confirmação

  // Captura de lead (produto FREE) — só nome + e-mail
  const [leadName, setLeadName] = useState('');
  const [leadEmail, setLeadEmail] = useState('');
  const [leadStatus, setLeadStatus] = useState('idle'); // idle | loading | success | error
  const [leadError, setLeadError] = useState('');

  // Detectar idioma: 1º cookie, 2º navegador, 3º inglês
  const getInitialLanguage = () => {
    const savedLanguage = getCookie('chiron_language');
    if (savedLanguage) return savedLanguage;

    const browserLanguage = detectBrowserLanguage();
    setCookie('chiron_language', browserLanguage);
    return browserLanguage;
  };

  const [language, setLanguage] = useState(getInitialLanguage());
  const [showLanguageNotification, setShowLanguageNotification] = useState(false);
  const [showCookieConsent, setShowCookieConsent] = useState(false);

  // Verificar consentimento de cookies e primeira visita
  React.useEffect(() => {
    const cookieConsent = getCookie('chiron_cookie_consent');
    const savedLanguage = getCookie('chiron_language');
    const isFirstVisit = !getCookie('chiron_visited');

    // Mostrar banner de cookies se não aceitou ainda
    if (false) { // banner do app desativado — consent é do cookie-consent.js da casa
      setShowCookieConsent(true);
    }

    // Mostrar notificação de idioma se primeira visita E já aceitou cookies
    if (isFirstVisit && savedLanguage && cookieConsent) {
      setShowLanguageNotification(true);
      setCookie('chiron_visited', 'true', 365);

      // Auto-esconder notificação após 5 segundos
      setTimeout(() => {
        setShowLanguageNotification(false);
      }, 5000);
    }
  }, []);

  // Inicializar Analytics na primeira carga
  React.useEffect(() => {
    if (Analytics && !Analytics.initialized) {
      Analytics.init(language);
      Analytics.trackPageView('quiz');
    }
  }, []);

  // Carregar traduções quando o idioma mudar
  React.useEffect(() => {
    setLoading(true);
    // Adiciona timestamp para evitar cache do navegador/CDN
    const cacheBuster = Date.now();
    fetch(`/locales/${language}.json?v=${cacheBuster}`, {
      cache: 'no-store',
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        Pragma: 'no-cache',
      },
    })
      .then(res => res.json())
      .then(data => {
        setTranslations(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('Erro ao carregar traduções:', err);
        // Fallback para português se houver erro
        if (language !== 'pt') {
          setLanguage('pt');
        }
        setLoading(false);
      });
  }, [language]);

  // Helper para acessar traduções de forma segura
  const t = (path, fallback = '') => {
    if (!translations) return fallback;
    const keys = path.split('.');
    let value = translations;
    for (const key of keys) {
      value = value?.[key];
      if (value === undefined) return fallback;
    }
    return value;
  };

  // Se ainda está carregando, mostrar loading
  if (loading || !translations) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-teal-600 mx-auto mb-4"></div>
          <p className="text-slate-600">Loading...</p>
        </div>
      </div>
    );
  }

  const handleAcceptCookies = () => {
    setCookie('chiron_cookie_consent', 'accepted', 365);
    setShowCookieConsent(false);

    // Se é primeira visita, mostrar notificação de idioma
    const isFirstVisit = !getCookie('chiron_visited');
    if (isFirstVisit) {
      setShowLanguageNotification(true);
      setCookie('chiron_visited', 'true', 365);
      setTimeout(() => {
        setShowLanguageNotification(false);
      }, 5000);
    }
  };

  const handleStart = () => {
    console.log('🚀 handleStart called, language:', language);
    // Vercel Analytics
    trackEvent('quiz_started', { language: language });
    // Supabase Analytics
    if (Analytics) {
      Analytics.trackQuizStart(language);
    }
    setStep('profession');
  };

  const handleProfessionSelect = (key, name) => {
    trackEvent('profession_selected', {
      profession: key,
      professionName: name,
      language: language,
    });
    
    // Supabase Analytics
    if (Analytics) {
      Analytics.trackProfessionSelect(key);
    }
    
    setProfessionKey(key);
    setProfession(name);
    setStep('quiz');
  };

  const handleAnswer = (category, optionText, optionIndex) => {
    // Track question answer
    if (Analytics) {
      Analytics.trackQuestionAnswer(currentQuestion, optionIndex, totalQuestions);
    }
    
    // Guardar a resposta selecionada para confirmação
    setSelectedAnswer({
      category,
      optionText,
      optionIndex,
    });
    // Ir para tela de confirmação
    setStep('confirm');
  };

  const handleConfirmAnswer = () => {
    // Confirmar e processar a resposta
    const newScores = { ...scores, [selectedAnswer.category]: scores[selectedAnswer.category] + 1 };
    setScores(newScores);

    if (currentQuestion < totalQuestions - 1) {
      setCurrentQuestion(currentQuestion + 1);
      setStep('quiz');
      setSelectedAnswer(null);
    } else {
      calculateResult(newScores);
    }
  };

  const handleChangeAnswer = () => {
    // Voltar para a pergunta para escolher outra resposta
    setStep('quiz');
    setSelectedAnswer(null);
  };

  const calculateResult = finalScores => {
    // Find category with highest score
    const winner = Object.keys(finalScores).reduce((a, b) =>
      finalScores[a] > finalScores[b] ? a : b
    );

    // Vercel Analytics
    trackEvent('quiz_completed', {
      profession: professionKey,
      result: winner,
      scores: finalScores,
      language: language,
    });
    
    // Supabase Analytics
    if (Analytics) {
      const answersArray = Object.values(finalScores);
      Analytics.trackQuizComplete(winner, answersArray, finalScores);
      Analytics.trackResultView(winner);
    }

    setFinalResult(winner);
    setStep('result');
  };

  const resetQuiz = () => {
    // Reset Supabase Analytics session
    if (Analytics) {
      Analytics.reset();
      Analytics.init(language);
    }
    
    setScores({ data: 0, design: 0, product: 0, dev: 0 });
    setCurrentQuestion(0);
    setProfession(null);
    setProfessionKey(null);
    setFinalResult(null);
    setLeadName('');
    setLeadEmail('');
    setLeadStatus('idle');
    setLeadError('');
    setStep('intro');
  };

  // Obter perguntas personalizadas por profissão
  const getQuestions = () => {
    if (professionKey && translations?.questions?.[professionKey]) {
      return translations.questions[professionKey];
    }
    // Fallback para perguntas genéricas
    return (
      translations?.questions?.otherClinical ||
      coreQuestions.map(q => ({
        question: q.question,
        options: q.options.map(o => o.text),
      }))
    );
  };

  const currentQuestions = getQuestions();
  const totalQuestions = currentQuestions.length || 8;

  const resultData = finalResult ? results[finalResult] : {};

  // --- Captura de lead (produto FREE) ---
  const handleLeadSubmit = async e => {
    e.preventDefault();
    if (leadStatus === 'loading' || leadStatus === 'success') return;

    const name = leadName.trim();
    const email = leadEmail.trim();
    // E-mail obrigatório e com formato válido — lead magnet público, qualquer
    // provedor é aceito.
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setLeadError(t('quiz.leadErrorEmail', 'Digite um e-mail válido.'));
      return;
    }
    setLeadError('');
    setLeadStatus('loading');

    try {
      const res = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name,
          email,
          archetype: finalResult,
          profession: professionKey,
          lang: language,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setLeadStatus('success');
        // Vercel Analytics
        trackEvent('lead_captured', {
          profession: professionKey,
          result: finalResult,
          language: language,
        });
        if (Analytics) {
          Analytics.trackDownloadClick(finalResult);
        }
      } else {
        setLeadError(data.error || t('quiz.leadErrorGeneric', 'Não consegui registrar agora. Tente de novo.'));
        setLeadStatus('error');
      }
    } catch (err) {
      setLeadError(t('quiz.leadErrorGeneric', 'Não consegui registrar agora. Tente de novo.'));
      setLeadStatus('error');
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-800">
      <div className="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100">
        {/* Header Fixo */}
        <div className="bg-gradient-to-r from-teal-500 to-blue-600 p-6 text-white flex justify-between items-center">
          <div className="flex items-center gap-2">
            <LucideIcon name="activity" className="w-6 h-6 text-white" />
            <h1 className="text-xl font-bold tracking-wide">Chiron</h1>
          </div>

          <div className="flex items-center gap-4">
            {(step === 'quiz' || step === 'profession') && (
              <div className="text-sm font-medium opacity-90">
                {step === 'quiz' ? `Questão ${currentQuestion + 1} de ${totalQuestions}` : 'Início'}
              </div>
            )}

            {/* Seletor de Idioma */}
            <div className="relative">
              <button
                onClick={() => setShowLanguageMenu(!showLanguageMenu)}
                className="flex items-center gap-2 px-3 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg transition-all"
              >
                <span className="text-lg">{languages.find(l => l.code === language)?.flag}</span>
                <span className="text-sm font-medium">▼</span>
              </button>

              {showLanguageMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto">
                  {languages.map(lang => (
                    <button
                      key={lang.code}
                      onClick={() => {
                        const prevLang = language;
                        // Vercel Analytics
                        trackEvent('language_changed', {
                          from: prevLang,
                          to: lang.code,
                          languageName: lang.name,
                        });
                        // Supabase Analytics
                        if (Analytics) {
                          Analytics.trackLanguageChange(prevLang, lang.code);
                        }
                        setLanguage(lang.code);
                        setCookie('chiron_language', lang.code);
                        setShowLanguageMenu(false);
                      }}
                      className={`w-full text-left px-4 py-2 hover:bg-teal-50 flex items-center gap-2 ${language === lang.code ? 'bg-teal-100 text-teal-800' : 'text-slate-700'}`}
                    >
                      <span>{lang.flag}</span>
                      <span className="text-sm">{lang.name}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Notificação de Idioma Detectado */}
        {showLanguageNotification && (
          <div className="fixed top-20 right-4 bg-teal-600 text-white px-6 py-4 rounded-lg shadow-2xl z-50 animate-slideIn max-w-sm">
            <div className="flex items-start gap-3">
              <span className="text-2xl">{languages.find(l => l.code === language)?.flag}</span>
              <div className="flex-1">
                <p className="font-semibold text-sm">
                  {language === 'en' && 'Language detected automatically'}
                  {language === 'es' && 'Idioma detectado automáticamente'}
                  {language === 'fr' && 'Langue détectée automatiquement'}
                  {language === 'de' && 'Sprache automatisch erkannt'}
                  {language === 'pt' && 'Idioma detectado automaticamente'}
                  {language === 'it' && 'Lingua rilevata automaticamente'}
                  {language === 'zh' && '自动检测语言'}
                  {language === 'ja' && '言語が自動検出されました'}
                  {language === 'ko' && '언어가 자동으로 감지됨'}
                  {language === 'ar' && 'تم اكتشاف اللغة تلقائيًا'}
                  {language === 'hi' && 'भाषा स्वचालित रूप से पहचानी गई'}
                  {language === 'ru' && 'Язык определен автоматически'}
                  {language === 'tr' && 'Dil otomatik olarak algılandı'}
                  {language === 'nl' && 'Taal automatisch gedetecteerd'}
                  {language === 'pl' && 'Język wykryty automatycznie'}
                  {language === 'vi' && 'Ngôn ngữ được phát hiện tự động'}
                  {language === 'th' && 'ตรวจพบภาษาโดยอัตโนมัติ'}
                  {language === 'uk' && 'Мову визначено автоматично'}
                  {language === 'bn' && 'ভাষা স্বয়ংক্রিয়ভাবে সনাক্ত করা হয়েছে'}
                  {language === 'pa' && 'ਭਾਸ਼ਾ ਆਪਣੇ ਆਪ ਖੋਜੀ ਗਈ'}
                </p>
                <p className="text-xs mt-1 opacity-90">
                  {language === 'en' && 'You can change it anytime'}
                  {language === 'es' && 'Puedes cambiarlo en cualquier momento'}
                  {language === 'fr' && 'Vous pouvez le changer à tout moment'}
                  {language === 'de' && 'Sie können es jederzeit ändern'}
                  {language === 'pt' && 'Você pode alterar a qualquer momento'}
                  {language === 'it' && 'Puoi cambiarlo in qualsiasi momento'}
                  {language === 'zh' && '您可以随时更改'}
                  {language === 'ja' && 'いつでも変更できます'}
                  {language === 'ko' && '언제든지 변경할 수 있습니다'}
                  {language === 'ar' && 'يمكنك تغييره في أي وقت'}
                  {language === 'hi' && 'आप इसे कभी भी बदल सकते हैं'}
                  {language === 'ru' && 'Вы можете изменить его в любое время'}
                  {language === 'tr' && 'İstediğiniz zaman değiştirebilirsiniz'}
                  {language === 'nl' && 'Je kunt het altijd wijzigen'}
                  {language === 'pl' && 'Możesz to zmienić w dowolnym momencie'}
                  {language === 'vi' && 'Bạn có thể thay đổi bất cứ lúc nào'}
                  {language === 'th' && 'คุณสามารถเปลี่ยนได้ตลอดเวลา'}
                  {language === 'uk' && 'Ви можете змінити його будь-коли'}
                  {language === 'bn' && 'আপনি যেকোনো সময় এটি পরিবর্তন করতে পারেন'}
                  {language === 'pa' && 'ਤੁਸੀਂ ਇਸਨੂੰ ਕਿਸੇ ਵੀ ਸਮੇਂ ਬਦਲ ਸਕਦੇ ਹੋ'}
                </p>
              </div>
              <button
                onClick={() => setShowLanguageNotification(false)}
                className="text-white hover:text-teal-100 text-xl leading-none"
              >
                ×
              </button>
            </div>
          </div>
        )}

        {/* consent é do cookie-consent.js da casa (1 banner só, padrão Cachola) */}

        {/* Conteúdo Principal */}
        <div className="p-8">
          {/* TELA 1: INTRODUÇÃO (A METÁFORA) */}
          {step === 'intro' && (
            <div className="text-center space-y-6 animate-fadeIn">
              <div className="flex justify-center mb-4">
                <div className="bg-teal-100 p-4 rounded-full">
                  <LucideIcon name="stethoscope" className="w-16 h-16 text-teal-600" />
                </div>
              </div>
              <h2 className="text-3xl font-bold text-slate-800">
                {t('quiz.title', 'Sua "Ressonância" de Carreira')}
              </h2>
              <p className="text-lg text-slate-600 leading-relaxed">
                {t('quiz.subtitle', 'Pense na sua carreira como um sistema operacional.')} <br />
                <strong className="text-teal-600">
                  {t('quiz.noFormat', 'Você não precisa formatar o HD e perder sua experiência.')}
                </strong>
              </p>
              <p className="text-slate-600">
                {t('quiz.upgrade', 'Você só precisa fazer um **Upgrade**.')} <br />
                {t(
                  'quiz.hardware',
                  'Sua experiência clínica é o Hardware. A Tecnologia será o Software.'
                )}
                <br />
                {t('quiz.discover', 'Vamos descobrir qual "aplicativo" combina com o seu sistema?')}
              </p>
              <button
                onClick={handleStart}
                className="mt-4 px-8 py-4 bg-teal-600 hover:bg-teal-700 text-white rounded-xl text-lg font-bold shadow-lg transition-all transform hover:scale-105 flex items-center gap-2 mx-auto"
              >
                {t('quiz.startButton', 'Rodar Diagnóstico')}{' '}
                <LucideIcon name="arrow-right" className="w-5 h-5" />
              </button>
            </div>
          )}

          {/* TELA 2: SELEÇÃO DA PROFISSÃO */}
          {step === 'profession' && (
            <div className="space-y-8 animate-fadeIn">
              <h2 className="text-2xl font-bold text-slate-800 text-center">
                {t(
                  'quiz.professionTitle',
                  'Para Personalizar Seu Resultado, Qual é Sua Profissão?'
                )}
              </h2>
              <div className="grid grid-cols-2 gap-3 max-h-96 overflow-y-auto pr-2">
                {professionKeys.map((key, idx) => (
                  <button
                    key={idx}
                    onClick={() => handleProfessionSelect(key, t(`professions.${key}`, key))}
                    className="p-4 border-2 border-slate-200 rounded-xl hover:border-teal-500 hover:bg-teal-50 transition-all duration-200 group text-center"
                  >
                    <span className="text-lg text-slate-700 font-medium group-hover:text-teal-800">
                      {t(`professions.${key}`, key)}
                    </span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* TELA 3: QUIZ */}
          {step === 'quiz' && currentQuestions[currentQuestion] && (
            <div className="space-y-8 animate-fadeIn">
              <p className="text-sm font-semibold text-slate-500">
                {profession} -{' '}
                {t('quiz.questionOf', 'Questão {current} de {total}')
                  .replace('{current}', currentQuestion + 1)
                  .replace('{total}', totalQuestions)}
              </p>
              <h2 className="text-2xl font-bold text-slate-800">
                {currentQuestions[currentQuestion].question}
              </h2>

              <div className="grid gap-4">
                {currentQuestions[currentQuestion].options.map((optionText, idx) => {
                  // Mapear índice para categoria: 0=data, 1=design, 2=product, 3=dev
                  const categories = ['data', 'design', 'product', 'dev'];
                  const category = categories[idx];

                  return (
                    <button
                      key={idx}
                      onClick={() => handleAnswer(category, optionText, idx)}
                      className="text-left p-5 border-2 border-slate-100 rounded-xl hover:border-teal-500 hover:bg-teal-50 transition-all duration-200 group flex items-start gap-3"
                    >
                      <div className="w-6 h-6 rounded-full border-2 border-slate-300 group-hover:border-teal-500 mt-0.5 flex-shrink-0" />
                      <span className="text-lg text-slate-700 font-medium group-hover:text-teal-800">
                        {optionText}
                      </span>
                    </button>
                  );
                })}
              </div>

              <div className="w-full bg-slate-200 h-2 rounded-full overflow-hidden mt-6">
                <div
                  className="bg-teal-500 h-full transition-all duration-500 ease-out"
                  style={{ width: `${((currentQuestion + 1) / totalQuestions) * 100}%` }}
                />
              </div>
            </div>
          )}

          {/* TELA 3.5: CONFIRMAÇÃO DA RESPOSTA */}
          {step === 'confirm' && selectedAnswer && currentQuestions[currentQuestion] && (
            <div className="space-y-8 animate-fadeIn">
              <div className="text-center mb-6">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-teal-100 rounded-full mb-4">
                  <LucideIcon name="check-circle" className="w-8 h-8 text-teal-600" />
                </div>
                <h2 className="text-2xl font-bold text-slate-800 mb-2">
                  {t('quiz.confirmTitle', 'Confirm your answer')}
                </h2>
                <p className="text-slate-600">
                  {profession} -{' '}
                  {t('quiz.questionOf', 'Question {current} of {total}')
                    .replace('{current}', currentQuestion + 1)
                    .replace('{total}', totalQuestions)}
                </p>
              </div>

              {/* Pergunta */}
              <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                <p className="text-sm font-semibold text-teal-600 mb-2">
                  {t('quiz.question', 'Question')}:
                </p>
                <p className="text-lg text-slate-800 font-medium">
                  {currentQuestions[currentQuestion].question}
                </p>
              </div>

              {/* Resposta selecionada */}
              <div className="bg-teal-50 p-6 rounded-xl border-2 border-teal-200">
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center flex-shrink-0 mt-1">
                    <LucideIcon name="check" className="w-5 h-5 text-white" />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-semibold text-teal-700 mb-2">
                      {t('quiz.yourAnswer', 'Your answer')}:
                    </p>
                    <p className="text-lg text-slate-800 font-medium">
                      {selectedAnswer.optionText}
                    </p>
                  </div>
                </div>
              </div>

              {/* Botões de ação */}
              <div className="flex flex-col sm:flex-row gap-4 pt-4">
                <button
                  onClick={handleChangeAnswer}
                  className="flex-1 px-6 py-4 border-2 border-slate-300 text-slate-700 rounded-xl font-semibold hover:border-slate-400 hover:bg-slate-50 transition-all duration-200 flex items-center justify-center gap-2"
                >
                  <LucideIcon name="arrow-left" className="w-5 h-5" />
                  {t('quiz.changeAnswer', 'Change answer')}
                </button>
                <button
                  onClick={handleConfirmAnswer}
                  className="flex-1 px-6 py-4 bg-teal-600 hover:bg-teal-700 text-white rounded-xl font-semibold shadow-lg transition-all duration-200 transform hover:scale-105 flex items-center justify-center gap-2"
                >
                  {currentQuestion < totalQuestions - 1
                    ? t('quiz.confirmAndNext', 'Confirm and next')
                    : t('quiz.confirmAndFinish', 'Confirm and finish')}
                  <LucideIcon name="arrow-right" className="w-5 h-5" />
                </button>
              </div>

              {/* Progress bar */}
              <div className="w-full bg-slate-200 h-2 rounded-full overflow-hidden mt-6">
                <div
                  className="bg-teal-500 h-full transition-all duration-500 ease-out"
                  style={{ width: `${((currentQuestion + 1) / totalQuestions) * 100}%` }}
                />
              </div>
            </div>
          )}

          {/* TELA 4: RESULTADO */}
          {step === 'result' && (
            <div className="animate-fadeIn space-y-6">
              <div className="text-center">
                <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">
                  {t('quiz.diagnosticComplete', 'Diagnóstico Concluído')} - {profession}
                </p>
                <div className="flex justify-center mb-6">
                  <div className="bg-slate-50 p-6 rounded-full border-4 border-teal-100 shadow-sm">
                    <LucideIcon
                      name={resultData.icon}
                      className={`w-16 h-16 text-${resultData.color}-500`}
                    />
                  </div>
                </div>
                <h2 className="text-3xl font-extrabold text-slate-800 mb-2">
                  {t(`results.${finalResult}.title`, resultData.title)}
                </h2>
                <div className="inline-block px-4 py-1 bg-teal-100 text-teal-800 rounded-full text-sm font-semibold mb-6">
                  {t('quiz.compatibility', 'Compatibilidade Clínica: Altíssima')}
                </div>
              </div>

              <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 space-y-4">
                <div>
                  <h3 className="font-bold text-lg flex items-center gap-2 text-slate-800">
                    <LucideIcon name="users" className="w-5 h-5 text-teal-500" />{' '}
                    {t('quiz.whyMatch', 'Por que combina com você?')}
                  </h3>
                  <p className="text-slate-600 mt-1">
                    {t(
                      `results.${finalResult}.${professionKey}.description`,
                      resultData.description
                    )}
                  </p>
                </div>

                <div className="bg-teal-50 p-4 rounded-xl border border-teal-100">
                  <h3 className="font-bold text-lg flex items-center gap-2 text-teal-800">
                    <LucideIcon name="heart" className="w-5 h-5 text-teal-600" />{' '}
                    {t('quiz.hybridDNA', 'Seu DNA Híbrido (O Segredo)')}
                  </h3>
                  <p className="text-teal-900 mt-1 italic">
                    {t(
                      `results.${finalResult}.${professionKey}.bridge`,
                      resultData.bridge(profession)
                    )}
                  </p>
                </div>
              </div>

              <div>
                <h3 className="font-bold text-slate-700 mb-2 flex items-center gap-2">
                  <LucideIcon name="graduation-cap" className="w-5 h-5" />{' '}
                  {t('quiz.nextSteps', 'Seus Primeiros Cursos e Treinamentos')}
                </h3>
                <p className="text-sm text-slate-600 mb-3">
                  {t(
                    'quiz.nextStepsSubtitle',
                    'Comece por aqui para desenvolver as habilidades essenciais:'
                  )}
                </p>
                <div className="flex flex-wrap gap-2">
                  {(
                    t(`results.${finalResult}.courses`, resultData.courses) || resultData.courses
                  ).map((course, idx) => (
                    <a
                      key={idx}
                      href={`https://www.google.com/search?q=${encodeURIComponent(course + ' curso online')}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="px-3 py-1 bg-white border border-slate-200 rounded-lg text-sm text-slate-600 shadow-sm hover:bg-teal-50 hover:border-teal-300 hover:text-teal-700 transition-all duration-200 flex items-center gap-1.5 group"
                    >
                      {course}
                      <LucideIcon
                        name="external-link"
                        className="w-3.5 h-3.5 text-slate-400 group-hover:text-teal-600"
                      />
                    </a>
                  ))}
                </div>
              </div>

              <div className="pt-4 border-t border-slate-200">
                <div className="bg-gradient-to-br from-teal-50 to-blue-50 p-6 rounded-xl border border-teal-100 mb-4">
                  {leadStatus === 'success' ? (
                    <div className="text-center py-2">
                      <div className="inline-flex items-center justify-center w-12 h-12 bg-teal-100 rounded-full mb-3">
                        <LucideIcon name="check-circle" className="w-7 h-7 text-teal-600" />
                      </div>
                      <p className="font-semibold text-slate-800">
                        {t('quiz.leadSuccess', 'Pronto — seu resultado e materiais vão pro seu e-mail.')}
                      </p>
                    </div>
                  ) : (
                    <>
                      <h3 className="font-bold text-slate-800 mb-2 flex items-center gap-2">
                        <LucideIcon name="mail" className="w-5 h-5 text-teal-600" />
                        {t(
                          'quiz.leadTitle',
                          'Receba seu resultado e materiais de apoio no e-mail (grátis)'
                        )}
                      </h3>
                      <p className="text-sm text-slate-600 mb-4">
                        {t(
                          'quiz.leadDescription',
                          'Deixe seu nome e e-mail e enviamos uma cópia do seu resultado, com os próximos passos e cursos recomendados para a sua transição.'
                        )}
                      </p>
                      <form onSubmit={handleLeadSubmit} className="space-y-3">
                        <input
                          type="text"
                          value={leadName}
                          onChange={e => setLeadName(e.target.value)}
                          placeholder={t('quiz.leadNamePlaceholder', 'Seu nome')}
                          autoComplete="name"
                          className="w-full px-4 py-3 rounded-lg border border-slate-300 bg-white text-slate-800 focus:border-teal-500 focus:ring-2 focus:ring-teal-100 outline-none transition-all"
                        />
                        <input
                          type="email"
                          value={leadEmail}
                          onChange={e => setLeadEmail(e.target.value)}
                          placeholder={t('quiz.leadEmailPlaceholder', 'seu@email.com')}
                          autoComplete="email"
                          required
                          className="w-full px-4 py-3 rounded-lg border border-slate-300 bg-white text-slate-800 focus:border-teal-500 focus:ring-2 focus:ring-teal-100 outline-none transition-all"
                        />
                        {leadError && (
                          <p className="text-sm text-red-600">{leadError}</p>
                        )}
                        <button
                          type="submit"
                          disabled={leadStatus === 'loading'}
                          className="w-full py-4 bg-teal-600 hover:bg-teal-700 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-xl font-bold transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-lg"
                        >
                          <LucideIcon name="send" className="w-5 h-5" />{' '}
                          {leadStatus === 'loading'
                            ? t('quiz.leadButtonLoading', 'Enviando...')
                            : t('quiz.leadButton', 'Quero receber no e-mail')}
                        </button>
                      </form>
                    </>
                  )}
                </div>

                <button
                  onClick={resetQuiz}
                  className="w-full py-3 bg-white border border-slate-300 text-slate-600 hover:bg-slate-50 rounded-xl font-medium transition-colors flex items-center justify-center gap-2 text-sm"
                >
                  <LucideIcon name="refresh-ccw" className="w-4 h-4" />{' '}
                  {t('quiz.retakeButton', 'Refazer Diagnóstico')}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Render the app
ReactDOM.render(<ChironApp />, document.getElementById('root'));

// Initialize Lucide icons
document.addEventListener('DOMContentLoaded', () => {
  lucide.createIcons();
});