"use client";

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

interface TrainingApproachItem {
  id: number;
  title: string;
  description: string;
  image: string | null;
  sort_order?: number;
}

const ABOUT_PAGE_ID = "2";

const TrainingApproach = () => {
  const [items, setItems] = useState<TrainingApproachItem[]>([]);
  const [loading, setLoading] = useState(true);

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

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

        if (result.success) {
          setItems(result.data || []);
        }
      } catch (error) {
        console.error("Failed to fetch training approach:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchTrainingApproach();
  }, []);

  if (loading || items.length === 0) {
    return null;
  }

  return (
    <section className="trainingapproach">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12">
            <div
              className="section-heading text-center"
              data-aos="fade-down"
              data-aos-duration="700"
            >
              <h2>
                <span>Our Scientific Training Approach</span>
              </h2>
            </div>
          </div>
        </div>

        <div className="row gx-2 gx-sm-3 gx-xl-4">
          {items.map((item, index) => (
            <div
              key={item.id}
              className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 approach-column mb-2 mb-sm-3"
              data-aos="fade-up"
              data-aos-duration={700 + index * 100}
            >
              <div className="missionbx">
                <div className="missionbxicon">
                  {item.image ? (
                    <Image
                      src={item.image}
                      alt={item.title}
                      width={46}
                      height={46}
                      style={{ objectFit: "contain" }}
                    />
                  ) : (
                    <div style={{ width: 46, height: 46 }} />
                  )}
                </div>

                <div className="missioncontent">
                  <h3>{item.title}</h3>
                  <p>{item.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TrainingApproach;

// "use client";

// const TrainingApproach = () => {
//   return (
//       <section className="trainingapproach">
//     <div className="container container-xxl">
//       <div className="row">
//         <div className="col-12">
//           <div className="section-heading text-center" data-aos="fade-down" data-aos-duration="700">
//             <h2><span>Our Scientific Training Approach</span></h2>
//           </div>
//         </div>
//       </div>
//       <div className="row gx-2 gx-sm-3 gx-xl-4">
//         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 approach-column mb-2 mb-sm-3" data-aos="fade-up" data-aos-duration="700">
//           <div className="missionbx">
//             <div className="missionbxicon">
//               <svg viewBox="0 0 40 46" fill="none" xmlns="http://www.w3.org/2000/svg">
//                 <path d="M14.5678 4.97266C14.5678 3.98916 14.8594 3.02776 15.4058 2.21001C15.9522 1.39226 16.7288 0.754904 17.6375 0.378533C18.5461 0.00216109 19.5459 -0.0963198 20.5105 0.0955433C21.4751 0.287406 22.3611 0.760996 23.0566 1.45642C23.752 2.15185 24.2256 3.03789 24.4175 4.00248C24.6094 4.96708 24.5109 5.96691 24.1346 6.87554C23.7582 7.78418 23.1209 8.56081 22.3032 9.10722C21.4854 9.65364 20.524 9.9453 19.5405 9.94531C18.8875 9.94533 18.2409 9.81672 17.6375 9.56682C17.0342 9.31693 16.486 8.95065 16.0243 8.48889C15.5625 8.02714 15.1962 7.47895 14.9463 6.87563C14.6964 6.27232 14.5678 5.62569 14.5678 4.97266ZM36.5971 12.4062H2.48398C2.15852 12.4041 1.83587 12.4664 1.53459 12.5896C1.23331 12.7127 0.959356 12.8942 0.728492 13.1236C0.497628 13.353 0.314412 13.6258 0.189388 13.9263C0.064364 14.2268 0 14.5491 0 14.8746C0 15.2 0.064364 15.5223 0.189388 15.8228C0.314412 16.1233 0.497628 16.3961 0.728492 16.6255C0.959356 16.8549 1.23331 17.0364 1.53459 17.1596C1.83587 17.2827 2.15852 17.345 2.48398 17.343H13.4979V42.8772C13.5024 43.6755 13.8227 44.4396 14.3888 45.0025C14.9549 45.5654 15.7208 45.8814 16.5192 45.8814C17.3175 45.8814 18.0834 45.5654 18.6495 45.0025C19.2157 44.4396 19.536 43.6755 19.5405 42.8772V28.743C19.5405 28.5617 19.6125 28.3878 19.7407 28.2596C19.8689 28.1314 20.0428 28.0594 20.2241 28.0594C20.4054 28.0594 20.5793 28.1314 20.7075 28.2596C20.8357 28.3878 20.9077 28.5617 20.9077 28.743V32.2025L34.4478 24.3848C35.1418 23.9841 35.6482 23.3242 35.8556 22.5502C36.063 21.7762 35.9544 20.9515 35.5538 20.2576C35.1531 19.5636 34.4932 19.0572 33.7192 18.8498C32.9452 18.6424 32.1205 18.751 31.4266 19.1517L25.5832 22.5254V17.343H36.5971C36.9225 17.345 37.2452 17.2827 37.5465 17.1596C37.8477 17.0364 38.1217 16.8549 38.3526 16.6255C38.5834 16.3961 38.7666 16.1233 38.8917 15.8228C39.0167 15.5223 39.0811 15.2 39.0811 14.8746C39.0811 14.5491 39.0167 14.2268 38.8917 13.9263C38.7666 13.6258 38.5834 13.353 38.3526 13.1236C38.1217 12.8942 37.8477 12.7127 37.5465 12.5896C37.2452 12.4664 36.9225 12.4041 36.5971 12.4062Z" fill="currentColor"/>
//               </svg>
//             </div>
//             <div className="missioncontent">
//               <h3>Body Flexibility Training</h3>
//               <p>Full body flexibiley in 3 years unlike the usual classical training</p>
//             </div>
//           </div>
//         </div>
//         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 approach-column mb-2 mb-sm-3" data-aos="fade-up" data-aos-duration="800">
//           <div className="missionbx">
//             <div className="missionbxicon">
//               <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
//                 <path d="M42.1875 7.03125C42.1875 2.96875 33.332 0.78125 25 0.78125C16.668 0.78125 7.8125 2.96875 7.8125 7.03125V10.1562C7.82768 10.8863 8.10498 11.5865 8.59375 12.1289V29.6875C8.59373 31.882 9.03553 34.0541 9.8928 36.0743C10.7501 38.0944 12.0053 39.9213 13.5836 41.4461C12.0789 42.407 11.7188 43.4156 11.7188 44.1406C11.7188 47.4391 18.5617 49.2188 25 49.2188C31.4383 49.2188 38.2812 47.4391 38.2812 44.1406C38.2812 43.4156 37.9211 42.407 36.4164 41.4461C37.9947 39.9213 39.2499 38.0944 40.1072 36.0743C40.9645 34.0541 41.4063 31.882 41.4062 29.6875V12.1289C41.895 11.5865 42.1723 10.8863 42.1875 10.1562V7.03125ZM32.9516 42.2008C32.2561 42.6491 31.5244 43.0385 30.7641 43.3648C32.5691 35.8216 33.704 28.1336 34.1555 20.3906C34.8964 27.6789 34.4902 35.0383 32.9516 42.2008ZM29.0188 43.9633C28.468 44.1172 27.9087 44.2387 27.3438 44.3273V32.5156C27.3398 27.1228 26.9906 21.7357 26.2984 16.3875C28.467 16.3338 30.6289 16.1234 32.7672 15.7578C32.5521 25.2684 31.2951 34.7267 29.0188 43.9633ZM17.0484 42.2008C15.5098 35.0383 15.1036 27.6789 15.8445 20.3906C16.2949 28.1338 17.4288 35.8221 19.2328 43.3656C18.4735 43.0389 17.7428 42.6492 17.0484 42.2008ZM9.375 10.1562V9.75703C11.2196 11.021 13.3098 11.8824 15.5094 12.2852L15.2469 13.7289C11.625 12.8031 9.375 11.4375 9.375 10.1562ZM32.7914 14.1609C30.5818 14.5609 28.3436 14.7829 26.0984 14.825L25.8914 13.2719C28.2116 13.2342 30.5255 13.018 32.8125 12.625V12.8008C32.8125 13.2539 32.7961 13.7078 32.7914 14.1609ZM23.9016 14.825C21.6564 14.7829 19.4182 14.5609 17.2086 14.1609C17.2039 13.7078 17.1875 13.2539 17.1875 12.8008V12.625C19.4745 13.018 21.7884 13.2342 24.1086 13.2719L23.9016 14.825ZM20.9813 43.9656C18.7046 34.7298 17.4471 25.2723 17.2312 15.7625C19.3695 16.1281 21.5314 16.3385 23.7 16.3922C23.0086 21.7389 22.6599 27.1244 22.6562 32.5156V44.3273C22.0913 44.2387 21.532 44.1172 20.9813 43.9633V43.9656ZM24.2188 32.5156C24.2251 27.9162 24.486 23.3206 25 18.75C25.514 23.3206 25.7749 27.9162 25.7812 32.5156V44.4914C25.5211 44.5055 25.2641 44.5312 25 44.5312C24.7359 44.5312 24.4789 44.5055 24.2188 44.4914V32.5156ZM34.7531 13.7289L34.4906 12.2852C36.6902 11.8824 38.7804 11.021 40.625 9.75703V10.1562C40.625 11.4375 38.375 12.8031 34.7531 13.7289ZM25 2.34375C33.943 2.34375 40.625 4.81875 40.625 7.03125C40.625 9.24375 33.943 11.7188 25 11.7188C16.057 11.7188 9.375 9.24375 9.375 7.03125C9.375 4.81875 16.057 2.34375 25 2.34375ZM10.1562 29.6875V13.4258C11.6615 14.2791 13.2849 14.9049 14.9734 15.2828C13.5125 23.723 13.5771 32.3568 15.1641 40.7742C13.5912 39.3868 12.3313 37.6808 11.4679 35.7694C10.6045 33.858 10.1574 31.7849 10.1562 29.6875ZM36.7188 44.1406C36.7188 45.6086 32.2609 47.6562 25 47.6562C17.7391 47.6562 13.2812 45.6086 13.2812 44.1406C13.2812 43.6344 13.8375 43.0563 14.8172 42.5273C17.709 44.8362 21.2996 46.0937 25 46.0937C28.7004 46.0937 32.291 44.8362 35.1828 42.5273C36.1625 43.0563 36.7188 43.6344 36.7188 44.1406ZM34.8359 40.7742C36.4229 32.3568 36.4875 23.723 35.0266 15.2828C36.7151 14.9049 38.3385 14.2791 39.8438 13.4258V29.6875C39.8426 31.7849 39.3955 33.858 38.5321 35.7694C37.6687 37.6808 36.4088 39.3868 34.8359 40.7742Z" fill="currentColor"/>
//                 <path d="M25 9.375C27.2578 9.375 29.6875 8.64219 29.6875 7.03125C29.6875 5.42031 27.2578 4.6875 25 4.6875C22.7422 4.6875 20.3125 5.42031 20.3125 7.03125C20.3125 8.64219 22.7422 9.375 25 9.375ZM25 6.25C26.8344 6.25 27.9047 6.77578 28.1055 7.03125C27.9047 7.28672 26.8344 7.8125 25 7.8125C23.1656 7.8125 22.0953 7.28672 21.8945 7.03125C22.0953 6.77578 23.1656 6.25 25 6.25Z" fill="currentColor"/>
//               </svg>
//             </div>
//             <div className="missioncontent">
//               <h3>Rhythm & Expression Practice</h3>
//               <p>Develop strong sense of rhythm and express through Abhinaya techniques.</p>
//             </div>
//           </div>
//         </div>
//         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 approach-column mb-2 mb-sm-3" data-aos="fade-up" data-aos-duration="900">
//           <div className="missionbx">
//             <div className="missionbxicon">
//               <svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                 <path d="M39.5833 11.4583H43.75V32.2917H39.5833V11.4583ZM2.08333 11.4583H6.25V32.2917H2.08333V11.4583ZM13.5417 21.875H9.375C8.80208 21.875 8.33333 22.3438 8.33333 22.9167V32.2917H14.5833V22.9167C14.5833 22.3438 14.1146 21.875 13.5417 21.875ZM11.4583 30.2083C11.1821 30.2083 10.9171 30.0986 10.7218 29.9032C10.5264 29.7079 10.4167 29.4429 10.4167 29.1667C10.4167 28.8904 10.5264 28.6254 10.7218 28.4301C10.9171 28.2347 11.1821 28.125 11.4583 28.125C11.7346 28.125 11.9996 28.2347 12.1949 28.4301C12.3903 28.6254 12.5 28.8904 12.5 29.1667C12.5 29.4429 12.3903 29.7079 12.1949 29.9032C11.9996 30.0986 11.7346 30.2083 11.4583 30.2083ZM11.4583 26.0417C11.1821 26.0417 10.9171 25.9319 10.7218 25.7366C10.5264 25.5412 10.4167 25.2763 10.4167 25C10.4167 24.7237 10.5264 24.4588 10.7218 24.2634C10.9171 24.0681 11.1821 23.9583 11.4583 23.9583C11.7346 23.9583 11.9996 24.0681 12.1949 24.2634C12.3903 24.4588 12.5 24.7237 12.5 25C12.5 25.2763 12.3903 25.5412 12.1949 25.7366C11.9996 25.9319 11.7346 26.0417 11.4583 26.0417ZM36.4583 21.875H32.2917C31.7188 21.875 31.25 22.3438 31.25 22.9167V32.2917H37.5V22.9167C37.5 22.3438 37.0313 21.875 36.4583 21.875ZM34.375 30.2083C34.0987 30.2083 33.8338 30.0986 33.6384 29.9032C33.4431 29.7079 33.3333 29.4429 33.3333 29.1667C33.3333 28.8904 33.4431 28.6254 33.6384 28.4301C33.8338 28.2347 34.0987 28.125 34.375 28.125C34.6513 28.125 34.9162 28.2347 35.1116 28.4301C35.3069 28.6254 35.4167 28.8904 35.4167 29.1667C35.4167 29.4429 35.3069 29.7079 35.1116 29.9032C34.9162 30.0986 34.6513 30.2083 34.375 30.2083ZM34.375 26.0417C34.0987 26.0417 33.8338 25.9319 33.6384 25.7366C33.4431 25.5412 33.3333 25.2763 33.3333 25C33.3333 24.7237 33.4431 24.4588 33.6384 24.2634C33.8338 24.0681 34.0987 23.9583 34.375 23.9583C34.6513 23.9583 34.9162 24.0681 35.1116 24.2634C35.3069 24.4588 35.4167 24.7237 35.4167 25C35.4167 25.2763 35.3069 25.5412 35.1116 25.7366C34.9162 25.9319 34.6513 26.0417 34.375 26.0417ZM34.375 12.5V11.4583H32.2917V12.5C32.0154 12.5 31.7504 12.6097 31.5551 12.8051C31.3597 13.0004 31.25 13.2654 31.25 13.5417C31.25 13.8179 31.3597 14.0829 31.5551 14.2782C31.7504 14.4736 32.0154 14.5833 32.2917 14.5833H34.375C34.6513 14.5833 34.9162 14.4736 35.1116 14.2782C35.3069 14.0829 35.4167 13.8179 35.4167 13.5417C35.4167 13.2654 35.3069 13.0004 35.1116 12.8051C34.9162 12.6097 34.6513 12.5 34.375 12.5ZM27.4302 12.5V11.4583H25.3469V12.5C25.0706 12.5 24.8057 12.6097 24.6103 12.8051C24.415 13.0004 24.3052 13.2654 24.3052 13.5417C24.3052 13.8179 24.415 14.0829 24.6103 14.2782C24.8057 14.4736 25.0706 14.5833 25.3469 14.5833H27.4302C27.7065 14.5833 27.9714 14.4736 28.1668 14.2782C28.3621 14.0829 28.4719 13.8179 28.4719 13.5417C28.4719 13.2654 28.3621 13.0004 28.1668 12.8051C27.9714 12.6097 27.7065 12.5 27.4302 12.5ZM20.4865 12.5V11.4583H18.4031V12.5C18.1269 12.5 17.8619 12.6097 17.6666 12.8051C17.4712 13.0004 17.3615 13.2654 17.3615 13.5417C17.3615 13.8179 17.4712 14.0829 17.6666 14.2782C17.8619 14.4736 18.1269 14.5833 18.4031 14.5833H20.4865C20.7627 14.5833 21.0277 14.4736 21.223 14.2782C21.4184 14.0829 21.5281 13.8179 21.5281 13.5417C21.5281 13.2654 21.4184 13.0004 21.223 12.8051C21.0277 12.6097 20.7627 12.5 20.4865 12.5ZM13.5417 12.5V11.4583H11.4583V12.5C11.1821 12.5 10.9171 12.6097 10.7218 12.8051C10.5264 13.0004 10.4167 13.2654 10.4167 13.5417C10.4167 13.8179 10.5264 14.0829 10.7218 14.2782C10.9171 14.4736 11.1821 14.5833 11.4583 14.5833H13.5417C13.8179 14.5833 14.0829 14.4736 14.2782 14.2782C14.4736 14.0829 14.5833 13.8179 14.5833 13.5417C14.5833 13.2654 14.4736 13.0004 14.2782 12.8051C14.0829 12.6097 13.8179 12.5 13.5417 12.5ZM44.2708 9.375H1.5625C0.701042 9.375 0 8.67396 0 7.8125V5.95208C0 5.32396 0.371875 4.75833 0.947917 4.51042C7.91563 1.51667 15.3073 0 22.9167 0C30.526 0 37.9167 1.51771 44.8844 4.51042C45.4604 4.75833 45.8333 5.325 45.8333 5.95312V7.81354C45.8333 8.675 45.1323 9.37604 44.2708 9.37604V9.375ZM11.4583 35.4167C11.4583 35.049 11.5333 34.7021 11.65 34.375H2.08333C1.5308 34.375 1.00089 34.5945 0.610194 34.9852C0.219493 35.3759 0 35.9058 0 36.4583V39.5833C0 40.1359 0.219493 40.6658 0.610194 41.0565C1.00089 41.4472 1.5308 41.6667 2.08333 41.6667H11.4583V35.4167ZM43.75 34.375H34.1833C34.3 34.7021 34.375 35.049 34.375 35.4167V41.6667H43.75C44.3025 41.6667 44.8324 41.4472 45.2231 41.0565C45.6138 40.6658 45.8333 40.1359 45.8333 39.5833V36.4583C45.8333 35.9058 45.6138 35.3759 45.2231 34.9852C44.8324 34.5945 44.3025 34.375 43.75 34.375ZM31.25 34.375H14.5833C14.3071 34.375 14.0421 34.4847 13.8468 34.6801C13.6514 34.8754 13.5417 35.1404 13.5417 35.4167V41.774C13.5417 42.8656 14.426 43.75 15.5177 43.75H30.3146C30.8387 43.75 31.3413 43.5418 31.7119 43.1712C32.0824 42.8006 32.2906 42.298 32.2906 41.774V35.4167C32.2906 35.1404 32.1809 34.8754 31.9855 34.6801C31.7902 34.4847 31.5263 34.375 31.25 34.375Z" fill="currentColor"/>
//               </svg>
//             </div>
//             <div className="missioncontent">
//               <h3>Structured Performance Preparation</h3>
//               <p>Step-by Step training for exama, arangetrams and stage performances.</p>
//             </div>
//           </div>
//         </div>
//         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 approach-column mb-2 mb-sm-3" data-aos="fade-up" data-aos-duration="1000">
//           <div className="missionbx">
//             <div className="missionbxicon">
//               <svg viewBox="0 0 49 33" fill="none" xmlns="http://www.w3.org/2000/svg">
//                 <path d="M0 28.125H48.4375V30.4688C48.4375 31.0904 48.1906 31.6865 47.751 32.126C47.3115 32.5656 46.7154 32.8125 46.0938 32.8125H2.34375C1.72215 32.8125 1.12601 32.5656 0.686468 32.126C0.24693 31.6865 0 31.0904 0 30.4688V28.125ZM0 28.125L5.46875 25H42.9688L48.4375 28.125M5.46875 1.5625V25H7.03125V1.5625H41.4062V25H42.9688V1.5625C42.9688 1.1481 42.8041 0.750672 42.5111 0.457646C42.2181 0.16462 41.8207 0 41.4062 0H7.03125C6.61685 0 6.21942 0.16462 5.9264 0.457646C5.63337 0.750672 5.46875 1.1481 5.46875 1.5625Z" fill="currentColor"/>
//                 <path d="M32.0312 21.0938V17.9688C32.0312 16.7255 31.5374 15.5333 30.6583 14.6542C29.7792 13.7751 28.587 13.2812 27.3438 13.2812H21.0938C19.8505 13.2812 18.6583 13.7751 17.7792 14.6542C16.9001 15.5333 16.4062 16.7255 16.4062 17.9688V21.0938C16.4062 21.0938 17.9688 22.6562 24.2188 22.6562C30.4688 22.6562 32.0312 21.0938 32.0312 21.0938Z" fill="currentColor"/>
//                 <path d="M24.2188 12.5C26.8076 12.5 28.9062 10.4013 28.9062 7.8125C28.9062 5.22367 26.8076 3.125 24.2188 3.125C21.6299 3.125 19.5312 5.22367 19.5312 7.8125C19.5312 10.4013 21.6299 12.5 24.2188 12.5Z" fill="currentColor"/>
//               </svg>
//             </div>
//             <div className="missioncontent">
//               <h3>Personalized Online Guidance</h3>
//               <p>One-on-one attention through virtual classrooms from anywhere.</p>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   </section>
//   );
// };

// export default TrainingApproach;