"use client";

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

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

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

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

  return (
    <>
      {/* The Glory of Thai Poosam */}
      <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 Thai Poosam</h2>
                <p className="sec-text">
                  Thai Poosam is one of the most sacred festivals dedicated to Lord Murugan, celebrated with immense devotion and enthusiasm. It falls during the Tamil month of Thai (January–February) on the day of the Poosam star. The day marks the divine event when Goddess Parvati bestowed the Vel (spear) upon Lord Murugan to destroy the demon Surapadman, symbolizing the triumph of good over evil and the power of divine wisdom.
                </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/thai-poosam/thai-poosam.webp"
                  alt="The Glory of Thai Poosam"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Spiritual Significance of the Festival */}
      <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">DEVOTION</span>
                <h2 className="sec-title">Spiritual Significance of the Festival</h2>
                <p className="sec-text">
                  Thai Poosam is a day of surrender, purification, and deep devotion. Devotees observe fasting, carry Kavadi, and undertake vows as acts of penance and gratitude to Lord Murugan. These offerings represent the removal of ego and the purification of the soul. The festival teaches humility, courage, and unwavering faith, inspiring devotees to overcome life’s challenges with divine strength and determination.
                </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/thai-poosam/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Spiritual Significance of Thai Poosam"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Rituals and Offerings to Lord Murugan */}
      <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 Offerings to Lord Murugan</h2>
                <p className="sec-text">
                  The celebration begins with Abhishekam, Archana, and Deeparadhanai performed to Lord Murugan’s idol, beautifully adorned with flowers and jewels. Devotees chant “Vel Vel Muruga Haro Hara”, creating an atmosphere filled with spiritual energy and divine vibrations. Offerings such as fruits, milk, and Panchamirtham are made with heartfelt devotion, followed by Bhajans and Kavadi processions in reverence to the Lord.
                </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/thai-poosam/annadhanam.webp"
                  alt="Rituals and Offerings"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Divine Blessings and Devotee Experience */}
      <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 Devotee Experience</h2>
                <p className="sec-text">
                  Participating in Thai Poosam brings immense spiritual benefits. It is believed to cleanse the heart, remove sins, and grant courage and clarity in life. The grace of Lord Murugan blesses devotees with peace, prosperity, and success. Witnessing or partaking in this sacred festival fills the soul with devotion and reminds us of the eternal bond between the Lord and His devotees.
                </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/thai-poosam/ubhayam.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Divine Blessings and Devotee Experience"
                />
              </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 ThaiPoosam;
