import React from "react";
import Image from "next/image";
import { backendUrl } from "@/utils/axios";

const SecondGallery = ({ data }) => {
  const {
    heading5,
    heading6,
    heading7,
    heading8,
    description5,
    footer_image1,
    footer_image2,
  } = data || {};
  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={`${
            footer_image1
              ? backendUrl + footer_image1.path
              : "/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">
          {heading5 ?? "Nepal&#39;s 1st & only"}
          <span className="text-4xl sm:text-6xl block my-5 tracking-wider">
            {heading6 ?? "ISO Certified"}
          </span>
          {heading7 ?? "Rudraksha Organization"}
        </h2>
        <p className="text-zinc-800 text-lg sm:text-xl mb-5 sm:w-3/4">
          {description5 ??
            "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">
          {heading8 ??
            "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={`${
            footer_image2 ? backendUrl + footer_image2.path : "/temple.jpeg"
          }`}
          alt="Gupta Rudraksha Collection"
          width={300}
          height={300}
          className="rounded-lg shadow-lg"
        />
      </div>
    </div>
  );
};

export default SecondGallery;