"use client";

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

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

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

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

  return (
    <>
      {/* Significance 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">SIGNIFICANCE</span>
                <h2 className="sec-title">The Sacred Significance of Karthigai</h2>
                <p className="sec-text">
                  Monthly Karthigai is a divine day dedicated to Lord Murugan, observed on the day when the Karthigai star aligns with the full moon. It is a symbol of spiritual illumination and the victory of divine light over darkness. Devotees believe that lighting lamps and worshipping Lord Murugan on this day removes negativity, brings inner peace, and strengthens faith.
                </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/karthigai-1/karthigai.webp"
                  alt="Karthigai Significance"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Illumination 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">ILLUMINATION</span>
                <h2 className="sec-title">Spiritual Meaning of Lighting the Lamps</h2>
                <p className="sec-text">
                  Lighting of lamps on Karthigai represents the awakening of divine wisdom within the soul. Each flame symbolizes purity, hope, and devotion. As devotees light rows of lamps in the temple and at home, they invoke the blessings of Lord Murugan for enlightenment and protection from darkness, both within and around. The glow of the lamps fills the atmosphere with warmth, positivity, and divine energy.
                </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/karthigai-1/archanai.webp"
                  alt="Lighting Lamps"
                  style={{ width: "515px", height: "400px" }}
                />
              </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">Pooja and Ritual Practices</h2>
                <p className="sec-text">
                  The celebration begins with Abhishekam and Alankaram for Lord Murugan, followed by Archana, Deeparadhanai, and chanting of Murugan Bhajans. Devotees offer flowers, fruits, and light ghee lamps as acts of devotion. The temple radiates divine brilliance as lamps are lit across the premises, symbolizing the presence of the Almighty in every corner.
                </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/karthigai-1/annadhanam.webp"
                  alt="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">Blessings of Divine Light</h2>
                <p className="sec-text">
                  Observing Monthly Karthigai with devotion is believed to bring spiritual growth, peace, and prosperity. The grace of Lord Murugan helps devotees overcome challenges, guiding them toward wisdom and inner strength. Participating in this sacred celebration fills the heart with purity and strengthens one’s bond with the Divine.
                </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/karthigai-1/ubhayam.webp"
                  alt="Divine Blessings"
                  style={{ width: "515px", height: "400px" }}
                />
              </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 MonthlyKarthigai;
