/* Carelon Passport — app composition */

const App = () => {
  const [chatOpen, setChatOpen] = React.useState(false);
  const openChat = () => setChatOpen(true);
  const toast = useToast();
  const onAction = (label) => toast({ title: label, body: "Opening " + label.toLowerCase() + "…" });

  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100%" }}>
      <TopNav onOpenChat={openChat} />

      <main style={{ flex: 1 }}>
        <div style={{ maxWidth: 1380, margin: "0 auto", padding: "26px 32px 40px", display: "flex", flexDirection: "column", gap: 20 }}>

          <div className="cp-2col">
            <Hero onGetCare={() => onAction("Care options")} onChat={openChat} />
            <ConciergeCard onChat={openChat} />
          </div>

          <QuickActions onAction={onAction} />

          <div className="cp-2col">
            <JourneyCard />
            <CoverageCard />
          </div>

          <div className="cp-2col">
            <TrustedCareCard />
            <SupportCard onChat={openChat} />
          </div>

          <div className="cp-3col">
            <DocumentsCard />
            <MedicationsCard />
            <MessagesCard onChat={openChat} />
          </div>

          <footer style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 6, color: "var(--ink-4)", fontSize: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <img src="assets/carelon-mark.svg" alt="" style={{ height: 18, opacity: .85 }} />
              <span>Carelon Passport · Global health navigation</span>
            </div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="lock" size={13} stroke={1.9} />Secured & HIPAA-compliant · © 2026 Carelon</span>
          </footer>
        </div>
      </main>

      <ChatDrawer open={chatOpen} onClose={() => setChatOpen(false)} />
    </div>
  );
};

const Root = () => (
  <ToastProvider>
    <App />
  </ToastProvider>
);

ReactDOM.createRoot(document.getElementById("root")).render(<Root />);