// ─────────────────────────────────────────────────────────────────────────
// Meridian — Hermes full-page chat (real /api/hermes/chat via useHermes)
// ─────────────────────────────────────────────────────────────────────────
function HermesPage({ theme, user }) {
  const hermes = useHermes();
  const fresh = hermes.messages.length === 0;
  const hour = new Date().getHours();
  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
  const name = user && user.email ? user.email.split("@")[0] : "there";

  return (
    <div className="rise" style={{ maxWidth: 760, margin: "0 auto", minHeight: "calc(100vh - 180px)", display: "flex", flexDirection: "column" }}>
      {fresh ? (
        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingBottom: 20 }}>
          <Col gap={18} align="center" style={{ textAlign: "center", marginBottom: 28 }}>
            <div style={{ width: 60, height: 60, borderRadius: 18, background: "linear-gradient(140deg, var(--sage-500), var(--sage-800))", display: "grid", placeItems: "center", boxShadow: "var(--elev-launcher)" }}>
              <Icon name="sparkles" size={28} style={{ color: "#fff" }} />
            </div>
            <div>
              <h1 style={{ fontSize: 30, fontWeight: 600, letterSpacing: "var(--tracking-tighter)", margin: 0 }}>{greeting}, {name}.</h1>
              <p className="muted" style={{ fontSize: 15, margin: "8px 0 0", lineHeight: 1.55, maxWidth: 460 }}>
                I read your live portfolio, your research library and Eulerpool valuations. Ask me anything — buy, hold or sell, and why.
              </p>
            </div>
          </Col>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 10, maxWidth: 560, margin: "0 auto", width: "100%" }}>
            {HERMES_SUGGESTIONS.map((s) => (
              <button key={s} onClick={() => hermes.send(s)} className="card card-hover" style={{ textAlign: "left", cursor: "pointer", padding: "14px 16px", display: "flex", gap: 10, alignItems: "center" }}>
                <Icon name="corner-down-right" size={15} style={{ color: "var(--sage-500)", flexShrink: 0 }} />
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{s}</span>
              </button>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ flex: 1, paddingBottom: 20 }}>
          <Row justify="space-between" align="center" style={{ marginBottom: 22 }}>
            <Row gap={11}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: "linear-gradient(140deg, var(--sage-500), var(--sage-800))", display: "grid", placeItems: "center" }}><Icon name="sparkles" size={16} style={{ color: "#fff" }} /></div>
              <div style={{ lineHeight: 1.15 }}>
                <div style={{ fontWeight: 600, fontSize: 16 }}>Hermes</div>
                <div className="muted" style={{ fontSize: 12 }}>Reasoning over your portfolio &amp; research</div>
              </div>
            </Row>
            <button className="btn btn-sm" onClick={hermes.reset}><Icon name="plus" size={13} /> New chat</button>
          </Row>
          <HermesThread messages={hermes.messages} />
        </div>
      )}

      <div style={{ position: "sticky", bottom: 0, paddingTop: 14, paddingBottom: 8, background: "linear-gradient(to top, var(--bg-app) 70%, transparent)" }}>
        <HermesComposer onSend={hermes.send} busy={hermes.busy} suggestions={HERMES_SUGGESTIONS.slice(0, 4)} showSuggestions={!fresh} />
        <div className="muted-2" style={{ fontSize: 11, textAlign: "center", marginTop: 8 }}>Hermes can make mistakes. Verify important numbers against your statements.</div>
      </div>
    </div>
  );
}
window.HermesPage = HermesPage;