// Helios — "What would you like to know?" landing screen.
// Magenta is the SINGLE accent moment on this screen (Send button on the composer).

const NewConversationScreen = () => {
  const chips = [
    "What sold best last week?",
    "Compare this month to last",
    "Which services drive the most revenue?",
    "Top customers by lifetime value",
    "Where am I losing bookings?",
  ];
  return (
    <div style={{
      flex: 1, display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: "0 64px", position: "relative",
    }}>
      {/* Subtle warm wash behind composer — no more candy gradient. */}
      <div style={{
        position: "absolute", left: "50%", top: "55%",
        width: 720, height: 280, transform: "translate(-50%, -50%)",
        background: "radial-gradient(ellipse at center, var(--color-ink-subtle), transparent 70%)",
        filter: "blur(40px)", pointerEvents: "none", zIndex: 0,
      }}/>

      <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 720, display: "flex", flexDirection: "column", alignItems: "center", gap: 28 }}>
        <h1 style={{
          fontFamily: "var(--font-serif)", fontWeight: 500,
          fontSize: 40, lineHeight: "48px", letterSpacing: "-0.02em",
          margin: 0, color: "var(--color-text)", textAlign: "center",
        }}>What would you like to know?</h1>
        <p style={{
          margin: "-16px 0 0", fontSize: 14, color: "var(--color-text-muted)",
          textAlign: "center", letterSpacing: "-0.005em",
        }}>Ask anything about your business data.</p>

        <AskComposer variant="primary" />

        {/* Suggestion chips — quiet empty pills, no pink. */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center" }}>
          {chips.map(c => (
            <button key={c} style={{
              border: "1px solid var(--color-border)",
              background: "var(--color-surface)",
              borderRadius: 9999, padding: "7px 14px",
              fontSize: 13, color: "var(--color-text-secondary)",
              cursor: "pointer", fontFamily: "inherit",
              letterSpacing: "-0.005em",
            }}>{c}</button>
          ))}
        </div>

        <p style={{
          margin: 0, fontSize: 11, color: "var(--color-text-muted)",
          fontFamily: "var(--font-mono)", letterSpacing: 0,
        }}>Helios can make mistakes · verify important data</p>
      </div>
    </div>
  );
};

window.NewConversationScreen = NewConversationScreen;