"use client";

import Image from "next/image";
import Link from "next/link";

const AboutSection = () => {
  return (
    <section className="relative overflow-hidden bg-white py-12 sm:py-16 lg:py-24 xl:py-28 2xl:py-36 3xl:py-40">

      {/* 👑 CRITICAL CHANGE: max-w ko 3xl par limit kiya taaki content bikhre nahi */}
      <div className="container mx-auto px-4 max-w-7xl 2xl:max-w-[1440px] 3xl:max-w-[1560px]">

        {/* 3xl:gap-32 se dono columns ke beech ka distance ultra-wide screens par premium dikhega */}
        <div className="grid items-stretch gap-10 lg:gap-12 xl:gap-16 2xl:gap-24 3xl:gap-32 lg:grid-cols-2">

          {/* 💡 LEFT SIDE: Images & Floating Experience Container */}
          {/* 3xl:pb-32 lagaya hai taaki floating box bilkul safe rahe */}
          <div className="relative flex flex-col sm:items-center lg:items-start pb-12 lg:pb-0 xl:pb-16 2xl:pb-24 3xl:pb-32">

            {/* Main Image Viewport */}
            <div className="w-full lg:max-w-[95%] xl:max-w-[90%] 2xl:max-w-[85%] 3xl:max-w-[80%]">
              <Image
                src="/images/1.png"
                alt="Real Switchgears Facility"
                width={700}
                height={550}
                className="w-full h-auto rounded-2xl md:rounded-3xl shadow-md object-cover"
                priority
              />
            </div>

            {/* 💡 Floating Experience Box: Fixed positions for 1600px+ displays */}
            <div className="relative lg:absolute lg:bottom-[-20px] xl:bottom-[-5px] 2xl:bottom-[-60px] 3xl:bottom-[50px] lg:left-6 xl:left-12 2xl:left-16 3xl:left-20 mt-6 lg:mt-0 w-full sm:max-w-[420px] xl:max-w-[440px] 2xl:max-w-[460px] 3xl:max-w-[480px] bg-white rounded-2xl p-5 sm:p-6 xl:p-7 2xl:p-8  border-gray-100 z-10">

              {/* 25+ Years Badge */}
              <div className="mb-4 flex items-center gap-4 border-b border-gray-50 pb-3">
                <h2 className="text-4xl sm:text-5xl xl:text-6xl 3xl:text-7xl font-black text-[#006db1] tracking-tight">
                  25+
                </h2>
                <h6 className="text-base sm:text-lg xl:text-xl 3xl:text-2xl font-bold leading-tight text-gray-900">
                  Years Of <br /> Experience
                </h6>
              </div>

              {/* Features List */}
              <ul className="space-y-3.5">
                {[
                  { src: "/images/badge.svg", text: "Quality Assurance" },
                  { src: "/images/experience.svg", text: "Expertise & Experience" },
                  { src: "/images/establised.svg", text: "Established Market Presence" },
                  { src: "/images/distributor_2.svg", text: "Leading Authorized Distributor & Stockist" }
                ].map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm sm:text-base xl:text-lg 3xl:text-xl font-semibold text-gray-700">
                    <div className="flex-shrink-0 mt-0.5 lg:mt-1">
                      <Image
                        src={item.src}
                        alt={item.text}
                        width={22}
                        height={22}
                        className="w-[20px] h-[20px] xl:w-[22px] xl:h-[22px] "
                      />
                    </div>
                    <span className="leading-tight">{item.text}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* 💡 RIGHT SIDE: Brand Heading & Descriptions */}
          <div className="mt-6 lg:mt-0 text-center lg:text-left flex flex-col justify-between items-center lg:items-start">

            <div className="w-full flex flex-col items-center lg:items-start">
              {/* Title Tag */}
              <span className="mb-4 inline-block rounded-full bg-[#006db1]/10 px-5 py-2 text-xs sm:text-sm xl:text-base 3xl:text-lg font-bold uppercase tracking-wider text-[#006db1]">
                Who We Are
              </span>

              {/* Main Heading: Scaled to 3xl:text-7xl for giant screens */}
              <h2 className="mb-4 text-3xl sm:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl 3xl:text-7xl font-black leading-tight text-gray-900">
                <span className="text-[#006db1]">Welcome to</span>
                <br className="hidden sm:block" />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#006db1] to-[#039f9a]">
                  Real Switchgears &amp; Cables Pvt. Ltd.
                </span>
              </h2>

              {/* Primary Description Paragraph */}
              <p className="mb-6 text-base sm:text-lg xl:text-xl 3xl:text-2xl font-semibold leading-relaxed text-gray-600 max-w-2xl xl:max-w-3xl 3xl:max-w-4xl">
                LEADING AUTHORISED DISTRIBUTOR &amp; STOCKIST OF{" "}
                <span className="text-[#006db1] font-bold">LAURITZ KNUDSEN (L&amp;T SWITCHGEARS)</span> &amp;{" "}
                <span className="text-[#039f9a] font-bold">POLYCAB</span> — one of the most trusted and premium electrical brands in India.
              </p>

              {/* Button Action */}
              <div className="mb-8 sm:mb-10 lg:mb-6 xl:mb-10 w-full sm:w-auto">
                <Link
                  href="/about"
                  className="inline-flex w-full sm:w-auto items-center justify-center gap-3 rounded-full bg-gradient-to-r from-[#006db1] to-[#039f9a] px-8 py-4 xl:px-10 xl:py-5 3xl:px-12 3xl:py-6 text-base xl:text-lg 3xl:text-xl font-bold text-white transition-all duration-300 hover:opacity-95 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
                >
                  <span>Read More</span>
                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white text-[#006db1] font-bold text-sm">
                    →
                  </span>
                </Link>
              </div>
            </div>

            {/* Secondary Image Viewport */}
            <div className="w-full overflow-hidden rounded-2xl shadow-lg border border-gray-100 max-w-xl lg:max-w-none xl:max-w-[95%] 2xl:max-w-[90%] 3xl:max-w-[85%] mt-auto">
              <Image
                src="/images/about_us_2.png"
                alt="Our Wholesale Stock"
                width={700}
                height={380}
                className="h-auto w-full object-cover transition duration-500 hover:scale-102"
              />
            </div>

          </div>

        </div>
      </div>
    </section>
  );
};

export default AboutSection;