"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 an auspicious day devoted to Lord
                  Ganesha, the remover of obstacles and the harbinger of wisdom
                  and prosperity. Observed on the fourth day after the full moon,
                  this day holds deep spiritual meaning for devotees. Worshipping
                  Lord Ganesha on this occasion removes negativity, grants peace,
                  and blesses devotees with success and happiness.
                </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-4/sangada-hara-charthurthi-4.webp"
                  alt="Sangada Hara Chathurthi"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Significance 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">Spiritual Significance of the Observance</h2>
                <p className="sec-text">
                  The term “Sangada Hara” means “the remover of difficulties.”
                  Devotees observe fasting and prayers to seek divine guidance
                  and liberation from life’s challenges. Worshipping Lord
                  Ganesha on this day purifies the heart, strengthens the mind,
                  and fosters inner peace. It is believed that sincere devotion
                  on Sangada Hara Chathurthi leads to spiritual elevation and
                  the destruction of karmic 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-4/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Ganesha Archanai"
                />
              </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 rituals begin with devotees offering Abhishekam to Lord
                  Ganesha using milk, honey, and holy water. Offerings of
                  Modakam, Durva grass, and fruits are made with devotion while
                  chanting “Om Gan Ganapataye Namaha.” Many devotees observe a
                  full or partial fast, breaking it only after sighting the moon
                  and completing the evening pooja. These rituals symbolize
                  humility, surrender, and the desire for spiritual growth.
                </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-4/annadhanam.webp"
                  alt="Ganesha Pooja Rituals"
                  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">Divine Blessings of the Day</h2>
                <p className="sec-text">
                  Participating in Sangada Hara Chathurthi bestows Lord Ganesha’s
                  blessings for a life free from obstacles and filled with peace,
                  prosperity, and good fortune. The day’s divine vibrations bring
                  clarity of thought, harmony within families, and success in
                  righteous endeavors. It is a day to strengthen one’s faith and
                  connect with the divine power that removes all hindrances.
                </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-4/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;
