"use client";

import { useEffect, useState } from "react";
import Image from "next/image";

import MainBg from "@/images/guru-banner.webp";
import MeetVector from "@/images/meet-vector.webp";
import axiosInstance from "@/lib/axiosInstance";

interface MeetGuru {
  id: number;
  title: string;
  description: string;
  guru_image: string | null;
  quote_text: string;
  signature_text: string;
  guru_name: string;
}

const ABOUT_PAGE_ID = "2";

const MeetOurGuru = () => {
  const [data, setData] = useState<MeetGuru | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMeetGuru = async () => {
      try {
        setLoading(true);

        const response = await axiosInstance.get(
          `/cms/meet-guru?page_id=${ABOUT_PAGE_ID}`
        );
        const result = response.data;

        if (result.success) {
          setData(result.data);
        }
      } catch (error) {
        console.error("Failed to fetch meet guru:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchMeetGuru();
  }, []);

  if (loading || !data) {
    return null;
  }

  return (
    <section
      className="meetcontainer"
      style={{
        backgroundImage: `url(${MainBg.src})`,
      }}
    >
      <div className="meetcontainerinner">
        <div className="container container-xxl">
          <div className="row gx-xl-5">
            <div
              className="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12 col-12"
              data-aos="zoom-in-up"
              data-aos-duration="500"
            >
              <div className="meetcontentimgouter">
                <div className="meetcontentimg">
                  {data.guru_image ? (
                    <img
                      src={data.guru_image}
                      alt={data.title || "Meet Our Guru"}
                    />
                  ) : null}
                </div>
              </div>
            </div>

            <div
              className="col-xxl-7 col-xl-7 col-lg-6 col-md-6 col-sm-12 col-12"
              data-aos="zoom-in-up"
              data-aos-duration="600"
            >
              <div className="meetcontentcontent h-100 d-flex flex-column">
                <div className="flex-fill">
                  <div className="section-heading mb-4">
                    <h2>
                      <span>{data.title}</span>
                    </h2>
                  </div>

                  <p>{data.description}</p>
                </div>

                <div className="guruinfo">
                  {/* <p>{data.quote_text}</p> */}
                  <p>
                    {data.quote_text?.replace("- ", "-\n").split("\n").map((line, index) => (
                      <span key={index}>
                        {line}
                        <br />
                      </span>
                    ))}
                  </p>

                  <div className="signaturebx">
                    <span className="signature">{data.signature_text}</span>
                    <span className="guruname">{data.guru_name}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        className="meetvector"
        data-aos="zoom-in-left"
        data-aos-duration="900"
      >
        <Image src={MeetVector} alt="Vector" />
      </div>
    </section>
  );
};

export default MeetOurGuru;




// "use client";

// import Image from "next/image";

// import MainBg from "@/images/guru-banner.webp";
// import GuruImg from "@/images/padmabhushon-vempati-lineage.webp";
// import MeetVector from "@/images/meet-vector.webp";

// const MeetOurGuru = () => {
//   return (
//     <section
//       className="meetcontainer"
//       style={{
//         backgroundImage: `url(${MainBg.src})`,
//       }}
//     >
//       <div className="meetcontainerinner">
//         <div className="container container-xxl">
//           <div className="row gx-xl-5">
//             <div
//               className="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12 col-12"
//               data-aos="zoom-in-up"
//               data-aos-duration="500"
//             >
//               <div className="meetcontentimgouter">
//                 <div className="meetcontentimg">
//                   <Image
//                     src={GuruImg}
//                     alt="Padmabhushon Vempati Lineage"
//                   />
//                 </div>
//               </div>
//             </div>

//             <div
//               className="col-xxl-7 col-xl-7 col-lg-6 col-md-6 col-sm-12 col-12"
//               data-aos="zoom-in-up"
//               data-aos-duration="600"
//             >
//               <div className="meetcontentcontent h-100 d-flex flex-column">
//                 <div className="flex-fill">
//                   <div className="section-heading mb-4">
//                     <h2>
//                       <span>Meet Our Guru</span>
//                     </h2>
//                   </div>

//                   <p>
//                     Under the guidance of experienced mentors and traditional
//                     gurus, RKDA continues the timeless heritage of Kuchipudi
//                     through disciplined learning and artistic excellence.
//                   </p>
//                 </div>

//                 <div className="guruinfo">
//                   <p>
//                     Dance is not merely movement -
//                     <br />
//                     it is devotion expressed through rhythm.
//                   </p>

//                   <div className="signaturebx">
//                     <span className="signature">Vempati</span>
//                     <span className="guruname">
//                       - Padmabhushon Vempati Lineage
//                     </span>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>

//       <div
//         className="meetvector"
//         data-aos="zoom-in-left"
//         data-aos-duration="900"
//       >
//         <Image
//           src={MeetVector}
//           alt="Vector"
//         />
//       </div>
//     </section>
//   );
// };

// export default MeetOurGuru;