import React from "react";
import copai from "../assets/conacts/Gopal_Women.svg";
import jassi from "../assets/conacts/Jessi.svg";
import ema from "../assets/conacts/Ema_Grey.svg";
import emacity from "../assets/conacts/Elsa_Mills.svg";
import gopal from "../assets/conacts/Gopal.svg";
import phone from "../assets/conacts/phone-call.png";
const team=[
  { name: "Gopal", role: "Payment Support", image: copai},
  { name: "Jessi", role: "Customer Support", image: jassi },
  { name: "Ema Gray", role: "Shipping Support", image: ema },
  { name: "Gopal", role: "seller Support", image: gopal },
  { name: "Elsa Mills", role: "Payment Support", image: emacity },
];
function Contact() {
  return (
    <div className="relative p-4 bg-[#E9FAFF] font-montserrat">
      <h2 className="text-2xl sm:text-3xl font-extrabold text-center mb-4 text-[#28409C]">
        CONTACT US
      </h2>
      <p className="text-center text-black">
        <span className="block text-xl sm:text-3xl font-extrabold">
          Our team of experts are here to help
        </span>
        <span className="block text-lg sm:text-2xl text-gray-700 font-medium mt-2">
          Get support 24/7, with our support network of growth experts
        </span>
      </p>
      <div className="flex justify-center my-6">
        <button className="bg-[#FFBD69] text-black font-semibold w-[15rem] md:w-[18rem] border-none rounded-[2rem] h-[3rem] flex items-center justify-center gap-2 hover:bg-yellow-500 cursor-pointer">
          <img src={phone} alt="phone" className="w-5 h-5" /> Contact Us
        </button>
      </div>
      <div>
      <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 gap-8 p-4">
      {team.map((member, index) => (
        <div
          key={index}
          className="group relative size-[250px] md:size-[250px] object-contain place-items-center   overflow-hidden"
        >
          <img
            src={member.image}
            alt={member.name}
            className="size-[300px] inline-flex  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
          <div className="absolute bottom-2 left-1 right-2 bg-[#F6F6F6F2] bg-opacity-80 p-2 rounded-xl backdrop-blur-md overflow-x-hidden">
            <h3 className="text-lg font-semibold">{member.name}</h3>
            <p className="text-gray-600 text-sm">{member.role}</p>
          </div>
        </div>
      ))}
    </div>
  
      </div>
      {/*<div className="flex flex-col md:flex-row justify-center items-center sm:object-cover gap-4 p-4">
        <div className="group relative size-[300px] md:size-[250px]">
          <img
            src={copai}
            alt="copai"
            className="w-full h-full   grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
        </div>
        <div className="group relative size-[300px] md:size-[300px]">
          <img
            src={jassi}
            alt="jassi"
            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
        </div>
        <div className="group relative size-[300px] md:size-[300px]">
          <img
            src={ema}
            alt="ema"
            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
        </div>
        <div className="group relative  size-[300px] md:size-[300px]">
          <img
            src={gopal}
            alt="gopal"
            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
        </div>
        <div className="group relative size-[300px] md:size-[260.88px]">
          <img
            src={emacity}
            alt="emacity"
            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
          />
        </div>
      </div>*/}
    </div>
  );
}

export default Contact;