Murugan_Temple/src/app/event-vaikasi-visagam/vaikasi-visagam.jsx

"use client";

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

const VaikasiVisagam = () => {
  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 Divine Birth of Lord Murugan</h2>
                <p className="sec-text">
                  Vaikasi Visakam is one of the most sacred festivals dedicated to Lord Murugan,
                  the embodiment of courage, wisdom, and divine grace. Celebrated on the Visakam star
                  during the Tamil month of Vaikasi (May–June), this day marks the divine incarnation
                  of Lord Murugan from Lord Shiva’s third eye to vanquish evil and restore righteousness.
                  It is a day of immense spiritual significance for devotees who revere Him as the eternal
                  source of knowledge and valor.
                </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/vaikasi-visagam/vaikasi-visagam.webp"
                  alt="Vaikasi Visakam"
                  style={{ width: "515px", height: "auto" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Essence 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">ESSENCE</span>
                <h2 className="sec-title">Spiritual Essence of Vaikasi Visakam</h2>
                <p className="sec-text">
                  This sacred occasion reminds devotees of the triumph of virtue over ignorance and
                  darkness. Worshiping Lord Murugan on this day purifies the heart and uplifts the soul.
                  It is believed that sincere prayers and fasting performed on Vaikasi Visakam bless
                  devotees with clarity of mind, success, and spiritual awakening. The divine vibrations
                  of this festival inspire faith, discipline, and dedication toward a life of righteousness.
                </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/vaikasi-visagam/archanai.webp"
                  alt="Spiritual Essence"
                  style={{ width: "515px", height: "auto" }}
                />
              </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 Temple Celebrations</h2>
                <p className="sec-text">
                  The day begins with Abhishekam, Alankaram, and Archana to Lord Murugan,
                  followed by Deeparadhanai and Bhajans. The temple is adorned with flowers and lights,
                  creating a divine atmosphere filled with devotion and joy. Devotees offer Panchamirtham,
                  milk, fruits, and Kavadi as acts of surrender and gratitude. Chanting “Vel Vel Muruga Haro Hara”
                  fills the temple with spiritual energy, spreading blessings to all present.
                </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/vaikasi-visagam/annadhanam.webp"
                  alt="Temple Rituals"
                  style={{ width: "515px", height: "auto" }}
                />
              </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 Lord Murugan</h2>
                <p className="sec-text">
                  Observing Vaikasi Visakam with devotion brings divine grace, wisdom, and strength
                  to overcome life’s challenges. Lord Murugan blesses His devotees with spiritual insight,
                  protection, and success in righteous endeavors. Participating in this holy celebration fills
                  the heart with light, devotion, and a renewed connection to 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/vaikasi-visagam/ubhayam.webp"
                  alt="Blessings"
                  style={{ width: "515px", height: "auto" }}
                />
              </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 VaikasiVisagam;