"use client";

import { useState } from "react";
import { GalleryImages } from "../../../utils/constant.utils";

const SathyaNarayanaPoojai = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [imageSrc, setImageSrc] = useState("");

  const openLightbox = (src) => {
    setImageSrc(src);
    setIsOpen(true);
  };

  const closeLightbox = () => {
    setIsOpen(false);
    setImageSrc("");
  };

  return (
    <>
      <section className="faq-area-2 space">
        <div className="container">
          <div className="row gx-60 flex-row-reverse">
            <div className="col-xl-6">
              <div className="title-area">
                <span className="sub-title">SACRED RITUAL</span>
                <h2 className="sec-title">
                  Sathya Narayana Poojai – A Ritual of Truth, Faith, and Divine Blessings
                </h2>
                <p className="sec-text">
                  The Sathya Narayana Poojai is a sacred ritual dedicated to Lord Vishnu, the preserver of the universe, performed to seek His divine blessings for peace, prosperity, and happiness. This auspicious pooja is traditionally observed on full moon days and other special occasions to express gratitude and devotion to the Almighty. Devotees believe that performing this pooja with pure faith removes obstacles and fulfills sincere desires.
                </p>
              </div>
            </div>

            <div className="col-xl-6">
              <div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
                <img
                  src="/assets/img/events/sathya/sathya-narayana-puja.webp"
                  alt="Sathya Narayana Poojai Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-area-2 space-bottom">
        <div className="container">
          <div className="row gx-60">
            <div className="col-xl-6">
              <div className="title-area">
                <span className="sub-title">SIGNIFICANCE</span>
                <h2 className="sec-title">Significance of Sathya Narayana Poojai</h2>
                <p className="sec-text">
                  The Sathya Narayana Pooja holds immense spiritual value, as it symbolizes the worship of truth and righteousness — “Sathya” meaning truth and “Narayana” referring to Lord Vishnu. By performing this pooja, devotees invoke divine blessings for prosperity, family harmony, and overall well-being. The ceremony teaches the importance of honesty, faith, and devotion in one’s daily life, guiding devotees toward a path of dharma and peace.
                </p>
              </div>
            </div>

            <div className="col-xl-6">
              <div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
                <img
                  src="/assets/img/events/sathya/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Significance Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-area-2 space-bottom">
        <div className="container">
          <div className="row gx-60 flex-row-reverse">
            <div className="col-xl-6">
              <div className="title-area">
                <span className="sub-title">SPIRITUAL BENEFITS</span>
                <h2 className="sec-title">Spiritual Significance and Divine Blessings</h2>
                <p className="sec-text">
                  Participating in or performing the Sathya Narayana Poojai blesses devotees with divine grace and spiritual strength. It helps remove sins, bestows mental peace, and ensures success in all righteous endeavors. Families performing this pooja together experience harmony and unity. The divine vibrations created during the ceremony purify the home environment and fill the hearts of devotees with joy and devotion toward the Supreme Lord Vishnu.
                </p>
              </div>
            </div>

            <div className="col-xl-6">
              <div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
                <img
                  src="/assets/img/events/sathya/annadhanam.webp"
                  alt="Spiritual Benefits Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-area-2 space-bottom">
        <div className="container">
          <div className="row gx-60">
            <div className="col-xl-6">
              <div className="title-area">
                <span className="sub-title">JOIN US</span>
                <h2 className="sec-title">Be Part of the Sacred Sathya Narayana Pooja</h2>
                <p className="sec-text">
                  We invite all devotees to join the Sathya Narayana Poojai at our temple and experience the divine blessings of Lord Vishnu. Let this sacred ritual bring happiness, prosperity, and fulfillment into your life. Participate with faith and devotion to receive the grace of the Almighty and strengthen your spiritual connection with the eternal truth — Sathya Narayana.
                </p>
              </div>
            </div>

            <div className="col-xl-6">
              <div className="faq-thumb2 mb-xl-0 mb-0 mb-md-50">
                <img
                  src="/assets/img/events/sathya/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Join Us Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="portfolio-area-1 space-bottom">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-lg-5">
              <div className="title-area text-center">
                <h2 className="sec-title">Gallery</h2>
              </div>
            </div>
          </div>

          <div className="row gy-30 gx-30">
            {GalleryImages.slice(0, 6).map((image, index) => (
              <div key={index} className="col-lg-4 col-md-6">
                <div className="portfolio-card image-container">
                  <div className="portfolio-card-thumb">
                    <img
                      src={image.src}
                      alt="Gallery"
                      onClick={() => openLightbox(image.src)}
                      style={{ cursor: "pointer" }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {isOpen && (
          <div className="custom-modal_popup">
            <span className="close-button" onClick={closeLightbox}>
              &times;
            </span>
            <img src={imageSrc} alt="Fullsize" />
          </div>
        )}
      </div>

      {/* Registration Section */}
      {/* <section className="faq-area-2 space-bottom">
        <div className="container">
          <div className="row gx-60 flex-row-reverse">
            <div className="col-xl-6">
              <div className="faq-thumb2 mb-xl-0 mb-50">
                <img
                  src="/assets/img/membership/annual-membership.jpg"
                  alt="Sathya Narayana Poojai Registration"
                />
              </div>
            </div>
            <div className="col-xl-6">
              <div className="title-area">
                <span className="sub-title">EVENT</span>
                <h2 className="sec-title">Sathya Narayana Poojai Celebration</h2>
              </div>
              <div>
                <iframe
                title="Annual Membership form powered by Zeffy"
                className="thaipoosam-iframe"
                src="https://www.zeffy.com/embed/ticketing/thaipoosam-festival-celebration--2025"
                allowPaymentRequest
                allowTransparency="true"

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

export default SathyaNarayanaPoojai;
