function Equipe() {
  return (
    <section id="sobre" className="centered-sec">
      <div className="container">
        <div className="section-label"><span>Sobre a Equipe</span><span className="line"></span><span className="mono"></span></div>
        <Reveal>
          <span className="eyebrow">Quem está por trás da sua proteção</span>
        </Reveal>
        <Reveal delay={80}>
          <h2 className="h2" style={{maxWidth:"28ch"}}>Uma equipe formada por quem conhece <em>os dois lados</em>: a clínica e o processo.</h2>
        </Reveal>

        <TeamRoster />
      </div>
    </section>
  );
}

const TEAM = [
  {
    id:"giovani", name:"Dr. Giovani Botan", role:"Conselheiro Odontolegal",
    img:"assets/giovani.jpg", cro:"CRO-SP 137452",
    short:"Perito Criminal e ex-Tenente Dentista da PMESP.",
    bio:"Cirurgião-dentista formado pela UNESP, pós-graduado em Direito Odontológico pela Escola Paulista de Direito. Ex-Tenente Dentista da Polícia Militar do Estado de São Paulo (PMESP) e atualmente Perito Criminal. Atua no apoio técnico unindo experiência clínica e olhar pericial na proteção de dentistas e clínicas odontológicas.",
  },
  {
    id:"larissa", name:"Dra. Larissa Iceri", role:"Consultora Odontolegal",
    img:"assets/larissa.jpg", cro:"CRO-SP 160585",
    short:"Perita Judicial e especialista em Prótese Dentária.",
    bio:"Cirurgiã-dentista formada pela UNESP, Perita Judicial e especialista em Prótese Dentária. Atua na equipe com foco na análise técnica odontológica aplicada a contextos periciais e consultivos, combinando expertise clínica e experiência em perícia judicial.",
  },
  {
    id:"lara", name:"Dra. Lara Maria", role:"Consultora Odontolegal",
    img:"assets/lara.jpg",
    short:"Seis anos de clínica com experiência em responsabilidade técnica.",
    bio:"Cirurgiã-dentista formada pela Universidade Federal dos Vales do Jequitinhonha e Mucuri (UFVJM), em Diamantina/MG, e especialista em Endodontia. Atua há seis anos e já respondeu como responsável técnica, unindo a rotina clínica à gestão administrativa e legal do consultório. Atua como perita judicial e assistente técnica.",
  },
  {
    id:"nayra", name:"Dra. Nayra Cerila", role:"Consultora Odontolegal",
    img:"assets/nayra.jpg",
    short:"Especialista em Endodontia, pós-graduanda em Odontologia Legal.",
    bio:"Cirurgiã-dentista formada pela UNOCHAPECÓ (SC), com seis anos de atuação e especialização em Endodontia pelo IPEL, em Chapecó/SC. Cursa pós-graduação em Odontologia Legal pela São Leopoldo Mandic, em Campinas/SP, com foco no suporte técnico a outros profissionais da área. Atua como perita judicial e assistente técnica.",
  },
  {
    id:"jessica", name:"Dra. Jéssica Neves", role:"Consultora Odontolegal",
    img:"assets/jessica.jpg",
    short:"Clínica geral no SUS, em especialização em Odontologia Legal.",
    bio:"Cirurgiã-dentista graduada pela UNIFAGOC. Atua como clínica geral no SUS e cursa especialização em Odontologia Legal, aproximando a experiência do atendimento público da análise técnica e documental. Atua como perita judicial e assistente técnica.",
  },
  {
    id:"fabiola", name:"Dra. Fabíola Miranda", role:"Consultora Odontolegal",
    img:"assets/fabiola.jpg",
    short:"Quatro anos de clínica e pós-graduação em Odontologia Legal.",
    bio:"Cirurgiã-dentista formada pela Unichristus, em Fortaleza (CE), com quatro anos de atuação. Cursa pós-graduação em Odontologia Legal pela São Leopoldo Mandic, em Campinas (SP), dedicando-se à difusão de conhecimento técnico entre colegas de profissão. Atua como perita judicial e assistente técnica.",
  },
  {
    id:"juridico", name:"Suporte Jurídico", role:"Direito Odontológico",
    icon:true,
    short:"Advogados parceiros para as demandas que exigem atuação advocatícia.",
    bio:"Contamos com equipe jurídica especializada em Direito Odontológico para suporte nas demandas que exigem atuação advocatícia, garantindo que a defesa técnica e a defesa jurídica caminhem sempre alinhadas.",
  },
];

function TeamRoster() {
  const [open, setOpen] = React.useState(null);
  const [shown, setShown] = React.useState(false);
  const active = TEAM.find(function(m){ return m.id === open; });
  const people = TEAM.filter(function(m){ return !m.icon; });
  return (
    <div className={"roster" + (shown ? " is-shown" : "")}>
      <div className="roster-teaser" hidden={shown}>
        <div className="roster-stack">
          {people.map(function(m, i){
            return (
              <span className="roster-chip" key={m.id} style={{zIndex: people.length - i}}>
                <img src={ASSET(m.id+"Img", m.img)} alt="" width="52" height="52" />
              </span>
            );
          })}
        </div>
        <p className="roster-teaser-txt">Equipe Técnica de Especialistas</p>
        <button type="button" className="roster-reveal-btn" onClick={function(){ setShown(true); }}>
          <span>Conhecer a equipe</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
        </button>
      </div>
      <div className="roster-row" aria-hidden={!shown}>
        {TEAM.map(function(m, i){
          const isOpen = open === m.id;
          return (
            <div key={m.id}>
              <button type="button" className={"roster-item" + (isOpen ? " is-open" : "")} aria-expanded={isOpen} onClick={function(){ setOpen(isOpen ? null : m.id); }}>
                <span className="roster-av">
                  {m.icon
                    ? <Icon.Scale style={{width:30,height:30,color:"var(--gold)"}} />
                    : <img src={ASSET(m.id+"Img", m.img)} alt={m.name} width="112" height="112" />}
                </span>
                <span className="roster-name">{m.name}</span>
                <span className="roster-role">{m.role}</span>
                <span className="roster-more">{isOpen ? "Fechar" : "Ver perfil"}</span>
              </button>
            </div>
          );
        })}
      </div>
      <div className={"roster-panel" + (active ? " is-open" : "")} aria-live="polite">
        {active && (
          <div className="roster-panel-in" key={active.id}>
            <p className="roster-short">{active.short}</p>
            <p className="roster-bio">{active.bio}</p>
            {active.cro && <div className="team-badges"><span>{active.cro}</span></div>}
          </div>
        )}
      </div>
      {shown && (
        <button type="button" className="roster-collapse" onClick={function(){ setShown(false); setOpen(null); }}>Recolher</button>
      )}
    </div>
  );
}

const FAQ_CATS = [
  { id:"geral", label:"Perguntas Gerais" },
  { id:"dentistas", label:"Para Dentistas" },
  { id:"advogados", label:"Para Advogados" },
];

const FAQ_DATA = [
  { cat:"geral", q:"O que faz uma assessoria odontolegal?", a:"A assessoria odontolegal faz a ponte de segurança entre a Odontologia e o Direito. Traduzimos a complexidade clínica em termos jurídicos e vice-versa, atuando na prevenção de processos (blindagem documental), na formulação de pareceres de viabilidade e na defesa técnica em ações judiciais ou éticas." },
  { cat:"geral", q:"Qual a diferença entre o Perito do Juiz e o Assistente Técnico Odontolegal?", a:"O Perito Judicial é nomeado pelo juiz e deve ser totalmente neutro, respondendo ao tribunal. Já o Assistente Técnico é o profissional contratado por você (ou pelo seu advogado) para defender tecnicamente os seus interesses, acompanhar a perícia, formular quesitos estratégicos e garantir que nenhum detalhe clínico crucial seja negligenciado." },
  { cat:"geral", q:"O atendimento é feito de forma presencial ou online?", a:"Nosso modelo é híbrido e altamente flexível. Toda a etapa estratégica, que envolve a análise minuciosa de prontuários, a formulação de quesitos jurídicos, a redação de pareceres técnicos e a revisão de contratos, é realizada 100% online, com reuniões digitais que garantem agilidade e comodidade, não importa onde você esteja. Para diligências que exigem presença física, como o acompanhamento no ato da perícia judicial (exame clínico do paciente), avaliamos a disponibilidade da equipe e a viabilidade técnica conforme a localização do acionamento, garantindo que a defesa dos seus direitos seja feita com o máximo de excelência." },
  { cat:"geral", q:"Em qual momento é ideal contratar a assessoria odontolegal?", a:"O cenário perfeito é a prevenção, blindando sua documentação clínica antes que qualquer desentendimento com o paciente aconteça. Contudo, se você já recebeu uma reclamação formal, uma notificação do CRO ou uma citação judicial, o momento é agora. Quanto mais cedo entrarmos na análise do caso, mais tempo teremos para encontrar falhas técnicas na acusação e estruturar uma linha de defesa sólida antes que os prazos jurídicos se esgotem." },
  { cat:"geral", q:"A assessoria atende a todas as especialidades da Odontologia?", a:"Sim. Atuamos em todas as frentes da odontologia clínica e estética. Nossa assessoria é desenhada sob medida tanto para a rotina do clínico geral quanto para as especialidades que hoje lideram o ranking de processos judiciais, como Harmonização Orofacial (HOF), Implantodontia, Ortodontia e Cirurgia Bucomaxilofacial." },
  { cat:"geral", q:"Os serviços da assessoria odontolegal substituem o trabalho de um advogado?", a:"Não substitui, eles se complementam. O advogado é o especialista nas leis e no rito processual (quem fala em juízo). Nós somos os especialistas na ciência odontológica. A assessoria funciona como o combustível técnico do advogado: traduzimos o erro ou o acerto clínico em provas irrefutáveis para que ele construa uma defesa jurídica imbatível." },
  { cat:"dentistas", q:"Já tenho seguro de responsabilidade civil. Por que preciso de assessoria odontolegal?", a:"O seguro reembolsa prejuízos financeiros e custos advocatícios, mas não evita o processo nem defende a sua reputação técnica. A assessoria atua antes, blindando seus documentos para que o processo sequer tenha força jurídica, e durante, fornecendo a defesa técnica que o seguro e o advogado tradicional não conseguem estruturar sozinhos." },
  { cat:"dentistas", q:"Fui notificado de um processo por um paciente. Qual é o primeiro passo?", a:"Não responda ao paciente por impulso e não altere nenhum documento do prontuário. Entre em contato conosco imediatamente. Analisaremos toda a documentação clínica existente para estruturar a melhor estratégia de defesa técnica junto ao seu advogado, antes mesmo do prazo de contestação." },
  { cat:"dentistas", q:"O que está incluso na Regularização Documental da clínica?", a:"Não entregamos modelos prontos de internet. Analisamos a rotina da sua clínica e criamos Contratos de Prestação de Serviços, Termos de Consentimento Livre e Esclarecido (TCLE), prontuários e anamneses totalmente personalizados e adequados ao Código de Defesa do Consumidor (CDC) e às normas do CFO." },
  { cat:"advogados", q:"Como um parecer odontolegal pode mudar o rumo da minha ação?", a:"Advogados e juízes dominam a lei, mas não a clínica odontológica. Um parecer técnico prévio avalia a real viabilidade do caso, seja para defender o dentista ou para propor uma ação fundamentada para o paciente, evitando aventuras jurídicas e entregando ao juiz argumentos científicos claros e incontestáveis." },
  { cat:"advogados", q:"Vocês auxiliam na formulação de quesitos e na manifestação do laudo?", a:"Sim. Elaboramos quesitos periciais estratégicos (iniciais e complementares) para guiar a perícia judicial e, após a entrega do laudo pelo perito do juiz, fornecemos o subsídio técnico para você impugnar manifestações desfavoráveis ou ratificar os pontos positivos da tese." },
  { cat:"advogados", q:"A assessoria atua só na defesa do profissional ou também em casos de erro odontológico (acusação)?", a:"Atuamos em ambas as frentes. Na defesa, estruturamos o alicerce técnico que comprova a boa prática do profissional. Na acusação, auditamos os documentos fornecidos pelo paciente para apontar com precisão científica onde ocorreu o nexo causal e a falha na prestação do serviço, dando robustez à petição inicial." },
];

function FAQ() {
  const [cat, setCat] = React.useState("geral");
  const [open, setOpen] = React.useState(0);
  const items = FAQ_DATA.filter((f) => f.cat === cat);
  const pick = (id) => { setCat(id); setOpen(0); };
  return (
    <section className="tight centered-sec">
      <div className="container">
        <div className="section-label"><span>FAQ</span><span className="line"></span><span className="mono"></span></div>
        <Reveal><h2 className="h2" style={{maxWidth:"22ch"}}>Dúvidas <em>frequentes.</em></h2></Reveal>
        <Reveal delay={60}>
          <div className="faq-tabs" role="tablist" aria-label="Categorias de perguntas">
            {FAQ_CATS.map((c)=>(
              <button key={c.id} role="tab" aria-selected={cat===c.id}
                className={"faq-tab"+(cat===c.id?" active":"")} onClick={()=>pick(c.id)}>
                {c.label}
              </button>
            ))}
          </div>
        </Reveal>
        <div className="faq" style={{marginTop:18}}>
          {items.map((f,i)=>(
            <Reveal key={cat+"-"+i} delay={i*40}>
              <div className={"faq-item"+(open===i?" open":"")}>
                <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
                  <span>{f.q}</span><span className="plus" aria-hidden="true">+</span>
                </button>
                <div className="faq-a"><div><div className="faq-a-inner">{f.a}</div></div></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAFinal({ glow }) {
  return (
    <section id="contato">
      <div className="container">
        <Reveal>
          <div className="cta-final" data-glow={glow ? "on" : "off"}>
            <span className="eyebrow">Próximo passo</span>
            <h2 className="h" style={{color:"#FFFFFF"}}>Mitigue riscos legais e fortaleça o seu consultório.</h2>
            <p className="lede">Entenda as vulnerabilidades da sua documentação atual e receba um plano de ação claro para proteger seu negócio.</p>
            <div className="row">
              <a className="btn btn-primary" href="atendimento.html">
                Quero proteger minha clínica
                <span className="arr">→</span>
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div>
            <a href="#top" className="nav-logo" style={{textDecoration:"none"}}>
              <span className="mark"><img src={ASSET("logoImg","assets/logo-mind-opt.png")} alt="MIND Odontologia Legal" /></span>
              <span className="lo">
                <b className="wm">MIND</b>
                <small>Odontologia Legal</small>
              </span>
            </a>
            <p className="tagline">Proteção odontolegal completa para sua clínica, antes e depois do problema.</p>
            <div className="foot-socials">
              <a href="#" target="_blank" rel="noopener" aria-label="Instagram"><Icon.Instagram style={{width:18,height:18}}/></a>
              <a href="#" target="_blank" rel="noopener" aria-label="E-mail"><Icon.Mail style={{width:18,height:18}}/></a>
            </div>
          </div>
          <div>
            <h5>Navegação</h5>
            <ul>
              <li><a href="#servicos">Serviços</a></li>
              <li><a href="#sobre">Sobre</a></li>
              <li><a href="atendimento.html">Contato</a></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href={WHATSAPP_LINK} target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="atendimento.html">Falar com especialista</a></li>
              <li><a href="#">São Paulo · SP</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 · MIND Odontologia Legal · Todos os direitos reservados</span>
          <span className="legal">Aviso legal: Os serviços prestados constituem assessoria técnica odontolegal e não substituem a representação por advogado. Atuamos em conjunto com a equipe jurídica do cliente quando necessário.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Equipe, FAQ, CTAFinal, Footer });