// sections.jsx - Schuster Advocacia · LP Dentistas
const { useEffect: _useEffect, useState: _useState, useRef: _useRef } = React;

const WA_LINK = 'https://wa.me/message/U52FJSL4FLS4O1';
const TEL = 'tel:+5541999999999'; // substituir pelo número real

// ────────── Top nav ──────────
function TopNav() {
  return (
    <nav className="nav">
      <Logo />
      <div className="nav-links">
        <a href="#para-quem">Para quem</a>
        <a href="#servicos">Serviços</a>
        <a href="#como-funciona">Como funciona</a>
        <a href="#sobre">Sobre</a>
        <a href="#faq">FAQ</a>
      </div>
      <a className="btn btn-hot" href={WA_LINK} data-cta="nav" target="_blank" rel="noopener noreferrer">
        <Ico.whatsapp /> <span>Falar com a Mariana</span>
      </a>
    </nav>
  );
}

// ────────── Hero ──────────
const HEADLINES = {
  provocativo: {
    eyebrow: 'Assessoria Jurídica · Dentistas & Saúde',
    h1: <>Você cuida de sorrisos. <em>Quem cuida da sua proteção jurídica?</em></>,
    sub: 'A maioria dos dentistas só descobre que estava desprotegido quando o problema já chegou. TCLEs robustos, contratos sólidos e estrutura jurídica para clínicas, consultórios e negócios digitais, antes que você precise.'
  },
  consultivo: {
    eyebrow: 'Direito Empresarial · Saúde · Digital',
    h1: <>Estrutura jurídica para dentistas que <em>querem crescer com segurança</em>.</>,
    sub: 'Assessoria especializada em contratos, documentação clínica, estruturação societária e adequação para negócios digitais na odontologia.'
  },
  direto: {
    eyebrow: 'Proteção Jurídica para Consultórios e Clínicas',
    h1: <>Um TCLE mal feito pode custar <em>mais do que anos de trabalho</em>.</>,
    sub: 'TCLEs específicos por procedimento, contratos que blindam sua clínica, acordos societários e documentação para negócios digitais. Sem juridiquês, sem modelo genérico.'
  }
};

function Hero({ headline = 'provocativo' }) {
  const h = HEADLINES[headline] || HEADLINES.provocativo;
  return (
    <header className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <R d={1} className="law-chip"><span className="pulse"></span>{h.eyebrow}</R>
          <R as="h1" d={2} className="display">{h.h1}</R>
          <R as="p" d={3} className="lead">{h.sub}</R>
          <R d={4} className="hero-cta-row">
            <a className="btn btn-hot" href={WA_LINK} data-cta="hero" target="_blank" rel="noopener noreferrer">
              <Ico.whatsapp /> Proteger minha clínica <Ico.arrow className="arr" />
            </a>
            <a className="btn btn-ghost" href="#servicos">
              Conhecer os serviços
            </a>
          </R>
          <R d={5} className="hero-meta">
            <div><b>+80</b> dentistas atendidos</div>
            <div><b>Brasil</b> 100% online</div>
            <div><b>OAB/PR</b> ativa</div>
          </R>
        </div>

        <R d={2}>
          <div className="photo-stage">
            <span className="br tl"></span><span className="br tr"></span>
            <span className="br bl"></span><span className="br br"></span>
            <HeroGeo />
            <PhotoDrop id="hero-photo" label="Foto da Mariana · arraste aqui" objectPosition="center top" />
            <div className="scan"></div>
            <div className="vignette"></div>
          </div>
          <div className="photo-credit">
            <span>· Mariana Schuster</span>
            <span>OAB/PR · Direito Empresarial</span>
          </div>
        </R>
      </div>
    </header>
  );
}

// ────────── Risco Banner ──────────
function RiscoBanner() {
  return (
    <section className="law light" aria-label="Risco Jurídico na Odontologia">
      <div className="wrap law-row">
        <R d={1}>
          <div className="big">8<span style={{ color: 'var(--accent)' }}>em</span>10<small>clínicas com documentação inadequada</small></div>
        </R>
        <R d={2}>
          <p className="marquee">
            "A maioria dos consultórios opera com TCLEs genéricos, contratos baixados da internet e acordos verbais: documentos que <strong style={{ color: 'var(--ink)' }}>não protegem ninguém</strong> no momento em que o problema aparece."
          </p>
        </R>
        <R d={3} className="law-cta">
          <a className="btn btn-ghost" href="#servicos">Como me proteger <Ico.arrow className="arr" /></a>
        </R>
      </div>
    </section>
  );
}

// ────────── Para quem ──────────
function ParaQuem() {
  const items = [
    {
      ico: 'clinic', n: '01',
      title: 'Dentista com consultório próprio',
      body: 'Você atende há anos com TCLE genérico, acordo verbal com equipe e contratos que nunca passaram por um advogado. Tudo parece funcionar. Até o dia que não funciona mais.'
    },
    {
      ico: 'growth', n: '02',
      title: 'Dentista em expansão',
      body: 'Está abrindo segunda unidade, contratando prestadores ou formalizando uma sociedade. Sua operação cresceu, mas a estrutura jurídica ainda é a mesma de quando você começava sozinho.'
    },
    {
      ico: 'partner', n: '03',
      title: 'Dentista com sócios',
      body: 'Você e seu sócio confiam um no outro, mas confiança não define quem fica com o CNPJ, os equipamentos e os pacientes se um dia as coisas não derem certo.'
    },
    {
      ico: 'digital', n: '04',
      title: 'Dentista criador de conteúdo',
      body: 'Produz conteúdo nas redes, planeja lançar um curso ou já vende mentoria. Mas seus contratos digitais (termos, cessão de imagem, políticas de privacidade) estão em dia?'
    }
  ];

  return (
    <section id="para-quem" className="light" aria-labelledby="pq-h">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>01 · Para quem</div></R>
          <R d={1} as="h2" id="pq-h">Quatro perfis que <em>precisam</em> de estrutura jurídica sólida.</R>
        </div>
        <R d={2}>
          <div className="audience">
            {items.map((it, i) => {
              const I = Ico[it.ico];
              return (
                <div className="aud-card" key={i}>
                  <span className="num">{it.n}</span>
                  <div className="ico"><I /></div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              );
            })}
          </div>
        </R>
      </div>
    </section>
  );
}

// ────────── Dores ──────────
function Dores() {
  const items = [
    {
      n: '01', ico: 'doc',
      title: 'TCLE que não protege de verdade',
      body: 'O modelo genérico que você usa talvez nunca tenha sido revisado por um advogado. Um TCLE que não reflete o procedimento realizado com precisão pode não servir de nada quando você mais precisar dele.'
    },
    {
      n: '02', ico: 'contract',
      title: 'Contratos com lacunas invisíveis',
      body: 'Seus contratos de prestação de serviços foram assinados, mas têm brechas. Quando surge uma disputa, você percebe que o documento protege mais a outra parte do que você.'
    },
    {
      n: '03', ico: 'partner',
      title: 'Sociedade sem acordo formalizado',
      body: 'Você e seu sócio se entendem bem, mas não há nada por escrito sobre quem sai, quem fica, quanto cada um vale e como as decisões são tomadas se a relação mudar.'
    },
    {
      n: '04', ico: 'camera',
      title: 'Imagem de paciente sem cessão',
      body: 'Você usa antes e depois de procedimentos nas redes, publica depoimentos, exibe resultados. Sem contrato de cessão de imagem assinado, cada post é um risco real e documentado.'
    },
    {
      n: '05', ico: 'laptop',
      title: 'Negócio digital sem proteção',
      body: 'Você lançou — ou planeja lançar — curso, mentoria ou treinamento. Mas os contratos de coprodução, os termos de compra e a política de privacidade da plataforma existem?'
    },
    {
      n: '06', ico: 'growth',
      title: 'Estrutura jurídica que não cresceu junto',
      body: 'Sua clínica cresceu, sua equipe cresceu, seu faturamento cresceu. Mas seus documentos são os mesmos de quando você começou. Essa defasagem cria um risco que aumenta todo dia.'
    }
  ];

  return (
    <section id="dores" className="dark">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>02 · As dores</div></R>
          <R d={1} as="h2">O que mantém dentistas <em>juridicamente vulneráveis</em>.</R>
        </div>
        <R d={2}>
          <div className="dor-grid">
            {items.map((it, i) => {
              const I = Ico[it.ico];
              return (
                <div className="dor-card" key={i}>
                  <div className="dor-num">{it.n} · Risco</div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              );
            })}
          </div>
        </R>
      </div>
    </section>
  );
}

// ────────── Consequências ──────────
function Consequencias() {
  const items = [
    {
      ico: 'gavel',
      title: 'Processos por falta de consentimento adequado',
      body: 'Um TCLE genérico não documenta com precisão o consentimento do paciente para procedimentos específicos, especialmente estéticos e cirúrgicos. Qualquer resultado inesperado pode virar um processo.'
    },
    {
      ico: 'contract',
      title: 'Contratos que trabalham contra você',
      body: 'Cláusulas vagas ou mal redigidas são interpretadas a favor do cliente em disputas. O mesmo documento que você assinou para se proteger pode ser a principal prova contra você.'
    },
    {
      ico: 'warning',
      title: 'Conflito societário que paralisa a clínica',
      body: 'Sem acordo entre sócios formalizado, qualquer desentendimento pode virar uma disputa judicial que congela contas, trava equipamentos e paralisa toda a operação.'
    },
    {
      ico: 'camera',
      title: 'Notificação por uso indevido de imagem',
      body: 'O uso de fotos, vídeos ou depoimentos de pacientes sem contrato de cessão de imagem válido gera responsabilidade civil e pode resultar em notificações do CFO e ações judiciais.'
    },
    {
      ico: 'lock',
      title: 'Multas por inadequação à LGPD',
      body: 'Clínicas que coletam e tratam dados de pacientes sem política de privacidade adequada e base legal definida estão sujeitas a sanções da ANPD, que podem chegar a 2% do faturamento.'
    },
    {
      ico: 'scroll',
      title: 'Passivos em cursos e negócios digitais',
      body: 'Cursos e mentorias vendidos sem contratos adequados geram riscos de cobranças indevidas, disputa de direitos autorais em coproduções e conflitos com alunos sem amparo documental.'
    }
  ];

  return (
    <section id="consequencias" className="light">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>03 · O que está em jogo</div></R>
          <R d={1} as="h2">O que acontece quando a estrutura jurídica <em>falha</em>.</R>
        </div>
        <R d={2}>
          <div className="risk-grid">
            {items.map((it, i) => {
              const I = Ico[it.ico];
              return (
                <div className="risk-card" key={i}>
                  <div className="ico"><I /></div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              );
            })}
          </div>
        </R>
        <R d={3} style={{ marginTop: 40, textAlign: 'center' }}>
          <a className="btn btn-hot" href={WA_LINK} data-cta="consequencias" target="_blank" rel="noopener noreferrer">
            <Ico.whatsapp /> Quero evitar esses riscos <Ico.arrow className="arr" />
          </a>
        </R>
      </div>
    </section>
  );
}

// ────────── Serviços (stack interativo) ──────────
const SERVICOS = [
  {
    n: '01', ico: 'doc',
    title: 'Documentação Clínica',
    tag: 'TCLEs & Consentimento',
    body: 'Elaboração e revisão de TCLEs específicos para cada procedimento: clínico, estético ou cirúrgico. Contratos de prestação de serviços odontológicos que documentam com precisão os direitos e deveres de ambas as partes.',
    pills: ['TCLE', 'Consentimento', 'Estética', 'Cirurgia oral']
  },
  {
    n: '02', ico: 'contract',
    title: 'Contratos Comerciais',
    tag: 'Parcerias & Fornecedores',
    body: 'Contratos com prestadores de serviços, parceiros clínicos, fornecedores e laboratórios de prótese. Acordos de compartilhamento de espaço, regras de sublocação e contratos de trabalho para equipe de apoio.',
    pills: ['Prestadores', 'Laboratório', 'Fornecedores', 'Sublocação']
  },
  {
    n: '03', ico: 'building',
    title: 'Estruturação Societária',
    tag: 'Sociedade & Holding',
    body: 'Constituição de pessoa jurídica e análise da melhor estrutura tributária para sua clínica. Elaboração de acordo de sócios com regras claras sobre entrada, saída, votação, distribuição de lucros e solução de conflitos.',
    pills: ['PJ médica', 'Holding', 'Acordo de sócios', 'Saída e entrada']
  },
  {
    n: '04', ico: 'camera',
    title: 'Imagem, Dados e Privacidade',
    tag: 'LGPD & Cessão de Imagem',
    body: 'Contratos de cessão de imagem de pacientes para uso em redes sociais, site e materiais de marketing. Política de privacidade, termos de uso e adequação à LGPD para clínicas que coletam e tratam dados sensíveis de saúde.',
    pills: ['Cessão de imagem', 'LGPD', 'Política de privacidade', 'ANPD']
  },
  {
    n: '05', ico: 'laptop',
    title: 'Negócio Digital e Educacional',
    tag: 'Cursos, Mentorias & Infoprodutos',
    body: 'Contratos para venda de cursos, mentorias e treinamentos odontológicos. Acordos de coprodução e colaboração. Termos de compra, política de reembolso e documentação completa para infoprodutos na área da saúde.',
    pills: ['Cursos', 'Mentorias', 'Coprodução', 'Termos de compra']
  },
  {
    n: '06', ico: 'star',
    title: 'Consultoria Jurídica Recorrente',
    tag: 'Parceria Estratégica Contínua',
    body: 'Assessoria mensalizada para acompanhar o crescimento da clínica. Revisão periódica de documentos, suporte em novas contratações, atualização de TCLEs conforme novos procedimentos e orientação preventiva para decisões estratégicas.',
    pills: ['Mensal', 'Preventivo', 'Suporte contínuo', 'Estratégia']
  }
];

function Servicos() {
  const [active, setActive] = _useState(0);
  const cur = SERVICOS[active];
  const I = Ico[cur.ico];
  return (
    <section id="servicos" className="dark">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>04 · Serviços</div></R>
          <R d={1} as="h2">O <em>stack jurídico</em> completo para dentistas.</R>
        </div>

        <div className="stack">
          <R d={1}>
            <div className="stack-list" role="tablist">
              {SERVICOS.map((e, i) => (
                <div
                  key={i}
                  role="tab"
                  aria-selected={i === active}
                  className={'stack-item' + (i === active ? ' is-active' : '')}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => setActive(i)}
                >
                  <span className="si-num">{e.n}</span>
                  <span className="si-title">{e.title}</span>
                  <span className="si-arr"><Ico.arrow /></span>
                </div>
              ))}
            </div>
          </R>

          <R d={2}>
            <div className="stack-detail" key={active}>
              <div className="tag">{cur.tag}</div>
              <div style={{ color: 'var(--accent-2)' }}><I /></div>
              <h4>{cur.title}</h4>
              <p>{cur.body}</p>
              <div className="pill-row">
                {cur.pills.map((p) => <span key={p} className="pill">{p}</span>)}
              </div>
            </div>
          </R>
        </div>
      </div>
    </section>
  );
}

// ────────── Benefícios ──────────
function Beneficios() {
  const items = [
    {
      ico: 'shield', n: '01',
      title: 'Realiza procedimentos com segurança real',
      body: 'TCLEs específicos para cada procedimento que documentam com precisão o consentimento, protegendo você, o paciente e a relação entre vocês.'
    },
    {
      ico: 'contract', n: '02',
      title: 'Contrata e parceira sem surpresas',
      body: 'Contratos com prestadores, parceiros e fornecedores que estabelecem direitos e deveres com clareza. Sem ambiguidade, sem disputa desnecessária.'
    },
    {
      ico: 'building', n: '03',
      title: 'Expande sem medo de conflitos societários',
      body: 'Acordo entre sócios que antecipa os cenários difíceis antes que eles aconteçam: saída, conflito de interesses, distribuição de lucros, tomada de decisões.'
    },
    {
      ico: 'camera', n: '04',
      title: 'Gera conteúdo e usa imagem dentro da lei',
      body: 'Contratos de cessão de imagem que permitem usar resultados, depoimentos e fotos de pacientes nas redes sociais com proteção jurídica documentada.'
    },
    {
      ico: 'laptop', n: '05',
      title: 'Monetiza conhecimento com proteção',
      body: 'Cursos, mentorias e infoprodutos com contratos que protegem sua propriedade intelectual, definem regras de coprodução e garantem seus direitos sobre o conteúdo.'
    },
    {
      ico: 'growth', n: '06',
      title: 'Cresce sem acumular passivos',
      body: 'Assessoria que acompanha sua evolução, atualizando documentos, orientando novas contratações e adaptando a estrutura jurídica conforme seu negócio escala.'
    }
  ];

  return (
    <section id="beneficios" className="light">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>05 · Benefícios</div></R>
          <R d={1} as="h2">O que muda quando sua clínica tem <em>estrutura jurídica sólida</em>.</R>
        </div>
        <R d={2}>
          <div className="benefit-grid">
            {items.map((it, i) => {
              const I = Ico[it.ico];
              return (
                <div className="benefit-card" key={i}>
                  <span className="num">{it.n}</span>
                  <div className="ico"><I /></div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              );
            })}
          </div>
        </R>
      </div>
    </section>
  );
}

// ────────── Diferenciais ──────────
function Diferenciais() {
  const items = [
    {
      ico: 'tooth', n: '01',
      title: 'Especialização em saúde',
      body: 'Não é uma advocacia generalista. A atuação é voltada para profissionais da saúde, o que significa entender os procedimentos, os riscos específicos e as regulamentações do CFO.'
    },
    {
      ico: 'doc', n: '02',
      title: 'Documentos personalizados',
      body: 'Cada TCLE, contrato e política é elaborado para a sua realidade: seu consultório, seus procedimentos, seu modelo de negócio. Nada de modelo genérico que qualquer pessoa baixaria.'
    },
    {
      ico: 'chat', n: '03',
      title: 'Linguagem sem juridiquês',
      body: 'Você vai entender cada cláusula do que está assinando. Explicação clara, objetiva e adaptada para quem não é advogado mas quer saber exatamente o que está contratando.'
    },
    {
      ico: 'shield', n: '04',
      title: 'Foco preventivo, não reativo',
      body: 'O objetivo é evitar que o problema aconteça. A consultoria jurídica entra antes do processo, quando ainda é possível proteger, não depois que o estrago já está feito.'
    },
    {
      ico: 'star', n: '05',
      title: 'Parceria de longo prazo',
      body: 'Assessoria recorrente que cresce junto com você, atualizando documentos, orientando novas contratações e adaptando a estrutura jurídica conforme sua clínica evolui.'
    }
  ];

  return (
    <section id="diferenciais" className="dark">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>06 · Diferenciais</div></R>
          <R d={1} as="h2">Por que não basta contratar <em>qualquer advogado</em>.</R>
        </div>
        <R d={2}>
          <div className="diff-grid">
            {items.map((it, i) => {
              const I = Ico[it.ico];
              return (
                <div className="diff-card" key={i}>
                  <span className="num">{it.n}</span>
                  <div className="ico"><I /></div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              );
            })}
          </div>
        </R>
      </div>
    </section>
  );
}

// ────────── Como funciona ──────────
function ComoFunciona() {
  const ref = _useRef(null);
  _useEffect(() => {
    if (!ref.current) return;
    const steps = ref.current.querySelectorAll('.flow-step');
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) {
          [...steps].forEach((s, idx) => {
            setTimeout(() => s.classList.add('in'), idx * 220);
          });
          io.disconnect();
        }
      });
    }, { threshold: .25 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const steps = [
    {
      ico: 'chat', n: '01',
      t: 'Primeiro contato',
      d: 'Você manda uma mensagem via WhatsApp. Resposta ágil, em horário comercial, com atenção real para o seu contexto, sem formulário longo nem processo burocrático.'
    },
    {
      ico: 'list', n: '02',
      t: 'Diagnóstico jurídico',
      d: 'Entendemos sua situação atual: quais documentos você tem, o que está faltando e quais são os riscos mais urgentes para o seu modelo de negócio.'
    },
    {
      ico: 'video', n: '03',
      t: 'Reunião estratégica',
      d: 'Conversa de 30–45 min por vídeo para mapear prioridades, entender sua operação a fundo e desenhar o plano de estruturação jurídica ideal para o seu momento.'
    },
    {
      ico: 'rocket', n: '04',
      t: 'Plano e execução',
      d: 'Proposta personalizada com escopo, prazo e investimento. Implementação acompanhada do início ao fim, com suporte em cada etapa do processo.'
    }
  ];

  return (
    <section id="como-funciona" className="light">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>07 · Como funciona</div></R>
          <R d={1} as="h2">Do primeiro contato ao <em>consultório protegido</em>.</R>
        </div>
        <R d={1}>
          <div className="flow" ref={ref}>
            {steps.map((s, i) => {
              const I = Ico[s.ico];
              return (
                <div key={i} className="flow-step">
                  <div className="ico"><I /></div>
                  <span className="fnum">{s.n}</span>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              );
            })}
          </div>
        </R>
        <R d={2}>
          <p className="lead" style={{ marginTop: 28, color: 'var(--ink-3)', fontSize: 14 }}>
            Sem tabela de preços pública. Cada estruturação é única. O investimento é apresentado após o diagnóstico, quando já há clareza sobre o escopo real.
          </p>
        </R>
      </div>
    </section>
  );
}

// ────────── Sobre ──────────
function Sobre() {
  return (
    <section id="sobre" className="dark">
      <div className="wrap about">
        <R>
          <div className="about-photo">
            <PhotoDrop id="sobre-photo" label="Foto da Mariana · arraste aqui" objectPosition="center 20%" />
          </div>
        </R>
        <R d={1}>
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>08 · Sobre</div>
          <h2>Mariana <em>Schuster</em>, advogada de quem trabalha com saúde.</h2>
          <p>
            Atua na interseção entre Direito Empresarial, Contratual e Digital, com foco em profissionais da saúde.
            Já estruturou a documentação de consultórios odontológicos, clínicas em expansão, dentistas que produzem conteúdo
            e profissionais que vendem cursos e mentorias, sempre com o mesmo propósito: proteção jurídica que permite crescer.
          </p>
          <p>
            Nosso propósito é ser um parceiro estratégico preventivo, não como advogado que atua quando o processo já chegou. Atendimento 100% online em todo o Brasil.
          </p>
          <div className="creds">
            <div className="cred">
              <div className="k">Formação</div>
              <div className="v">Direito</div>
            </div>
            <div className="cred">
              <div className="k">Especialização</div>
              <div className="v">Dir. Empresarial e Contratos</div>
            </div>
            <div className="cred">
              <div className="k">Atendimento</div>
              <div className="v">Brasil · online</div>
            </div>
          </div>
        </R>
      </div>
    </section>
  );
}


// ────────── FAQ ──────────
function FAQ() {
  const [open, setOpen] = _useState(0);
  const items = [
    {
      q: 'Você atende somente online?',
      a: 'Sim. O atendimento é 100% online em todo o Brasil: reuniões por vídeo, documentos enviados digitalmente e assinatura eletrônica.'
    },
    {
      q: 'Preciso ter uma grande clínica para contratar os serviços?',
      a: 'Não. Atendemos desde dentistas que trabalham sozinhos em consultório solo até clínicas com múltiplos profissionais. O escopo e o investimento são sempre adaptados ao seu momento e ao que você realmente precisa.'
    },
    {
      q: 'Quanto tempo leva para estruturar a documentação da minha clínica?',
      a: 'Depende do escopo. A primeira versão de um TCLE específico ou contrato pontual fica pronta em 7 a 10 dias úteis. Uma estruturação mais completa (TCLEs por procedimento, contratos, societário) é dividida em etapas, planejadas na reunião de diagnóstico.'
    },
    {
      q: 'Como funciona a consultoria jurídica recorrente?',
      a: 'É uma mensalidade que garante suporte jurídico contínuo: revisão de documentos existentes, orientação em novas contratações, atualização de TCLEs conforme você acrescenta procedimentos ao portfólio e disponibilidade para dúvidas pontuais. Ideal para quem está em crescimento.'
    },
    {
      q: 'Já tenho alguns contratos. Posso contratar só a revisão?',
      a: 'Sim. Fazemos revisão de documentos existentes com diagnóstico de lacunas e recomendações de ajuste detalhadas. É uma excelente entrada para entender o que já está funcionando e o que precisa ser corrigido.'
    },
    {
      q: 'Qual o investimento?',
      a: 'O valor depende do escopo: tipo de documento, complexidade da operação e se o trabalho é pontual ou recorrente. Por isso a conversa de diagnóstico vem antes da proposta: só apresentamos o investimento depois de entender o que você realmente precisa.'
    }
  ];

  return (
    <section id="faq" className="dark">
      <div className="wrap">
        <div className="sec-head">
          <R><div className="eyebrow"><span className="dot"></span>10 · FAQ</div></R>
          <R d={1} as="h2">Antes da <em>primeira mensagem</em>.</R>
        </div>
        <R d={1}>
          <div className="faq">
            {items.map((it, i) => (
              <div
                key={i}
                className={'faq-item' + (open === i ? ' open' : '')}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q">
                  <h4>{it.q}</h4>
                  <span className="faq-toggle"><Ico.plus /></span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </R>
      </div>
    </section>
  );
}

// ────────── Final CTA ──────────
function FinalCTA() {
  return (
    <section className="final dark">
      <div className="wrap">
        <R as="h2" d={1}>O próximo procedimento acontece <em>amanhã</em>. Sua documentação está pronta para isso?</R>
        <R as="p" d={2} className="lead">
          Comece com uma conversa. Sem compromisso, sem tabela de preços engessada: um diagnóstico honesto do que sua clínica precisa para crescer com segurança jurídica real.
        </R>
        <R d={3} className="ctas">
          <a className="btn btn-hot" href={WA_LINK} data-cta="final-wa" target="_blank" rel="noopener noreferrer">
            <Ico.whatsapp /> Falar com a Mariana <Ico.arrow className="arr" />
          </a>
          <a className="btn btn-ghost" href={TEL} data-cta="final-tel">
            <Ico.phone /> Ligação direta
          </a>
        </R>
        <R d={4}><div className="phone">mariana@basilioschuster.com.br · Paraná · OAB/PR</div></R>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot wrap">
      <div className="logo"><span className="glyph">S</span>Schuster Advocacia</div>
      <div>© 2026 Schuster Advocacia · OAB/PR · Conteúdo informativo, não constitui consultoria jurídica.</div>
    </footer>
  );
}

function FloatWA({ pos = 'right' }) {
  return (
    <a
      className={'float-wa ' + (pos === 'left' ? 'left' : pos === 'bar' ? 'bar' : '')}
      href={WA_LINK}
      data-cta="float"
      target="_blank"
      rel="noopener noreferrer"
    >
      <span className="ring"></span>
      <Ico.whatsapp />
      <span className="lbl">Falar agora</span>
    </a>
  );
}

Object.assign(window, {
  TopNav, Hero, RiscoBanner, ParaQuem, Dores, Consequencias,
  Servicos, Beneficios, Diferenciais, ComoFunciona, Sobre,
  Depoimentos, FAQ, FinalCTA, Footer, FloatWA
});