"use client";

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

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

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

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

  return (
    <>
      {/* Event Details 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">EVENT DETAILS</span>
                <h2 className="sec-title">A Sacred Beginning</h2>
                <p className="sec-text">
                  The New Year Celebration is a sacred beginning marked by prayers, chanting, and positive energy. Devotees gather at the temple to offer gratitude for the past year and seek blessings for peace, health, and prosperity in the coming year.
                </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/new-year/new-year-celebration.webp"
                  alt="New Year Celebration"
                  style={{ width: "515px", height: "400px" }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Participation 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">PARTICIPATION</span>
                <h2 className="sec-title">Participate in the Divine Celebration</h2>
                <p className="sec-text">
                  All devotees are warmly invited to join this divine occasion. Participating in the celebration with faith and devotion helps cleanse the mind, renew energy, and set a spiritual tone for the year ahead. Families are encouraged to attend together and receive the Lord’s blessings.
                </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/new-year/archanai.webp"
                  style={{ width: "515px", height: "400px" }}
                  alt="Participation Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Offerings 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">OFFERINGS</span>
                <h2 className="sec-title">Special Rituals and Offerings</h2>
                <p className="sec-text">
                  Devotees may offer fruits, flowers, sweets, or lamps as a symbol of gratitude and devotion. Special Abhishekam, Archana, and Deeparadhanai will be performed, followed by Bhajans and distribution of Prasadam to all attendees.
                </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/new-year/annadhanam.webp"
                  alt="Offerings Image"
                  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">Divine Blessings for the Year Ahead</h2>
                <p className="sec-text">
                  Beginning the year with divine prayers brings peace, prosperity, and positive transformation. May the Lord’s grace guide every devotee toward a year filled with happiness, success, and spiritual fulfillment.
                </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/new-year/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 NewYearCelebration;
