"use client";

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

import AboutImg from "@/images/about-img.webp";
import axiosInstance from "@/lib/axiosInstance";

const ABOUT_PAGE_ID = "2";

interface TrustIndicator {
  id: number;
  page_id: number;
  title: string;
  image: string | null;
  sort_order?: number;
  status?: boolean;
}

interface AboutContent {
  id: number;
  page_id: number;
  section_name: string;
  image: string | null;
  html_content: string | null;
  status?: boolean;
}

const AboutInner = () => {
  const [about, setAbout] = useState<AboutContent | null>(null);
  const [indicators, setIndicators] = useState<TrustIndicator[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

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

        const [aboutRes, indicatorsRes] = await Promise.all([
          axiosInstance.get(`/cms/about?page_id=${ABOUT_PAGE_ID}`),
          axiosInstance.get(`/cms/trust-indicators?page_id=${ABOUT_PAGE_ID}`),
        ]);

        const aboutResult = aboutRes.data;
        const indicatorsResult = indicatorsRes.data;

        if (aboutResult.success) {
          setAbout(aboutResult.data);
        }

        if (indicatorsResult.success) {
          setIndicators(indicatorsResult.data || []);
        }
      } catch (error) {
        console.error("Failed to fetch about content:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <section className="aboutinnercontainer">
      <div className="container container-xxl">
        <div className="row gx-xl-5">
          <div
            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"
            data-aos="zoom-in"
            data-aos-duration="700"
          >
            <div className="aboutinnerimgouter">
              <div className="aboutinnerimg">
                <Image
                  src={about?.image || AboutImg}
                  alt={about?.section_name || "About RKDA"}
                  width={600}
                  height={600}
                  style={{ width: "100%", height: "auto" }}
                />
              </div>
            </div>
          </div>

          <div
            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"
            data-aos="fade-down"
            data-aos-duration="800"
          >
            <div className="aboutinnercontent">
              <div className="section-heading mb-3 mb-xxl-4">
                <h2>
                  <span>{about?.section_name || "About RKDA"}</span>
                </h2>
              </div>

              {!loading && about?.html_content && (
                <div
                  className=""
                  dangerouslySetInnerHTML={{ __html: about.html_content }}
                />
              )}

              

              {!loading && indicators.length > 0 && (
                <div className="row gx-2 gx-sm-2 gx-md-3 gx-xl-4">
                  {indicators.map((item) => (
                    <div
                      key={item.id}
                      className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4"
                    >
                      <div className="aboutclbx">
                        <div className="aboutclbxicon">
                          {item.image ? (
                            <Image
                              src={item.image}
                              alt={item.title}
                              width={40}
                              height={40}
                              style={{ objectFit: "contain" }}
                            />
                          ) : null}
                        </div>
                        <h3>{item.title}</h3>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutInner;












// "use client";

// import Image from "next/image";

// import AboutImg from "@/images/about-img.webp";

// const AboutInner = () => {
//   return (
//     <section className="aboutinnercontainer">
//       <div className="container container-xxl">
//         <div className="row gx-xl-5">
//           <div
//             className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"
//             data-aos="zoom-in"
//             data-aos-duration="700"
//           >
//             <div className="aboutinnerimgouter">
//               <div className="aboutinnerimg">
//                 <Image
//                   src={AboutImg}
//                   alt="About RKDA"
//                 />
//               </div>
//             </div>
//           </div>

//           <div
//             className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"
//             data-aos="fade-down"
//             data-aos-duration="800"
//           >
//             <div className="aboutinnercontent">
//               <div className="section-heading mb-3 mb-xxl-4">
//                 <h2>
//                   <span>About RKDA</span>
//                 </h2>
//               </div>

//               <p>
//                 RKDA is a research-driven Kuchipudi academy dedicated to
//                 preserving the authentic lineage of Padmabhushan Vempati Chinna
//                 Satyam Garu while introducing modern scientific training methods
//                 for today's learners.
//               </p>

//               <p>
//                 The academy has trained students across the{" "}
//                 <strong>USA and online globally</strong> through structured,
//                 flexible, <strong>and performance</strong>-oriented{" "}
//                 <strong>teaching</strong> systems.
//               </p>

//               <div className="row gx-2 gx-sm-2 gx-md-3 gx-xl-4">
//                 <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4">
//                   <div className="aboutclbx">
//                     <div className="aboutclbxicon">
//                       <svg viewBox="0 0 33 40" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M30.4787 15.1406C30.4787 22.9071 24.1827 29.2031 16.4162 29.2031C8.64976 29.2031 2.35376 22.9071 2.35376 15.1406C2.35376 7.37414 8.64976 1.00002 16.4162 1.00002C24.1827 1.00002 30.4787 7.37414 30.4787 15.1406Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
//                         <path d="M27.1477 24.229L31.8326 34.8482L25.7913 32.7968L23.2656 38.6556L18.9944 28.9673" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
//                         <path d="M13.8382 28.9673L9.56701 38.6556L7.04131 32.7968L1 34.8482L5.68491 24.229" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
//                         <path d="M16.4163 8.10939L18.4827 12.2964L23.1034 12.9678L19.7599 16.227L20.5491 20.829L16.4163 18.6562L12.2835 20.829L13.0728 16.227L9.72925 12.9678L14.3499 12.2964L16.4163 8.10939Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
//                       </svg>
//                     </div>
//                     <h3>20cs-f Years of Excellence</h3>
//                   </div>
//                 </div>

//                 <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4">
//                   <div className="aboutclbx">
//                     <div className="aboutclbxicon">
//                       <svg viewBox="0 0 34 40" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M33.5678 10.2993C33.5472 9.21935 33.5276 8.19914 33.5276 7.21216C33.5276 6.84083 33.3801 6.48471 33.1175 6.22214C32.855 5.95957 32.4989 5.81206 32.1275 5.81206C26.1398 5.81206 21.5808 4.09124 17.7808 0.396458C17.5195 0.142238 17.1693 0 16.8047 0C16.4401 0 16.09 0.142238 15.8287 0.396458C12.029 4.09124 7.47079 5.81206 1.48339 5.81206C1.11206 5.81206 0.755943 5.95957 0.493373 6.22214C0.230803 6.48471 0.0832922 6.84083 0.0832922 7.21216C0.0832922 8.19932 0.0638774 9.2199 0.0431559 10.3C-0.148752 20.3502 -0.411596 34.1143 16.3461 39.9228C16.6431 40.0258 16.9661 40.0258 17.2631 39.9228C34.0222 34.1141 33.7597 20.3496 33.5678 10.2993ZM16.8048 37.1142C2.43285 31.8934 2.65015 20.4564 2.84299 10.3534C2.85456 9.74709 2.86576 9.15942 2.8736 8.58333C8.48148 8.34661 12.9659 6.64726 16.8048 3.30307C20.6441 6.64726 25.1293 8.3468 30.7375 8.58333C30.7453 9.15923 30.7565 9.74653 30.7681 10.3525C30.9608 20.4558 31.1779 31.8932 16.8048 37.1142Z" fill="currentColor" />
//                         <path d="M21.6261 15.1364L14.8685 21.8936L11.9848 19.01C11.7208 18.7547 11.367 18.6134 10.9997 18.6165C10.6324 18.6197 10.2811 18.767 10.0214 19.0267C9.76172 19.2864 9.61446 19.6377 9.61138 20.005C9.60829 20.3723 9.74962 20.7261 10.0049 20.9901L13.8785 24.8637C14.0084 24.9939 14.1627 25.0971 14.3326 25.1675C14.5025 25.2378 14.6846 25.2739 14.8685 25.2737C15.0524 25.2739 15.2345 25.2378 15.4044 25.1675C15.5743 25.0971 15.7286 24.9939 15.8585 24.8637L23.6059 17.1165C23.7359 16.9865 23.8391 16.8322 23.9095 16.6623C23.9799 16.4925 24.0161 16.3104 24.0162 16.1266C24.0162 15.9427 23.98 15.7606 23.9096 15.5908C23.8392 15.4209 23.7361 15.2666 23.6061 15.1366C23.3435 14.874 22.9874 14.7265 22.6161 14.7264C22.2448 14.7264 21.8887 14.8739 21.6261 15.1364Z" fill="currentColor" />
//                       </svg>
//                     </div>
//                     <h3>Certified Clamical Training</h3>
//                   </div>
//                 </div>

//                 <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4">
//                   <div className="aboutclbx">
//                     <div className="aboutclbxicon">
//                       <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <g clip-path="url(#clip0_4736_11686)">
//                           <path d="M34.1421 5.85789C30.3646 2.08031 25.3422 0 20 0C14.6578 0 9.63531 2.08031 5.85789 5.85781C2.08031 9.63531 0 14.6578 0 20C0 25.3422 2.08031 30.3646 5.85789 34.1421C9.63531 37.9196 14.6578 39.9999 20 39.9999C25.3423 39.9999 30.3646 37.9196 34.1422 34.142C37.9196 30.3646 40 25.3421 40 19.9999C40 14.6577 37.9196 9.63531 34.1421 5.85789ZM7.51688 7.51688C9.27555 5.7582 11.3402 4.4168 13.5905 3.54125C12.9911 4.28953 12.4302 5.14961 11.9163 6.11695C11.3193 7.24039 10.8042 8.47422 10.3752 9.79211C8.88914 9.54547 7.51219 9.24219 6.28203 8.88625C6.66998 8.409 7.08214 7.95194 7.51688 7.51688ZM4.86164 10.9051C6.30047 11.3658 7.94594 11.7543 9.74141 12.062C9.24141 14.1844 8.94711 16.4682 8.87687 18.827H2.38562C2.57 15.9963 3.42016 13.2947 4.86164 10.9051ZM4.73391 28.878C3.37023 26.5421 2.56445 23.9185 2.38555 21.173H8.88133C8.95805 23.4644 9.24648 25.6833 9.72961 27.7501C7.89727 28.0471 6.21047 28.4258 4.73391 28.878ZM7.51688 32.4831C7.02242 31.9884 6.55728 31.4653 6.12383 30.9163C7.39906 30.5627 8.82469 30.2633 10.3593 30.0231C10.7913 31.3593 11.312 32.6095 11.9162 33.7467C12.4763 34.8009 13.0922 35.7271 13.7529 36.5205C11.4396 35.6469 9.31781 34.2839 7.51688 32.4831ZM18.8269 37.3527C17.045 36.8536 15.3594 35.2264 13.9881 32.6458C13.5085 31.7433 13.0873 30.7587 12.7264 29.7093C14.6584 29.4966 16.7143 29.3709 18.8269 29.3414V37.3527ZM18.8269 26.9951C16.4841 27.027 14.2005 27.1741 12.062 27.4253C11.5903 25.4752 11.3065 23.3645 11.2286 21.1731H18.827V26.9951H18.8269ZM18.8269 18.8269H11.2241C11.2953 16.5742 11.5837 14.4046 12.0701 12.4049C14.1949 12.6705 16.4737 12.8321 18.8269 12.8784V18.8269ZM18.8269 10.5319C16.7061 10.4891 14.6548 10.3509 12.7364 10.1252C13.0951 9.0868 13.513 8.11211 13.9881 7.21781C15.3593 4.63719 17.045 3.01 18.8269 2.51086V10.5319ZM35.2123 11.0297C36.6087 13.3885 37.4331 16.0452 37.6145 18.8269H31.1233C31.0538 16.4953 30.7652 14.2371 30.2756 12.1357C32.0829 11.8438 33.7488 11.4725 35.2123 11.0297ZM32.483 7.51688C32.9503 7.98465 33.3915 8.47785 33.8045 8.99422C32.5487 9.33711 31.1504 9.62813 29.6479 9.86234C29.2145 8.51797 28.6914 7.26039 28.0838 6.11695C27.5698 5.14961 27.009 4.28953 26.4096 3.54125C28.6598 4.4168 30.7245 5.7582 32.483 7.51688ZM21.1731 21.1731H28.7715C28.693 23.3816 28.4054 25.5083 27.927 27.4709C25.8024 27.2068 23.5247 27.0467 21.1731 27.0017V21.1731ZM21.1731 18.8269V12.8862C23.5173 12.8554 25.8026 12.7095 27.9431 12.4593C28.4216 14.4439 28.7053 16.5946 28.7759 18.8269H21.1731ZM21.173 2.51086H21.173C22.9549 3.01 24.6405 4.63719 26.0118 7.21781C26.4945 8.12617 26.9181 9.11766 27.2805 10.1747C25.3459 10.3866 23.2877 10.5113 21.173 10.5398V2.51086ZM21.1731 37.3527V29.3482C23.2919 29.3898 25.3416 29.5268 27.2593 29.751C26.9016 30.7848 26.485 31.7552 26.0119 32.6458C24.6406 35.2264 22.955 36.8536 21.1731 37.3527ZM32.483 32.4831C30.6822 34.284 28.5604 35.6469 26.247 36.5205C26.9077 35.727 27.5236 34.8009 28.0837 33.7467C28.6791 32.6263 29.193 31.3961 29.6213 30.0822C31.142 30.3332 32.5488 30.6436 33.8021 31.0087C33.3898 31.524 32.9494 32.0162 32.483 32.4831ZM35.2036 28.9851C33.7477 28.517 32.0786 28.1232 30.2563 27.8124C30.7481 25.728 31.0413 23.4874 31.1188 21.1731H37.6146C37.4327 23.9605 36.6054 26.6226 35.2036 28.9851Z" fill="currentColor" />
//                         </g>
//                         <defs>
//                           <clipPath id="clip0_4736_11686">
//                             <rect width="40" height="40" fill="white" />
//                           </clipPath>
//                         </defs>
//                       </svg>
//                     </div>
//                     <h3>Online &amp; Offline Classes</h3>
//                   </div>
//                 </div>

//                 <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4">
//                   <div className="aboutclbx">
//                     <div className="aboutclbxicon">
//                       <svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M34.1406 17.533H30.2252C29.6923 17.533 29.1763 17.6058 28.6853 17.7397C27.7167 15.8357 25.7392 14.5274 23.4605 14.5274H16.5395C14.2608 14.5274 12.2833 15.8357 11.3147 17.7397C10.8129 17.6026 10.295 17.5331 9.77484 17.533H5.85938C2.62852 17.533 0 20.1615 0 23.3924V29.6516C0 31.5901 1.57711 33.1672 3.51562 33.1672H36.4844C38.4229 33.1672 40 31.5901 40 29.6516V23.3924C40 20.1615 37.3715 17.533 34.1406 17.533ZM10.6801 20.3869V30.8236H3.51562C2.86945 30.8236 2.34375 30.2979 2.34375 29.6517V23.3925C2.34375 21.454 3.92086 19.8769 5.85938 19.8769H9.77484C10.093 19.8769 10.401 19.9201 10.6943 19.9997C10.6853 20.1286 10.6806 20.2577 10.6801 20.3869ZM26.9762 30.8236H13.0238V20.3869C13.0238 18.4483 14.6009 16.8712 16.5395 16.8712H23.4605C25.3991 16.8712 26.9762 18.4483 26.9762 20.3869V30.8236ZM37.6562 29.6517C37.6562 30.2979 37.1305 30.8236 36.4844 30.8236H29.3199V20.3869C29.3194 20.2576 29.3147 20.1285 29.3057 19.9996C29.6054 19.9181 29.9146 19.8768 30.2252 19.8768H34.1406C36.0791 19.8768 37.6562 21.4539 37.6562 23.3924V29.6517Z" fill="currentColor" />
//                         <path d="M7.81707 6.4668C4.94605 6.4668 2.61035 8.8025 2.61035 11.6735C2.61027 14.5445 4.94605 16.8802 7.81707 16.8802C10.688 16.8802 13.0238 14.5445 13.0238 11.6735C13.0238 8.8025 10.6881 6.4668 7.81707 6.4668ZM7.81699 14.5365C6.23832 14.5365 4.95402 13.2522 4.95402 11.6735C4.95402 10.0948 6.23832 8.81055 7.81699 8.81055C9.39566 8.81055 10.68 10.0948 10.68 11.6735C10.68 13.2522 9.39566 14.5365 7.81699 14.5365ZM19.9999 0C16.1643 0 13.0438 3.12047 13.0438 6.95609C13.0438 10.7917 16.1643 13.9122 19.9999 13.9122C23.8355 13.9122 26.956 10.7917 26.956 6.95609C26.956 3.12055 23.8355 0 19.9999 0ZM19.9999 11.5684C17.4566 11.5684 15.3875 9.49937 15.3875 6.95609C15.3875 4.41289 17.4566 2.34375 19.9999 2.34375C22.5432 2.34375 24.6122 4.41281 24.6122 6.95609C24.6122 9.49937 22.5432 11.5684 19.9999 11.5684ZM32.1827 6.4668C29.3118 6.4668 26.976 8.8025 26.976 11.6735C26.9761 14.5445 29.3118 16.8802 32.1827 16.8802C35.0537 16.8802 37.3894 14.5445 37.3894 11.6735C37.3894 8.8025 35.0537 6.4668 32.1827 6.4668ZM32.1827 14.5365C30.6041 14.5365 29.3197 13.2522 29.3197 11.6735C29.3198 10.0948 30.6041 8.81055 32.1827 8.81055C33.7614 8.81055 35.0457 10.0948 35.0457 11.6735C35.0457 13.2522 33.7614 14.5365 32.1827 14.5365Z" fill="currentColor" />
//                       </svg>
//                     </div>
//                     <h3>Global Student Community</h3>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default AboutInner;