// Dashboard / Welcome — the post-login landing screen.
function DashboardPage({ user, onSelect }) {
  const name = (user && user.name ? user.name.split(" ")[0] : "Amelia");

  const cards = [
    { id: "suppliers", icon: "building-2",    title: "Suppliers & Partners", desc: "Approved travel suppliers — service category, commission terms, and notes.", meta: "184 partners" },
    { id: "hotels",    icon: "bed-double",    title: "Hotel Contacts",  desc: "Partner properties nationwide — reservation contacts and addresses, synced live.", meta: "Always current" },
    { id: "air",       icon: "plane",         title: "Air",             desc: "Preferred carriers, booking protocol, and the crew travel desk.", meta: "Read · resources" },
    { id: "contact",   icon: "life-buoy",     title: "Contact",         desc: "Reach the RDB operations desk for anything not listed here.", meta: "24 / 7 ops" },
  ];

  return (
    <div style={{ maxWidth: 1180, margin: "0 auto", padding: "56px 64px 96px" }}>
      {/* Welcome header */}
      <div style={{ marginBottom: 48 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 16 }}>RDB Hospitality Group · Miami</div>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 56,
          letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02
        }}>
          Welcome back, <span data-ms-member-info="firstName">{name}</span>.
        </h1>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6,
          color: "var(--fg-2)", margin: "20px 0 0", maxWidth: 620
        }}>
          This is your backstage. Everything you need to work with RDB — travel suppliers
          and partners, hotel contacts, and air travel — lives here.
          Pick up where you left off.
        </p>
      </div>

      {/* Notice strip */}
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        border: "1px solid rgba(201,168,76,0.32)", background: "rgba(201,168,76,0.05)",
        padding: "14px 18px", marginBottom: 40,
      }}>
        <Icon name="info" size={16} color="var(--rdb-gold)" />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-2)" }}>
          Supplier and hotel contact lists sync live from RDB operations. Last updated
          <span style={{ color: "var(--fg-1)", fontFamily: "var(--font-mono)", fontSize: 12 }}>&nbsp;2026-06-10 · 08:12 ET</span>.
        </span>
      </div>

      {/* Quick-access cards */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: "0.32em", color: "var(--ink-6)", textTransform: "uppercase" }}>
          Quick access
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Icon name="badge-check" size={15} color="var(--rdb-gold)" />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)", letterSpacing: "0.02em" }}>
            Backstage Pass · <span style={{ color: "var(--rdb-gold)" }}>Active</span> · Expires May 31, 2026
          </span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--ink-3)", border: "1px solid var(--ink-3)" }}>
        {cards.map(c => <QuickCard key={c.id} card={c} onSelect={onSelect} />)}
      </div>
    </div>
  );
}

function QuickCard({ card, onSelect }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      onClick={() => onSelect && onSelect(card.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--ink-2)" : "var(--ink-1)",
        padding: "28px 26px 26px",
        cursor: "pointer", textDecoration: "none",
        display: "flex", flexDirection: "column", gap: 16,
        transition: "background 160ms cubic-bezier(.22,1,.36,1)",
        position: "relative", minHeight: 188,
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{
          width: 44, height: 44, border: `1px solid ${hover ? "var(--rdb-gold)" : "var(--ink-4)"}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "border-color 160ms cubic-bezier(.22,1,.36,1)",
        }}>
          <Icon name={card.icon} size={20} color={hover ? "var(--rdb-gold)" : "var(--fg-2)"} />
        </div>
        <Icon name="arrow-up-right" size={18} color={hover ? "var(--rdb-gold)" : "var(--ink-5)"} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, color: "var(--fg-1)", margin: 0, letterSpacing: "-0.01em" }}>
          {card.title}
        </h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: 0 }}>
          {card.desc}
        </p>
      </div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em",
        color: hover ? "var(--rdb-gold)" : "var(--ink-6)", textTransform: "uppercase",
        borderTop: "1px solid var(--ink-3)", paddingTop: 14,
      }}>
        {card.meta}
      </div>
    </a>
  );
}

Object.assign(window, { DashboardPage });