"use client";

export function Uptime() {
  return (
    <section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-10">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
          Downtime
        </h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
          I love selfhosting stuff, can you tell?
        </p>
      </div>

      <div className="mx-auto max-w-3xl">
        <div className="w-full rounded-2xl border border-white/6 bg-gradient-to-br from-gray-800/20 to-transparent p-5 backdrop-blur-sm sm:p-6">
          <h3 className="mb-4 text-center text-xl font-semibold text-white sm:text-2xl">
            Github vs HomeLab Uptime
          </h3>
          <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
            <div className="flex-1 text-center">
              <img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-24 object-contain sm:h-28" />
              <h4 className="mt-3 font-medium text-white">GitHub</h4>
              <p className="text-gray-400 mt-1">Goes down more.</p>
            </div>

            <div className="h-px w-24 bg-white/6 sm:h-24 sm:w-px" />

            <div className="flex-1 text-center">
              <img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-24 object-contain sm:h-28" />
              <h4 className="mt-3 font-medium text-white">HomeLab</h4>
              <p className="text-gray-400 mt-1">Goes down less.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}