import Image from "next/image";
import React from "react";

const AboutUsSecondBanner = () => {
  return (
    <>
      <div className="flex gap-4 flex-col md:flex-row w-full max-w-6xl mx-auto p-4 sm:py-5 min-h-[70vh]">
        <div className="w-full md:w-1/2 mb-4 md:mb-0 md:mr-4">
          <Image
            src="/about-us/img-one.jpg"
            alt="Random placeholder image"
            layout="responsive" // Ensures responsiveness based on parent container
            width={1920}
            height={400}
            className="rounded-lg shadow-md object-cover"
          />
        </div>
        <div className="w-full ">
          <h2 className="sm:text-4xl font-bold mb-4 tracking-wider ">1960s</h2>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Late Mr. Balaram Khatiwada
          </h2>
          <p className="mb-4 w-full">
            In the late 1960s, Mr. Balaram Khatiwada who used to be a priest at
            the Pashupatinath temple started Gupta Rudraksha as a shop which
            sold flowers, Rudraksha and Saligrams to the devotees who visited
            Pashupatinath temple.What differentiated Gupta Rudraksha from other
            vendors is our founding father&apos;s commitment to authenticity and
            his way of treating customers as family members.
          </p>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Cultural Expansion
          </h2>
          <p>
            Till this date, we carry this culture and have increased the size of
            our family to thousands of customers from more than 160 countries.
            Furthermore, Mr. Balaram being a vedic scholar himself believed that
            each Rudraksha must be energized with the touch of Lord
            Pashupatinath to deliver maximum benefit to the wearer.
          </p>
        </div>
      </div>
      {/* second section */}
      <div className="flex gap-4 flex-col-reverse md:flex-row w-full max-w-6xl mx-auto p-4 sm:py-5 min-h-[70vh]">
        <div className="w-full ">
          <h2 className="sm:text-4xl font-bold mb-4 tracking-wider ">
            1990s-2000s
          </h2>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Mr. Mukunda Khatiwada&apos;s Involvement:
          </h2>
          <li className="mb-4 w-full py-2">
            Mr. Mukunda observes the exploitation of Rudraksha and the spread of
            myths about it on the internet.
          </li>

          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Exploitation and Myths
          </h2>
          <li className="mb-4 w-full py-2">
            Mr. Mukunda, as seen in an image with Late Mrs. Laxmi Khatiwada,
            gets involved in the family business from a very young age. He is
            taught by his father about Rudraksha since the age of 5.
          </li>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Leading Online Store
          </h2>
          <li className="mb-4 w-full py-2">
            Mr. Mukunda Khatiwada launches Gupta Rudraksha as an online store
            and aims to ensure seekers of authentic Rudraksha are provided with
            genuine products and to preserve traditional practices.
          </li>
          <li className="mb-4 w-full">
            Gupta Rudraksha becomes the leading online store, the only one based
            in Nepal offering Rudraksha energized in the traditional fashion at
            Pashupatinath Temple.
          </li>
        </div>
        <div className="w-full md:w-1/2 mb-4 md:mb-0 md:mr-4">
          <Image
            src="/about-us/img-two.jpg"
            alt="Random placeholder image"
            layout="responsive"
            width={1920}
            height={400}
            className="object-cover rounded-lg shadow-md"
          />
        </div>
      </div>
      {/* third section */}
      <div className="flex gap-4 flex-col md:flex-row w-full max-w-6xl mx-auto p-4 sm:py-5 min-h-[70vh]">
        <div className="w-full md:w-1/2 mb-4 md:mb-0 md:mr-4">
          <Image
            src="/about-us/img-three.jpg"
            alt="Random placeholder image"
            layout="responsive"
            width={1920}
            height={400}
            className="object-cover rounded-lg shadow-md"
          />
        </div>
        <div className="w-full ">
          <h2 className="sm:text-4xl font-bold mb-4 tracking-wider ">
            Present
          </h2>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">Global Reach</h2>
          <li className="mb-1 w-full ">
            Gupta Rudraksha supplies 90% of all Gupta Rudraksha globally.
          </li>
          <li className="mb-1 w-full ">
            The largest seller of Indra Mala (1-21 Mukhi) in the world.
          </li>
          <li className="mb-4 w-full ">
            Boasts the largest collection of Gupta Rudraksha and Shaligram
            globally.
          </li>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">Clientele</h2>
          <li className="my-3">
            Mr. Mukunda Khatiwada has provided Rudraksha to various celebrities,
            business tycoons, yogis, gurus, and individuals from various walks
            of life.
          </li>
          <h2 className="text-[#AC8C6B] text-2xl font-bold">
            Continued Legacy
          </h2>
          <li className="my-3">
            Gupta Rudraksha continues to uphold the values of authenticity,
            tradition, and customer-centricity established by Mr. Balaram
            Khatiwada..
          </li>
        </div>
      </div>
    </>
  );
};

export default AboutUsSecondBanner;