"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 Sacred Day of Lord Ganesha
                </h2>
                <p className="sec-text">
                  Sangada Hara Chathurthi is a revered day devoted to Lord
                  Ganesha, the divine remover of obstacles and the bestower of
                  wisdom and prosperity. Observed on the fourth day after the
                  full moon each month, this day holds special importance for
                  devotees seeking peace, success, and strength in life.
                  Worshipping Lord Ganesha on this auspicious day fills the
                  heart with positivity and spiritual grace.
                </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-3/sangada-hara-charthurthi-3.webp"
                  alt="Sangada Hara Chathurthi Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Essence 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">ESSENCE</span>
                <h2 className="sec-title">Spiritual Essence of the Observance</h2>
                <p className="sec-text">
                  The word “Sangada Hara” means the destruction of hardships.
                  Observing this sacred day with devotion helps devotees
                  eliminate difficulties and negative influences. Through
                  fasting, prayers, and sincere worship, one can purify the mind
                  and soul, receiving divine energy that leads to peace,
                  prosperity, and clarity in life.
                </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-3/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Essence 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">
                  Devotees begin the day with a sacred bath and prepare the
                  altar with Lord Ganesha’s idol beautifully adorned with
                  flowers and lamps. Abhishekam is performed with milk, honey,
                  and pure water, followed by the chanting of Ganesha mantras
                  and offering of Modakam, Durva grass, and fruits. Many
                  devotees observe fasting until moonrise and complete the
                  ritual by offering prayers to the moon before breaking their
                  fast.
                </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-3/annadhanam.webp"
                  alt="Rituals Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Grace 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">GRACE</span>
                <h2 className="sec-title">Blessings and Divine Grace</h2>
                <p className="sec-text">
                  Participating in Sangada Hara Chathurthi brings divine
                  blessings from Lord Ganesha for a life free from obstacles and
                  filled with success. It promotes peace of mind, strengthens
                  determination, and fosters spiritual growth. Devotees who
                  perform this pooja with faith experience prosperity,
                  protection, and inner harmony throughout their lives.
                </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-3/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Grace 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;
