/* eslint-disable @next/next/no-img-element */
import Title from "@/components/atoms/Title";
import React from "react";

interface Award {
  id: number;
  logo: string;
  name: string;
  sector: string;
  image: string;
}

const awards: Award[] = [
  {
    id: 1,
    logo: "/images/our-story/awards/super.png",
    name: "Best Innovation Award",
    sector: "Technology",
    image: "/images/our-story/awards/super-og.jpg",
  },
  {
    id: 2,
    logo: "/images/our-story/awards/global.png",
    name: "Excellence in Design",
    sector: "Architecture",
    image: "/images/our-story/awards/super-og.jpg",
  },
  {
    id: 3,
    logo: "/images/our-story/awards/tiger.png",
    name: "Leadership Honor",
    sector: "Business",
    image: "/images/our-story/awards/super-og.jpg",
  },
];

const AwardCard = ({ award, darker }: { award: Award; darker: boolean }) => {
  return (
    <div className="relative w-full aspect-square overflow-hidden">
      {/* Base background */}
      <div
        className={`absolute inset-0 flex flex-col items-center justify-center ${
          darker ? "bg-[#F5F5F5]" : "bg-[#FAFAFA]"
        } transition-colors duration-300`}
      >
        <img
          src={award.logo}
          alt={award.name}
          className="w-24 h-24 object-cover rounded-md mb-4 transition-all duration-1000 group-hover:scale-105"
        />
        <h3 className="text-lg font-semibold text-gray-800 text-center">
          {award.name}
        </h3>
        <p className="text-sm text-gray-500">{award.sector}</p>
      </div>

      {/* Hover curtain effect */}
      <div className="absolute inset-0 translate-y-[-100%] group-hover:translate-y-0 transition-transform duration-1000 ease-in-out">
        <img
          src={award.image}
          alt="award"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/40 flex items-center justify-center"></div>
      </div>
    </div>
  );
};

const AwardGrid = () => {
  return (
    <section className="max-w-[1200px] mx-auto px-0 pb-10 lg:pb-48">
      <Title text="Our Awards" className="mb-24 text-center" />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-0 items-stretch">
        {awards.map((award, index) => (
          <div key={award.id} className="group w-full h-full px-6 md:px-0">
            <AwardCard award={award} darker={index === 1} />
          </div>
        ))}
      </div>
    </section>
  );
};

export default AwardGrid;