/* ============================================================
   Vela — S1 Login + S5 WhatsApp conversation preview
   ============================================================ */
(function () {
  // ---------- S1 · Login ----------
  function Login({ onSignIn }) {
    return (
      <div style={{ height: "100%", display: "flex", background: "var(--ink)", position: "relative", overflow: "hidden" }}>
        {/* left brand panel */}
        <div style={{ flex: "1.2", padding: "56px 60px", display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", color: "var(--ink-inv)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
            <VelaMark size={36} gradient onDark color="#EAF1FB" />
            <div className="serif" style={{ fontSize: 28, color: "#fff" }}>Vela</div>
          </div>
          <div style={{ maxWidth: 460 }}>
            <div className="serif" style={{ fontSize: 38, lineHeight: 1.15, color: "#fff", marginBottom: 18 }}>The document desk for mortgage brokers.</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(234,241,251,.7)", margin: 0 }}>Open a case, let the WhatsApp agent collect every document from your borrowers, and review only what needs you. From <em>borrador</em> to <em>completado</em>, in one place.</p>
          </div>
          <div style={{ display: "flex", gap: 26, fontSize: 12.5, color: "rgba(234,241,251,.55)" }}>
            {[["Agent-led", "WhatsApp collection"], ["AI-validated", "Fields extracted & checked"], ["Spanish-native", "Templates by tipo de cuenta"]].map(([a, b]) => (
              <div key={a}><div style={{ color: "var(--gold-2)", fontWeight: 700, marginBottom: 2 }}>{a}</div>{b}</div>
            ))}
          </div>
          <div style={{ position: "absolute", right: -120, bottom: -120, opacity: 0.06 }}><VelaMark size={420} color="#fff" onDark /></div>
        </div>

        {/* right sign-in */}
        <div style={{ flex: "1", background: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
          <div style={{ width: "100%", maxWidth: 360, textAlign: "center" }}>
            <h1 className="serif" style={{ fontSize: 24, marginBottom: 8 }}>Sign in</h1>
            <p style={{ fontSize: 13.5, color: "var(--ink-3)", marginBottom: 30 }}>Use your work Google account to continue.</p>
            <button className="btn" onClick={onSignIn} style={{ width: "100%", justifyContent: "center", height: 48, background: "var(--surface)", border: "1px solid var(--line-strong)", color: "var(--ink)", fontSize: 14.5, boxShadow: "var(--sh-sm)" }}>
              <Icon name="google" size={19} stroke={0} style={{ color: "var(--ink)" }} /> Sign in with Google
            </button>
            <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 22, lineHeight: 1.5 }}>Minimal access — Vela only reads your name and email to identify you.</div>
          </div>
        </div>
      </div>
    );
  }

  // ---------- S5 · WhatsApp conversation ----------
  function WhatsApp({ caseId, onClose }) {
    const data = window.VELA.whatsapp[caseId] || window.VELA.whatsapp["EXP-2055"];
    return (
      <div style={{ position: "fixed", inset: 0, zIndex: 110, display: "flex", alignItems: "center", justifyContent: "center", padding: 24, background: "rgba(11,27,54,.5)", backdropFilter: "blur(4px)", animation: "fadeIn .2s ease" }} onClick={onClose}>
        <div onClick={(e) => e.stopPropagation()} style={{ display: "flex", gap: 0, animation: "pop .3s cubic-bezier(.2,.8,.3,1)" }}>
          {/* phone */}
          <div style={{ width: 340, height: 660, maxHeight: "90vh", background: "#0B141A", borderRadius: 38, padding: 11, boxShadow: "var(--sh-lg)", border: "1px solid #2A3942" }}>
            <div style={{ height: "100%", borderRadius: 28, overflow: "hidden", display: "flex", flexDirection: "column", background: "#0B141A" }}>
              {/* wa header */}
              <div style={{ background: "#1F2C34", padding: "14px 16px", display: "flex", alignItems: "center", gap: 11, flexShrink: 0 }}>
                <div style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--gold)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 14 }}>VB</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: "#E9EDEF" }}>Vela · Hogar Sur</div>
                  <div style={{ fontSize: 11, color: "#8696A0" }}>agente automático · online</div>
                </div>
                <Icon name="whatsapp" size={18} style={{ color: "#25D366" }} />
              </div>
              {/* chat */}
              <div style={{ flex: 1, overflowY: "auto", padding: "14px 12px", display: "flex", flexDirection: "column", gap: 8,
                background: "#0B141A url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff08'/%3E%3C/svg%3E\")" }}>
                <div style={{ alignSelf: "center", background: "#1E2A30", color: "#8696A0", fontSize: 10.5, padding: "4px 10px", borderRadius: 7, marginBottom: 4 }}>Hoy</div>
                {data.messages.map((m, i) => {
                  const me = m.from === "user";
                  return (
                    <div key={i} style={{ alignSelf: me ? "flex-end" : "flex-start", maxWidth: "82%", background: me ? "#005C4B" : "#1F2C34", color: "#E9EDEF",
                      borderRadius: 10, borderTopRightRadius: me ? 2 : 10, borderTopLeftRadius: me ? 10 : 2, padding: "7px 9px 5px", fontSize: 13, lineHeight: 1.4, boxShadow: "0 1px 1px rgba(0,0,0,.2)" }}>
                      {m.kind === "image" && <div style={{ height: 96, borderRadius: 7, background: "linear-gradient(150deg,#3A4A54,#2A3942)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 4 }}><Icon name="idcard" size={30} style={{ color: "#6B7B86" }} /></div>}
                      {m.kind === "doc" && <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#15212B", borderRadius: 7, padding: "8px 10px", marginBottom: 4 }}><Icon name="docs" size={20} style={{ color: "#8696A0" }} /><span style={{ fontSize: 12, color: "#D1D7DB", fontFamily: "var(--mono)" }}>{m.caption}</span></div>}
                      {m.text && <span>{m.text}</span>}
                      <div style={{ fontSize: 9.5, color: me ? "#9FCFC3" : "#8696A0", textAlign: "right", marginTop: 2 }}>{m.time} {me && "✓✓"}</div>
                    </div>
                  );
                })}
                <div style={{ alignSelf: "flex-start", background: "#1F2C34", borderRadius: 10, borderTopLeftRadius: 2, padding: "10px 14px", display: "flex", gap: 4 }}>
                  {[0, 1, 2].map((d) => <span key={d} style={{ width: 6, height: 6, borderRadius: "50%", background: "#8696A0", opacity: 0.5 + d * 0.15 }} />)}
                </div>
              </div>
              {/* input */}
              <div style={{ background: "#1F2C34", padding: "9px 12px", display: "flex", alignItems: "center", gap: 9, flexShrink: 0 }}>
                <div style={{ flex: 1, background: "#2A3942", borderRadius: 18, padding: "9px 14px", fontSize: 12.5, color: "#8696A0" }}>El borrador responde aquí…</div>
                <div style={{ width: 34, height: 34, borderRadius: "50%", background: "#25D366", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="send" size={15} style={{ color: "#0B141A" }} /></div>
              </div>
            </div>
          </div>
          {/* side note */}
          <div style={{ width: 250, alignSelf: "center", marginLeft: 24, color: "#fff" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}><Icon name="sparkles" size={18} style={{ color: "var(--gold-2)" }} /><span style={{ fontSize: 15, fontWeight: 700 }}>What the borrower sees</span></div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "rgba(234,241,251,.8)" }}>The agent talks to {data.borrower} entirely in WhatsApp — asking for one document at a time, acknowledging each upload, and escalating to you only when it gets stuck.</p>
            <p style={{ fontSize: 12.5, lineHeight: 1.6, color: "rgba(234,241,251,.55)", marginTop: 14 }}>Messages are Spanish-language templates with the borrower's name and document names filled in.</p>
            <button className="btn btn-ghost" onClick={onClose} style={{ marginTop: 18, color: "#fff", borderColor: "rgba(255,255,255,.25)" }}><Icon name="x" size={15} /> Close preview</button>
          </div>
        </div>
      </div>
    );
  }

  window.Login = Login;
  window.WhatsApp = WhatsApp;
})();