import React from "react";

// High-quality placeholder images for the group icons
const logoImage1 =
  "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=175&h=305&fit=crop&auto=format";
const logoImage2 =
  "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=175&h=305&fit=crop&auto=format";
const logoImage3 =
  "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=175&h=305&fit=crop&auto=format";
// const logoImage4 = "https://images.unsplash.com/photo-1560472355-536de3962603?w=120&h=60&fit=crop&auto=format";
// const logoImage5 = "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=120&h=60&fit=crop&auto=format";
// const logoImage6 = "https://images.unsplash.com/photo-1572177812156-58036aae439c?w=120&h=60&fit=crop&auto=format";
// const logoImage7 = "https://images.unsplash.com/photo-1553484771-371a605b060b?w=120&h=60&fit=crop&auto=format";
// const logoImage8 = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
// const logoImage9 = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=120&h=60&fit=crop&auto=format";

export default function Group1597880681() {
  return (
    <div className="flex items-center justify-center gap-8 flex-wrap opacity-60 hover:opacity-100 transition-opacity duration-300">
      {/* Client Logos Grid */}
      <div className="flex justify-center items-center py-12 perspective">
        {/* Left Card */}
        <div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 transform custom-rotate-left hover:scale-105 transition-all duration-300">
          <img
            src={logoImage1}
            alt="Left"
            className="w-full h-full object-contain filter invert opacity-80 hover:opacity-100 transition-opacity duration-300"
          />
        </div>

        {/* Center Card */}
        <div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 scale-110 shadow-xl z-10 hover:scale-115 transition-all duration-300">
          <img
            src={logoImage2}
            alt="Center"
            className="w-full h-full object-contain filter invert opacity-90 hover:opacity-100 transition-opacity duration-300"
          />
        </div>

        {/* Right Card */}
        <div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 transform custom-rotate-right hover:scale-105 transition-all duration-300">
          <img
            src={logoImage3}
            alt="Right"
            className="w-full h-full object-contain filter invert opacity-80 hover:opacity-100 transition-opacity duration-300"
          />
        </div>
      </div>
    </div>
  );
}