feat: adicionar listagem e rolagem de médicos por especialização

susconecta/app/resultados/page.tsx

@@ -7,6 +7,9 @@ import { Card } from '@/components/ui/card'
 import { Toggle } from '@/components/ui/toggle'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
   Building2,
   Filter,
@@ -17,7 +20,8 @@ import {
   ShieldCheck,
   Star,
   Stethoscope,
-  ChevronRight
+  ChevronRight,
+  UserRound
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -27,6 +31,8 @@ type Medico = {
   id: number
   nome: string
   especialidade: string
+  crm: string
+  categoriaHero: string
   avaliacao: number
   avaliacaoQtd: number
   convenios: string[]
@@ -37,15 +43,27 @@ type Medico = {
   precoTeleconsulta?: string
   atendeLocal: boolean
   atendeTele: boolean
+  agenda: {
+    label: string
+    data: string
+    horarios: string[]
+  }[]
+  experiencia: string[]
+  planosSaude: string[]
+  consultorios: { nome: string; endereco: string; telefone: string }[]
+  servicos: { nome: string; preco: string }[]
+  opinioes: { id: number; paciente: string; data: string; nota: number; comentario: string }[]
 }
 
 const especialidadesHero = ['Psicólogo', 'Médico clínico geral', 'Pediatra', 'Dentista', 'Ginecologista', 'Veja mais']
 
-const medicosMock: Medico[] = [
+const medicosBase: Medico[] = [
   {
     id: 1,
     nome: 'Paula Pontes',
-    especialidade: 'Psicóloga',
+    especialidade: 'Psicóloga clínica',
+    crm: 'CRP SE 19/4244',
+    categoriaHero: 'Psicólogo',
     avaliacao: 4.9,
     avaliacaoQtd: 23,
     convenios: ['Amil', 'Unimed'],
@@ -55,38 +73,106 @@ const medicosMock: Medico[] = [
     precoLocal: 'R$ 180',
     precoTeleconsulta: 'R$ 160',
     atendeLocal: true,
-    atendeTele: true
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '10:00', '11:00', '12:00', '13:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['11:00', '12:00', '13:00', '14:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
   },
   {
     id: 2,
-    nome: 'Dr. Carlos Andrade',
+    nome: 'Marcos Vieira',
-    especialidade: 'Cardiologista',
+    especialidade: 'Psicólogo comportamental',
-    avaliacao: 4.8,
+    crm: 'CRP SE 24/1198',
-    avaliacaoQtd: 128,
+    categoriaHero: 'Psicólogo',
+    avaliacao: 4.7,
+    avaliacaoQtd: 31,
     convenios: ['SulAmérica', 'Bradesco Saúde'],
-    endereco: 'Rua Sergipe, 88 - Centro Médico Jardins',
+    endereco: 'Rua Juarez Távora, 155 - São José',
-    bairro: 'Centro',
+    bairro: 'São José',
     cidade: 'Aracaju • SE',
-    precoLocal: 'R$ 320',
+    precoLocal: 'R$ 190',
-    precoTeleconsulta: 'R$ 290',
+    precoTeleconsulta: 'R$ 150',
     atendeLocal: true,
-    atendeTele: true
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['14:00', '16:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['10:00', '11:00', '12:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:00', '10:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
   },
   {
     id: 3,
-    nome: 'Dra. Fernanda Lima',
+    nome: 'Julia Azevedo',
-    especialidade: 'Dermatologista',
+    especialidade: 'Psicóloga infantil',
-    avaliacao: 5,
+    crm: 'CRP SE 23/4476',
-    avaliacaoQtd: 210,
+    categoriaHero: 'Psicólogo',
-    convenios: ['Amil', 'Particular'],
+    avaliacao: 4.95,
-    precoTeleconsulta: 'R$ 250',
+    avaliacaoQtd: 45,
+    convenios: ['NotreDame Intermédica', 'Particular'],
+    precoTeleconsulta: 'R$ 140',
     atendeLocal: false,
-    atendeTele: true
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:30', '11:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['08:30', '10:00', '11:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
   },
   {
     id: 4,
+    nome: 'Rafael Sousa',
+    especialidade: 'Neuropsicólogo',
+    crm: 'CRP BA 03/8874',
+    categoriaHero: 'Psicólogo',
+    avaliacao: 4.82,
+    avaliacaoQtd: 52,
+    convenios: ['Amil', 'Particular'],
+    endereco: 'Rua Riachão, 77 - Centro',
+    bairro: 'Centro',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 210',
+    atendeLocal: true,
+    atendeTele: false,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '13:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:00', '12:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: ['09:30'] }
+    ]
+  },
+  {
+    id: 5,
+    nome: 'Lucas Amorim',
+    especialidade: 'Clínico geral',
+    crm: 'CRM SE 5122',
+    categoriaHero: 'Médico clínico geral',
+    avaliacao: 4.88,
+    avaliacaoQtd: 98,
+    convenios: ['Amil', 'Bradesco Saúde'],
+    endereco: 'Av. Beira Mar, 402 - Coroa do Meio',
+    bairro: 'Coroa do Meio',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 220',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00', '11:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:30', '14:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:30', '12:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 6,
     nome: 'Dr. João Silva',
     especialidade: 'Ortopedista',
+    crm: 'CRM RJ 90876',
+    categoriaHero: 'Veja mais',
     avaliacao: 4.7,
     avaliacaoQtd: 96,
     convenios: ['Unimed', 'Bradesco Saúde'],
@@ -95,10 +181,394 @@ const medicosMock: Medico[] = [
     cidade: 'Aracaju • SE',
     precoLocal: 'R$ 310',
     atendeLocal: true,
-    atendeTele: false
+    atendeTele: false,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 7,
+    nome: 'Dra. Beatriz Moura',
+    especialidade: 'Ginecologista',
+    crm: 'CRM BA 52110',
+    categoriaHero: 'Veja mais',
+    avaliacao: 4.95,
+    avaliacaoQtd: 186,
+    convenios: ['NotreDame Intermédica', 'Particular', 'Amil'],
+    endereco: 'Rua Tobias Barreto, 512 - Bairro São José',
+    bairro: 'São José',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 280',
+    precoTeleconsulta: 'R$ 240',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['14:00', '15:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '11:00', '16:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:30', '12:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: ['11:30'] }
+    ]
+  },
+  {
+    id: 8,
+    nome: 'Dr. André Lemos',
+    especialidade: 'Gastroenterologista',
+    crm: 'CRM SE 9033',
+    categoriaHero: 'Veja mais',
+    avaliacao: 4.75,
+    avaliacaoQtd: 105,
+    convenios: ['SulAmérica', 'Unimed'],
+    endereco: 'Rua Arauá, 22 - Centro',
+    bairro: 'Centro',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 340',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['13:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:00', '11:00', '15:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:30', '10:15'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 9,
+    nome: 'Dra. Fernanda Lima',
+    especialidade: 'Médico clínico geral',
+    crm: 'CRM SE 7890',
+    categoriaHero: 'Médico clínico geral',
+    avaliacao: 4.9,
+    avaliacaoQtd: 110,
+    convenios: ['Amil', 'Unimed', 'Bradesco Saúde'],
+    endereco: 'Av. Rio de Janeiro, 300 - São José',
+    bairro: 'São José',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 250',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00', '11:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:30', '14:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:30', '12:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 10,
+    nome: 'Dra. Helena Castro',
+    especialidade: 'Pediatra geral',
+    crm: 'CRM SE 7812',
+    categoriaHero: 'Pediatra',
+    avaliacao: 4.92,
+    avaliacaoQtd: 134,
+    convenios: ['Amil', 'Unimed', 'SulAmérica'],
+    endereco: 'Rua José Hipólito, 98 - Suíssa',
+    bairro: 'Suíssa',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 260',
+    precoTeleconsulta: 'R$ 220',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00', '11:30'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:30', '10:00', '14:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:30', '11:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 11,
+    nome: 'Dr. Vinícius Prado',
+    especialidade: 'Pediatra neonatologista',
+    crm: 'CRM SE 6331',
+    categoriaHero: 'Pediatra',
+    avaliacao: 4.85,
+    avaliacaoQtd: 89,
+    convenios: ['Bradesco Saúde', 'NotreDame Intermédica'],
+    endereco: 'Av. Augusto Franco, 2220 - Siqueira Campos',
+    bairro: 'Siqueira Campos',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 280',
+    atendeLocal: true,
+    atendeTele: false,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:00', '11:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: ['09:30'] }
+    ]
+  },
+  {
+    id: 12,
+    nome: 'Dra. Marina Salles',
+    especialidade: 'Pediatra emergencista',
+    crm: 'CRM BA 85660',
+    categoriaHero: 'Pediatra',
+    avaliacao: 4.78,
+    avaliacaoQtd: 57,
+    convenios: ['Particular', 'Amil'],
+    precoTeleconsulta: 'R$ 210',
+    atendeLocal: false,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['13:00', '15:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:30', '12:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 13,
+    nome: 'Dr. Caio Moura',
+    especialidade: 'Pediatra pneumologista',
+    crm: 'CRM SE 7345',
+    categoriaHero: 'Pediatra',
+    avaliacao: 4.91,
+    avaliacaoQtd: 102,
+    convenios: ['SulAmérica', 'Unimed'],
+    endereco: 'Av. Hermes Fontes, 445 - Salgado Filho',
+    bairro: 'Salgado Filho',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 270',
+    precoTeleconsulta: 'R$ 230',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['10:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '11:00', '16:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:30', '11:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 14,
+    nome: 'Dra. Patrícia Freire',
+    especialidade: 'Cirurgiã-dentista',
+    crm: 'CRO SE 2133',
+    categoriaHero: 'Dentista',
+    avaliacao: 4.9,
+    avaliacaoQtd: 176,
+    convenios: ['OdontoPrev', 'Amil Dental'],
+    endereco: 'Rua Itabaiana, 410 - Centro',
+    bairro: 'Centro',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 200',
+    precoTeleconsulta: 'R$ 160',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00', '13:30'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:30', '10:00', '14:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:30', '11:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 15,
+    nome: 'Dr. Henrique Assis',
+    especialidade: 'Implantodontista',
+    crm: 'CRO SE 1450',
+    categoriaHero: 'Dentista',
+    avaliacao: 4.83,
+    avaliacaoQtd: 94,
+    convenios: ['SulAmérica Odonto', 'Particular'],
+    endereco: 'Av. Jorge Amado, 321 - Atalaia',
+    bairro: 'Atalaia',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 350',
+    atendeLocal: true,
+    atendeTele: false,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '11:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 16,
+    nome: 'Dra. Lívia Teles',
+    especialidade: 'Ortodontista',
+    crm: 'CRO BA 11567',
+    categoriaHero: 'Dentista',
+    avaliacao: 4.88,
+    avaliacaoQtd: 140,
+    convenios: ['Uniodonto', 'Amil Dental', 'Particular'],
+    precoTeleconsulta: 'R$ 120',
+    atendeLocal: false,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['17:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '10:30', '15:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['08:30', '09:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 17,
+    nome: 'Dr. Pablo Menezes',
+    especialidade: 'Endodontista',
+    crm: 'CRO SE 2099',
+    categoriaHero: 'Dentista',
+    avaliacao: 4.76,
+    avaliacaoQtd: 83,
+    convenios: ['OdontoPrev', 'SulAmérica Odonto'],
+    endereco: 'Rua Cedro, 70 - Grageru',
+    bairro: 'Grageru',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 230',
+    precoTeleconsulta: 'R$ 190',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:00', '13:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 18,
+    nome: 'Dra. Beatriz Moura',
+    especialidade: 'Ginecologista obstetra',
+    crm: 'CRM BA 52110',
+    categoriaHero: 'Ginecologista',
+    avaliacao: 4.95,
+    avaliacaoQtd: 186,
+    convenios: ['NotreDame Intermédica', 'Particular', 'Amil'],
+    endereco: 'Rua Tobias Barreto, 512 - São José',
+    bairro: 'São José',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 280',
+    precoTeleconsulta: 'R$ 240',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['14:00', '15:00'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '11:00', '16:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:30', '12:30'] },
+      { label: 'Dom.', data: '12 Out', horarios: ['11:30'] }
+    ]
+  },
+  {
+    id: 19,
+    nome: 'Dra. Camila Albuquerque',
+    especialidade: 'Ginecologista endocrinologista',
+    crm: 'CRM SE 6774',
+    categoriaHero: 'Ginecologista',
+    avaliacao: 4.89,
+    avaliacaoQtd: 122,
+    convenios: ['SulAmérica', 'Unimed'],
+    endereco: 'Av. Gonçalo Prado Rollemberg, 167 - São José',
+    bairro: 'São José',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 300',
+    atendeLocal: true,
+    atendeTele: false,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: [] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:00', '09:30', '15:00'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 20,
+    nome: 'Dra. Renata Figueiredo',
+    especialidade: 'Ginecologista minimamente invasiva',
+    crm: 'CRM PE 112233',
+    categoriaHero: 'Ginecologista',
+    avaliacao: 4.94,
+    avaliacaoQtd: 208,
+    convenios: ['Amil', 'Bradesco Saúde', 'Particular'],
+    precoTeleconsulta: 'R$ 260',
+    atendeLocal: false,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['09:00', '10:30'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['08:30', '11:00', '14:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['09:45'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
+  },
+  {
+    id: 21,
+    nome: 'Dr. Eduardo Fontes',
+    especialidade: 'Ginecologista mastologista',
+    crm: 'CRM SE 7012',
+    categoriaHero: 'Ginecologista',
+    avaliacao: 4.8,
+    avaliacaoQtd: 95,
+    convenios: ['NotreDame Intermédica', 'SulAmérica'],
+    endereco: 'Rua Teófilo Dantas, 55 - Centro',
+    bairro: 'Centro',
+    cidade: 'Aracaju • SE',
+    precoLocal: 'R$ 310',
+    atendeLocal: true,
+    atendeTele: true,
+    agenda: [
+      { label: 'Hoje', data: '9 Out', horarios: ['08:30'] },
+      { label: 'Amanhã', data: '10 Out', horarios: ['09:00', '11:00', '16:30'] },
+      { label: 'Sáb.', data: '11 Out', horarios: ['10:00', '12:00'] },
+      { label: 'Dom.', data: '12 Out', horarios: [] }
+    ]
   }
 ]
 
+const medicosMock: Medico[] = medicosBase.map((medico, index) => ({
+  ...medico,
+  experiencia:
+    medico.experiencia ??
+    [
+      'Especialista com atuação reconhecida pelo respectivo conselho profissional.',
+      'Formação continuada em instituições nacionais e internacionais.',
+      'Atendimento humanizado com foco em resultados sustentáveis.'
+    ],
+  planosSaude:
+    medico.planosSaude ?? medico.convenios ?? ['Amil', 'Unimed', 'SulAmérica'],
+  consultorios:
+    medico.consultorios ??
+    (medico.endereco
+      ? [
+          {
+            nome: 'Clínica principal',
+            endereco: `${medico.endereco}${medico.cidade ? ` — ${medico.cidade}` : ''}`,
+            telefone: '(79) 4002-8922'
+          }
+        ]
+      : []),
+  servicos:
+    medico.servicos ??
+    [
+      {
+        nome: 'Consulta inicial',
+        preco: medico.precoLocal ?? medico.precoTeleconsulta ?? 'Sob consulta'
+      },
+      { nome: 'Retorno em até 30 dias', preco: 'R$ 150' }
+    ],
+  opinioes:
+    medico.opinioes ??
+    [
+      {
+        id: index * 2 + 1,
+        paciente: 'Ana P.',
+        data: '01/09/2025',
+        nota: 5,
+        comentario: 'Profissional muito atencioso e detalhista.'
+      },
+      {
+        id: index * 2 + 2,
+        paciente: 'Marcos L.',
+        data: '18/08/2025',
+        nota: 4,
+        comentario: 'Explicações claras e ambiente acolhedor.'
+      }
+    ]
+}))
+
 export default function ResultadosPage() {
   const params = useSearchParams()
   const router = useRouter()
@@ -108,6 +578,10 @@ export default function ResultadosPage() {
   const [especialidadeHero, setEspecialidadeHero] = useState<string>(params.get('especialidade') || 'Psicólogo')
   const [convenio, setConvenio] = useState<string>('Todos')
   const [bairro, setBairro] = useState<string>('Todos')
+  const [modalFiltrosAberto, setModalFiltrosAberto] = useState(false)
+  const [agendasExpandida, setAgendasExpandida] = useState<Record<number, boolean>>({})
+  const [medicoSelecionado, setMedicoSelecionado] = useState<Medico | null>(null)
+  const [abaDetalhe, setAbaDetalhe] = useState('experiencia')
 
   const profissionais = useMemo(() => {
     return medicosMock.filter(medico => {
@@ -115,7 +589,8 @@ export default function ResultadosPage() {
       if (tipoConsulta === 'teleconsulta' && !medico.atendeTele) return false
       if (convenio !== 'Todos' && !medico.convenios.includes(convenio)) return false
       if (bairro !== 'Todos' && medico.bairro !== bairro) return false
-      if (especialidadeHero !== 'Veja mais' && medico.especialidade !== especialidadeHero) return false
+      if (especialidadeHero !== 'Veja mais' && medico.categoriaHero !== especialidadeHero) return false
+      if (especialidadeHero === 'Veja mais' && medico.categoriaHero !== 'Veja mais') return false
       return true
     })
   }, [bairro, convenio, especialidadeHero, tipoConsulta])
@@ -224,7 +699,13 @@ export default function ResultadosPage() {
               key={medico.id}
               className="flex flex-col gap-4 border border-border bg-card/80 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
             >
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-wrap items-start gap-4">
+                <Avatar className="h-14 w-14 border border-primary/20 bg-primary/5">
+                  <AvatarFallback className="bg-primary/10 text-primary">
+                    <UserRound className="h-6 w-6" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex flex-1 flex-col gap-2">
                   <div className="flex flex-wrap items-center gap-2">
                     <h2 className="text-lg font-semibold text-foreground">{medico.nome}</h2>
                     <Badge className="rounded-full bg-primary/10 text-primary">{medico.especialidade}</Badge>
@@ -234,9 +715,21 @@ export default function ResultadosPage() {
                       <Star className="h-4 w-4 fill-primary text-primary" />
                       {medico.avaliacao.toFixed(1)} • {medico.avaliacaoQtd} avaliações
                     </span>
+                    <span>{medico.crm}</span>
                     <span>{medico.convenios.join(', ')}</span>
                   </div>
                 </div>
+                <Button
+                  variant="ghost"
+                  className="ml-auto h-fit rounded-full text-primary hover:bg-primary/10"
+                  onClick={() => {
+                    setMedicoSelecionado(medico)
+                    setAbaDetalhe('experiencia')
+                  }}
+                >
+                  Ver perfil completo
+                </Button>
+              </div>
 
               {tipoConsulta === 'local' && medico.atendeLocal && (
                 <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
@@ -285,10 +778,53 @@ export default function ResultadosPage() {
                 <Button variant="outline" className="h-11 rounded-full border-primary/40 bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground">
                   Enviar mensagem
                 </Button>
-                <Button variant="ghost" className="h-11 rounded-full text-primary hover:bg-primary/10">
+                <Button
-                  Ver mais horários
+                  variant="ghost"
+                  className="h-11 rounded-full text-primary hover:bg-primary/10"
+                  onClick={() =>
+                    setAgendasExpandida(prev => ({
+                      ...prev,
+                      [medico.id]: !prev[medico.id]
+                    }))
+                  }
+                >
+                  {agendasExpandida[medico.id] ? 'Ocultar horários' : 'Mostrar mais horários'}
                 </Button>
               </div>
+
+              <div className="mt-4 overflow-x-auto">
+                <div className="grid min-w-[360px] grid-cols-4 gap-3">
+                  {medico.agenda.map(coluna => {
+                    const horarios = agendasExpandida[medico.id] ? coluna.horarios : coluna.horarios.slice(0, 3)
+                    return (
+                      <div key={`${medico.id}-${coluna.label}`} className="rounded-2xl border border-border p-3 text-center">
+                        <p className="text-xs font-semibold uppercase text-muted-foreground">{coluna.label}</p>
+                        <p className="text-[10px] text-muted-foreground">{coluna.data}</p>
+                        <div className="mt-3 flex flex-col gap-2">
+                          {horarios.length ? (
+                            horarios.map(horario => (
+                              <button
+                                key={horario}
+                                type="button"
+                                className="rounded-lg bg-primary/10 px-2 py-1 text-xs font-medium text-primary transition hover:bg-primary hover:text-primary-foreground"
+                              >
+                                {horario}
+                              </button>
+                            ))
+                          ) : (
+                            <span className="rounded-lg border border-dashed border-border px-2 py-3 text-[11px] text-muted-foreground">
+                              Sem horários
+                            </span>
+                          )}
+                          {!agendasExpandida[medico.id] && coluna.horarios.length > 3 && (
+                            <span className="text-[10px] text-muted-foreground">+{coluna.horarios.length - 3} horários</span>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
             </Card>
           ))}
 
@@ -298,6 +834,143 @@ export default function ResultadosPage() {
             </Card>
           )}
         </section>
+
+        <Dialog open={!!medicoSelecionado} onOpenChange={open => !open && setMedicoSelecionado(null)}>
+          <DialogContent className="max-h-[90vh] w-full max-w-5xl overflow-y-auto border border-border bg-card p-0">
+            {medicoSelecionado && (
+              <>
+                <DialogHeader className="border-b border-border px-6 py-4">
+                  <DialogTitle className="text-2xl font-semibold text-foreground">
+                    {medicoSelecionado.nome}
+                  </DialogTitle>
+                  <p className="text-sm text-muted-foreground">
+                    {medicoSelecionado.especialidade} • {medicoSelecionado.crm}
+                  </p>
+                </DialogHeader>
+
+                <div className="flex flex-col gap-6 px-6 py-5">
+                  <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+                    <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-primary">
+                      <Star className="h-4 w-4 fill-primary text-primary" />
+                      {medicoSelecionado.avaliacao.toFixed(1)} ({medicoSelecionado.avaliacaoQtd} avaliações)
+                    </span>
+                    <span>{medicoSelecionado.planosSaude.join(' • ')}</span>
+                  </div>
+
+                  <Tabs value={abaDetalhe} onValueChange={setAbaDetalhe} className="space-y-6">
+                    <TabsList className="w-full justify-start rounded-full bg-muted/50 p-1 text-sm">
+                      <TabsTrigger value="experiencia" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Experiência
+                      </TabsTrigger>
+                      <TabsTrigger value="planos" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Planos de saúde
+                      </TabsTrigger>
+                      <TabsTrigger value="consultorios" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Consultórios
+                      </TabsTrigger>
+                      <TabsTrigger value="servicos" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Serviços
+                      </TabsTrigger>
+                      <TabsTrigger value="opinioes" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Opiniões ({medicoSelecionado.opinioes.length})
+                      </TabsTrigger>
+                      <TabsTrigger value="agenda" className="rounded-full px-4 py-2 data-[state=active]:bg-card data-[state=active]:text-primary">
+                        Agenda
+                      </TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="experiencia" className="space-y-3 text-sm text-muted-foreground">
+                      {medicoSelecionado.experiencia.map((linha, index) => (
+                        <p key={index}>{linha}</p>
+                      ))}
+                    </TabsContent>
+
+                    <TabsContent value="planos" className="flex flex-wrap gap-2">
+                      {medicoSelecionado.planosSaude.map(plano => (
+                        <span key={plano} className="rounded-full border border-primary/30 bg-primary/5 px-4 py-1 text-xs font-medium text-primary">
+                          {plano}
+                        </span>
+                      ))}
+                    </TabsContent>
+
+                    <TabsContent value="consultorios" className="space-y-3 text-sm text-muted-foreground">
+                      {medicoSelecionado.consultorios.length ? (
+                        medicoSelecionado.consultorios.map((consultorio, index) => (
+                          <div key={index} className="rounded-xl border border-border bg-muted/40 p-4">
+                            <p className="font-medium text-foreground">{consultorio.nome}</p>
+                            <p>{consultorio.endereco}</p>
+                            <p className="text-xs text-muted-foreground">Telefone: {consultorio.telefone}</p>
+                          </div>
+                        ))
+                      ) : (
+                        <p>Atendimento exclusivamente por teleconsulta.</p>
+                      )}
+                    </TabsContent>
+
+                    <TabsContent value="servicos" className="space-y-3 text-sm text-muted-foreground">
+                      {medicoSelecionado.servicos.map(servico => (
+                        <div key={servico.nome} className="flex items-center justify-between rounded-xl border border-border bg-card/70 px-4 py-3">
+                          <span>{servico.nome}</span>
+                          <span className="font-semibold text-primary">{servico.preco}</span>
+                        </div>
+                      ))}
+                    </TabsContent>
+
+                    <TabsContent value="opinioes" className="space-y-3">
+                      {medicoSelecionado.opinioes.map(opiniao => (
+                        <div key={opiniao.id} className="rounded-xl border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
+                          <div className="flex items-center justify-between text-foreground">
+                            <span className="font-semibold">{opiniao.paciente}</span>
+                            <span className="text-xs text-muted-foreground">{opiniao.data}</span>
+                          </div>
+                          <div className="mt-2 flex items-center gap-1 text-primary">
+                            {Array.from({ length: opiniao.nota }).map((_, index) => (
+                              <Star key={index} className="h-4 w-4 fill-primary text-primary" />
+                            ))}
+                          </div>
+                          <p className="mt-2 text-muted-foreground">{opiniao.comentario}</p>
+                        </div>
+                      ))}
+                    </TabsContent>
+
+                    <TabsContent value="agenda" className="space-y-4">
+                      <p className="text-sm text-muted-foreground">
+                        Escolha o melhor horário disponível para sua consulta.
+                      </p>
+                      <div className="overflow-x-auto">
+                        <div className="grid min-w-[420px] grid-cols-4 gap-3">
+                          {medicoSelecionado.agenda.map(coluna => (
+                            <div key={coluna.label} className="rounded-2xl border border-border bg-muted/30 p-3 text-center text-sm">
+                              <p className="font-semibold text-foreground">{coluna.label}</p>
+                              <p className="text-xs text-muted-foreground">{coluna.data}</p>
+                              <div className="mt-3 flex flex-col gap-2">
+                                {coluna.horarios.length ? (
+                                  coluna.horarios.map(horario => (
+                                    <button
+                                      key={horario}
+                                      type="button"
+                                      className="rounded-lg bg-primary/10 px-2 py-1 text-xs font-medium text-primary transition hover:bg-primary hover:text-primary-foreground"
+                                    >
+                                      {horario}
+                                    </button>
+                                  ))
+                                ) : (
+                                  <span className="rounded-lg border border-dashed border-border px-2 py-3 text-[11px] text-muted-foreground">
+                                    Sem horários
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
       </div>
     </div>
   )