"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 (
    <>
      {/* Section 1 – Significance */}
      <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 Spiritual Importance of Karthigai</h2>
                <p className="sec-text">
                  Monthly Karthigai is a sacred occasion dedicated to Lord Murugan,
                  symbolizing light, purity, and devotion. It falls on the day when
                  the Karthigai star aligns with the full moon, radiating divine energy
                  across the universe. On this day, devotees light countless lamps to
                  honor Lord Murugan, who represents the eternal flame of wisdom and
                  the destruction of darkness.
                </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-2/karthigai-2.webp"
                  alt="Karthigai Significance"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 2 – Illumination */}
      <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">Lighting the Lamps of Faith</h2>
                <p className="sec-text">
                  Lighting the Karthigai Deepam is more than a ritual—it is a prayer
                  in action. Each glowing flame embodies the light of truth that
                  dispels ignorance and ego. Devotees light lamps in temples and
                  homes, offering prayers for peace, prosperity, and protection.
                </p>
                <p className="sec-text">
                  The temple glows with rows of radiant lights, filling the heart
                  with divine serenity and spiritual elevation.
                </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-2/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Karthigai Illumination"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 3 – 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">RITUALS</span>
                <h2 className="sec-title">Poojas and Sacred Offerings</h2>
                <p className="sec-text">
                  The celebration begins with Abhishekam, Alankaram, and Archana for
                  Lord Murugan, followed by Deeparadhanai and Bhajans. Devotees offer
                  flowers, ghee lamps, and Panchamirtham as symbols of devotion.
                </p>
                <p className="sec-text">
                  The rhythmic chanting of Muruga Bhajans and the fragrance of incense
                  create a deeply spiritual environment that uplifts the soul 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-2/annadhanam.webp"
                  alt="Karthigai Rituals"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 4 – 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">The Blessings of Divine Light</h2>
                <p className="sec-text">
                  Observing Monthly Karthigai fills one’s life with positive energy,
                  courage, and divine blessings. The sacred light of Lord Murugan guides
                  devotees toward spiritual wisdom and inner strength.
                </p>
                <p className="sec-text">
                  It is believed that lighting lamps with devotion on this day clears
                  obstacles, promotes harmony, and brings lasting peace to the heart
                  and home.
                </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-2/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Karthigai 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 MonthlyKarthigai;
