// Seções compartilhadas da página inicial e páginas internas.
const { useState: useS } = React;

// ============== SOBRE ==============
const About = () => (
  <section id="sobre" className="section-about">
    <div className="container">
      <div className="about-grid">
        <div className="about-text">
          <div className="eyebrow left">Sobre o congresso</div>
          <h2 className="about-title">XI Congresso Acadêmico de <em>Medicina e Saúde</em></h2>
          <div className="about-copy">
            <p>
              Em sua 11ª edição, o Congresso Acadêmico de Medicina e Saúde (CAMES) reafirma seu compromisso
              com a promoção do conhecimento científico, o estímulo ao pensamento crítico e a formação de
              profissionais preparados para os desafios da saúde contemporânea. Ao longo de mais de uma década,
              o congresso consolidou-se como um espaço de integração entre estudantes, pesquisadores e
              profissionais de diversas áreas, incentivando o diálogo interdisciplinar e a construção coletiva do conhecimento.
            </p>
            <p>
              Com o tema <strong>“O Papel da Ciência em Tempos de Desinformação”</strong>, o CAMES XI convida a
              comunidade acadêmica a refletir sobre um dos maiores desafios da atualidade: preservar a confiança
              na ciência em um cenário marcado pela rápida circulação de informações e pela dificuldade de
              distinguir evidências de opiniões. Mais do que promover atualização científica, o congresso busca
              fortalecer o pensamento crítico, incentivar o debate qualificado e evidenciar a ciência como instrumento
              essencial para uma prática em saúde ética, responsável e comprometida com a sociedade.
            </p>
            <p>
              Em um mundo em que a informação circula com rapidez, a ciência permanece como o caminho mais sólido
              para transformar conhecimento em cuidado, decisões em evidências e desafios em oportunidades de inovação.
            </p>
          </div>
          <div className="about-stats" aria-label="Informações confirmadas do evento">
            <div className="stat"><div className="stat-value">11ª</div><div className="stat-label">Edição</div></div>
            <div className="stat"><div className="stat-value">5</div><div className="stat-label">Convidados</div></div>
            <div className="stat"><div className="stat-value">3</div><div className="stat-label">Dias</div></div>
          </div>
        </div>
        <div className="about-visual">
          <img src="assets/logo-oficial.png" alt="Selo oficial do XI CAMES 2026" width="430" height="430" loading="lazy"/>
        </div>
      </div>
    </div>
  </section>
);

// ============== EIXOS TEMÁTICOS ==============
const AIScience = () => {
  const [active, setActive] = useS(0);
  const topics = [
    { tag: 'Eixo 1', title: 'Ciência e pensamento crítico', text: 'Debates sobre evidências, tomada de decisão e formação crítica em saúde.' },
    { tag: 'Eixo 2', title: 'Desinformação em saúde', text: 'Reflexões sobre informação confiável, responsabilidade e comunicação com a sociedade.' },
    { tag: 'Eixo 3', title: 'Ética e responsabilidade', text: 'Discussões sobre os desafios éticos da prática em saúde no cenário contemporâneo.' },
    { tag: 'Eixo 4', title: 'Comunicação científica', text: 'Caminhos para aproximar conhecimento científico, profissionais, estudantes e comunidade.' },
  ];
  const current = topics[active];

  return (
    <section id="eixos" className="section-ai">
      <div className="container">
        <div className="eyebrow section-eyebrow">Eixos de reflexão</div>
        <h2 className="section-title">Ciência e a responsabilidade de <em>informar</em></h2>
        <Divider/>
        <div className="ai-layout">
          <div className="ai-topics" role="tablist" aria-label="Eixos temáticos">
            {topics.map((topic, index) => (
              <button
                key={topic.tag}
                type="button"
                role="tab"
                aria-selected={active === index}
                aria-controls="axis-panel"
                className={`ai-topic ${active === index ? 'active' : ''}`}
                onClick={() => setActive(index)}
              >
                <span className="ai-topic-tag">{topic.tag}</span>
                <span>{topic.title}</span>
              </button>
            ))}
          </div>
          <div id="axis-panel" className="ai-detail" role="tabpanel">
            <span className="ai-detail-mark" aria-hidden="true">XI</span>
            <div>
              <div className="eyebrow left">{current.tag}</div>
              <h3>{current.title}</h3>
              <p>{current.text}</p>
              <p className="ai-note">A programação detalhada deste eixo será divulgada em breve.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============== PALESTRANTES ==============
const speakers = [
  {
    name: 'Dr. Wesley Lobo',
    photo: 'assets/palestrantes/wesley-lobo.png',
    position: '50% 24%',
    visible: true,
    details: [
      'Graduado em Medicina e pós-graduado em Clínica Médica/Medicina Interna (residência MEC).',
      'Especialista com residência médica em Cardiologia pelo Instituto de Cardiologia e Transplantes do Distrito Federal (antigo INCOR-DF).',
      'Mestre profissional pela UNIMEP. Sócio-diretor e coordenador da equipe de Cardiologia do HCP.',
    ],
  },
  {
    name: 'Prof. Dr. Eduardo Chaves Neto',
    photo: 'assets/palestrantes/eduardo-chaves-neto.png',
    position: '50% 18%',
    details: [
      'Advogado especialista em Bioética e Direito Médico, enfermeiro paliativista, professor e gestor de clínicas e hospitais.',
      'Mestre em Políticas Públicas de Saúde e Governança pela FGV.',
    ],
  },
  {
    name: 'Ruth Rodrigues',
    photo: 'assets/palestrantes/ruth-rodrigues.png',
    position: '50% 22%',
    visible: false, // Card ocultado temporariamente; preserve os dados para reativação futura.
    details: [
      'Advogada especialista em violência obstétrica.',
      'Presidente da Primeira Comissão de Combate à Violência Obstétrica da OAB do Distrito Federal.',
      'Pós-graduada em Prevenção da Violência Obstétrica pelo Complexo de Ensino Superior de Santa Catarina (CESUSC).',
    ],
  },
  {
    name: 'Dra. Cristiane Cordeiro',
    photo: 'assets/palestrantes/cristiane-cordeiro.png',
    position: '50% 20%',
    visible: true,
    details: [
      'Especialista em Medicina Interna e Cuidados Paliativos.',
      'Diretora de Cuidados Paliativos na Secretaria de Estado de Saúde do Distrito Federal.',
    ],
  },
  {
    name: 'Dr. Henrique Lacerda',
    photo: 'assets/palestrantes/henrique-lacerda.png',
    position: '50% 18%',
    details: [
      'Médico neurocirurgião, graduado pelo Centro Universitário de Brasília (UniCEUB) e especialista em Neurocirurgia pela Sociedade Brasileira de Neurocirurgia (SBN). Realizou residência médica em Neurocirurgia no Hospital de Base do Distrito Federal e estágio eletivo em Neurocirurgia de Tumores do Sistema Nervoso Central e Coluna no Hospital Sarah.',
      'Atua como neurocirurgião em Brasília, Paracatu e outras instituições da região, além de exercer atividades como docente e coescritor do Curso de Formação em Neurocirurgia — SOS Neurocirurgia.',
      'Possui experiência nas áreas de tumores do sistema nervoso central, cirurgia da coluna vertebral, trauma, órteses cranianas e neurointensivismo.',
    ],
  },
  {
    name: 'Dra. Lorena Cota Noronha',
    photo: 'assets/palestrantes/lorena-cota-noronha.png',
    position: '50% 16%',
    details: [
      'Médica formada pela UniAtenas.',
      'R3 de Ginecologia e Obstetrícia na UniAtenas.',
    ],
  },
  {
    name: 'Dra. Heloina Avelar Araújo',
    photo: 'assets/palestrantes/heloina-avelar-araujo.png',
    position: '50% 22%',
    details: [
      'Médica formada pela UniAtenas.',
      'R3 de Ginecologia e Obstetrícia na UniAtenas.',
    ],
  },
  {
    name: 'Dra. Luana Franco',
    photo: 'assets/palestrantes/luana-franco.png',
    position: '50% 12%',
    details: [
      'Médica especialista em Clínica Médica, pós-graduada em Medicina do Trabalho e docente das disciplinas de Bioética e Medicina Legal na Faculdade UniAtenas.',
    ],
  },
  {
    name: 'Dr. Marco Antonio Valadares',
    photo: 'assets/palestrantes/marco-antonio-valadares.png',
    position: '50% 16%',
    details: [
      'Médico formado pela UniAtenas e residente de Pediatria no Hospital Municipal da Criança, em Paracatu (MG).',
    ],
  },
  {
    name: 'Adrielly Garcia Siebert',
    photo: 'assets/palestrantes/adrielly-garcia-siebert.png',
    position: '50% 24%',
    details: [
      'Psicóloga Clínica e Escolar.',
      'Mestre em Psicologia do Desenvolvimento e Processos de Aprendizagem, especialista em Neuropsicologia e Análise Transacional.',
      'Cofundadora do cursinho pré-vestibular CDF, dedica-se à formação de psicólogos, assistentes sociais e educadores, desenvolvendo projetos que promovem saúde mental, inclusão e aprendizagem nas escolas.',
      'Palestrante e autora dos livros Guia prático para famílias de vestibulandos (2023) e Quem é essa dupla? (2026).',
      'Acredita que saúde mental é assunto de todos e defende uma educação construída por profissionais autênticos, criativos e emocionalmente preparados para lidar com a complexidade humana da escola.',
    ],
  },
  {
    name: 'Dr. Cristian Haesbaert e Dra. Raquel Camelo',
    photo: 'assets/palestrantes/cristian-haesbaert-raquel-camelo.png',
    position: '50% 18%',
    compactTitle: true,
    details: [
      'Membros da Sociedade Brasileira de Cirurgia Plástica, Cristian Machado Haesbaert e Raquel Soares Camelo unem sólida formação especializada e experiência profissional à atuação em técnicas contemporâneas de cirurgia plástica, com destaque para a cirurgia de mama e o contorno corporal.',
      'Como integrantes do Real 24 Recovery e da Body Contour Academy, mantêm atuação vinculada à atualização científica e ao aprimoramento de técnicas em cirurgia de mama, recuperação pós-operatória e lipoaspiração de alta definição.',
    ],
  },
];

const Speakers = ({ showAllLink = true }) => {
  const [selectedSpeaker, setSelectedSpeaker] = useS(null);

  React.useEffect(() => {
    if (!selectedSpeaker) return undefined;
    const previousOverflow = document.body.style.overflow;
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') setSelectedSpeaker(null);
    };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', closeOnEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', closeOnEscape);
    };
  }, [selectedSpeaker]);

  return (
    <section id="palestrantes" className="section-speakers">
      <div className="container">
        <div className="eyebrow section-eyebrow">Professores e palestrantes</div>
        <h2 className="section-title">As <em>vozes</em> do XI CAMES</h2>
        <Divider/>
        <p className="section-intro">Conheça os convidados confirmados e acesse os perfis disponíveis.</p>
        <div className="speakers-grid">
          {speakers.filter((speaker) => speaker.visible !== false).map((speaker) => (
            <article key={speaker.name} className={`speaker-card ${speaker.details ? 'has-profile' : ''}`}>
              <div className="speaker-photo-wrap">
                <img
                  className={`speaker-photo ${speaker.photoClass || ''}`}
                  src={speaker.photo}
                  alt={`Foto de ${speaker.name}`}
                  width="420"
                  height="520"
                  loading="lazy"
                  style={{ objectPosition: speaker.position }}
                />
              </div>
              <h3 className="speaker-name">{speaker.name}</h3>
              {speaker.details && (
                <button
                  type="button"
                  className="speaker-profile-button"
                  aria-haspopup="dialog"
                  onClick={() => setSelectedSpeaker(speaker)}
                >
                  <span>Conhecer perfil</span>
                  <span aria-hidden="true">→</span>
                </button>
              )}
            </article>
          ))}
        </div>
        {showAllLink && (
          <div className="section-action">
            <a href="palestrantes.html" className="btn btn-ghost">Ver todos os convidados</a>
          </div>
        )}
      </div>

      {selectedSpeaker && (
        <div
          className="speaker-modal-backdrop"
          role="presentation"
          onMouseDown={(event) => event.target === event.currentTarget && setSelectedSpeaker(null)}
        >
          <article
            className="speaker-modal"
            role="dialog"
            aria-modal="true"
            aria-labelledby="speaker-modal-title"
            aria-describedby="speaker-modal-description"
          >
            <button
              type="button"
              className="speaker-modal-close"
              aria-label="Fechar perfil"
              onClick={() => setSelectedSpeaker(null)}
              autoFocus
            >
              ×
            </button>
            <div className="speaker-modal-photo-wrap">
              <img
                className={selectedSpeaker.photoClass || ''}
                src={selectedSpeaker.photo}
                alt={`Foto de ${selectedSpeaker.name}`}
                width="420"
                height="520"
                style={{ objectPosition: selectedSpeaker.position }}
              />
            </div>
            <div className="speaker-modal-content">
              <div className="eyebrow left">Perfil do convidado</div>
              <h2
                id="speaker-modal-title"
                className={selectedSpeaker.compactTitle ? 'speaker-modal-title-compact' : ''}
              >
                {selectedSpeaker.name}
              </h2>
              <div id="speaker-modal-description" className="speaker-modal-description">
                {selectedSpeaker.details.map((detail) => <p key={detail}>{detail}</p>)}
              </div>
            </div>
          </article>
        </div>
      )}
    </section>
  );
};

// ============== PROGRAMAÇÃO ==============
const Schedule = () => {
  const [day, setDay] = useS(0);
  const days = [
    { label: 'Dia 1 - 6 de novembro', title: 'Programação em breve' },
    { label: 'Dia 2 - 7 de novembro', title: 'Programação em breve' },
    { label: 'Dia 3 - 8 de novembro', title: 'Programação em breve' },
  ];

  return (
    <section id="programacao" className="section-schedule">
      <div className="container">
        <div className="eyebrow section-eyebrow">Programação</div>
        <h2 className="section-title">Três dias de <em>conhecimento</em></h2>
        <Divider/>
        <div className="sch-tabs" role="tablist" aria-label="Dias do congresso">
          {days.map((item, index) => (
            <button
              key={item.label}
              type="button"
              role="tab"
              aria-selected={day === index}
              aria-controls="schedule-panel"
              className={`sch-tab ${day === index ? 'active' : ''}`}
              onClick={() => setDay(index)}
            >
              <span className="sch-tab-label">{item.label}</span>
            </button>
          ))}
        </div>
        <div id="schedule-panel" className="schedule-empty" role="tabpanel">
          <span className="schedule-empty-mark" aria-hidden="true">XI</span>
          <h3>{days[day].title}</h3>
          <p>Os horários, palestras e atividades serão divulgados nos canais oficiais do XI CAMES.</p>
          <a href="https://instagram.com/11cames" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
            Acompanhar no Instagram
          </a>
        </div>
      </div>
    </section>
  );
};

// ============== INSCRIÇÕES ==============
const ticketModes = [
  {
    name: 'Ingresso Presencial — 2º Lote',
    type: 'presencial',
    price: '153,90',
    href: 'https://www.even3.com.br/auxcheckout/redirect?urlEvento=cames-xi-770767&idIngresso=928850&lang=pt',
    action: 'Garantir ingresso',
    promoLabel: '2º lote',
    compactName: true,
  },
  {
    name: 'On-line',
    type: 'online',
    price: '89,90',
    href: 'https://www.even3.com.br/auxcheckout/redirect?urlEvento=cames-xi-770767&idIngresso=931744&lang=pt',
    action: 'Garantir ingresso',
  },
];

const TicketModeIcon = ({ type }) => type === 'presencial' ? (
  <svg viewBox="0 0 48 48" aria-hidden="true">
    <path d="M8 19 24 9l16 10M12 21h24M15 21v16m9-16v16m9-16v16M10 39h28"/>
  </svg>
) : (
  <svg viewBox="0 0 48 48" aria-hidden="true">
    <rect x="7" y="9" width="34" height="25" rx="2"/>
    <path d="M18 40h12M24 34v6m-5-21 11 6-11 6V19Z"/>
  </svg>
);

const TicketModeCard = ({ mode }) => {
  const cardRef = React.useRef(null);

  React.useEffect(() => {
    if (mode.type !== 'presencial' || !cardRef.current || !('IntersectionObserver' in window)) return undefined;
    const card = cardRef.current;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        card.classList.remove('is-attention');
        void card.offsetWidth;
        card.classList.add('is-attention');
      } else {
        card.classList.remove('is-attention');
      }
    }, { threshold: 0.55 });

    observer.observe(card);
    return () => observer.disconnect();
  }, [mode.type]);

  return (
    <article ref={cardRef} className={`ticket-mode-card ticket-mode-${mode.type}`}>
      {mode.promoLabel && (
        <span className="ticket-promo-ribbon">{mode.promoLabel}</span>
      )}
      <div className="ticket-mode-icon"><TicketModeIcon type={mode.type}/></div>
      <div className="ticket-mode-label">Modalidade</div>
      <h3 className={`ticket-mode-name ${mode.compactName ? 'is-compact' : ''}`}>{mode.name}</h3>
      {mode.price && (
        <div className="ticket-mode-price">R$ {mode.price}</div>
      )}
      {mode.href && !mode.disabled ? (
        <a
          href={mode.href}
          className="btn btn-primary ticket-mode-button"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`${mode.action} — modalidade ${mode.name}`}
        >
          {mode.action}
        </a>
      ) : (
        <button type="button" className="btn ticket-mode-button" disabled aria-disabled="true">
          {mode.action || 'Inscrições em breve'}
        </button>
      )}
    </article>
  );
};

const ParticipationModes = () => (
  <div className="participation-modes">
    <h3>Participação presencial e on-line</h3>
    <p>
      O XI CAMES terá opções de participação presencial e on-line. Na modalidade presencial, o congressista
      acompanha as atividades no Centro Universitário Atenas, em Paracatu - MG. Na modalidade on-line, o acesso
      ocorrerá remotamente pelos canais que serão divulgados aos inscritos. Os detalhes de acesso de cada
      modalidade serão informados nos canais oficiais.
    </p>
  </div>
);

const RegisterCTA = () => (
  <section id="inscricoes" className="section-register">
    <div className="register-bg"><ParthenonSilhouette width={1400} opacity={0.08} color="#FBF6EB"/></div>
    <div className="container register-inner">
      <div className="eyebrow section-eyebrow light">Ingressos 2026</div>
      <h2 className="register-title">Inscreva-se no <em>XI CAMES</em></h2>
      <ParticipationModes/>
      <div className="ticket-mode-grid ticket-mode-grid-dark" aria-label="Modalidades de ingresso">
        {ticketModes.map((mode) => <TicketModeCard key={mode.type} mode={mode}/>)}
      </div>
    </div>
  </section>
);

// ============== PERGUNTAS FREQUENTES ==============
const FAQ = () => {
  const [open, setOpen] = useS(0);
  const faqs = [
    {
      q: 'Como funciona o credenciamento?',
      a: <>O credenciamento será realizado na entrada do Auditório Principal do Centro Universitário Atenas, antes do início das palestras e demais atividades do Congresso, que acontecerá nos dias 6, 7 e 8 de novembro. Em breve, divulgaremos mais informações sobre os horários e o procedimento. Fique atento aos nossos canais oficiais!</>,
    },
    {
      q: 'Há certificado de participação?',
      a: <>Sim! Os congressistas receberão um certificado de participação com carga horária de 40 horas complementares, mediante presença efetiva nos três dias de realização do CAMES XI.</>,
    },
    {
      q: 'Posso apresentar trabalho científico?',
      a: <>Sim! O CAMES XI contará com a submissão e apresentação de trabalhos científicos. Serão aceitas submissões de artigos completos e resumos, conforme as normas estabelecidas nos editais do congresso. <a href="submissao.html">Consulte a página de submissão.</a></>,
    },
  ];

  return (
    <section id="faq" className="section-faq">
      <div className="container">
        <div className="eyebrow section-eyebrow">Dúvidas</div>
        <h2 className="section-title">Perguntas <em>frequentes</em></h2>
        <Divider/>
        <div className="faq-list">
          {faqs.map((item, index) => {
            const isOpen = open === index;
            const answerId = `faq-answer-${index}`;
            return (
              <article key={item.q} className={`faq-item ${isOpen ? 'is-open' : ''}`}>
                <button
                  type="button"
                  className="faq-q"
                  aria-expanded={isOpen}
                  aria-controls={answerId}
                  onClick={() => setOpen(isOpen ? -1 : index)}
                >
                  <span className="faq-num">{String(index + 1).padStart(2, '0')}</span>
                  <span className="faq-text">{item.q}</span>
                  <span className="faq-icon" aria-hidden="true">{isOpen ? '−' : '+'}</span>
                </button>
                <div id={answerId} className="faq-a" hidden={!isOpen}>
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ============== GALERIA ==============
const Gallery = () => {
  const images = [
    { src: 'uploads/e8a9447d-32ac-4d0b-b428-6450b5740436.jpg', alt: 'Registro visual do Congresso Acadêmico de Medicina e Saúde' },
    { src: 'uploads/ef3de4c6-e4f3-4d85-b6ec-3385b1faa4d8.jpg', alt: 'Encontro acadêmico durante o CAMES' },
    { src: 'uploads/WhatsApp Image 2026-04-23 at 19.50.23.jpeg', alt: 'Atividade científica promovida pelo CAMES' },
  ];

  return (
    <section id="galeria" className="section-gallery">
      <div className="container">
        <div className="eyebrow section-eyebrow">Memória CAMES</div>
        <h2 className="section-title">Conhecimento que deixa <em>marcas</em></h2>
        <Divider/>
        <div className="gallery-grid">
          {images.map((image) => (
            <figure key={image.src} className="gallery-item">
              <img src={image.src} alt={image.alt} width="640" height="420" loading="lazy"/>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============== PATROCINADORES ==============
const sponsorLogos = [
  { src: 'assets/patrocinadores/grupo-medcof.png', alt: 'Grupo MedCof' },
  { src: 'assets/patrocinadores/cplastica-brasil.png', alt: 'Cplástica Brasil' },
  { src: 'assets/patrocinadores/delicia-de-paracatu.png', alt: 'Pão de Queijo Delícia de Paracatu' },
  { src: 'assets/patrocinadores/lagoinha-espaco-eventos.png', alt: 'Lagoinha Espaço para Eventos' },
];

const SponsorLogoSet = ({ duplicate = false }) => (
  <div className="sponsor-logo-set" aria-hidden={duplicate || undefined}>
    {sponsorLogos.map((logo) => (
      <figure key={`${duplicate ? 'copy' : 'original'}-${logo.src}`} className="sponsor-logo-card">
        <img
          src={logo.src}
          alt={duplicate ? '' : logo.alt}
          width="320"
          height="160"
          loading="lazy"
        />
      </figure>
    ))}
  </div>
);

const Sponsors = () => (
  <section id="patrocinadores" className="section-sponsors">
    <div className="container">
      <div className="eyebrow section-eyebrow">Apoio ao congresso</div>
      <h2 className="section-title">Patrocinadores</h2>
      <Divider/>
    </div>
    <div className="sponsor-marquee" tabIndex="0" aria-label="Faixa de logos dos patrocinadores">
      <div className="sponsor-track">
        <SponsorLogoSet/>
        <SponsorLogoSet duplicate/>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  About,
  AIScience,
  Speakers,
  Schedule,
  ParticipationModes,
  RegisterCTA,
  FAQ,
  Gallery,
  Sponsors,
  TicketModeCard,
  ticketModes,
});