const WHY = [
  { i:"01", h:"Judicialização crescente", b:"O número de ações contra dentistas cresce ano a ano no Brasil. Quem se protege agora gasta uma fração do que vai gastar depois." },
  { i:"02", h:"Novas resoluções do CFO", b:"Mudanças regulatórias recentes (2024/2025) ampliaram as obrigações do cirurgião-dentista. Adequação não é opcional." },
  { i:"03", h:"Seu concorrente já está se protegendo", b:"Clínicas estruturadas juridicamente transmitem mais confiança, retêm mais pacientes e têm mais respaldo em qualquer negociação." },
];

function WhyNow() {
  return (
    <section className="tight">
      <div className="container">
        <div className="section-label"><span>Por que agora</span><span className="line"></span><span className="mono"></span></div>
        <Reveal><h2 className="h2" style={{maxWidth:"24ch"}}>O custo de <em>esperar</em> é maior do que o custo de <em>se proteger</em>.</h2></Reveal>
        <div className="why-grid" style={{marginTop:32}}>
          {WHY.map((w,i)=>(
            <Reveal key={i} delay={i*80}>
              <div className="why-card">
                <div className="idx">{w.i} · MOMENTO</div>
                <div className="h">{w.h}</div>
                <div className="b">{w.b}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const BA_DIM = [
  { k:"Documentação",      before:[20,"genérica"],         after:[95,"personalizada"] },
  { k:"Contratos",          before:[15,"sem validade real"], after:[92,"adequados ao CDC/CFO"] },
  { k:"Presença digital",   before:[25,"irregular"],         after:[88,"regularizada"] },
  { k:"Suporte processual", before:[10,"ausente"],           after:[96,"assistência técnica"] },
  { k:"Equipe interna",     before:[20,"sem orientação"],    after:[90,"capacitada"] },
];

function BeforeAfter() {
  const ref = React.useRef(null);
  const [animate, setAnimate] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries)=>{
      entries.forEach((e)=>{ if(e.isIntersecting){ setAnimate(true); io.disconnect(); } });
    },{threshold:0.25});
    io.observe(el); return ()=>io.disconnect();
  },[]);
  return (
    <section>
      <div className="container">
        <div className="section-label"><span>Diferencial operacional</span><span className="line"></span><span className="mono"></span></div>
        <Reveal><h2 className="h2" style={{maxWidth:"24ch"}}>O que muda quando a clínica entra <em>em proteção</em>.</h2></Reveal>
        <Reveal delay={120}>
          <div className="ba-wrap" ref={ref} style={{marginTop:28}}>
            <div className="ba-grid">
              <div className="ba-col before">
                <h4><span className="pip"></span>Sem assessoria · risco</h4>
                {BA_DIM.map((d,i)=>(
                  <div key={i} className="ba-row">
                    <div className="label">{d.k}</div>
                    <div className="bar"><i style={{width: animate? d.before[0]+"%" : 0, transitionDelay: (i*120)+"ms"}}></i></div>
                    <div className="val">{d.before[0]}%</div>
                  </div>
                ))}
              </div>
              <div className="ba-col after">
                <h4><span className="pip"></span>Com assessoria · proteção</h4>
                {BA_DIM.map((d,i)=>(
                  <div key={i} className="ba-row">
                    <div className="label">{d.k}</div>
                    <div className="bar"><i style={{width: animate? d.after[0]+"%" : 0, transitionDelay: (i*120 + 200)+"ms"}}></i></div>
                    <div className="val">{d.after[0]}%</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const SVC_PREV = [
  { icon:<Icon.Doc style={{width:22,height:22}}/>, t:"Gestão Documental Odontolegal", bullets:[
    "Organização e auditoria de prontuários",
    "Elaboração de TCLEs e termos específicos",
    "Contratos personalizados por especialidade",
    "Kit documental completo para a clínica",
  ]},
  { icon:<Icon.Check style={{width:22,height:22}}/>, t:"Adequação Ético-Regulatória (CFO/CRO)", bullets:[
    "Diagnóstico de conformidade com o CFO",
    "Revisão de publicidade e presença digital",
    "Uso correto de títulos e especialidades",
    "Relatório de riscos com plano de ação",
  ]},
];
const SVC_CONT = [
  { icon:<Icon.Scale style={{width:22,height:22}}/>, t:"Assistência Técnica Odontolegal", bullets:[
    "Análise técnica do caso sob ótica odontolegal",
    "Pareceres técnicos especializados",
    "Formulação de quesitos periciais",
    "Impugnação de laudos do perito do juízo",
  ]},
  { icon:<Icon.Gavel style={{width:22,height:22}}/>, t:"Suporte em Processos Éticos (CRO/CFO)", bullets:[
    "Apoio em processos disciplinares no CRO",
    "Defesa deontológica especializada",
    "Atuação complementar ao advogado",
    "Acompanhamento até a decisão final",
  ]},
];

function Servicos() {
  return (
    <section id="servicos">
      <div className="container">
        <div className="section-label"><span>Os Serviços</span><span className="line"></span><span className="mono"></span></div>
        <Reveal><h2 className="h2" style={{maxWidth:"22ch"}}>Dois eixos. Uma <em>proteção</em> completa.</h2></Reveal>

        <div className="svc-eixo svc-eixo--prev" style={{marginTop:40}}>
          <div className="svc-eixo-head">
            <span className="badge">Eixo Preventivo</span>
            <span className="ttl">Assessoria Odontolegal da Clínica</span>
          </div>
          <div className="svc-grid">
            {SVC_PREV.map((s,i)=>(
              <Reveal key={i} delay={i*60}>
                <article className="svc-card">
                  <div className="ico">{s.icon}</div>
                  <h3 className="ttl">{s.t}</h3>
                  <ul className="svc-bullets">
                    {s.bullets.map((b,j)=>(<li key={j}>{b}</li>))}
                  </ul>
                </article>
              </Reveal>
            ))}
          </div>
        </div>

        <div className="svc-eixo svc-eixo--cont">
          <div className="svc-eixo-head">
            <span className="badge">Eixo Contencioso</span>
            <span className="ttl">Assistência Técnica Odontolegal</span>
          </div>
          <div className="svc-grid">
            {SVC_CONT.map((s,i)=>(
              <Reveal key={i} delay={i*60}>
                <article className="svc-card">
                  <div className="ico">{s.icon}</div>
                  <h3 className="ttl">{s.t}</h3>
                  <ul className="svc-bullets">
                    {s.bullets.map((b,j)=>(<li key={j}>{b}</li>))}
                  </ul>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n:"01", h:"Contato inicial", b:"Você entra em contato por livre demanda e avaliamos a situação atual da sua clínica ou o caso que precisa de atuação." },
  { n:"02", h:"Análise documental", b:"Mapeamento de lacunas e riscos." },
  { n:"03", h:"Proposta personalizada", b:"Escopo definido por serviço e especialidade." },
  { n:"04", h:"Execução", b:"Entrega dos documentos, relatórios ou atuação processual." },
];

function Processo() {
  return (
    <section className="tight centered-sec">
      <div className="container">
        <div className="proc-layout">
          <div className="proc-intro">
            <div className="section-label"><span>Processo</span><span className="line"></span><span className="mono"></span></div>
            <Reveal><h2 className="h2" style={{maxWidth:"15ch"}}>Quatro etapas. <em>Sem mistério.</em></h2></Reveal>
            <Reveal delay={80}>
              <p className="lede" style={{maxWidth:"36ch"}}>Um caminho claro do primeiro contato à proteção ativa da sua clínica. Você sempre sabe em que etapa estamos e qual é o próximo passo.</p>
            </Reveal>
          </div>

          <div className="proc-flow">
            {STEPS.map((s,i)=>(
              <Reveal key={i} delay={i*80}>
                <div className={"proc-step"+(i===STEPS.length-1?" is-last":"")}>
                  <div className="proc-marker">
                    <div className="proc-dot">{s.n}</div>
                    <div className="proc-line"></div>
                  </div>
                  <div className="proc-card">
                    <div className="h">{s.h}</div>
                    <div className="b">{s.b}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyNow, BeforeAfter, Servicos, Processo });