// ============================================================
// Evidia · Desktop · "Como entrar na rede" — versão elegante
// (portada do chat de motion · backup: archive/Home.pre-comoentrar-desktop.html)
// Números grandes sem círculo (01-03 azul, 04 mint), linha fina do arco
// com nós pequenos (04 com check de chegada). Motion: cascata esquerda →
// direita disparada na entrada (scroll). Respeita prefers-reduced-motion.
// Exporta: ComoEntrarDesktop (window)
// ============================================================

const erdIc = {
  width: 22, height: 22, viewBox: "0 0 24 24", fill: "none",
  stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round"
};
const IconClipboard = () =>
<svg {...erdIc}>
    <rect x="8" y="2" width="8" height="4" rx="1" />
    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
    <path d="M12 11h4" /><path d="M12 16h4" /><path d="M8 11h.01" /><path d="M8 16h.01" />
  </svg>;
const IconUserCheck = () =>
<svg {...erdIc}>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <polyline points="16 11 18 13 22 9" />
  </svg>;
const IconFileSign = () =>
<svg {...erdIc}>
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    <polyline points="14 2 14 8 20 8" />
    <path d="m9 15 2 2 4-4" />
  </svg>;
const IconCircleCheck = () =>
<svg {...erdIc}>
    <path d="M21.8 10A10 10 0 1 1 17 3.34" />
    <path d="m9 11 3 3L22 4" />
  </svg>;

const ERD_STEPS = [
{ n: "01", kicker: "Cadastro e documentos", icon: <IconClipboard />,
  desc: "Você preenche seu perfil e envia os documentos pelo portal. Simples e 100% digital." },
{ n: "02", kicker: "Revisão do perfil", icon: <IconUserCheck />,
  desc: "Nossa equipe revisa suas informações. Se precisar, agendamos uma videochamada rápida para tirar dúvidas." },
{ n: "03", kicker: "Contrato e tabela", icon: <IconFileSign />,
  desc: "Você revisa a tabela base de valores e assina o contrato de credenciamento. Tudo transparente, sem surpresas." },
{ n: "04", kicker: "Pronto para atender", icon: <IconCircleCheck />, last: true,
  desc: "Credenciamento concluído. Você já pode atender pelas operadoras parceiras da sua região e faturar pelo portal único." }];

const ERD_CSS = `
.ev-erd *{ box-sizing:border-box; }
.ev-erd{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
.ev-erd__eyebrow{
  font-family:var(--font-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan-700);
}
.ev-erd__title{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.022em;
  color:var(--blue-900); margin:0; text-wrap:balance;
}
.ev-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ev-steps::before{
  content:""; position:absolute; left:6px; right:-90px; top:86px; height:2px; border-radius:2px;
  background:var(--grad-arc); transform-origin:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%);
}
.ev-steps.armed::before{ transform:scaleX(0); transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .05s; }
.ev-steps.armed.is-in::before{ transform:scaleX(1); }
.ev-step{ position:relative;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.ev-steps.armed .ev-step{ opacity:0; transform:translateX(-22px); }
.ev-steps.armed.is-in .ev-step{ opacity:1; transform:none; }
.ev-steps.armed.is-in .ev-step:nth-child(1){ transition-delay:.15s; }
.ev-steps.armed.is-in .ev-step:nth-child(2){ transition-delay:.42s; }
.ev-steps.armed.is-in .ev-step:nth-child(3){ transition-delay:.69s; }
.ev-steps.armed.is-in .ev-step:nth-child(4){ transition-delay:.96s; }
.ev-step__head{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.ev-step__num{
  font-family:var(--font-display); font-weight:700; font-size:62px; line-height:1;
  letter-spacing:-.03em; color:var(--blue-600);
}
.ev-step__icon{
  width:44px; height:44px; border-radius:12px; background:var(--blue-050);
  color:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ev-step__noderow{ height:22px; position:relative; margin-bottom:24px; }
.ev-step__node{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--blue-600);
  display:flex; align-items:center; justify-content:center;
}
.ev-step__node b{ width:8px; height:8px; border-radius:50%; background:var(--blue-600); display:block; }
.ev-step__label{
  font-family:var(--font-eyebrow); font-weight:700; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue-900); margin-bottom:12px;
}
.ev-step__desc{ font-size:14.5px; line-height:1.55; color:var(--ink-600); max-width:25ch; }
.ev-step--last .ev-step__num{ color:var(--mint-500); }
.ev-step--last .ev-step__icon{ background:#e7f3ec; color:var(--success); }
.ev-step--last .ev-step__node{ background:var(--mint-500); border-color:var(--mint-500); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .ev-step{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ev-steps::before{ transform:scaleX(1) !important; transition:none !important; }
}
`;

function erdEnsureCSS() {
  if (typeof document === "undefined") return;
  if (document.getElementById("ev-erd-css")) return;
  const s = document.createElement("style");
  s.id = "ev-erd-css";
  s.textContent = ERD_CSS;
  document.head.appendChild(s);
}
erdEnsureCSS();

const ErdCheck = () =>
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>;

// Anima só em aba visível; fora disso o conteúdo já nasce no estado final.
function useReveal() {
  const ref = React.useRef(null);
  const reduce = typeof window !== "undefined" && window.matchMedia &&
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const animate = !reduce && (
  typeof document === "undefined" || document.visibilityState === "visible");
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!animate) return;
    const el = ref.current;
    if (!el) return;
    let done = false;
    const fire = () => {if (!done) {done = true;setInView(true);cleanup();}};
    const check = () => {
      if (done) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.9 && r.bottom > 0) fire();
    };
    const cleanup = () => {
      window.removeEventListener("scroll", check, true);
      window.removeEventListener("resize", check);
      if (io) io.disconnect();
      clearTimeout(t1);clearTimeout(t2);
    };
    let io = null;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver((es) => {
        es.forEach((e) => {if (e.isIntersecting) fire();});
      }, { threshold: 0.2 });
      io.observe(el);
    }
    window.addEventListener("scroll", check, true);
    window.addEventListener("resize", check);
    const t1 = setTimeout(check, 250);
    const t2 = setTimeout(check, 900);
    check();
    return cleanup;
  }, []);
  return [ref, animate, inView];
}

const ComoEntrarDesktop = () => {
  erdEnsureCSS();
  const [ref, animate, inView] = useReveal();
  const cls = "ev-steps" + (animate ? " armed" : "") + (inView ? " is-in" : "");
  return (
    <section className="ev-erd ab-entrar" style={{
      width: 1440, background: "var(--bg-soft)", overflow: "hidden",
      padding: "88px 0 96px 96px" }}>
      <div style={{ marginBottom: 56 }}>
        <div className="ev-erd__eyebrow" style={{ fontSize: 12, marginBottom: 18 }}>Como entrar</div>
        <h2 className="ev-erd__title" style={{ fontSize: 50, letterSpacing: "-0.024em" }}>Passo a passo.</h2>
      </div>
      <div ref={ref} className={cls} style={{ marginLeft: 100 }}>
        {ERD_STEPS.map((s, i) =>
        <div key={i} className={"ev-step" + (s.last ? " ev-step--last" : "")}>
            <div className="ev-step__head">
              <span className="ev-step__num">{s.n}</span>
              {!s.last && <span className="ev-step__icon">{s.icon}</span>}
            </div>
            <div className="ev-step__noderow">
              <span className="ev-step__node">{s.last ? <ErdCheck /> : <b />}</span>
            </div>
            <div className="ev-step__label">{s.kicker}</div>
            <div className="ev-step__desc">{s.desc}</div>
          </div>
        )}
      </div>
    </section>);

};

Object.assign(window, { ComoEntrarDesktop });