"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 (
    <>
      {/* Glory of Lord Ganesha */}
      <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">GLORY</span>
                <h2 className="sec-title">The Glory 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 success. Devotees worship Him to seek blessings for a smooth path in life, filled with peace and prosperity. This divine occasion symbolizes faith, devotion, and the victory of righteousness over obstacles.
                </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-1/sangada-hara-charthurthi-1.webp"
                  alt="Glory of Lord Ganesha"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Spiritual Significance */}
      <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">Spiritual Significance of the Day</h2>
                <p className="sec-text">
                  The day of Sangada Hara Chathurthi is believed to hold immense power to dispel negativity and hardships. Observing this day with sincere devotion helps devotees overcome difficulties and attain spiritual strength. It reminds us to surrender to Lord Ganesha’s will and trust in His divine guidance for a better tomorrow.
                </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-1/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Spiritual Significance"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pooja Rituals */}
      <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">POOJA RITUALS</span>
                <h2 className="sec-title">Pooja Procedure and Offerings</h2>
                <p className="sec-text">
                  Devotees begin the day with a holy bath and set up Lord Ganesha’s idol adorned with flowers and lamps. Offerings of Modakam, Durva grass, and fruits are made, accompanied by the chanting of Ganesha mantras and the reading of Sankata Nashana Stotra. Many devotees observe fasting until moonrise, breaking their fast after offering prayers to the moon.
                </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-1/annadhanam.webp"
                  alt="Pooja Rituals"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Blessings */}
      <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">Divine Blessings and Benefits</h2>
                <p className="sec-text">
                  Performing or participating in Sangada Hara Chathurthi Pooja bestows spiritual peace, success, and protection from hardships. The blessings of Lord Ganesha help remove obstacles, strengthen determination, and bring prosperity into every aspect of life. It is a day to cleanse the heart, renew faith, and receive the divine grace of the Almighty.
                </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-1/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Divine Blessings"
                />
              </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;
