/* eslint-disable @next/next/no-img-element */
import Title from "@/components/atoms/Title";
import "./projectArena.css";

const ARENA_DATA = [
  {
    id: 1,
    img: "/images/designo/project-arena/arena-1.jpg",
    title: "Commercial Space Interior",
    description: "Elevate Lifestyles & Enhance Elegance",
  },
  {
    id: 2,
    img: "/images/designo/project-arena/arena-2.jpg",
    title: "Apartment Space Interior",
    description: "We Design To Elevate Your Lifestyle",
  },
  {
    id: 3,
    img: "/images/designo/project-arena/arena-3.jpg",
    title: "Building Common Area Design",
    description: "We Design To Elevate Your Lifestyle",
  },
];

interface ArenaCardProps {
  img: string;
  title: string;
  description: string;
}

const ArenaCard = ({ img, title, description }: ArenaCardProps) => {
  return (
    <div className="arena-card">
      <div className="inner overflow-hidden">
        <img
          src={img}
          alt={`image of ${title}`}
          className="w-full h-[80dvh] object-cover lg:rounded-2xl"
        />
        {/* overlay */}
        <div className="overlay-bg w-full p-6 absolute inset-0 bg-black/20 lg:rounded-3xl"></div>
        <div className="overlay">
          <h3 className="font-creato font-normal text-white text-[24px] tracking-wider">
            {title}
          </h3>
          <p className="text-white tracking-widest hidden md:block text-[14px]">
            {description}
          </p>
        </div>
      </div>
    </div>
  );
};

const ProjectArena = () => {
  return (
    <section className="container mx-auto pb-48 -mt-28 md:-mt-0">
      <div className="text-center pt-14 pb-32">
        <Title
          text="Project Arena"
          Tag={"h2"}
          className="text-black lg:text-[80px]"
        />
      </div>
      {/* desktop project arena - hidden on mobile/tablet */}
      <div className="card-container hidden lg:flex flex-row w-11/12 h-[80dvh] gap-6 overflow-hidden mx-auto">
        {ARENA_DATA.map((card) => (
          <ArenaCard
            key={card.id}
            img={card.img}
            title={card.title}
            description={card.description}
          />
        ))}
      </div>

      {/* mobile+tablet project arena - hidden on desktop */}
      <div className="flex lg:hidden flex-col gap-6 px-4">
        {ARENA_DATA.map((card) => (
          <div key={card.id} className="relative rounded-2xl overflow-hidden">
            <img
              src={card.img}
              alt={`image of ${card.title}`}
              className="w-full h-[280px] sm:h-[350px] md:h-[400px] object-cover"
            />
            {/* overlay gradient */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
            {/* text content */}
            <div className="absolute bottom-6 left-6 right-6">
              <h3 className="font-creato font-normal text-white text-[clamp(16px,4vw,22px)] tracking-wider">
                {card.title}
              </h3>
              <p className="text-white/80 text-[clamp(11px,2.5vw,14px)] tracking-wide mt-1">
                {card.description}
              </p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default ProjectArena;