export function IntegrationCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white p-5 hover:border-[#111111]/30 transition-all">
        <div className="flex items-start gap-4">
          {/* Brand mark */}
          <div
            className="grid h-12 w-12 shrink-0 place-items-center rounded-xl text-white font-bold text-[14px] transition-transform group-hover:rotate-3"
            style={{
              background:
                "conic-gradient(from 220deg at 50% 50%, #4A154B 0%, #ECB22E 25%, #36C5F0 50%, #2EB67D 75%, #4A154B 100%)",
            }}
            aria-hidden
          >
            S
          </div>

          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <h3 className="text-[15.5px] font-medium tracking-tight">Slack</h3>
              <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 px-1.5 py-0.5 text-[10px] font-mono uppercase tracking-[0.14em]">
                <span className="relative flex h-1.5 w-1.5">
                  <span className="absolute inset-0 rounded-full bg-emerald-500 animate-ping" />
                  <span className="relative h-1.5 w-1.5 rounded-full bg-emerald-500" />
                </span>
                Connected
              </span>
            </div>
            <p className="mt-1 text-[12.5px] text-[#6B6B66] leading-relaxed">
              Post alerts, daily digests, and deploy notifications into channels.
            </p>
          </div>

          {/* Toggle */}
          <label className="relative inline-flex shrink-0 cursor-pointer">
            <input type="checkbox" defaultChecked className="peer sr-only" />
            <span className="h-6 w-10 rounded-full bg-[#1111111A] peer-checked:bg-[#2A3D2F] transition-colors" />
            <span className="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-4" />
          </label>
        </div>

        {/* Meta */}
        <div className="mt-5 grid grid-cols-3 border-t border-[#1111111A] pt-4 text-[11px]">
          <Meta label="Workspace" value="velynkit-hq" />
          <Meta label="Channels" value="4 routed" />
          <Meta label="Last sync" value="3 min ago" />
        </div>

        <div className="mt-4 flex items-center justify-between">
          <a
            href="#"
            className="text-[12px] font-medium text-[#111111] inline-flex items-center gap-1 hover:underline underline-offset-2"
          >
            Manage routing
            <span aria-hidden className="transition-transform group-hover:translate-x-0.5">→</span>
          </a>
          <button
            type="button"
            className="text-[11.5px] text-[#A33A2B] hover:underline underline-offset-2 font-mono uppercase tracking-[0.14em]"
          >
            Disconnect
          </button>
        </div>
      </article>
    </div>
  );
}

function Meta({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-[#6B6B66]">{label}</div>
      <div className="mt-0.5 font-mono">{value}</div>
    </div>
  );
}
Integration Connect Card

Slack
