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

const SecondGallery = () => {
  return (
    <div className="bg-[#f9f3f5c8] flex flex-col sm:flex-row justify-center items-center text-[#896C42] p-6 sm:p-12">
      {/* Left Image */}
      <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
        <Image
          src="/product_swami.jpeg"
          alt="Gupta Rudraksha"
          width={300}
          height={300}
          className="rounded-lg shadow-lg"
        />
      </div>

      {/* Right content */}
      <div className="w-full sm:w-1/3 flex flex-col justify-center items-center text-center p-4 sm:p-8">
        <h2 className="text-3xl sm:text-4xl mb-5 font-serif tracking-wide">
          Nepal&#39;s 1st & only
          <span className="text-4xl sm:text-6xl block my-5 tracking-wider">
            ISO Certified
          </span>
          Rudraksha Organization
        </h2>
        <p className="text-zinc-800 text-lg sm:text-xl mb-5 sm:w-3/4">
          Explore the largest collection of authentic Gupta Rudraksha energized
          as per our vedic process. For nearly 3+ generations Gupta Rudraksha
          has been the pioneer of Rudraksha and Shaligram and has supported
          millions of devotees attain spiritual and professional goals.
        </p>
        <h2 className="text-xl sm:text-2xl sm:w-3/4">
          Gupta Rudraksha - The Only Vendor in the World To 100% Lifetime Money
          Back Authenticity Guarantee.
        </h2>
      </div>

      {/* Right Image */}
      <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
        <Image
          src="/temple.jpeg"
          alt="Gupta Rudraksha Collection"
          width={300}
          height={300}
          className="rounded-lg shadow-lg"
        />
      </div>
    </div>
  );
};

export default SecondGallery;