// ============================================================
// Evidia · Mockups v2 · 4 Pilares + Comunidade-com-voz + Casos
// ============================================================

// feature-card icon (filled rounded square, brand fill)
const FeatIcon = ({ children, bg = "var(--blue-600)" }) =>
<div style={{ width: 46, height: 46, borderRadius: 12, background: bg, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
    {children}
  </div>;

const ic = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.85, strokeLinecap: "round", strokeLinejoin: "round" };

// -----------------------------------------------------------
// 03 · POR QUE FAZER PARTE · 4 pilares (do one-page)
// -----------------------------------------------------------
const Pillars = () => {
  const cards = [
  {
    kicker: "01 · Conexão", t: "Contrato único.",
    d: "Acesse múltiplas operadoras com um único credenciamento. Sem negociar plano a plano.",
    icon: <svg {...ic}><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" /></svg>
  },
  {
    kicker: "02 · Comunidade", t: "Você não negocia sozinho.",
    d: "Faça parte de uma comunidade que tem voz e peso junto às operadoras.",
    icon: <svg {...ic}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
  },
  {
    kicker: "03 · Tecnologia", t: "Portal único, 100% gratuito.",
    d: "Prontuário, agenda, faturamento e IA clínica numa só interface. Gratuito para o médico.",
    icon: <svg {...ic}><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /></svg>
  },
  {
    kicker: "04 · Segurança", t: "Previsibilidade financeira.",
    d: "Auditorias e regras predefinidas tornam seu faturamento mais seguro e previsível.",
    icon: <svg {...ic}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></svg>
  }];


  return (
    <div className="ab-pillars" style={{ width: 1440, height: 760, background: "var(--bg-soft)", padding: "88px 96px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 48 }}>
        <div>
          <div className="ev-eyebrow" style={{ marginBottom: 22 }}>
            <span className="num">Por que fazer parte da rede Evidia</span>
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 50, lineHeight: 1.04, fontWeight: 600, letterSpacing: "-0.024em", margin: 0, color: "var(--blue-900)", maxWidth: "22ch" }}>
            Quatro motivos. Um só credenciamento.
          </h2>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 20px", borderRadius: 999, border: "1px solid var(--blue-200)", background: "var(--blue-050)", marginBottom: 4 }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--blue-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></svg>
          <span style={{ fontFamily: "var(--font-eyebrow)", fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--blue-800)" }}>
            Sem taxas · sem mensalidade
          </span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {cards.map((c, i) =>
        <div key={i} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 18, padding: "30px 32px", boxShadow: "var(--shadow-sm)", display: "grid", gridTemplateColumns: "46px 1fr", gap: 22, alignItems: "start" }}>
            <FeatIcon>{c.icon}</FeatIcon>
            <div>
              <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 10, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--cyan-700)", marginBottom: 10 }}>{c.kicker}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600, color: "var(--blue-900)", letterSpacing: "-0.016em", lineHeight: 1.2, marginBottom: 10 }}>{c.t}</div>
              <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-600)", maxWidth: "42ch" }}>{c.d}</div>
            </div>
          </div>
        )}
      </div>
    </div>);

};

// -----------------------------------------------------------
// 04 · A COMUNIDADE COM VOZ · resultado ao ecossistema (dark, tese)
// -----------------------------------------------------------
const Community = () => {
  const results = [
  {
    t: "Cuidado baseado em evidências.",
    d: "Protocolos clínicos compartilhados e revisados pela própria comunidade médica. Padrão claro, não opinião isolada.",
    icon: <svg {...ic} stroke="var(--cyan-400)"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="m9 15 2 2 4-4" /></svg>
  },
  {
    t: "Melhores desfechos.",
    d: "Decisões baseadas em evidências e bem documentadas melhoram o resultado clínico para o paciente.",
    icon: <svg {...ic} stroke="var(--cyan-400)"><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg>
  },
  {
    t: "Menos desperdício.",
    d: "Menos retrabalho, menos exame redundante, menos glosa. O sistema de saúde passa a gastar melhor.",
    icon: <svg {...ic} stroke="var(--cyan-400)"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>
  }];


  return (
    <div className="ab-community" style={{ width: 1440, height: 820, background: "#050a14", color: "#fff", position: "relative", overflow: "hidden" }}>
      <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, padding: "84px 96px", height: "100%", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div className="ev-eyebrow ev-eyebrow--dark" style={{ marginBottom: 26 }}>
              <span className="num">A comunidade com voz</span>
              <span className="rule" style={{ flex: 1, maxWidth: 80 }}></span>
            </div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 52, lineHeight: 1.04, fontWeight: 600, letterSpacing: "-0.024em", margin: 0, color: "#fff", maxWidth: "18ch" }}>
              A comunidade não entrega só consultas. Entrega <em style={{ fontStyle: "normal", ...{ background: "var(--grad-arc)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" } }}>evidência</em>.
            </h2>
          </div>
          <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.62, color: "rgba(255,255,255,0.72)", maxWidth: "46ch", paddingBottom: 6 }}>
            Quando os melhores médicos de uma cidade compartilham protocolos e padrão clínico, todo o ecossistema de saúde ganha. É isso que dá à rede voz e relevância junto às operadoras.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, borderTop: "1px solid rgba(255,255,255,0.16)", paddingTop: 44 }}>
          {results.map((r, i) =>
          <div key={i}>
              <div style={{ marginBottom: 22 }}>{r.icon}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 23, fontWeight: 600, color: "#fff", letterSpacing: "-0.016em", lineHeight: 1.22, marginBottom: 12 }}>{r.t}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.62, color: "rgba(255,255,255,0.62)", maxWidth: "38ch" }}>{r.d}</div>
            </div>
          )}
        </div>

        {/* flow strip — médico → evidência → resultado → voz */}
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 18, fontFamily: "var(--font-eyebrow)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.78)", fontWeight: 600, paddingTop: 36 }}>
          {["Médicos selecionados", "Evidência & protocolos", "Melhores desfechos · menos custo", "Voz junto às operadoras"].map((s, i, arr) =>
          <React.Fragment key={i}>
              <span style={{ padding: "10px 16px", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 999, color: i === arr.length - 1 ? "var(--ink-950)" : "#fff", background: i === arr.length - 1 ? "var(--cyan-400)" : "transparent" }}>{s}</span>
              {i < arr.length - 1 &&
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--cyan-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
            }
            </React.Fragment>
          )}
        </div>
      </div>
    </div>);

};

// -----------------------------------------------------------
// 05 · CASOS · 3 médicos (membros fundadores)
// -----------------------------------------------------------
const Cases = () => {
  const docs = [
  { name: "Prof. Dr. Elie Fiss", meta: "Pneumologista · São Paulo · SP", initials: "EF", real: "assets/photo_dr_elie.png", pos: "center 12%",
    quote: "Quis fazer parte de um grupo que leva a sério a medicina de excelência. É essa a mudança que eu quero ver na saúde." },
  { name: "Dra. Amanda Moreto", meta: "Gastro · Araraquara · SP", initials: "AM", real: "assets/photo_doctor_amanda.jpg", pos: "center 2%",
    quote: "O que me convenceu foi tirar a parte administrativa da minha mesa e devolver esse tempo ao paciente." },
  { name: "Dr. Renato Macchione", meta: "Oftalmologista · Sorocaba · SP", initials: "RM", real: "assets/photo_doctor_renato.jpg", pos: "center 22%",
    quote: "O acesso a operadoras que eu não alcançava sozinho foi o que me convenceu. E tudo num credenciamento só, sem negociação plano a plano." },
  { name: "Dr. Luiz Felipe Dipe", meta: "Reumatologista · Santos · SP", initials: "LD", real: "assets/photo_doctor_dipe.jpg", pos: "center 18%",
    quote: "Ser fundador é estar na frente de uma mudança que a categoria precisa: o médico sendo valorizado de novo. Quis liderar isso na minha cidade." }];


  return (
    <div className="ab-cases" style={{ width: 1440, height: 880, background: "#fff", padding: "56px 96px 96px", position: "relative", overflow: "hidden" }}>
      <div style={{ marginBottom: 48 }}>
        <div className="ev-eyebrow" style={{ marginBottom: 22 }}>
          <span className="num">Quem já faz parte</span>
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 50, lineHeight: 1.04, fontWeight: 600, letterSpacing: "-0.024em", margin: 0, color: "var(--blue-900)", maxWidth: "24ch" }}>
          Médicos que confiaram na Evidia.
        </h2>
        <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "var(--ink-600)", maxWidth: "56ch" }}>Conheça alguns dos médicos que já fazem parte da Evidia e atuam como referência em suas regiões.

        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {docs.map((d, i) =>
        <div key={i} style={{ display: "flex", flexDirection: "column" }}>
            {/* photo / placeholder */}
            <div style={{ position: "relative", height: 360, overflow: "hidden", borderRadius: 16, background: "var(--ink-100)", marginBottom: 20 }}>
              {d.real ?
            <img src={d.real} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: d.pos || "center 18%" }} /> :

            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(150deg, var(--blue-050) 0%, var(--blue-100) 60%, var(--ink-100) 100%)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 64, fontWeight: 600, color: "var(--blue-300)", letterSpacing: "-0.03em" }}>{d.initials}</span>
                </div>
            }
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(transparent 62%, rgba(10, 37, 64, 0.32) 100%) center center", margin: "0px" }}></div>
              <div style={{ position: "absolute", left: 16, top: 16, padding: "5px 11px", background: "rgba(255,255,255,0.92)", borderRadius: 999, fontFamily: "var(--font-eyebrow)", fontSize: 9, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--blue-700)" }}>
                Membro fundador
              </div>
              {!d.real &&
            <div style={{ position: "absolute", right: 16, bottom: 16, fontFamily: "var(--font-eyebrow)", fontSize: 8.5, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-500)" }}>
                  foto a confirmar
                </div>
            }
            </div>

            <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 8 }}>
              {d.meta}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, color: "var(--blue-900)", letterSpacing: "-0.014em", marginBottom: 12 }}>
              {d.name}
            </div>
            <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 15.5, fontStyle: "italic", lineHeight: 1.46, color: "var(--ink-700)", letterSpacing: "-0.005em", borderLeft: "2px solid var(--cyan-500)", paddingLeft: 14 }}>
              “{d.quote}”
            </blockquote>
          </div>
        )}
      </div>
    </div>);

};

Object.assign(window, { Pillars, Community, Cases });