"use client";
import { motion } from "motion/react";

const cards = [
  {
    number: "01",
    title: "Market Leadership",
    description: "Leading Bangladesh’s electrical and agricultural sectors through trusted brands, innovative products, and customer-focused solutions.",
  },
  {
    number: "02",
    title: "Manufacturing Excellence",
    description: "Operating advanced manufacturing facilities that deliver quality, reliability, and engineering excellence at scale.",
  },
  {
    number: "03",
    title: "Total Power Solutions",
    description: "Supporting power generation, transmission, distribution, and end-user applications through integrated products and services.",
  },
  {
    number: "04",
    title: "Sustainable Growth",
    description: "Creating lasting value through innovation, affordability, responsible business practices, and community empowerment.",
  },
];

export default function Services() {
  return (
    <div className=" w-full lg:px-8 px-4 lg:pb-10 pb-5 lg:pt-15 pt-5 ">
      <div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-10 gap-5 lg:max-w-7xl mx-auto">
        {cards.map((card, index) => (
          <motion.div
            key={card.number}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.6,
              delay: index * 0.15,
              ease: [0.22, 1, 0.36, 1],
            }}
            className="relative flex-1 bg-white/10 rounded-4xl rounded-br-none p-4 lg:px-6 lg:pt-10 lg:pb-16 shadow-[0_0_15px_rgba(0,0,0,0.12)] backdrop-blur-sm"
          >
            <div className="text-right">
              <h2 className="text-xl font-semibold text-background mb-3">
                {card.title}
              </h2>
              <p className="text-sm text-gray-600 leading-relaxed">
                {card.description}
              </p>
            </div>
            {/* <motion.div
              initial={{ scale: 0, rotate: -180 }}
              animate={{ scale: 1, rotate: 0 }}
              transition={{
                duration: 0.5,
                delay: index * 0.15 + 0.3,
                ease: [0.34, 1.56, 0.64, 1],
              }}
              className="absolute -bottom-4 -right-3 bg-btnPrimary rounded-tl-3xl rounded-tr-3xl rounded-bl-3xl lg:w-14 lg:h-14 w-8 h-8 flex items-center justify-center"
            >
              <span className="lg:text-3xl text-lg font-bold text-white">
                {card.number}
              </span>
            </motion.div> */}
          </motion.div>
        ))}
      </div>
    </div>
  );
}