```jsx
import React, { useState, useEffect } from 'react';

const App = () => {
  const [userType, setUserType] = useState('guest');
  const [currentUser, setCurrentUser] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [jobs, setJobs] = useState([
    {
      id: 1,
      title: "Desenvolvedor Frontend React",
      company: "TechCorp Solutions",
      location: "São Paulo, SP",
      type: "CLT",
      salary: "R$ 8.000 - R$ 12.000",
      experience: "Pleno",
      deadline: "2024-01-31",
      applications: 23,
      status: "active",
      description: "Empresa de tecnologia busca desenvolvedor frontend com experiência em React.js, Tailwind CSS e APIs RESTful.",
      requirements: ["3 anos de experiência com React", "Conhecimento em Tailwind CSS", "Git", "APIs RESTful"],
      benefits: ["Vale-refeição", "Plano de saúde", "Home office", "Bônus anual"]
    },
    {
      id: 2,
      title: "Analista de Dados",
      company: "DataInsight",
      location: "Remoto",
      type: "PJ",
      salary: "R$ 6.000 - R$ 9.000",
      experience: "Júnior",
      deadline: "2024-01-25",
      applications: 18,
      status: "active",
      description: "Buscamos analista de dados para trabalhar com Power BI, SQL e Python em projetos de inteligência de negócios.",
      requirements: ["Conhecimento em SQL", "Power BI", "Python para análise de dados", "Estatística básica"],
      benefits: ["Flexibilidade de horários", "Treinamentos", "Participação em lucros"]
    },
    {
      id: 3,
      title: "Product Manager",
      company: "Innovatech",
      location: "Híbrido - Rio de Janeiro",
      type: "CLT",
      salary: "R$ 15.000 - R$ 20.000",
      experience: "Sênior",
      deadline: "2024-02-15",
      applications: 31,
      status: "active",
      description: "Gerencie produtos digitais em uma empresa de inovação tecnológica com foco em soluções disruptivas.",
      requirements: ["5 anos de experiência em gestão de produtos", "Metodologias ágeis", "User experience", "Roadmap"],
      benefits: ["Bônus por performance", "Stock options", "Plano odontológico", "Gympass"]
    }
  ]);

  const [candidates, setCandidates] = useState([
    { id: 1, name: "Ana Silva", email: "ana@email.com", experience: "5 anos", skills: ["React", "Node.js", "MongoDB"], score: 85, status: "applied", phone: "(11) 98765-4321", education: "Engenharia de Software", linkedin: "linkedin.com/in/anasilva" },
    { id: 2, name: "Carlos Souza", email: "carlos@email.com", experience: "3 anos", skills: ["Vue.js", "Python", "Django"], score: 78, status: "interview", phone: "(21) 91234-5678", education: "Ciência da Computação", linkedin: "linkedin.com/in/carlossouza" },
    { id: 3, name: "Mariana Costa", email: "mariana@email.com", experience: "7 anos", skills: ["React", "TypeScript", "AWS"], score: 92, status: "approved", phone: "(31) 99876-5432", education: "Sistemas de Informação", linkedin: "linkedin.com/in/marianacosta" },
    { id: 4, name: "Pedro Almeida", email: "pedro@email.com", experience: "2 anos", skills: ["Angular", "Java", "Spring Boot"], score: 71, status: "rejected", phone: "(41) 98765-1234", education: "Análise e Desenvolvimento de Sistemas", linkedin: "linkedin.com/in/pedroalmeida" }
  ]);

  const [applications, setApplications] = useState([
    { id: 1, candidateId: 1, jobId: 1, status: "applied", appliedDate: "2024-01-10", testScore: null },
    { id: 2, candidateId: 2, jobId: 1, status: "test_completed", appliedDate: "2024-01-11", testScore: 78 },
    { id: 3, candidateId: 3, jobId: 1, status: "interview_scheduled", appliedDate: "2024-01-12", testScore: 92, interviewDate: "2024-01-20T14:00" },
    { id: 4, candidateId: 1, jobId: 2, status: "test_completed", appliedDate: "2024-01-09", testScore: 85 }
  ]);

  const [currentJob, setCurrentJob] = useState(null);
  const [showTest, setShowTest] = useState(false);
  const [showInterview, setShowInterview] = useState(false);
  const [testAnswers, setTestAnswers] = useState({});
  const [testTime, setTestTime] = useState(30 * 60);
  const [interviewFeedback, setInterviewFeedback] = useState('');
  const [selectedCandidate, setSelectedCandidate] = useState(null);

  useEffect(() => {
    const timer = setInterval(() => {
      if (showTest && testTime > 0) {
        setTestTime(prev => prev - 1);
      }
    }, 1000);

    return () => clearInterval(timer);
  }, [showTest, testTime]);

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const handleLogin = (type, credentials) => {
    setCurrentUser({ ...credentials, type });
    setUserType(type);
  };

  const handleLogout = () => {
    setCurrentUser(null);
    setUserType('guest');
    setActiveTab('dashboard');
    setShowTest(false);
    setShowInterview(false);
  };

  const handleJobApply = (job) => {
    if (userType !== 'candidate') {
      alert('Você precisa estar logado como candidato para se inscrever!');
      return;
    }
    setCurrentJob(job);
    setShowTest(true);
    setTestTime(30 * 60);
    setTestAnswers({});
  };

  const handleTestSubmit = () => {
    const score = Math.floor(Math.random() * 100);
    setApplications(prev => [...prev, {
      id: prev.length + 1,
      candidateId: candidates.find(c => c.email === currentUser.email)?.id || 1,
      jobId: currentJob.id,
      status: 'test_completed',
      appliedDate: new Date().toISOString().split('T')[0],
      testScore: score
    }]);
    
    alert(`Prova finalizada! Sua pontuação: ${score}/100. Resultados enviados para a empresa.`);
    setShowTest(false);
    setTestAnswers({});
  };

  const scheduleInterview = (candidate) => {
    setSelectedCandidate(candidate);
    setShowInterview(true);
  };

  const submitInterviewFeedback = () => {
    setApplications(prev => prev.map(app => 
      app.candidateId === selectedCandidate.id 
        ? { ...app, status: 'interview_completed' }
        : app
    ));
    
    alert('Feedback da entrevista registrado com sucesso!');
    setShowInterview(false);
    setInterviewFeedback('');
  };

  const AdminDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Total de Candidatos</p>
              <p className="text-3xl font-bold text-blue-600">{candidates.length}</p>
            </div>
            <div className="p-3 bg-blue-100 rounded-full">
              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
          </div>
        </div>
        
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Empresas Parceiras</p>
              <p className="text-3xl font-bold text-green-600">89</p>
            </div>
            <div className="p-3 bg-green-100 rounded-full">
              <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m5 10v-5a1 1 0 00-1-1h-4a1 1 0 00-1 1v5h6z" />
              </svg>
            </div>
          </div>
        </div>
        
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Vagas Ativas</p>
              <p className="text-3xl font-bold text-purple-600">{jobs.filter(j => j.status === 'active').length}</p>
            </div>
            <div className="p-3 bg-purple-100 rounded-full">
              <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
          </div>
        </div>
        
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Conversão Média</p>
              <p className="text-3xl font-bold text-orange-600">23.5%</p>
            </div>
            <div className="p-3 bg-orange-100 rounded-full">
              <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Vagas Mais Procuradas</h3>
          <div className="space-y-4">
            {jobs.slice().sort((a, b) => b.applications - a.applications).slice(0, 5).map((job, index) => (
              <div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div>
                  <p className="font-medium text-gray-800">{job.title}</p>
                  <p className="text-sm text-gray-600">{job.company} • {job.location}</p>
                </div>
                <span className="text-sm font-semibold text-blue-600">{job.applications} inscritos</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Estatísticas de Candidatos</h3>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Distribuição por Nível</span>
              <div className="flex space-x-2">
                <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">Júnior: 45%</span>
                <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Pleno: 35%</span>
                <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">Sênior: 20%</span>
              </div>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Tempo Médio de Processo</span>
              <span className="font-semibold text-orange-600">14 dias</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Taxa de Aprovação</span>
              <span className="font-semibold text-green-600">32%</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Vagas Remotas</span>
              <span className="font-semibold text-blue-600">68%</span>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">Atividades Recentes</h3>
        <div className="space-y-3">
          <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
            <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
            <span className="text-sm text-blue-800">Nova vaga cadastrada: Desenvolvedor Frontend na Innovatech</span>
            <span className="text-xs text-blue-600 ml-auto">2 min atrás</span>
          </div>
          <div className="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
            <span className="text-sm text-green-800">Candidato aprovado: Mariana Costa para vaga de Desenvolvedor Frontend</span>
            <span className="text-xs text-green-600 ml-auto">15 min atrás</span>
          </div>
          <div className="flex items-center space-x-3 p-3 bg-yellow-50 rounded-lg">
            <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
            <span className="text-sm text-yellow-800">Nova inscrição: 3 candidatos para vaga de Analista de Dados</span>
            <span className="text-xs text-yellow-600 ml-auto">1 hora atrás</span>
          </div>
        </div>
      </div>
    </div>
  );

  const CandidateDashboard = () => (
    <div className="space-y-6">
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">Minhas Inscrições</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {candidates.filter(c => applications.some(a => a.candidateId === c.id && a.status !== 'applied')).map(candidate => {
            const app = applications.find(a => a.candidateId === candidate.id);
            return (
              <div key={candidate.id} className="p-4 border border-gray-200 rounded-lg">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="font-semibold text-gray-800">{candidate.name}</h3>
                    <p className="text-sm text-gray-600">{candidate.experience}</p>
                    <p className="text-sm text-gray-500">{candidate.education}</p>
                    <div className="flex flex-wrap gap-1 mt-2">
                      {candidate.skills.map(skill => (
                        <span key={skill} className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                          {skill}
                        </span>
                      ))}
                    </div>
                  </div>
                  <div className="text-right">
                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                      app?.status === 'approved' || app?.status === 'hired' ? 'bg-green-100 text-green-800' :
                      app?.status === 'interview_scheduled' || app?.status === 'interview_completed' ? 'bg-yellow-100 text-yellow-800' :
                      app?.status === 'test_completed' ? 'bg-blue-100 text-blue-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {app?.status === 'approved' ? 'Aprovado' : 
                       app?.status === 'hired' ? 'Contratado' :
                       app?.status === 'interview_scheduled' ? 'Entrevista Agendada' :
                       app?.status === 'interview_completed' ? 'Entrevista Concluída' :
                       app?.status === 'test_completed' ? 'Prova Concluída' : 'Em análise'}
                    </span>
                    {app?.testScore && (
                      <p className="text-sm font-semibold text-gray-800 mt-1">{app.testScore}/100</p>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">Vagas Recomendadas</h2>
        <div className="space-y-4">
          {jobs.map(job => (
            <div key={job.id} className="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-gray-800">{job.title}</h3>
                  <p className="text-gray-600">{job.company} • {job.location}</p>
                  <p className="text-sm text-gray-500">{job.type} • {job.salary} • {job.experience}</p>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {job.requirements.slice(0, 3).map(req => (
                      <span key={req} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
                        {req}
                      </span>
                    ))}
                  </div>
                  <div className="flex flex-wrap gap-1 mt-2">
                    {job.benefits.slice(0, 3).map(benefit => (
                      <span key={benefit} className="text-xs text-green-600 flex items-center">
                        <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                        {benefit}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="text-right ml-4">
                  <button
                    onClick={() => handleJobApply(job)}
                    className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
                  >
                    Inscrever-se
                  </button>
                  <p className="text-sm text-gray-500 mt-1">Encerra em {job.deadline}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const CompanyDashboard = () => (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-800">Minhas Vagas</h2>
        <div className="flex space-x-4">
          <select className="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            <option>Todas as vagas</option>
            <option>Ativas</option>
            <option>Finalizadas</option>
          </select>
          <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium">
            + Nova Vaga
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <div className="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
            <div className="p-6 border-b border-gray-200">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold text-gray-800">Candidatos por Vaga</h3>
                <div className="flex space-x-2">
                  <button className="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">
                    Todos
                  </button>
                  <button className="px-3 py-1 bg-blue-100 text-blue-700 rounded text-sm">
                    Ativas
                  </button>
                </div>
              </div>
            </div>
            
            {jobs.map(job => {
              const jobApps = applications.filter(a => a.jobId === job.id);
              return (
                <div key={job.id} className="border-b border-gray-200 last:border-b-0">
                  <div className="p-6 hover:bg-gray-50 transition-colors">
                    <div className="flex justify-between items-start mb-4">
                      <div>
                        <h4 className="font-semibold text-gray-800">{job.title}</h4>
                        <p className="text-gray-600">{job.company}</p>
                        <p className="text-sm text-gray-500">{job.location} • {job.type}</p>
                      </div>
                      <div className="text-right">
                        <span className="text-2xl font-bold text-blue-600">{jobApps.length}</span>
                        <p className="text-sm text-gray-500">inscritos</p>
                      </div>
                    </div>
                    
                    <div className="flex justify-between items-center">
                      <div className="flex space-x-4 text-sm text-gray-600">
                        <span>Salário: {job.salary}</span>
                        <span>Experiência: {job.experience}</span>
                      </div>
                      <div className="flex space-x-2">
                        <button 
                          onClick={() => {
                            const candidate = candidates.find(c => 
                              applications.find(a => a.jobId === job.id && a.status === 'test_completed')?.candidateId === c.id
                            );
                            if (candidate) scheduleInterview(candidate);
                          }}
                          className="px-3 py-1 bg-green-100 text-green-700 rounded text-sm hover:bg-green-200"
                        >
                          Agendar Entrevista
                        </button>
                        <button className="px-3 py-1 bg-blue-100 text-blue-700 rounded text-sm hover:bg-blue-200">
                          Ver Candidatos
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="space-y-6">
          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Estatísticas</h3>
            <div className="space-y-4">
              <div className="flex justify-between">
                <span className="text-gray-600">Total de Vagas</span>
                <span className="font-semibold text-gray-800">{jobs.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Candidatos Total</span>
                <span className="font-semibold text-gray-800">{applications.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Taxa de Conversão</span>
                <span className="font-semibold text-green-600">24.5%</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Tempo Médio</span>
                <span className="font-semibold text-orange-600">12 dias</span>
              </div>
            </div>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Próximos Passos</h3>
            <div className="space-y-3">
              <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                <span className="text-sm text-blue-800">Agendar 3 entrevistas</span>
              </div>
              <div className="flex items-center space-x-3 p-3 bg-yellow-50 rounded-lg">
                <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                <span className="text-sm text-yellow-800">Revisar 5 provas</span>
              </div>
              <div className="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <span className="text-sm text-green-800">Enviar feedbacks</span>
              </div>
            </div>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Planos de Divulgação</h3>
            <div className="space-y-3">
              <div className="p-3 border border-blue-200 rounded-lg bg-blue-50">
                <h4 className="font-semibold text-blue-800">Premium</h4>
                <p className="text-sm text-blue-700">R$ 199/mês</p>
                <ul className="text-xs text-blue-600 mt-1 space-y-1">
                  <li>• 5 vagas ativas</li>
                  <li>• Destaque no site</li>
                  <li>• Newsletter</li>
                  <li>• Prioridade no algoritmo</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const TestScreen = () => (
    <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-4xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold text-gray-800">{currentJob?.title}</h2>
        <div className="flex items-center space-x-4">
          <div className="text-right">
            <p className="text-sm text-gray-600">Tempo Restante</p>
            <p className="text-2xl font-bold text-red-600">{formatTime(testTime)}</p>
          </div>
          <button
            onClick={handleTestSubmit}
            disabled={testTime <= 0}
            className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 disabled:bg-gray-400 transition-colors font-medium"
          >
            Enviar Prova
          </button>
        </div>
      </div>

      <div className="space-y-8">
        <div className="p-6 border border-gray-200 rounded-lg">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Questão 1 - Múltipla Escolha</h3>
          <p className="text-gray-700 mb-4">Qual é a principal vantagem do React.js em relação a outras bibliotecas de frontend?</p>
          <div className="space-y-3">
            {['Virtual DOM', 'Two-way data binding', 'Server-side rendering', 'Native mobile apps'].map((option, index) => (
              <label key={index} className="flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                <input
                  type="radio"
                  name="q1"
                  value={option}
                  onChange={(e) => setTestAnswers({...testAnswers, q1: e.target.value})}
                  className="w-4 h-4 text-blue-600"
                />
                <span className="text-gray-700">{option}</span>
              </label>
            ))}
          </div>
        </div>

        <div className="p-6 border border-gray-200 rounded-lg">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Questão 2 - Verdadeiro/Falso</h3>
          <p className="text-gray-700 mb-4">O React.js utiliza JSX para escrever HTML dentro do JavaScript.</p>
          <div className="flex space-x-4">
            <label className="flex items-center space-x-2 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
              <input
                type="radio"
                name="q2"
                value="true"
                onChange={(e) => setTestAnswers({...testAnswers, q2: e.target.value})}
                className="w-4 h-4 text-green-600"
              />
              <span className="text-gray-700">Verdadeiro</span>
            </label>
            <label className="flex items-center space-x-2 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
              <input
                type="radio"
                name="q2"
                value="false"
                onChange={(e) => setTestAnswers({...testAnswers, q2: e.target.value})}
                className="w-4 h-4 text-red-600"
              />
              <span className="text-gray-700">Falso</span>
            </label>
          </div>
        </div>

        <div className="p-6 border border-gray-200 rounded-lg">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Questão 3 - Dissertação</h3>
          <p className="text-gray-700 mb-4">Explique em poucas palavras como funciona o sistema de estado no React.js.</p>
          <textarea
            rows="6"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="Digite sua resposta aqui..."
            onChange={(e) => setTestAnswers({...testAnswers, q3: e.target.value})}
          ></textarea>
          <p className="text-sm text-gray-500 mt-2">Tempo estimado: 5 minutos</p>
        </div>

        <div className="p-6 border border-gray-200 rounded-lg">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Questão 4 - Lógica de Programação</h3>
          <p className="text-gray-700 mb-4">Qual será o resultado da seguinte expressão JavaScript: <code className="bg-gray-100 px-2 py-1 rounded">[1, 2, 3].map(x => x * 2)</code>?</p>
          <input
            type="text"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="Digite sua resposta..."
            onChange={(e) => setTestAnswers({...testAnswers, q4: e.target.value})}
          />
        </div>
      </div>

      {testTime <= 0 && (
        <div className="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-800 font-medium">Tempo esgotado! A prova será enviada automaticamente.</p>
        </div>
      )}
    </div>
  );

  const InterviewScreen = () => (
    <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-2xl mx-auto">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Entrevista com {selectedCandidate?.name}</h2>
      
      <div className="bg-gray-50 p-6 rounded-lg mb-6">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm text-gray-600">Cargo</p>
            <p className="font-semibold">{currentJob?.title}</p>
          </div>
          <div>
            <p className="text-sm text-gray-600">Empresa</p>
            <p className="font-semibold">{currentJob?.company}</p>
          </div>
          <div>
            <p className="text-sm text-gray-600">Experiência</p>
            <p className="font-semibold">{selectedCandidate?.experience}</p>
          </div>
          <div>
            <p className="text-sm text-gray-600">Pontuação na Prova</p>
            <p className="font-semibold text-green-600">
              {applications.find(a => a.candidateId === selectedCandidate?.id)?.testScore || 'Não realizada'}/100
            </p>
          </div>
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-800">Avaliação da Entrevista</h3>
        
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Comunicação</label>
            <select className="w-full p-3 border border-gray-300 rounded-lg">
              <option>Excelente</option>
              <option>Bom</option>
              <option>Regular</option>
              <option>Ruim</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Conhecimento Técnico</label>
            <select className="w-full p-3 border border-gray-300 rounded-lg">
              <option>Excelente</option>
              <option>Bom</option>
              <option>Regular</option>
              <option>Ruim</option>
            </select>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Feedback Geral</label>
          <textarea
            rows="6"
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="Comentários sobre a entrevista..."
            value={interviewFeedback}
            onChange={(e) => setInterviewFeedback(e.target.value)}
          ></textarea>
        </div>

        <div className="flex space-x-4">
          <button
            onClick={submitInterviewFeedback}
            className="flex-1 bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition-colors font-medium"
          >
            Aprovar Candidato
          </button>
          <button
            onClick={() => setShowInterview(false)}
            className="flex-1 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            Reprovar
          </button>
        </div>
      </div>
    </div>
  );

  const LoginScreen = () => (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-4xl">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full mb-4">
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <h1 className="text-4xl font-bold text-gray-800 mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            SelectPro
          </h1>
          <p className="text-gray-600 text-lg">Sistema de Processo Seletivo Online</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="p-6 border-r border-gray-200">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
              <svg className="w-6 h-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
              Candidato
            </h2>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                <input
                  type="email"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                  placeholder="seu@email.com"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Senha</label>
                <input
                  type="password"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                  placeholder="••••••••"
                />
              </div>
              <button
                type="button"
                onClick={() => handleLogin('candidate', { name: 'Usuário Candidato', email: 'candidato@email.com' })}
                className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all font-medium transform hover:scale-105 duration-200 shadow-md hover:shadow-lg"
              >
                Entrar como Candidato
              </button>
              <p className="text-center text-sm text-gray-600">
                <button className="text-blue-600 hover:text-blue-700 font-medium">Esqueceu a senha?</button>
              </p>
              <div className="border-t border-gray-200 pt-4">
                <button className="w-full border border-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center space-x-2">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                  </svg>
                  <span>Entrar com Google</span>
                </button>
              </div>
            </form>
          </div>

          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
              <svg className="w-6 h-6 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m5 10v-5a1 1 0 00-1-1h-4a1 1 0 00-1 1v5h6z" />
              </svg>
              Empresa
            </h2>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">CNPJ</label>
                <input
                  type="text"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"
                  placeholder="00.000.000/0000-00"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Senha</label>
                <input
                  type="password"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"
                  placeholder="••••••••"
                />
              </div>
              <button
                type="button"
                onClick={() => handleLogin('company', { name: 'Empresa Parceira', company: 'TechCorp' })}
                className="w-full bg-gradient-to-r from-green-600 to-green-700 text-white py-3 rounded-lg hover:from-green-700 hover:to-green-800 transition-all font-medium transform hover:scale-105 duration-200 shadow-md hover:shadow-lg"
              >
                Entrar como Empresa
              </button>
              <p className="text-center text-sm text-gray-600">
                <button className="text-green-600 hover:text-green-700 font-medium">Cadastrar empresa</button>
              </p>
              <div className="border-t border-gray-200 pt-4">
                <div className="bg-green-50 border border-green-200 rounded-lg p-3">
                  <p className="text-sm text-green-800">
                    <strong>Planos disponíveis:</strong> Básico (gratuito), Premium (R$ 199/mês), Corporativo (personalizado)
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>

        <div className="mt-8 pt-6 border-t border-gray-200">
          <div className="text-center">
            <p className="text-gray-600 mb-4">Administrador do sistema?</p>
            <button
              onClick={() => handleLogin('admin', { name: 'Administrador', role: 'admin' })}
              className="inline-flex items-center space-x-2 bg-gradient-to-r from-purple-600 to-purple-700 text-white px-8 py-3 rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all font-medium transform hover:scale-105 duration-200 shadow-md hover:shadow-lg"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
              <span>Entrar como Administrador</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  const VideoInterview = () => (
    <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-4xl mx-auto">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-gray-800">Entrevista por Vídeo</h2>
        <p className="text-gray-600">Conectando com {selectedCandidate?.name}...</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div className="bg-black rounded-lg h-64 flex items-center justify-center">
          <div className="text-center text-white">
            <svg className="w-16 h-16 mx-auto mb-4 opacity-50" fill="currentColor" viewBox="0 0 24 24">
              <path d="M21 6h-2.774l-3.39-3.39c-.373-.373-.879-.586-1.41-.586s-1.037.213-1.41 .586L8.627 6H3c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h18c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2zM5 8h14v10H5V8zm12 7l-4-3v6l4-3z"/>
            </svg>
            <p>Sua câmera</p>
          </div>
        </div>
        <div className="bg-gray-900 rounded-lg h-64 flex items-center justify-center">
          <div className="text-center text-white">
            <svg className="w-16 h-16 mx-auto mb-4 opacity-50" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm4.01-11.01c.642 0 1.276.19 1.81.559.962.656 1.351 1.884.85 2.918l-2.078 4.158c-.502 1.033-1.642 1.522-2.68 1.018-.962-.466-1.351-1.694-.85-2.728l2.078-4.158c.39-.794 1.205-1.284 2.07-1.284z"/>
            </svg>
            <p>Candidato</p>
          </div>
        </div>
      </div>

      <div className="flex justify-center space-x-4">
        <button className="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium flex items-center space-x-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
          <span>Encerrar Chamada</span>
        </button>
        <button className="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors font-medium flex items-center space-x-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
          </svg>
          <span>Mutar Microfone</span>
        </button>
        <button className="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors font-medium flex items-center space-x-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
          </svg>
          <span>Desligar Câmera</span>
        </button>
      </div>
    </div>
  );

  if (!currentUser) {
    return <LoginScreen />;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-2">
                <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
                  <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  SelectPro
                </h1>
              </div>
              <nav className="hidden md:flex space-x-8">
                <button
                  onClick={() => setActiveTab('dashboard')}
                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                    activeTab === 'dashboard' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-800'
                  }`}
                >
                  Dashboard
                </button>
                {userType === 'company' && (
                  <button
                    onClick={() => setActiveTab('jobs')}
                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                      activeTab === 'jobs' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-800'
                    }`}
                  >
                    Vagas
                  </button>
                )}
                {userType === 'admin' && (
                  <button
                    onClick={() => setActiveTab('analytics')}
                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                      activeTab === 'analytics' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-800'
                    }`}
                  >
                    Análises
                  </button>
                )}
              </nav>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="text-right">
                <p className="text-sm font-medium text-gray-800">{currentUser.name}</p>
                <p className="text-xs text-gray-500 capitalize">{userType === 'candidate' ? 'Candidato' : userType === 'company' ? 'Empresa' : 'Administrador'}</p>
              </div>
              <button
                onClick={handleLogout}
                className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center space-x-1"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                </svg>
                <span>Sair</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {showTest ? (
          <TestScreen />
        ) : showInterview ? (
          <InterviewScreen />
        ) : (
          <>
            {userType === 'admin' && <AdminDashboard />}
            {userType === 'candidate' && <CandidateDashboard />}
            {userType === 'company' && <CompanyDashboard />}
          </>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center space-x-2 mb-4 md:mb-0">
              <div className="w-6 h-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <span className="text-gray-600">SelectPro © 2024 - Sistema de Processo Seletivo Online</span>
            </div>
            <div className="flex space-x-6">
              <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">Termos de Uso</a>
              <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">Política de Privacidade</a>
              <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">Suporte</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
```