const ceremonySchedule = [
  {
    title: "Mahaganapathy Dhyanam",
    description: "The event begins with meditation and prayers to Mahaganapathy.",
  },
  {
    title: "Varuna Puja",
    description: "Varuna Puja is performed as part of the sacred opening observances.",
  },
  {
    title: "Surya Narayana Invocation",
    description: "The invocation of Surya Narayana Swami prepares the gathering for the chanting.",
  },
  {
    title: "Aruna Prasnam Chanting",
    description: "After the chanting, participants will receive Varuna jalam as prasadam.",
  },
];

const ArunaPrasnamChanting = () => {
  return (
    <>
      <section className="faq-area-2 space">
        <div className="container">
          <div className="row gx-60 align-items-center">
            <div className="col-xl-6 mb-50 mb-xl-0">
              <div className="faq-thumb2 text-center">
                <img
                  src="/assets/img/events/aruna-prasnam/aruna-prasnam-chanting-2026.jpeg"
                  alt="Aruna Prasnam Chanting at Sri Murugan Temple of Waterloo"
                  style={{
                    width: "100%",
                    maxWidth: "600px",
                    height: "auto",
                    borderRadius: "15px",
                    boxShadow: "0 12px 35px rgba(0, 0, 0, 0.15)",
                  }}
                />
              </div>
            </div>

            <div className="col-xl-6">
              <div className="title-area mb-0">
                <span className="sub-title">UPCOMING EVENT</span>
                <h2 className="sec-title">Aruna Prasnam Chanting</h2>
                <h4 className="mb-3" style={{ color: "#d2a530" }}>Surya Namaskaram</h4>
                <p className="sec-text">
                  Join us for a spiritual experience as we chant the sacred Aruna Prasnam from the
                  Krishna Yajur Veda Taittiriya Aranyakam. This Surya Namaskaram observance
                  encompasses 32 Namaskarams in its Vedic mantras, symbolizing devotion and surrender.
                </p>

                <div
                  className="p-4 p-md-5 mt-4"
                  style={{
                    backgroundColor: "#598b70",
                    border: "4px solid #d2a530",
                    borderRadius: "15px",
                    color: "#ffffff",
                  }}
                >
                  <h4 className="fw-bold mb-2" style={{ color: "#f1cf63" }}>
                    SUNDAY, AUGUST 30, 2026
                  </h4>
                  <h5 className="text-white mb-4">7:00 AM</h5>
                  <p className="mb-1 text-white fw-bold">Sri Murugan Temple of Waterloo</p>
                  <p className="mb-0 text-white">
                    Unit #1, 935 Frederick St, Kitchener, ON N2B 1V5, Canada
                  </p>
                  <p className="mb-0 mt-2 text-white">Entrance near the mattress store sign</p>
                </div>

                <a
                  href="mailto:info@waterloomurugantemple.ca?subject=Aruna%20Prasnam%20Chanting%20Enquiry"
                  className="btn style3 mt-4"
                >
                  Contact the Temple
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-area-2 space" style={{ backgroundColor: "#f7f2e7" }}>
        <div className="container">
          <div className="title-area text-center">
            <span className="sub-title">CEREMONY SCHEDULE</span>
            <h2 className="sec-title">Sacred Morning Program</h2>
          </div>
          <div className="row gy-30 justify-content-center">
            {ceremonySchedule.map((item) => (
              <div key={item.title} className="col-lg-3 col-md-6">
                <div
                  className="h-100 p-4 text-center"
                  style={{
                    backgroundColor: "#ffffff",
                    borderTop: "5px solid #d2a530",
                    borderRadius: "12px",
                    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.08)",
                  }}
                >
                  <h4 className="h4 text-theme mb-3">{item.title}</h4>
                  <p className="sec-text mb-0">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="faq-area-2 space">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xl-9">
              <div className="title-area text-center mb-0">
                <span className="sub-title">SIGNIFICANCE</span>
                <h2 className="sec-title">Aruna Prasnam and Surya Namaskaram</h2>
                <p className="sec-text">
                  Aruna Prasnam is a sacred Vedic chant honouring Surya Narayana. The gathering
                  combines prayer, chanting, and 32 Namaskarams as an expression of devotion and
                  surrender. Devotees are invited to participate in this auspicious morning observance.
                </p>
                <p className="sec-text mt-3 mb-0">
                  For enquiries, email
                  {" "}
                  <a href="mailto:info@waterloomurugantemple.ca">
                    info@waterloomurugantemple.ca
                  </a>.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default ArunaPrasnamChanting;