import React from 'react';
import CounterCard from '../components/CounterCard';
import '../styles/AboutUs.css';
import { motion } from "framer-motion";

// Import background images
import civilBg from "../assets/civil-bg.jpg";
import mechanicalBg from "../assets/mechanical-bg.jpg";
import electricalBg from "../assets/electrical-bg.jpg";
import electromechanicalBg from "../assets/electromechanical-bg.jpg";
import itBg from "../assets/it-bg.jpg";
import renewableBg from "../assets/renewable-bg.jpg";

/* =====================
   Animation Variants
===================== */
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.2 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

/* =====================
   Working Fields Data
   (Declared Once)
===================== */
const WORKING_FIELDS = [
  {
    title: "Civil Engineering",
    desc: "Urban infrastructure, roadworks, dams, WTPs, STPs, stormwater management, and structural development.",
    bg: civilBg,
  },
  {
    title: "Mechanical Engineering",
    desc: "Fabrication, installation, and maintenance of industrial systems, heavy machinery, and automated solutions including SCADA.",
    bg: mechanicalBg,
  },
  {
    title: "Electrical Engineering",
    desc: "Reliable installations, power distribution, and maintenance services.",
    bg: electricalBg,
  },
  {
    title: "Electromechanical & Instrumentation",
    desc: "Integration of mechanical and electrical systems for pumping stations and automation.",
    bg: electromechanicalBg,
  },
  {
    title: "Information Technology",
    desc: "Project planning, GIS, data systems, and automation tools for smart engineering.",
    bg: itBg,
  },
  {
    title: "Renewable Energy",
    desc: "Solar, wind and sustainable energy solutions with advanced engineering support.",
    bg: renewableBg,
  },
];

const AboutUs = () => {
  return (
    <>
      {/* HERO SECTION */}
      <section className="about-hero">
        <div className="hero-overlay">
          <h1>About Us</h1>
          <p className="hero-subtitle">
            Building the Nation with Precision & Excellence
          </p>
          <p className="mt-4 text-white text-lg italic">
            “Engineering the future, one project at a time.”
          </p>
        </div>
      </section>

      {/* SLOGAN BANNER */}
      <div className="bg-gradient-to-r from-blue-400 to-red-500 text-white text-center py-4 font-semibold text-lg tracking-wide shadow-md">
        Empowering Infrastructure. Enabling Progress. Elevating Lives.
      </div>

      {/* MAIN ABOUT SECTION */}
      <section className="about-section px-6 lg:px-20 py-16">
        <div className="grid md:grid-cols-2 gap-12 items-start">
          {/* LEFT TEXT */}
          <div>
            <h2 className="text-3xl font-bold text-gray-800 mb-6">
              About Laxmi Civil Engineering Services Pvt. Ltd.
            </h2>
            <p className="text-gray-700 leading-relaxed mb-4">
              Laxmi Civil Engineering Services Pvt. Ltd. was established on{" "}
              <strong>15th August 1980</strong> as a partnership firm and later
              converted into a Private Limited Company on{" "}
              <strong>31st March 2000</strong>.
            </p>
            <p className="text-gray-700 leading-relaxed mb-4">
              For over four decades, LCEPL has been delivering exceptional
              engineering and construction services.
            </p>
            <p className="text-gray-700 leading-relaxed mb-4">
              We specialize in major infrastructure projects such as portable
              water supply, irrigation, pumping stations, electromechanical
              works, and operation & maintenance.
            </p>
            <p className="text-gray-700 leading-relaxed mb-4">
              Our leadership in these unique services has allowed us to expand
              across central, western, southern, and northern India.
            </p>
            <p className="text-gray-700 leading-relaxed">
              With a workforce of <strong>1300+ professionals</strong>, we
              continue to move forward with confidence.
            </p>
          </div>

          {/* COUNTERS */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            className="grid grid-cols-1 gap-6"
          >
            <motion.div variants={itemVariants}>
              <CounterCard
                count="45+"
                label="Years of Experience"
                icon="🎖️"
                className="bg-white shadow-lg border px-4 py-3 rounded-lg"
              />
            </motion.div>
            <motion.div variants={itemVariants}>
              <CounterCard
                count="18+"
                label="Number of States"
                icon="🗺️"
                className="bg-white shadow-lg border px-4 py-3 rounded-lg"
              />
            </motion.div>
            <motion.div variants={itemVariants}>
              <CounterCard
                count="50+"
                label="Clients"
                icon="🏭"
                className="bg-white shadow-lg border px-4 py-3 rounded-lg"
              />
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* WORKING FIELDS SECTION */}
      <section className="working-fields px-6 lg:px-20 py-16 bg-gray-50">
        <h2 className="highlight-title text-4xl font-bold text-center mb-4 text-black">
          Expertise Across Multiple Sectors
        </h2>
        <p className="text-center text-gray-600 mb-12">
          Our multidisciplinary approach helps us lead across multiple domains.
        </p>

        <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {WORKING_FIELDS.map((field) => (
            <div
              key={field.title}
              className="relative field-card rounded-xl shadow-lg overflow-hidden transition-all cursor-pointer bg-cover bg-center group hover:shadow-2xl"
              style={{ backgroundImage: `url(${field.bg})` }}
            >
              <div className="absolute inset-0 bg-black/50 group-hover:bg-black/25 transition-all duration-300"></div>

              <div className="relative p-6 flex flex-col items-center text-center text-white z-10">
                <h3 className="text-xl font-bold mb-2">{field.title}</h3>
                <p>{field.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

export default AboutUs;
