/* Integrations — workflow/productivity tools Leap connects to (Slack, ClickUp,
   Notion, Microsoft 365, …). These are NOT social publishing channels (those live
   under Settings → Channels); these wire Leap into the tools a team already uses.
   Read-only roadmap: every item is "Coming soon" until its connector ships. No keys
   are entered or stored here — real connections will use proper server-side OAuth
   when each lands. */
(function () {
  function Integrations({ onToast }) {
    // status: "soon" (all, for now). When one ships, flip to "available" and wire a
    // real connect action.
    const CATALOG = [
      { name: "Slack", initials: "SL", color: "#4A154B", desc: "Post approvals, schedule alerts and publish results into a channel." },
      { name: "ClickUp", initials: "CU", color: "#7B68EE", desc: "Two-way sync of content tasks, statuses and due dates." },
      { name: "Notion", initials: "No", color: "#111111", desc: "Push briefs, calendars and campaign plans into a database." },
      { name: "Microsoft 365", initials: "M365", color: "#EA3E23", desc: "Outlook + Teams notifications and Microsoft SSO." },
      { name: "Google Workspace", initials: "GW", color: "#1A73E8", desc: "Drive assets and Calendar-based scheduling." },
      { name: "Zapier", initials: "Zp", color: "#FF4A00", desc: "Connect Leap to 6,000+ apps with no code." },
    ];

    const pill = { fontSize: 10.5, fontWeight: 700, letterSpacing: ".03em", textTransform: "uppercase", padding: "3px 8px", borderRadius: 999, color: "var(--warning, #b45309)", background: "var(--warning-bg, rgba(245,158,11,.14))", whiteSpace: "nowrap" };

    return (
      <div>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4 }}>Integrations</div>
        <div style={{ fontSize: 13, color: "var(--fg3)", marginBottom: 18, maxWidth: 620, lineHeight: 1.5 }}>
          Connect Leap to the tools your team already uses. Social publishing accounts live under <b>Channels</b> — these are workflow integrations. They’re on the way; each will connect securely on the server when it ships.
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: 12 }}>
          {CATALOG.map((it) => (
            <div key={it.name} style={{ border: "1px solid var(--border)", borderRadius: 14, background: "var(--surface)", padding: "14px 15px", opacity: 0.92 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 9 }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: it.color, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, flex: "none" }}>{it.initials}</div>
                <div style={{ fontWeight: 700, fontSize: 14, flex: 1, minWidth: 0 }}>{it.name}</div>
                <span style={pill}>Coming soon</span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--fg3)", lineHeight: 1.45 }}>{it.desc}</div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 12, color: "var(--fg4)", marginTop: 16 }}>Want a specific integration prioritised? Let us know from the Assistant.</div>
      </div>
    );
  }
  window.Integrations = Integrations;
})();