import Image from "next/image";
import SectionTitle from "./SectionTitle";

interface Browser {
  name: string;
  note: string;
  icon: string;
  alt: string;
}

const browsers: Browser[] = [
  {
    name: "Google Chrome",
    note: "Fully supported with the KleboAI extension available through the Chrome Web Store.",
    icon: "/images/chrome.webp",
    alt: "Google Chrome",
  },
  {
    name: "Microsoft Edge",
    note: "Fully supported and tested with the KleboAI extension through the Microsoft Edge Add-ons store.",
    icon: "/images/edge.webp",
    alt: "Microsoft Edge",
  },
  {
    name: "Opera",
    note: "Fully supported and tested with the KleboAI extension through the Opera Add-ons store, which also supports Yandex.",
    icon: "/images/opera.webp",
    alt: "Opera",
  },
];

export default function BrowserCompatibility() {
  return (
    <section className="py-16 sm:py-20 lg:py-24 relative overflow-hidden">
      <div className="bg-grid" />
      
        <div className="bg-orb-purple" />
        {/* <div className="bg-orb-blue" /> */}
        <div className="animated-bg-content">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle
          badge="Compatibility"
          title={
            'Works On The Browser <span class="text-gradient"> You Already Use </span>'
          }
        >
          {" "}
          KleboAI is a lightweight browser extension designed to work seamlessly
          across Google Chrome, Microsoft Edge, and Opera. Install KleboAI on
          your preferred browser and start analyzing images as you browse.{" "}
        </SectionTitle>

        <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3 2xl:mt-14 2xl:gap-6">
          {browsers.map((browser) => (
            <div
              key={browser.name}
              className="group flex h-full gap-4 items-start bg-white/50 backdrop-blur-3xl border border-white glass-card-hover rounded-3xl p-5 transition-all duration-300 sm:p-6"
            >
              {/* Browser Icon */}
              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-indigo-50 p-3 transition-transform duration-300 group-hover:scale-105 dark:bg-indigo-500/10">
                <Image
                  src={browser.icon}
                  alt={browser.alt}
                  width={40}
                  height={40}
                  className="h-10 w-10 object-contain"
                />
              </div>

              {/* Content */}
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <h3 className="font-heading text-base font-medium text-heading 2xl:text-lg ">
                    {browser.name}
                  </h3>

                  {/* Supported Badge */}
                  <span className=" inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400">
                    <svg
                      viewBox="0 0 20 20"
                      className="h-3 w-3"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.7 5.3a1 1 0 010 1.4l-7.4 7.4a1 1 0 01-1.4 0L3.3 9.5a1 1 0 111.4-1.4l3.6 3.6 6.7-6.7a1 1 0 011.4 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Supported
                  </span>
                </div>

                <p className="mt-1.5 text-sm leading-6 text-text 2xl:text-base">
                  {browser.note}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div></div>
    </section>
  );
}