// ============================================================
// Evidia · Mockups v2 · Stats + Portal + Convite + Operadoras
// ============================================================

// -----------------------------------------------------------
// 06 · A REDE EM NÚMEROS (dark, honesto)
// -----------------------------------------------------------
const Stats = () => {
  const nums = [
  { k: "Membros ativos", v: "500", sfx: "+", d: "Médicos credenciados na rede hoje." },
  { k: "Consultas", v: "1", sfx: " milhão+", d: "Já realizadas por médicos da rede." },
  { k: "Receita membros", v: "R$ 200", sfx: " milhões", d: "Faturados por médicos da rede." }];

  return (
    <div className="ab-stats" style={{ width: 1440, height: 600, background: "#050a14", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="ev-dark-bg"><i className="b1"></i><i className="b2"></i></div>
      <div className="ev-grain"></div>

      <div style={{ position: "relative", zIndex: 2, padding: "76px 96px", height: "100%", display: "flex", flexDirection: "column" }}>
        <div className="ev-eyebrow ev-eyebrow--dark" style={{ marginBottom: "auto" }}>
          <span className="num">Evidia em números</span>
          <span className="rule" style={{ flex: 1, maxWidth: 100 }}></span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0 }}>
          {nums.map((n, i) =>
          <div key={i} style={{ paddingRight: 40, paddingLeft: i === 0 ? 0 : 48, borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,0.16)" }}>
              <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--cyan-400)", marginBottom: 20 }}>{n.k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 70, lineHeight: 0.92, fontWeight: 600, color: "#fff", letterSpacing: "-0.03em", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
                {n.v}<span style={{ fontSize: 28, fontWeight: 500, color: "rgba(255,255,255,0.7)" }}>{n.sfx}</span>
              </div>
              <div style={{ marginTop: 20, fontSize: 13.5, lineHeight: 1.55, color: "rgba(255,255,255,0.6)", maxWidth: "28ch" }}>{n.d}</div>
            </div>
          )}
        </div>

        <div style={{ marginTop: 26, fontSize: 13, color: "rgba(255,255,255,0.45)", fontStyle: "italic", margin: "26px 0px 0px" }}>
          Dados consolidados da rede de parceiros credenciados Evidia.
        </div>

        <div className="ev-arc-rule" style={{ width: "100%", marginTop: "auto", opacity: 0.85 }}></div>
      </div>
    </div>);

};

// -----------------------------------------------------------
// 07 · TECNOLOGIA · portal (screenshot real como protagonista)
// -----------------------------------------------------------
const Tech = () => {
  const Portal = window.PortalMock;
  return (
    <div className="ab-tech" style={{ width: 1440, height: 900, background: "var(--bg-soft)", position: "relative", overflow: "hidden", padding: "0 96px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 34 }}>
    {/* top · copy em duas colunas */}
    <div className="ab-tech__copy" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end", flexShrink: 0 }}>
      <div>
        <div className="ev-eyebrow" style={{ marginBottom: 22, display: "flex", alignItems: "center" }}>
          <span className="num">Tecnologia</span>
          <span className="rule" style={{ flex: 1, maxWidth: 70 }}></span>
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1.04, fontWeight: 600, letterSpacing: "-0.024em", margin: 0, color: "var(--blue-900)", maxWidth: "20ch" }}>
          Um portal único. E <em style={{ fontStyle: "normal", color: "var(--blue-700)", fontWeight: 700 }}>100% gratuito</em>.
        </h2>
      </div>
      <div>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.62, color: "var(--ink-600)", maxWidth: "46ch" }}>Prontuário, faturamento e IA clínica numa só interface. Sem mensalidade para o médico.</p>
        <div style={{ marginTop: 22, display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
          {["Prontuário", "Faturamento", "IA clínica", "Auditoria", "Operadoras"].map((t, i) =>
            <span key={i} style={{ padding: "8px 16px", borderRadius: 999, border: "1px solid var(--line)", fontSize: 13, color: "var(--ink-700)", background: "#fff" }}>{t}</span>
            )}
        </div>
      </div>
    </div>

    {/* screenshot real · portal completo, contido e escalado para caber numa tela (fit por JS) */}
    <div className="ab-tech__stage" style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", flexShrink: 0 }}>
      <div className="ab-tech__frame" style={{ width: 1248, borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 70px rgba(10,37,64,0.20)", border: "1px solid var(--line)", background: "#fff", transformOrigin: "top center" }}>
        <div style={{ height: 40, background: "#0d1320", display: "flex", alignItems: "center", gap: 7, padding: "0 18px", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
          {["#ff5f57", "#febc2e", "#28c840"].map((c, i) => <span key={i} style={{ width: 11, height: 11, borderRadius: "50%", background: c }}></span>)}
          <div style={{ marginLeft: 16, flex: 1, maxWidth: 360, height: 22, borderRadius: 6, background: "rgba(255,255,255,0.08)", display: "flex", alignItems: "center", padding: "0 12px", fontFamily: "var(--font-eyebrow)", fontSize: 9.5, letterSpacing: "0.1em", color: "rgba(255,255,255,0.55)", textTransform: "lowercase" }}>portal.evidiasaude.com.br</div>
        </div>
        <div style={{ position: "relative" }}>
          {Portal ? <Portal /> : null}
        </div>
      </div>
    </div>
  </div>);

};

// -----------------------------------------------------------
// 08 · CONVITE · membro fundador (bloco azul chapado)
// -----------------------------------------------------------
const Founder = () => {
  const Map = window.BrazilMapDots;
  return (
    <div className="ab-founder" style={{ width: 1440, height: 540, background: "var(--bg-soft)", position: "relative", overflow: "hidden", padding: "40px 96px", display: "flex" }}>
    <div style={{ position: "relative", flex: 1, background: "var(--grad-blue-deep)", borderRadius: 28, overflow: "hidden", padding: "0 80px", display: "grid", gridTemplateColumns: "1fr 420px", gap: 56, alignItems: "center" }}>
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 5, background: "var(--grad-arc)" }}></div>

      <div style={{ position: "relative" }}>
        <div className="ev-eyebrow ev-eyebrow--dark" style={{ marginBottom: 26 }}>
          <span className="num"></span>
          <span className="lbl"></span>
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.022em", margin: 0, color: "#fff", maxWidth: "18ch" }}>
          Seja um dos médicos fundadores da rede na sua região.
        </h2>
        <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.58, color: "rgba(255,255,255,0.78)", maxWidth: "46ch" }}>Estamos conectando médicos e operadoras em diferentes regiões do Brasil. Entre cedo para fazer parte da rede na sua cidade e crescer com mais estrutura, tecnologia e apoio.

          </p>
        <div style={{ marginTop: 30, display: "flex", gap: 14, alignItems: "center" }}>
          <a href="https://credenciamento.evidiasaude.com.br/interesse" target="_blank" rel="noopener noreferrer" className="ev-pill ev-pill--white">
            Quero me credenciar
            <span className="ev-pill__chev">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
            </span>
          </a>
          <a href="#fale-especialista" className="ev-pill-ghost ev-pill-ghost--dark">Fale com um especialista</a>
        </div>
      </div>

      {/* lado direito · mapa do Brasil em dot matrix */}
      <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
        {Map ? <Map width={356} /> : null}
      </div>
    </div>
  </div>);

};

// -----------------------------------------------------------
// 08b · TEM DÚVIDAS? · teaser do FAQ (antes do CTA final)
// -----------------------------------------------------------
const FaqTeaser = () =>
<div className="ab-faq" style={{ width: 1440, background: "#fff", position: "relative", overflow: "hidden", padding: "72px 96px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 64 }}>
    <div>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 34, lineHeight: 1.1, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, color: "var(--blue-900)" }}>
        Tem dúvidas?
      </h2>
      <p style={{ marginTop: 12, fontSize: 17, lineHeight: 1.55, color: "var(--ink-600)", maxWidth: "52ch" }}>Veja as perguntas mais frequentes.

    </p>
    </div>
    <a href="FAQ.html" style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--font-eyebrow)", fontSize: 13, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--blue-700)", textDecoration: "none", borderBottom: "2px solid var(--blue-200)", paddingBottom: 8 }}>
      Ver perguntas frequentes
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
    </a>
  </div>;


// -----------------------------------------------------------
// 09 · PARA OPERADORAS (informativo · sem CTA na home)
// -----------------------------------------------------------
const Operadoras = () => {
  const points = [
  { t: "Rede curada, não comprada", d: "Médicos selecionados por critério clínico, não por volume." },
  { t: "Governança auditável", d: "Protocolos compartilhados e indicadores de qualidade auditados." },
  { t: "Dados de performance", d: "Relatórios agregados e anônimos sobre a rede credenciada." }];

  return (
    <div className="ab-oper" style={{ width: 1440, height: 620, background: "#fff", position: "relative", overflow: "hidden", padding: "84px 96px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 88, alignItems: "center", height: "100%" }}>
        <div>
          <div className="ev-eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">Para operadoras</span>
            <span className="rule" style={{ flex: 1, maxWidth: 70 }}></span>
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1.06, fontWeight: 600, letterSpacing: "-0.022em", margin: 0, color: "var(--blue-900)", maxWidth: "20ch" }}>
            Uma rede médica com governança auditável.
          </h2>
          <p style={{ marginTop: 22, fontSize: 16, lineHeight: 1.62, color: "var(--ink-600)", maxWidth: "48ch" }}>
            A Evidia organiza a relação entre operadoras e médicos com base em protocolos, dados e governança assistencial. Acesso a uma rede qualificada, sem a complexidade de credenciar individualmente.
          </p>
          {/* texto-link discreto · sem CTA forte (venda B2B é direta) */}
          <div style={{ marginTop: 30, fontSize: 13.5, color: "var(--ink-500)", fontStyle: "italic", lineHeight: 1.5 }}>
            Apresentação comercial e modelo de parceria sob demanda, com nosso time institucional.
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {points.map((p, i) =>
          <div key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, alignItems: "start", padding: "22px 26px", border: "1px solid var(--line)", borderRadius: 16, background: "var(--bg-soft)" }}>
              <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 12, fontWeight: 700, letterSpacing: "0.16em", color: "var(--cyan-700)", paddingTop: 3 }}>{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, color: "var(--blue-900)", letterSpacing: "-0.012em", marginBottom: 5 }}>{p.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-600)" }}>{p.d}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>);

};

// -----------------------------------------------------------
// 10 · RODAPÉ institucional (obrigatório · operadora de saúde)
// -----------------------------------------------------------
const Footer = () => {
  const cols = [
  { h: "Rede", links: [{ t: "Quem somos", href: "#quem-somos" }, { t: "O que entregamos", href: "#pilares" }, { t: "Tecnologia", href: "#tecnologia" }, { t: "Médicos da rede", href: "#casos" }, { t: "Como entrar", href: "#como-entrar" }] },
  { h: "Acesso", links: [{ t: "Entrar", href: "https://credenciamento.evidiasaude.com.br/login", ext: true }, { t: "Para operadoras", href: "mailto:anderson@grupoevidia.com.br?subject=Operadoras%20%C2%B7%20Evidia" }, { t: "FAQ", href: "FAQ.html" }, { t: "Fale conosco", href: "#fale-especialista" }] }];

  return (
    <div className="ab-footer" style={{ width: 1440, background: "#fff", position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)", padding: "64px 96px 40px", fontFamily: "var(--font-body)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 56, paddingBottom: 48 }}>
        <div>
          <img src="assets/logo_evidia_notag.png" alt="Evidia" style={{ height: 38, display: "block", marginBottom: 20 }} />
          <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-600)", maxWidth: "34ch" }}>A rede que reúne os melhores médicos sob um único credenciamento.

          </p>
          <div style={{ marginTop: 20, fontFamily: "var(--font-eyebrow)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600 }}>
            Building evidence-based care networks
          </div>
        </div>
        {cols.map((c, i) =>
        <div key={i}>
            <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--blue-900)", marginBottom: 18 }}>{c.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {c.links.map((l, j) =>
            <a key={j} href={l.href} target={l.ext ? "_blank" : undefined} rel={l.ext ? "noopener noreferrer" : undefined} style={{ fontSize: 14.5, color: "var(--ink-600)", textDecoration: "none" }}>{l.t}</a>
            )}
            </div>
          </div>
        )}
      </div>

      {/* faixa legal obrigatória */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
        <div>
          <div style={{ fontSize: 13.5, color: "var(--ink-700)", whiteSpace: "nowrap" }}>
            <strong style={{ fontWeight: 700, color: "var(--blue-900)" }}>Evidia Saúde LTDA</strong>
            <span style={{ color: "var(--ink-500)" }}> · CNPJ 65.629.630/0001-75</span>
          </div>
          <div style={{ marginTop: 6, fontSize: 13, color: "var(--ink-500)" }}>© 2026 Todos os direitos reservados.</div>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", padding: "12px 22px", background: "var(--ink-950)", color: "#fff", borderRadius: 8, fontFamily: "var(--font-eyebrow)", fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", whiteSpace: "nowrap" }}>
          ANS – nº 42487-1
        </div>
      </div>
    </div>);

};

Object.assign(window, { Stats, Tech, Founder, Operadoras, Footer, FaqTeaser });