// ============================================================
// Evidia · Mockups v2 · Nav + Hero (A/B) + Manifesto
// Posicionamento novo (one-page médicos + guia de bolso):
//   "Foque na medicina. Nós cuidamos do resto."
// ============================================================

// arc-gradient text helper (the brand signature)
const arcText = {
  background: "var(--grad-arc)",
  WebkitBackgroundClip: "text",
  backgroundClip: "text",
  color: "transparent"
};

// -----------------------------------------------------------
// Shared Nav
// -----------------------------------------------------------
const EvNav = ({ dark = false }) =>
<nav className={"ev-nav" + (dark ? " ev-nav--dark" : "")}>
    <a href="#" className="ev-nav__logo">
      <img src="assets/logo_evidia_notag.png" alt="Evidia" />
    </a>
    <div className="ev-nav__links">
      <a href="#" className="ev-nav__link">Quem somos</a>
      <a href="#" className="ev-nav__link">O que entregamos</a>
      <a href="#" className="ev-nav__link">A comunidade</a>
      <a href="#" className="ev-nav__link">Médicos da rede</a>
      <a href="#" className="ev-nav__link">Tecnologia</a>
      <a href="#" className="ev-nav__link">FAQ</a>
    </div>
    <div className="ev-nav__right">
      <a href="#" className="ev-nav__signin">Entrar</a>
      <a href="https://credenciamento.evidiasaude.com.br/interesse" target="_blank" rel="noopener noreferrer" className="ev-credenciar">
        Quero me credenciar
        <span className="ev-credenciar__chev">
          <svg width="12" height="12" 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>
    </div>
  </nav>;


// CTA cluster reused by both heroes
const HeroCtas = ({ dark = false }) =>
<div style={{ marginTop: 44, display: "flex", gap: 14, alignItems: "center" }}>
    <a href="https://credenciamento.evidiasaude.com.br/interesse" target="_blank" rel="noopener noreferrer" className={"ev-pill" + (dark ? " ev-pill--cyan" : "")}>
      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" + (dark ? " ev-pill-ghost--dark" : "")}>
      Fale com um especialista
    </a>
  </div>;


// -----------------------------------------------------------
// 01 · HERO · A · Foto + promessa (recomendada — evolui o one-page)
// -----------------------------------------------------------
const HeroA = ({ accent } = {}) =>
<div className="ab-hero-a" style={{ width: 1440, height: 820, background: "#fff", color: "var(--blue-900)", position: "relative", overflow: "hidden", fontFamily: "var(--font-body)" }}>
    <EvNav />

    <div style={{ display: "grid", gridTemplateColumns: "1fr 588px", height: "calc(100% - 76px)" }}>
      {/* LEFT · promise */}
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "0px 72px 0px 96px" }}>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 78, lineHeight: 0.99, fontWeight: 600, letterSpacing: "-0.03em", margin: 0, color: "var(--blue-900)" }}>
          Foque na<br />medicina.<br />
          <span style={accent ? { color: accent, display: "inline-block", paddingRight: "0.12em" } : { ...arcText, display: "inline-block", paddingRight: "0.12em" }}>Nós cuidamos</span><br />
          <span style={accent ? { color: accent, display: "inline-block", paddingRight: "0.12em" } : { ...arcText, display: "inline-block", paddingRight: "0.12em" }}>do resto.</span>
        </h1>

        <p style={{ marginTop: 34, fontSize: 18, lineHeight: 1.62, color: "var(--ink-600)", maxWidth: "46ch" }}>A Evidia conecta você a operadoras e pacientes com um único credenciamento. Portal único e apoio em faturamento e glosas, sem mensalidade para o médico.

      </p>

        <HeroCtas />
      </div>

      {/* RIGHT · portrait com transição suave para o hero */}
      <div style={{ position: "relative", overflow: "hidden", background: "#fff" }}>
        <img src="assets/photo_doctor_renato.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 14%", display: "block", WebkitMaskImage: "linear-gradient(90deg, transparent 0%, transparent 7%, rgba(0,0,0,0.55) 26%, #000 56%)", maskImage: "linear-gradient(90deg, transparent 0%, transparent 7%, rgba(0,0,0,0.55) 26%, #000 56%)" }} />
        {/* feather topo/base → a foto se dissolve no branco do hero (a borda esquerda é feita por máscara na própria imagem, sem emenda) */}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 14%)" }}></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 12%)" }}></div>
        <div style={{ position: "absolute", left: 56, bottom: 40, color: "var(--blue-900)", fontFamily: "var(--font-eyebrow)", fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600, display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 20, height: 1, background: "var(--cyan-500)" }}></span>
          Dr. Renato Macchione · Membro Evidia
        </div>
      </div>
    </div>

  </div>;


// -----------------------------------------------------------
// 01 · HERO · B · Editorial institucional (dark)
// -----------------------------------------------------------
const HeroB = () =>
<div className="ab-hero-b" style={{ width: 1440, height: 820, background: "#050a14", color: "#fff", position: "relative", overflow: "hidden", fontFamily: "var(--font-body)" }}>
    <div className="ev-dark-bg"><i className="b1"></i><i className="b2"></i><i className="b3"></i></div>
    <div className="ev-grain"></div>

    <div style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column" }}>
      <EvNav dark />

      <div style={{ flex: 1, padding: "0 96px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div className="ev-eyebrow ev-eyebrow--dark" style={{ marginBottom: 34 }}>
          <span className="num">Comunidade de excelência</span>
          <span className="rule" style={{ flex: 1, maxWidth: 90 }}></span>
        </div>

        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 96, lineHeight: 0.98, fontWeight: 600, letterSpacing: "-0.03em", margin: 0, color: "#fff", maxWidth: "16ch" }}>
          Foque na medicina. <span style={arcText}>Nós cuidamos do resto.</span>
        </h1>

        <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.62, color: "rgba(255,255,255,0.74)", maxWidth: "52ch" }}>
          Um único credenciamento, voz de comunidade junto às operadoras e um portal que cuida de faturamento, glosa e tecnologia. Você cuida dos pacientes.
        </p>

        <HeroCtas dark />
      </div>

      {/* bottom institutional strip */}
      <div style={{ padding: "0 96px 36px", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--font-eyebrow)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)" }}>
        <span>Building evidence-based care networks</span>
        <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--cyan-400)" }}></span>
          Contrato único · 100% gratuito · comunidade com voz
        </span>
      </div>
    </div>

  </div>;


// -----------------------------------------------------------
// 02 · MANIFESTO · quem é a Evidia (a frase-âncora)
// -----------------------------------------------------------
const Manifesto = () =>
<div className="ab-manifesto" style={{ width: 1440, height: 760, background: "#fff", position: "relative", overflow: "hidden", padding: "92px 96px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
    <div style={{ position: "absolute", left: -140, top: -120, width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle, #6b3f9c 0%, #444ca2 26%, transparent 70%)", filter: "blur(90px)", opacity: 0.18, pointerEvents: "none" }}></div>

    <div className="ev-eyebrow" style={{ marginBottom: 40, position: "relative" }}>
      <span className="num">Quem é a Evidia</span>
      <span className="rule" style={{ flex: 1, maxWidth: 120 }}></span>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 80, alignItems: "stretch", position: "relative" }}>
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 1.24, fontWeight: 500, color: "var(--blue-900)", letterSpacing: "-0.018em", textWrap: "balance" }}>
          A Evidia reúne os <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>melhores médicos da sua cidade</strong> sob um único credenciamento, dá a eles <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>voz de comunidade</strong> e cuida de toda a parte chata — faturamento, glosa, tecnologia — para o médico <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>focar na medicina</strong>.
        </p>
        <div className="ev-arc-rule" style={{ width: 96, marginTop: 40 }}></div>
      </div>

      <div style={{ alignSelf: "stretch", display: "flex", flexDirection: "column" }}>
        {/* provisório · card de declaração da marca (troca pelo vídeo institucional depois) */}
        <div style={{ position: "relative", flex: 1, minHeight: 300, borderRadius: 20, overflow: "hidden", background: "var(--grad-blue-deep)", display: "flex", flexDirection: "column", justifyContent: "center", padding: "48px 44px" }}>
          <img src="assets/logo_arc_pastel.png" alt="" style={{ position: "absolute", right: -34, bottom: -34, width: 200, opacity: 0.16 }} />
          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: "var(--grad-arc)" }}></div>

          <div style={{ position: "relative" }}>
            <img src="assets/logo_arc_color.png" alt="" style={{ width: 60, display: "block", marginBottom: 26, filter: "brightness(0) invert(1)", opacity: 0.9 }} />
            <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 23, lineHeight: 1.4, fontWeight: 500, color: "#fff", letterSpacing: "-0.01em" }}>
              Não somos apenas uma rede de médicos. Somos uma <strong style={{ fontWeight: 700, color: "var(--cyan-400)" }}>comunidade de excelência</strong>, com voz e relevância no mercado.
            </p>
            <div style={{ marginTop: 26, fontFamily: "var(--font-eyebrow)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>
              Manifesto Evidia · 2026
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;


Object.assign(window, { EvNav, HeroA, HeroB, Manifesto });