/* ============================================================
   Sections — Dra. Aline LP
   Exposes: UrgencyBar, Nav, Hero, Pain, Areas, About, Process,
            FinalCTA, Footer, FabWhatsApp, MobileMenu
   ============================================================ */

const { useState, useEffect, useRef } = React;

const WA_NUMBER = "5566996288612";
const WA_MSG = "Ol%C3%A1%20Dra.%20Aline%2C%20preciso%20de%20uma%20an%C3%A1lise%20de%20viabilidade%20para%20um%20processo%20judicial.";
const WA_URL = `https://wa.me/${WA_NUMBER}?text=${WA_MSG}`;

/* ---------- Icons ---------- */
const IconWA = ({ className = "" }) =>
<svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
    <path d="M17.6 6.32A7.85 7.85 0 0 0 12 4a7.94 7.94 0 0 0-6.78 12L4 20l4.13-1.08A7.93 7.93 0 0 0 12 19.94 7.94 7.94 0 0 0 19.94 12a7.85 7.85 0 0 0-2.34-5.68ZM12 18.6a6.6 6.6 0 0 1-3.36-.92l-.24-.15-2.45.64.65-2.39-.16-.25A6.6 6.6 0 1 1 12 18.6Zm3.62-4.93c-.2-.1-1.17-.58-1.36-.64s-.31-.1-.45.1-.51.64-.62.77-.23.15-.43.05a5.4 5.4 0 0 1-1.6-.99 6 6 0 0 1-1.1-1.37c-.12-.2 0-.3.09-.4l.3-.34a1.3 1.3 0 0 0 .2-.34.36.36 0 0 0 0-.34c-.05-.1-.45-1.07-.6-1.47s-.32-.32-.45-.32h-.39a.74.74 0 0 0-.54.25 2.27 2.27 0 0 0-.7 1.69 3.95 3.95 0 0 0 .82 2.08 9 9 0 0 0 3.43 3.04c.48.2.85.33 1.14.42a2.75 2.75 0 0 0 1.26.08 2.07 2.07 0 0 0 1.35-.95 1.7 1.7 0 0 0 .11-.95c-.05-.1-.18-.15-.38-.24Z" />
  </svg>;


const IconArrow = ({ className = "" }) =>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>;


const IconPlus = ({ className = "" }) =>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className={className} aria-hidden="true">
    <path d="M12 5v14M5 12h14" />
  </svg>;


const IconClose = ({ className = "" }) =>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className={className} aria-hidden="true">
    <path d="M6 6l12 12M18 6 6 18" />
  </svg>;


const IconBurger = ({ className = "" }) =>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className={className} aria-hidden="true">
    <path d="M4 7h16M4 12h16M4 17h16" />
  </svg>;


/* ---------- Premium WhatsApp CTA ---------- */
function WhatsappPremium({ label = "Falar com a Dra. Aline", sub = "Análise de viabilidade · 24h", href = WA_URL }) {
  return (
    <a href={href} target="_blank" rel="noopener" className="btn-wa-premium" aria-label={label + ' — WhatsApp'}>
      <span className="btn-wa-icon" aria-hidden="true"><IconWA /></span>
      <span className="btn-wa-content">
        <span className="btn-wa-label">{label}</span>
        <span className="btn-wa-sub">{sub}</span>
      </span>
      <span className="btn-wa-arrow" aria-hidden="true"><IconArrow /></span>
    </a>);

}

/* ---------- Reveal hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach((el) => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Urgency bar ---------- */
function UrgencyBar() {
  return (
    <div className="urgency-bar" role="region" aria-label="Aviso de prioridade">
      <div className="container">
        <span className="pulse-dot" aria-hidden="true"></span>
        <span>
          <strong>Atendimento prioritário</strong> para casos com prazo pericial iminente — análise de viabilidade em até 24h.
        </span>
      </div>
    </div>);

}

/* ---------- Nav ---------- */
function Nav({ onOpenMenu }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand" aria-label="Dra. Aline Letícia Pedrosa — Página inicial">
          <span className="brand-mark">Dra. Aline Pedrosa</span>
          <span className="brand-sub">Perícia Médica · Psiquiatria · Medicina do Trabalho</span>
        </a>
        <nav className="nav-links" aria-label="Navegação primária">
          <a href="#atuacao">Áreas de Atuação</a>
          <a href="#sobre">Sobre a Dra. Aline Letícia</a>
          <a href="#processo">Como Atendemos</a>
          <a href="#faq">Perguntas</a>
          <a href="#contato">Contato</a>
        </nav>
        <div className="nav-cta">
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary">
            <IconWA className="wa-icon" />
            <span className="btn-text">Falar no WhatsApp</span>
          </a>
          <button type="button" className="nav-burger" aria-label="Abrir menu" onClick={onOpenMenu}>
            <IconBurger />
          </button>
        </div>
      </div>
    </header>);

}

function MobileMenu({ open, onClose }) {
  useEffect(() => {
    if (open) document.body.style.overflow = 'hidden';else
    document.body.style.overflow = '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  return (
    <div className={`mobile-menu ${open ? 'open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
      <div className="mobile-menu-head">
        <div className="brand">
          <span className="brand-mark">Dra. Aline Pedrosa</span>
          <span className="brand-sub">Perícia Médica · Psiquiatria · Medicina do Trabalho</span>
        </div>
        <button type="button" className="mobile-menu-close" aria-label="Fechar menu" onClick={onClose}>
          <IconClose />
        </button>
      </div>
      <nav className="mobile-menu-list" aria-label="Navegação mobile">
        <a href="#atuacao" onClick={onClose}><span className="num">01</span>Áreas de Atuação</a>
        <a href="#sobre" onClick={onClose}><span className="num">02</span>Sobre a Dra. Aline Letícia</a>
        <a href="#processo" onClick={onClose}><span className="num">03</span>Como Atendemos</a>
        <a href="#faq" onClick={onClose}><span className="num">04</span>Perguntas Frequentes</a>
        <a href="#contato" onClick={onClose}><span className="num">05</span>Contato</a>
      </nav>
      <div className="mobile-menu-foot">
        <WhatsappPremium label="Falar com a Dra. Aline" sub="Resposta em até 24h" />
      </div>
    </div>);

}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grid-lines" aria-hidden="true"></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text-top reveal">
            <div className="hero-meta">
              <span className="bar"></span>
              <span>Assistência Técnica em Processos Judiciais</span>
            </div>
            <h1 style={{ color: "rgb(14, 27, 46)" }}>
              Perita Assistente em Perícia Médica <em>Psiquiátrica</em> — Todo o Brasil.
            </h1>
            <p className="hero-sub">
              Atuação especializada em perícias médicas psiquiátricas e medicina do trabalho. A robustez técnica que o seu processo exige — formulada por uma médica perita com formação na intersecção entre saúde mental e direito.
            </p>
          </div>

          <div className="hero-portrait-wrap reveal reveal-delay-2">
            <div className="hero-portrait">
              <picture>
                <source srcSet="assets/img/aline-06338.webp" type="image/webp" />
                <img src="assets/img/aline-06338.jpg" alt="Dra. Aline Letícia Pedrosa, médica perita em psiquiatria e medicina do trabalho" loading="eager" />
              </picture>
            </div>
            <div className="hero-portrait-tag">Dra. Aline · Perícia &amp; Medicina do Trabalho</div>
          </div>

          <div className="hero-text-bottom reveal">
            <div className="hero-actions">
              <WhatsappPremium label="Falar com a Dra. Aline" sub="Análise de viabilidade" />
            </div>
            <span className="btn-sub-line">Resposta em até 24h · Atendimento priorizado para prazos curtos</span>

            <div className="hero-credentials">
              <div className="cred">
                <div className="cred-label">PÓS-GRADUADA</div>
                <div className="cred-value">Psiquiatria · Medicina do Trabalho</div>
              </div>
              <div className="cred">
                <div className="cred-label">Atuação</div>
                <div className="cred-value">Perita Assistente em Processos Judiciais</div>
              </div>
              <div className="cred">
                <div className="cred-label">Cobertura</div>
                <div className="cred-value">Atendimento em todo o Brasil</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Pain / Solution ---------- */
function Pain() {
  return (
    <section className="pain dark" id="dor">
      <div className="container">
        <div className="section-ridge reveal">
          <span className="bar"></span>
          <span>I · A perícia é o coração do processo</span>
        </div>
        <div className="pain-grid">
          <h2 className="pain-lede reveal">
            O erro na perícia médica pode <em>custar o sucesso</em> da sua ação judicial.
          </h2>
          <div className="pain-body reveal reveal-delay-1">
            <p>
              Um laudo mal conduzido não apenas enfraquece o processo — ele entrega munição para o lado contrário.
              Saúde mental e medicina do trabalho têm linguagem própria, quesitos específicos e nexos que um olhar generalista não alcança. Aqui cada perícia é conduzida por quem vive essas duas áreas na prática clínica diária.
            </p>
            <p>
              Atuamos lado a lado com o advogado em três frentes:
            </p>
          </div>
        </div>

        <div className="pain-solutions">
          <div className="pain-solution reveal">
            <div className="num" style={{ fontSize: "14px" }}>01 · Pré-perícia</div>
            <h3>Formulação de Quesitos Estratégicos</h3>
            <p>Perguntas cirúrgicas para o perito do juiz, construídas com base científica para não deixar margem a respostas evasivas.</p>
          </div>
          <div className="pain-solution reveal reveal-delay-1">
            <div className="num" style={{ fontSize: "14px" }}>02 · Durante</div>
            <h3>Acompanhamento Presencial</h3>
            <p>Presença técnica como Perita Assistente no dia da perícia, garantindo que o exame seja justo, completo e tecnicamente correto.</p>
          </div>
          <div className="pain-solution reveal reveal-delay-2">
            <div className="num" style={{ fontSize: "14px" }}>03 · Pós-laudo</div>
            <h3>Parecer Técnico Divergente</h3>
            <p>Quando o laudo oficial é desfavorável ou repleto de erros, construímos a contra-argumentação científica para impugnar e reverter o cenário.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Áreas de atuação (accordion) ---------- */
const AREAS = [
{
  id: 'trabalho',
  title: 'Direito do Trabalho',
  tag: 'Nexo causal · Saúde mental',
  p: 'Perícias e pareceres em casos onde o ambiente laboral impactou a saúde mental do trabalhador. Atuação técnica em comprovação de nexo causal entre as condições de trabalho e o adoecimento psíquico.',
  items: [
  'Síndrome de Burnout — caracterização e nexo ocupacional',
  'Depressão crônica e transtorno de adaptação',
  'Transtorno de ansiedade generalizada (TAG)',
  'Acidentes de trabalho com sequela psíquica',
  'Assédio moral e estresse pós-traumático ocupacional']

},
{
  id: 'civil',
  title: 'Direito Civil & Família',
  tag: 'Capacidade civil · Disputas',
  p: 'Avaliações psiquiátricas em processos que dependem da análise da sanidade mental — interdição, curatela, validade de atos jurídicos e disputas familiares.',
  items: [
  'Interdição e curatela (avaliação de capacidade civil)',
  'Anulação de testamentos e atos jurídicos',
  'Disputas de guarda sob ótica da saúde mental',
  'Investigação de alienação parental',
  'Capacidade para casamento, divórcio e adoções']

},
{
  id: 'previdenciario',
  title: 'Direito Previdenciário (INSS)',
  tag: 'Benefícios · Revisões',
  p: 'Atuação como assistente técnica em perícias previdenciárias, fundamentando tecnicamente a incapacidade laboral por questões psiquiátricas — frente a indeferimentos ou revisões.',
  items: [
  'Auxílio por incapacidade temporária (B31)',
  'Aposentadoria por incapacidade permanente (B32)',
  'Auxílio-acidente acidentário (B91/B92)',
  'Revisão de benefícios negados por questão psiquiátrica',
  'Pareceres para BPC/LOAS']

},
{
  id: 'criminal',
  title: 'Medicina do Trabalho & Incapacidade',
  tag: 'Nexo ocupacional · Capacidade laboral',
  p: 'Avaliações técnicas sobre capacidade e incapacidade laboral com rigor científico. Pareceres fundamentados na relação entre condições de trabalho, saúde e aptidão para o exercício das atividades profissionais.',
  items: [
  'Avaliação de capacidade e incapacidade laboral',
  'Nexo técnico epidemiológico previdenciário (NTEP)',
  'LTCAT — Laudo das Condições Ambientais do Trabalho',
  'PPP — Perfil Profissiográfico Previdenciário',
  'Doenças ocupacionais e reintegração ao trabalho']

}];


function Areas() {
  const [open, setOpen] = useState('trabalho');
  return (
    <section className="areas" id="atuacao">
      <div className="container">
        <div className="areas-header">
          <h2 className="reveal">
            Defesa técnica especializada onde o direito <em>encontra a medicina</em>.
          </h2>
          <p className="reveal reveal-delay-1">
            Quatro áreas de atuação onde a perícia psiquiátrica e a medicina do trabalho são frequentemente o ponto de virada do processo.
          </p>
        </div>

        <div className="areas-list reveal">
          {AREAS.map((a, i) => {
            const isOpen = open === a.id;
            return (
              <div className={`area-item ${isOpen ? 'open' : ''}`} key={a.id}>
                <button
                  type="button"
                  className="area-head"
                  aria-expanded={isOpen}
                  aria-controls={`area-body-${a.id}`}
                  onClick={() => setOpen(isOpen ? null : a.id)}>
                  
                  <span className="area-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="area-title">{a.title}</span>
                  <span className="area-tag" style={{ fontSize: "13px" }}>{a.tag}</span>
                  <span className="area-toggle" aria-hidden="true"><IconPlus /></span>
                </button>
                <div className="area-body" id={`area-body-${a.id}`} role="region">
                  <div>
                    <div className="area-body-inner">
                      <div className="spacer"></div>
                      <div>
                        <p>{a.p}</p>
                      </div>
                      <ul>
                        {a.items.map((it, idx) => <li key={idx}>{it}</li>)}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>);

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

}

/* ---------- About ---------- */
function About() {
  return (
    <section className="about dark" id="sobre">
      <div className="container">
        <div className="about-grid">
          <div className="about-portrait-wrap reveal">
            <div className="about-portrait">
              <picture>
                <source srcSet="assets/img/aline-06390.webp" type="image/webp" />
                <img src="assets/img/aline-06390.jpg" alt="Dra. Aline Letícia Pedrosa, retrato editorial" loading="lazy" />
              </picture>
              <div className="about-frame-tag">Dra. Aline L. Pedrosa · 2025</div>
            </div>
          </div>
          <div className="about-text">
            <div className="section-ridge reveal">
              <span className="bar"></span>
              <span>II · Autoridade Técnica</span>
            </div>
            <h2 className="reveal">
              Dra. Aline <em>Letícia Pedrosa</em>
            </h2>
            <div className="role reveal reveal-delay-1" style={{ fontSize: "12px" }}>Médica · Pós-Graduada em Psiquiatria pelo Instituto Albert Einstein e em Medicina do Trabalho · Mais de 5 anos de atuação clínica em saúde mental</div>
            <p className="reveal reveal-delay-1">
              Com formação voltada para a intersecção entre a medicina e o direito, a Dra. Aline atua de forma analítica e estratégica como assistente técnica em perícias médicas judiciais.
            </p>
            <p className="reveal reveal-delay-2">
              Sua expertise une o profundo conhecimento dos transtornos da mente — pela Psiquiatria — ao rigor científico da Medicina do Trabalho. O objetivo é um só: traduzir a verdade médica de forma clara, técnica e incontestável dentro dos autos do processo.
            </p>

            <div className="about-credentials reveal reveal-delay-2">
              <div className="about-cred">
                <div className="cred-label" style={{ fontSize: "12px" }}>Formação</div>
                <div className="cred-value">Medicina</div>
              </div>
              <div className="about-cred">
                <div className="cred-label" style={{ fontSize: "12px" }}>ATENDIMENTO ONLINE</div>
                <div className="cred-value">Para todo Brasil.

                </div>
              </div>
              <div className="about-cred">
                <div className="cred-label" style={{ fontSize: "12px" }}>Pós-Graduação</div>
                <div className="cred-value">Psiquiatria · Instituto Albert Einstein<br />Medicina do Trabalho</div>
              </div>
              <div className="about-cred">
                <div className="cred-label" style={{ fontSize: "12px" }}>Registro Profissional</div>
                <div className="cred-value" style={{ fontFamily: "Cormorant" }}>CRM/MT 13723</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);}

/* ---------- Process ---------- */
function Process() {
  return (
    <section className="process" id="processo">
      <div className="container">
        <div className="process-header">
          <div className="section-ridge reveal" style={{ justifyContent: 'center' }}>
            <span className="bar"></span>
            <span style={{ fontSize: "12px" }}>III · Fluxo de Atendimento</span>
            <span className="bar"></span>
          </div>
          <h2 className="reveal">
            Previsibilidade técnica em <em>três etapas</em>.
          </h2>
          <p className="reveal reveal-delay-1">
            Um processo claro do primeiro contato à atuação pericial — para que o advogado saiba exatamente o que esperar.
          </p>
        </div>

        <div className="process-steps reveal">
          <div className="process-step">
            <div className="step-num">01</div>
            <h3>Contato Inicial</h3>
            <p>Você apresenta o resumo do caso via WhatsApp ou e-mail. Resposta em até 24h, com atendimento priorizado para prazos iminentes.</p>
            <div className="step-arrow"><IconArrow style={{ width: 14, height: 14 }} /></div>
          </div>
          <div className="process-step">
            <div className="step-num">02</div>
            <h3>Análise de Viabilidade</h3>
            <p>Avaliação preliminar da documentação médica existente — laudos, prontuários, exames — para definir a estratégia técnica do caso.</p>
            <div className="step-arrow"><IconArrow style={{ width: 14, height: 14 }} /></div>
          </div>
          <div className="process-step">
            <div className="step-num">03</div>
            <h3>Planejamento Estratégico</h3>
            <p>Elaboração de quesitos, preparação do paciente quando aplicável, acompanhamento do ato pericial e/ou produção de parecer técnico.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="final-cta dark" id="contato">
      <div className="final-cta-img" aria-hidden="true">
        <picture>
          <source srcSet="assets/img/aline-06439.webp" type="image/webp" />
          <img src="assets/img/aline-06439.jpg" alt="" loading="lazy" />
        </picture>
      </div>
      <div className="container">
        <div className="final-cta-inner">
          <div className="section-ridge reveal">
            <span className="bar"></span>
            <span style={{ fontSize: "12px" }}>IV · Fechamento</span>
          </div>
          <h2 className="reveal">
            Não deixe o resultado da sua ação ao <em>acaso</em>.
          </h2>
          <p className="reveal reveal-delay-1">
            Na maioria dos casos, o laudo psiquiátrico é o documento que decide tudo. Avaliação clínica completa, documentação robusta e laudo estruturado para homologação. O laudo que falta para o seu processo avançar.
          </p>
          <div className="actions reveal reveal-delay-2">
            <WhatsappPremium label="Falar com a Dra. Aline agora" sub="Atendimento priorizado · Prazos curtos" />
            <a href="mailto:contato@draalinepedrosa.com.br" className="btn btn-ghost btn-lg">
              Enviar e-mail
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" role="contentinfo">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <span className="brand-mark">Dra. Aline Letícia Pedrosa</span>
              <span className="brand-sub">Perícia Médica · Psiquiatria · Medicina do Trabalho</span>
            </div>
            <p>
              Assistência técnica em perícias médicas judiciais. Atendimento a advogados e clientes em todo o Brasil, com foco em saúde mental e medicina do trabalho.
            </p>
          </div>
          <div className="footer-col">
            <h4>Navegação</h4>
            <ul>
              <li><a href="#atuacao">Áreas de Atuação</a></li>
              <li><a href="#sobre">Sobre a Dra. Aline Letícia</a></li>
              <li><a href="#processo">Como Atendemos</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contato</h4>
            <ul>
              <li><a href={WA_URL} target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="mailto:contato@draalinepedrosa.com.br">contato@draalinepedrosa.com.br</a></li>
              <li><a href="https://www.instagram.com/dra.alineleticia/" target="_blank" rel="noopener">Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-legal">
          <div className="crm">DRA. ALINE LETÍCIA PEDROSA · CRM/UF 13723</div>
          <div>© 2026 · De acordo com as normas de publicidade do CFM · <a href="/politica-de-privacidade.html" style={{ opacity: 0.7 }}>Política de Privacidade</a></div>
        </div>
        <div className="footer-credit">
          <a href="https://wa.me/5566999596537?text=Ol%C3%A1%20Marcioeste%2C%20gostaria%20de%20um%20or%C3%A7amento%20para%20cria%C3%A7%C3%A3o%20de%20site." target="_blank" rel="noopener">
            <span className="cred-prefix">Designed by</span>
            <span className="cred-name">Marcioeste</span>
            <span className="cred-arrow" aria-hidden="true">↗</span>
          </a>
        </div>
      </div>
    </footer>);

}

/* ---------- Floating WhatsApp ---------- */
function FabWhatsapp() {
  return (
    <a href={WA_URL} target="_blank" rel="noopener" className="fab-whatsapp" aria-label="Conversar no WhatsApp">
      <IconWA />
      <span className="fab-label">Análise de viabilidade · 24h</span>
    </a>);

}

/* ---------- FAQ ---------- */
const FAQS = [
{
  id: 'diferenca',
  q: 'Qual a diferença entre o perito do juiz e a perita assistente?',
  a: 'O perito do juiz é nomeado pelo tribunal para emitir o laudo oficial — ele é neutro e serve ao processo. A perita assistente é contratada por uma das partes (você, advogado) para defender tecnicamente os interesses do seu cliente. A Dra. Aline atua tanto como médica perita judicial — nomeada pelo juízo para emitir o laudo oficial — quanto como assistente técnica contratada pela parte: analisa laudos, aponta falhas técnicas, formula quesitos estratégicos e, quando necessário, produz um parecer divergente para contestar conclusões equivocadas.'
},
{
  id: 'andamento',
  q: 'Posso contratar a Dra. Aline se o processo já está em andamento?',
  a: 'Sim. A assistência técnica pode ser contratada em qualquer fase do processo — antes da perícia (para formular quesitos), durante (acompanhamento presencial do exame) ou após o laudo (para análise crítica e parecer divergente). Quanto antes o advogado entrar em contato, mais estratégias ficarão disponíveis. Casos com prazo iminente têm atendimento priorizado.'
},
{
  id: 'documentos',
  q: 'Quais documentos preciso enviar para a análise de viabilidade?',
  a: 'Para a análise inicial são suficientes: o resumo do caso (pode ser via WhatsApp), os laudos médicos e psiquiátricos já existentes, prontuários relevantes e, se disponíveis, os quesitos já elaborados. Não é necessário enviar o processo completo nessa etapa. A análise de viabilidade é gratuita e retornada em até 24 horas.'
},
{
  id: 'cobertura',
  q: 'A Dra. Aline atende casos fora do Mato Grosso?',
  a: 'Sim, o atendimento é para todo o Brasil. Pareceres técnicos e análise de laudos são realizados de forma remota, com entrega do documento assinado digitalmente. O acompanhamento presencial como perita assistente no dia do exame está disponível mediante deslocamento — a logística e os custos são definidos caso a caso. A maioria dos atendimentos ocorre de forma 100% remota sem prejuízo técnico.'
},
{
  id: 'prazo',
  q: 'Qual o prazo médio para entrega de um parecer técnico?',
  a: 'O prazo padrão para um parecer técnico completo é de 5 a 10 dias úteis após o recebimento de toda a documentação. Para casos com urgência judicial declarada — prazo de contestação iminente, audiência marcada — o prazo pode ser reduzido mediante análise. A Dra. Aline mantém agenda com reserva para atendimentos emergenciais. Informe sempre o prazo processual no primeiro contato.'
},
{
  id: 'laudo-desfavoravel',
  q: 'O que acontece quando o laudo oficial é desfavorável ao meu cliente?',
  a: 'Essa é exatamente a situação em que a atuação da perita assistente é mais decisiva. A Dra. Aline realiza uma análise técnica completa do laudo — verificando metodologia, critérios diagnósticos, nexo causal e fundamentação científica. Se identificadas falhas ou inconsistências, é elaborado um Parecer Técnico Divergente documentando cada ponto de contestação com embasamento na literatura médica atual. Esse parecer é o instrumento para impugnar o laudo e solicitar nova perícia ou esclarecimentos.'
},
{
  id: 'pequeno-valor',
  q: 'A perícia psiquiátrica se aplica a casos de menor valor da causa?',
  a: 'Depende da natureza do caso, não necessariamente do valor. Em ações trabalhistas por danos morais, previdenciárias por incapacidade e civis envolvendo saúde mental, a prova pericial muitas vezes é o único meio de demonstrar o nexo entre o dano e a causa alegada — independentemente do valor. Uma análise de viabilidade gratuita permite avaliar se o custo da assistência técnica é proporcional ao benefício esperado para o seu caso específico.'
},
{
  id: 'como-funciona',
  q: 'Como funciona o primeiro contato e o que esperar?',
  a: 'O processo começa pelo WhatsApp ou e-mail: você apresenta o resumo do caso e os documentos disponíveis. Em até 24 horas (casos urgentes têm prioridade), a Dra. Aline retorna com a análise de viabilidade — se a assistência técnica agrega valor ao processo e qual a abordagem recomendada. Se houver interesse em prosseguir, são definidas as etapas, prazos e honorários. Não há compromisso nessa fase inicial.'
}
];

function Faq() {
  const [open, setOpen] = useState(null);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-header">
          <div className="section-ridge reveal">
            <span className="bar"></span>
            <span>V · Perguntas Frequentes</span>
          </div>
          <div className="faq-header-grid">
            <h2 className="reveal">
              Dúvidas que todo advogado tem antes de <em>contratar</em>.
            </h2>
            <p className="reveal reveal-delay-1">
              Respondemos as questões práticas mais comuns sobre assistência técnica pericial — para que você chegue à primeira conversa com clareza total.
            </p>
          </div>
        </div>

        <div className="faq-list reveal">
          {FAQS.map((item, i) => {
            const isOpen = open === item.id;
            return (
              <div className={`faq-item ${isOpen ? 'open' : ''}`} key={item.id}>
                <button
                  type="button"
                  className="faq-head"
                  aria-expanded={isOpen}
                  aria-controls={`faq-body-${item.id}`}
                  onClick={() => setOpen(isOpen ? null : item.id)}>
                  <span className="faq-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="faq-question">{item.q}</span>
                  <span className="faq-icon" aria-hidden="true">
                    <span className="faq-icon-bar faq-icon-h"></span>
                    <span className="faq-icon-bar faq-icon-v"></span>
                  </span>
                </button>
                <div className="faq-body" id={`faq-body-${item.id}`} role="region">
                  <div>
                    <div className="faq-answer">
                      <p>{item.a}</p>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="faq-cta reveal">
          <p>Não encontrou o que procurava?</p>
          <WhatsappPremium label="Falar diretamente com a Dra. Aline" sub="Resposta em até 24h" />
        </div>
      </div>
    </section>
  );
}

/* Expose to global */
Object.assign(window, {
  UrgencyBar, Nav, MobileMenu, Hero, Pain, Areas, About, Process, Faq, FinalCTA, Footer, FabWhatsapp,
  useReveal
});