/* Carelon Passport — quick action cards */

const QuickAction = ({ icon, tone, title, sub, onClick }) => {
  const t = TONES[tone];
  return (
    <button type="button" onClick={onClick} className="cp-quick cp-card-i" style={{
      textAlign: "left", cursor: "pointer", fontFamily: "inherit",
      background: "var(--card)", border: "1px solid var(--line)", borderRadius: 20, padding: 20,
      boxShadow: "var(--shadow)", display: "flex", flexDirection: "column", gap: 14, position: "relative", overflow: "hidden",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ width: 44, height: 44, borderRadius: 13, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name={icon} size={22} stroke={1.8} />
        </span>
        <span className="cp-quick-arrow" style={{ width: 30, height: 30, borderRadius: 9, background: "var(--bg-sunk)", color: "var(--ink-2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="arrowRight" size={16} stroke={2} />
        </span>
      </div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink)", letterSpacing: "-.01em" }}>{title}</div>
        <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.45 }}>{sub}</div>
      </div>
    </button>
  );
};

const QuickActions = ({ onAction }) => {
  const items = [
    { icon: "pin", tone: "purple", title: "Find care nearby", sub: "Locate in-network doctors, clinics, and hospitals." },
    { icon: "suitcase", tone: "violet", title: "Travel readiness", sub: "Review destination-specific care and support." },
    { icon: "layers", tone: "blue", title: "Benefits guide", sub: "Understand what's covered before you go." },
    { icon: "steth", tone: "teal", title: "Request a second opinion", sub: "Coordinate specialty review and next steps." },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
      {items.map((it) => <QuickAction key={it.title} {...it} onClick={() => onAction(it.title)} />)}
    </div>
  );
};

window.QuickActions = QuickActions;