/* B28 HospeX — login experience */
function Login({ onEnter }) {
  const [email, setEmail] = useState("admin@costaviva.com");
  const [pwd, setPwd] = useState("admin123");
  const [show, setShow] = useState(false);
  const [remember, setRemember] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function submit(e) {
    e && e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password: pwd })
      });

      const data = await res.json();

      if (data.success) {
        if (remember) localStorage.setItem("hx-user", JSON.stringify(data.user));
        onEnter(data.user);
      } else {
        setError(data.error || 'Falha ao entrar');
      }
    } catch (err) {
      setError('Erro de conexão com o servidor');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div style={{ display: "flex", minHeight: "100vh", background: "var(--background)" }}>
      {/* Brand panel */}
      <div style={{ width: "46%", maxWidth: 720, background: "var(--sidebar-bg)", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "56px 64px" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(circle at 80% 0%, rgba(134,217,136,0.12), transparent 55%), repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 2px, transparent 2px, transparent 16px)", pointerEvents: "none" }}></div>
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 13 }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, background: "var(--primary-fixed)", display: "grid", placeItems: "center" }}>
            <span className="font-headline" style={{ fontSize: 17, fontWeight: 800, color: "var(--on-primary-fixed)", letterSpacing: "-0.04em" }}>B28</span>
          </div>
          <div>
            <div className="font-headline" style={{ fontSize: 20, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em", lineHeight: 1 }}>HospeX</div>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--primary-fixed-dim)", marginTop: 4 }}>Guest Experience</div>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div className="eyebrow" style={{ color: "var(--primary-fixed-dim)", fontSize: 11, marginBottom: 18 }}>Plataforma de experiência do hóspede</div>
          <h1 className="font-headline" style={{ margin: 0, fontSize: 42, fontWeight: 800, lineHeight: 1.08, letterSpacing: "-0.03em", color: "#fff" }}>
            Cada hóspede ouvido.<br />Cada avaliação respondida.
          </h1>
          <p style={{ margin: "22px 0 0", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.7)", maxWidth: 440, fontFamily: "var(--font-serif)" }}>
            Pesquisas, reputação online, gestão de casos e concierge com IA — em uma só plataforma, conectada a 50+ PMS e a todos os seus canais.
          </p>
          <div style={{ display: "flex", gap: 36, marginTop: 40 }}>
            {[["NPS", "+71"], ["Resolução IA", "73%"], ["PMS integrados", "50+"]].map((s, i) => (
              <div key={i}>
                <div className="font-headline" style={{ fontSize: 30, fontWeight: 800, color: "var(--primary-fixed-dim)", letterSpacing: "-0.02em" }}>{s[1]}</div>
                <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", fontWeight: 600, marginTop: 2 }}>{s[0]}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: "relative", fontSize: 12.5, color: "rgba(255,255,255,0.45)" }}>© 2026 B28 · Rede Costa Viva</div>
      </div>

      {/* Form */}
      <div style={{ flex: 1, display: "grid", placeItems: "center", padding: 40 }}>
        <form onSubmit={submit} style={{ width: "100%", maxWidth: 400 }}>
          <h2 className="font-headline" style={{ margin: 0, fontSize: 28, fontWeight: 800, letterSpacing: "-0.025em" }}>Bem-vinda de volta</h2>
          <p style={{ margin: "8px 0 32px", fontSize: 14.5, color: "var(--on-surface-variant)" }}>Acesse o painel da sua rede hoteleira.</p>

          {error && (
            <div style={{ marginBottom: 20, padding: "12px 16px", borderRadius: 12, background: "var(--error-container)", color: "var(--on-error-container)", fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 10 }}>
              <Icon name="error" size={18} /> {error}
            </div>
          )}

          <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "var(--on-surface)", marginBottom: 8 }}>E-mail corporativo</label>
          <div style={{ position: "relative", marginBottom: 18 }}>
            <Icon name="mail" size={19} style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", color: "var(--on-surface-variant)" }} />
            <input value={email} onChange={e => setEmail(e.target.value)} type="email"
              style={{ width: "100%", fontFamily: "var(--font-body)", fontSize: 14, background: "var(--surface-container-low)", border: "1.5px solid color-mix(in srgb, var(--outline-variant) 60%, transparent)", borderRadius: 12, padding: "13px 16px 13px 46px", color: "var(--on-surface)" }} />
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
            <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--on-surface)" }}>Senha</label>
            <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 12.5, fontWeight: 700, color: "var(--primary)", textDecoration: "none" }}>Esqueci a senha</a>
          </div>
          <div style={{ position: "relative", marginBottom: 22 }}>
            <Icon name="lock" size={19} style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", color: "var(--on-surface-variant)" }} />
            <input value={pwd} onChange={e => setPwd(e.target.value)} type={show ? "text" : "password"}
              style={{ width: "100%", fontFamily: "var(--font-body)", fontSize: 14, background: "var(--surface-container-low)", border: "1.5px solid color-mix(in srgb, var(--outline-variant) 60%, transparent)", borderRadius: 12, padding: "13px 46px 13px 46px", color: "var(--on-surface)" }} />
            <button type="button" onClick={() => setShow(s => !s)} style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--on-surface-variant)" }}>
              <Icon name={show ? "visibility_off" : "visibility"} size={19} />
            </button>
          </div>

          <label style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 26, cursor: "pointer", userSelect: "none" }}>
            <span onClick={() => setRemember(r => !r)} style={{ width: 20, height: 20, borderRadius: 6, border: "1.5px solid " + (remember ? "var(--primary)" : "var(--outline)"), background: remember ? "var(--primary)" : "transparent", display: "grid", placeItems: "center", flexShrink: 0 }}>
              {remember && <Icon name="check" size={14} style={{ color: "#fff" }} />}
            </span>
            <span style={{ fontSize: 13.5, color: "var(--on-surface-variant)" }}>Manter-me conectada neste dispositivo</span>
          </label>

          <button type="submit" disabled={loading} className="btn btn-primary" style={{ width: "100%", justifyContent: "center", fontSize: 15, padding: "15px 24px", opacity: loading ? 0.8 : 1 }}>
            {loading ? <><Icon name="progress_activity" size={19} className="hx-spin" /> Entrando…</> : <>Entrar no painel <Icon name="arrow_forward" size={18} /></>}
          </button>

          <div style={{ display: "flex", alignItems: "center", gap: 14, margin: "26px 0" }}>
            <div style={{ flex: 1, height: 1, background: "var(--outline-variant)" }}></div>
            <span style={{ fontSize: 12, color: "var(--on-surface-variant)", fontWeight: 600 }}>ou continue com</span>
            <div style={{ flex: 1, height: 1, background: "var(--outline-variant)" }}></div>
          </div>

          <div style={{ display: "flex", gap: 12 }}>
            {[["Google", "G"], ["Microsoft", "⊞"]].map((p, i) => (
              <button key={i} type="button" onClick={submit} style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 9, padding: "12px 16px", borderRadius: 12, border: "1.5px solid var(--outline-variant)", background: "var(--surface-container-lowest)", cursor: "pointer", fontSize: 13.5, fontWeight: 700, fontFamily: "var(--font-headline)", color: "var(--on-surface)" }}>
                <span style={{ fontSize: 16, fontWeight: 800, color: i === 0 ? "#ea4335" : "#0078d4" }}>{p[1]}</span>{p[0]}
              </button>
            ))}
          </div>

          <p style={{ textAlign: "center", fontSize: 13, color: "var(--on-surface-variant)", marginTop: 32 }}>
            Ainda não usa o HospeX? <a href="#" onClick={e => e.preventDefault()} style={{ color: "var(--primary)", fontWeight: 700, textDecoration: "none" }}>Fale com vendas</a>
          </p>
        </form>
      </div>
    </div>
  );
}
window.Login = Login;