"use client";

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

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

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

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

  return (
    <>
      {/* Divinity Section */}
      <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">DIVINITY</span>
                <h2 className="sec-title">
                  The Divine Day of Lord Ganesha
                </h2>
                <p className="sec-text">
                  Sangada Hara Chathurthi is a sacred day dedicated to Lord Ganesha, the remover of obstacles and the giver of wisdom and prosperity. This holy observance occurs each month on the fourth day after the full moon and is especially auspicious for devotees seeking peace, success, and spiritual upliftment. Worshipping Lord Ganesha on this day brings divine blessings and protection.
                </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/sangadahara-2/sangada-hara-charthurthi-2.webp"
                  alt="Sangada Hara Chathurthi Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Purpose 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">PURPOSE</span>
                <h2 className="sec-title">Spiritual Purpose of the Observance</h2>
                <p className="sec-text">
                  The term “Sangada Hara” means the removal of difficulties. Observing this day with sincerity helps devotees overcome obstacles in both worldly and spiritual paths. It is believed that fasting and praying to Lord Ganesha on Sangada Hara Chathurthi eliminates negative influences and fills one’s life with positivity, clarity, and inner 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/sangadahara-2/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Purpose Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Rituals 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">RITUALS</span>
                <h2 className="sec-title">Rituals and Devotional Practices</h2>
                <p className="sec-text">
                  The day begins with devotees offering prayers and performing Abhishekam to Lord Ganesha using milk, honey, and pure water. Offerings of Modakam, Durva grass, and fruits are made with love and devotion. Many devotees observe a strict fast, breaking it only after moonrise, once they offer prayers to the moon and chant the sacred “Om Gan Ganapataye Namaha”.
                </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/sangadahara-2/annadhanam.webp"
                  alt="Rituals Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Blessings 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">BLESSINGS</span>
                <h2 className="sec-title">Blessings and Spiritual Benefits</h2>
                <p className="sec-text">
                  Performing the Sangada Hara Chathurthi Pooja with devotion grants the blessings of wisdom, prosperity, and success. It helps remove mental, physical, and spiritual obstacles, leading to a more peaceful and fulfilling life. The divine grace of Lord Ganesha ensures protection from difficulties and guides devotees toward a path of truth and righteousness.
                </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/sangadahara-2/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Blessings Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery 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 SangadaHaraChathurthi;
