// ============================================================
// Evidia · Mockups v2 · Seção 03 — opções de redesenho dos 4 pilares
//   Opção A · Editorial numerado (institucional, premium)
//   Opção B · Carrossel estilo Caveo (cartão em destaque)
// ============================================================

const PILLARS = [
  {
    n: "01", kicker: "Conexão", t: "Credenciamento único.",
    d: "Acesse múltiplas operadoras com um único credenciamento. Sem negociar plano a plano.",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><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>,
  },
  {
    n: "02", kicker: "Comunidade", t: "Você não negocia sozinho.",
    d: "Faça parte de uma comunidade que tem voz e peso junto às operadoras.",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><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>,
  },
  {
    n: "03", kicker: "Tecnologia", t: "Portal único, 100% gratuito.",
    d: "Prontuário, faturamento e IA clínica numa só interface. Gratuito para o médico.",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><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>,
  },
  {
    n: "04", kicker: "Segurança", t: "Previsibilidade financeira.",
    d: "Auditorias e regras predefinidas tornam seu faturamento mais seguro e previsível.",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" 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>,
  },
];

const FreeBadge = () => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 20px", borderRadius: 999, border: "1px solid var(--blue-200)", background: "var(--blue-050)" }}>
    <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>
);

// -----------------------------------------------------------
// OPÇÃO A · Editorial numerado
// -----------------------------------------------------------
const PillarsEditorial = () => (
  <div className="ab-pillars-a" style={{ width: 1440, height: 760, background: "#fff", padding: "84px 96px", position: "relative", overflow: "hidden" }}>
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 16 }}>
      <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>
      <FreeBadge />
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 80 }}>
      {PILLARS.map((p, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "start", padding: "38px 0 34px", borderTop: "1px solid var(--line)" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 60, fontWeight: 600, lineHeight: 0.9, letterSpacing: "-0.03em", color: "var(--blue-200)" }}>{p.n}</div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
              <span style={{ width: 26, height: 26, color: "var(--blue-600)" }}>{p.icon}</span>
              <span style={{ fontFamily: "var(--font-eyebrow)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--cyan-700)" }}>{p.kicker}</span>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 27, fontWeight: 600, color: "var(--blue-900)", letterSpacing: "-0.018em", lineHeight: 1.16, marginBottom: 12 }}>{p.t}</div>
            <div style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-600)", maxWidth: "44ch" }}>{p.d}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// -----------------------------------------------------------
// OPÇÃO B · Carrossel estilo Caveo — cards iguais, capa de imagem,
// destaque no hover/clique (interativo).
// -----------------------------------------------------------
const PillarsCarousel = () => {
  const [active, setActive] = React.useState(0);
  const [hover, setHover] = React.useState(-1);
  const covers = [
    "Capa · conexão / operadoras",
    "Capa · comunidade médica",
    "Capa · portal / tela do produto",
    "Capa · previsibilidade",
  ];
  const move = (dir) => setActive((a) => Math.max(0, Math.min(PILLARS.length - 1, a + dir)));

  return (
    <div className="ab-pillars-b" style={{ width: 1440, height: 840, background: "var(--bg-soft)", padding: "78px 96px 60px", position: "relative", overflow: "hidden" }}>
      <div style={{ textAlign: "center", marginBottom: 46 }}>
        <div className="ev-eyebrow" style={{ marginBottom: 18, justifyContent: "center" }}>
          <span className="num">Por que fazer parte</span>
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 46, lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.024em", margin: "0 auto", color: "var(--blue-900)", maxWidth: "24ch" }}>
          O que você ganha ao entrar na rede.
        </h2>
      </div>

      <div style={{ display: "flex", gap: 24, justifyContent: "center", alignItems: "flex-start" }}>
        {PILLARS.map((p, i) => {
          const on = i === active || i === hover;
          return (
            <div
              key={i}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(-1)}
              onClick={() => setActive(i)}
              style={{
                width: 300,
                height: 432,
                borderRadius: 22,
                overflow: "hidden",
                background: "#fff",
                border: "1px solid " + (on ? "var(--blue-300)" : "var(--line)"),
                boxShadow: on ? "0 28px 60px rgba(10,37,64,0.22)" : "var(--shadow-sm)",
                transform: on ? "translateY(-10px)" : "translateY(0)",
                transition: "transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s",
                cursor: "pointer",
                display: "flex", flexDirection: "column", position: "relative",
              }}
            >
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: "var(--grad-arc)", opacity: on ? 1 : 0, transition: "opacity .24s", zIndex: 3 }}></div>
              {/* capa: card 03 mostra o portal real num MacBook; demais usam image-slot */}
              <div style={{ position: "relative", height: 176, background: "var(--blue-050)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
                {i === 2 && window.MLaptop
                ? <window.MLaptop w={264} />
                : <image-slot
                  id={"pilar-cover-" + (i + 1)}
                  shape="rect"
                  placeholder={covers[i]}
                  style={{ width: "100%", height: "100%", display: "block" }}
                ></image-slot>}
                <span style={{ position: "absolute", left: 18, top: 14, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff", textShadow: "0 1px 4px rgba(10,37,64,0.72), 0 2px 10px rgba(10,37,64,0.45)", zIndex: 2 }}>{p.n}</span>
              </div>
              {/* corpo */}
              <div style={{ padding: "24px 26px 28px", display: "flex", flexDirection: "column", flex: 1 }}>
                <div style={{ fontFamily: "var(--font-eyebrow)", fontSize: 10, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--cyan-700)", marginBottom: 12 }}>{p.kicker}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.016em", lineHeight: 1.18, marginBottom: 12, color: "var(--blue-900)" }}>{p.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.58, color: "var(--ink-600)" }}>{p.d}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* affordance de carrossel (funcional) */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 24, marginTop: 42 }}>
        <button onClick={() => move(-1)} style={{ width: 44, height: 44, borderRadius: "50%", border: "1px solid var(--line)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--blue-700)" }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <div style={{ display: "flex", gap: 9 }}>
          {PILLARS.map((_, i) => (
            <span key={i} onClick={() => setActive(i)} style={{ width: i === active ? 26 : 8, height: 8, borderRadius: 999, background: i === active ? "var(--blue-600)" : "var(--blue-200)", transition: "all .2s", cursor: "pointer" }}></span>
          ))}
        </div>
        <button onClick={() => move(1)} style={{ width: 44, height: 44, borderRadius: "50%", border: "none", background: "var(--blue-700)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "#fff" }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { PillarsEditorial, PillarsCarousel });