"use client";

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

const ChitraPournami = () => {
  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 Significance of Chitra Pournami</h2>
                <p className="sec-text">
                  Chitra Pournami is an auspicious full moon day dedicated to Chitragupta,
                  the divine accountant of human deeds and the assistant of Lord Yama, the God of Justice.
                  It is a day for self-reflection, gratitude, and purification of thoughts and actions.
                  Devotees observe this sacred day to cleanse their hearts from past mistakes
                  and seek blessings for righteousness, clarity, and peace.
                </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/chitra-pournami/chitra-pournami.webp"
                  alt="Chitra Pournami Image"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 2 – Awakening */}
      <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">AWAKENING</span>
                <h2 className="sec-title">Spiritual Meaning of the Full Moon</h2>
                <p className="sec-text">
                  On Chitra Pournami, the bright full moon symbolizes illumination, purity, and divine awareness.
                  It is believed that offering prayers under the moonlight brings spiritual awakening and peace of mind.
                  Devotees pray to Lord Chitragupta to forgive past actions and guide them toward a path of truth and virtue.
                  The energy of the full moon enhances meditation and promotes harmony between body, mind, and soul.
                </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/chitra-pournami/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Spiritual Meaning Image"
                />
              </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">Traditional Rituals and Observances</h2>
                <p className="sec-text">
                  Devotees take a holy bath early in the morning and offer prayers to Lord Chitragupta and Lord Murugan.
                  Offerings such as rice, jaggery, fruits, and flowers are made, along with lighting of lamps and chanting of sacred mantras.
                  Many devotees observe fasting or charity, believing that acts of goodness performed on this day bring positive karma and spiritual merit.
                  Evening prayers under the bright moon are considered especially auspicious.
                </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/chitra-pournami/annadhanam.webp"
                  alt="Rituals Image"
                  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">Divine Blessings of Chitra Pournami</h2>
                <p className="sec-text">
                  Observing Chitra Pournami with sincerity helps devotees release negative karma
                  and cultivate peace, prosperity, and self-discipline.
                  It is a reminder to live a life guided by virtue and awareness.
                  The blessings received on this holy day cleanse the heart,
                  strengthen devotion, and inspire a renewed sense of purpose and gratitude toward 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/chitra-pournami/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Blessings 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 ChitraPournami;
