"use client";

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

interface VisionMission {
  id: string;
  page_id: string;
  title: string;
  vision_image: string | null;
  mission_image: string | null;
  vision_title: string;
  vision_description: string;
  mission_title: string;
  mission_description: string;
  status: boolean;
}

const ABOUT_PAGE_ID = "2";

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

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

        const response = await axiosInstance.get(
          `/cms/vision-mission?page_id=${ABOUT_PAGE_ID}`
        );
        const result = response.data;
        if (result.success) {
          setData(result.data);
        }
      } catch (error) {
        console.error("Failed to fetch vision & mission:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchVisionMission();
  }, []);

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

  return (
    <section className="ourmissionccontainer pt-2">
      <div className="container container-xxl">
        <div className="row">
          <div
            className="col-12"
            data-aos="fade-down"
            data-aos-duration="700"
          >
            <div className="section-heading text-center">
              <h2>
                <span>{data.title}</span>
              </h2>
            </div>
          </div>
        </div>

        <div className="row gx-2 gx-sm-2 gx-md-3 gx-xl-4">
          <div
            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3"
            data-aos="zoom-in-up"
            data-aos-duration="700"
          >
            <div className="missionbx">
              <div className="missionbxicon">
                {data.vision_image ? (
                  <img
                    src={data.vision_image}
                    alt={data.vision_title || "Our Vision"}
                  />
                ) : null}
              </div>

              <div className="missioncontent">
                <h3>{data.vision_title}</h3>
                <p>{data.vision_description}</p>
              </div>
            </div>
          </div>

          <div
            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3"
            data-aos="zoom-in-up"
            data-aos-duration="800"
          >
            <div className="missionbx">
              <div className="missionbxicon">
                {data.mission_image ? (
                  <Image
                    src={data.mission_image}
                    alt={data.mission_title || "Our Mission"}
                    width={74}
                    height={74}
                    style={{ objectFit: "contain" }}
                  />
                ) : null}
              </div>

              <div className="missioncontent">
                <h3>{data.mission_title}</h3>
                <p>{data.mission_description}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OurVisionMission;



// "use client";

// const OurVisionMission = () => {
//   return (
//     <section className="ourmissionccontainer pt-2">
//       <div className="container container-xxl">
//         <div className="row">
//           <div
//             className="col-12"
//             data-aos="fade-down"
//             data-aos-duration="700"
//           >
//             <div className="section-heading text-center">
//               <h2>
//                 <span>Our Vision &amp; Mission</span>
//               </h2>
//             </div>
//           </div>
//         </div>

//         <div className="row gx-2 gx-sm-2 gx-md-3 gx-xl-4">
//           <div
//             className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3"
//             data-aos="zoom-in-up"
//             data-aos-duration="700"
//           >
//             <div className="missionbx">
//               <div className="missionbxicon">
//                 <svg viewBox="0 0 74 47" fill="none" xmlns="http://www.w3.org/2000/svg">
//                   <path d="M36.9999 46.25C12.7921 46.25 0.790231 25.1461 0.29131 24.2483C0.100262 23.9046 0 23.5179 0 23.1247C0 22.7315 0.100262 22.3448 0.29131 22.0011C0.790231 21.1039 12.7921 0 36.9999 0C61.2078 0 73.2096 21.1039 73.7086 22.0017C73.8996 22.3454 73.9999 22.7321 73.9999 23.1253C73.9999 23.5185 73.8996 23.9052 73.7086 24.2489C73.2096 25.1461 61.2078 46.25 36.9999 46.25ZM5.03367 23.1215C7.78439 27.2904 18.5843 41.625 36.9999 41.625C55.4739 41.625 66.2259 27.302 68.9662 23.1285C66.2155 18.9596 55.4155 4.625 36.9999 4.625C18.5259 4.625 7.77398 18.948 5.03367 23.1215ZM36.9999 37C29.349 37 23.1249 30.7759 23.1249 23.125C23.1249 15.4741 29.349 9.25 36.9999 9.25C44.6508 9.25 50.8749 15.4741 50.8749 23.125C50.8749 30.7759 44.6508 37 36.9999 37ZM36.9999 13.875C31.8997 13.875 27.7499 18.0248 27.7499 23.125C27.7499 28.2252 31.8997 32.375 36.9999 32.375C42.1002 32.375 46.2499 28.2252 46.2499 23.125C46.2499 18.0248 42.1002 13.875 36.9999 13.875Z" fill="currentColor" />
//                 </svg>
//               </div>

//               <div className="missioncontent">
//                 <h3>Our Vision</h3>
//                 <p>
//                   To spread the beauty and discipline of Kuchipudi dance across
//                   generations and cultures.
//                 </p>
//               </div>
//             </div>
//           </div>

//           <div
//             className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3"
//             data-aos="zoom-in-up"
//             data-aos-duration="800"
//           >
//             <div className="missionbx">
//               <div className="missionbxicon">
//                 <svg viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
//                   <g clip-path="url(#clip0_4736_11639)">
//                     <path d="M37.1235 25.8168C38.142 25.8168 38.9669 24.9916 38.9669 23.9735C38.9669 22.9555 38.142 22.1301 37.1235 22.1301C28.9796 22.1301 22.3774 28.7323 22.3774 36.8768C22.3774 45.0208 28.9796 51.623 37.1235 51.623C45.2682 51.623 51.8703 45.0208 51.8703 36.8768C51.8703 35.8584 51.0449 35.0336 50.027 35.0336C49.0091 35.0336 48.1836 35.8584 48.1836 36.8768C48.1836 42.985 43.2323 47.9369 37.1235 47.9369C31.0155 47.9369 26.0636 42.985 26.0636 36.8768C26.0636 30.7682 31.0155 25.8168 37.1235 25.8168Z" fill="#45070A" />
//                     <path d="M72.2946 25.9281C71.9743 24.9609 70.9311 24.4366 69.9633 24.7566C69.0182 25.0693 68.492 26.0754 68.7738 27.03C74.2862 44.5845 64.5248 63.2836 46.9705 68.7962C29.4167 74.3086 10.7175 64.5472 5.20507 46.993C-0.308068 29.4387 9.45399 10.7394 27.0077 5.22683C33.5056 3.18646 40.4726 3.18646 46.9705 5.22683C47.9461 5.52095 48.9753 4.96884 49.2695 3.99326C49.5592 3.03227 49.0279 2.01665 48.0731 1.7062C28.5812 -4.40934 7.8218 6.43453 1.7064 25.927C-4.40913 45.4189 6.43517 66.1783 25.9272 72.2937C45.4197 78.4092 66.1785 67.5653 72.2939 48.0729C74.5555 40.8646 74.5557 33.1366 72.2945 25.9281H72.2946Z" fill="#45070A" />
//                     <path d="M40.6343 13.1692C40.6439 12.1196 39.8377 11.2423 38.791 11.1638C38.2405 11.117 37.6895 11.0702 37.1243 11.0702C22.8716 11.0702 11.3176 22.6242 11.3176 36.8768C11.3176 51.129 22.8716 62.683 37.1243 62.683C51.3765 62.683 62.9305 51.129 62.9305 36.877C62.9305 36.2101 62.8898 35.544 62.808 34.8823C62.6606 33.8706 61.7212 33.1699 60.7094 33.3173C59.6977 33.464 58.997 34.4042 59.1439 35.4159C59.1495 35.4542 59.1563 35.4919 59.1641 35.5304C59.2043 35.977 59.2438 36.4195 59.2438 36.8758C59.2443 49.0926 49.3412 58.9957 37.1248 58.9969C24.908 58.9975 15.0048 49.0936 15.0043 36.8774C15.0038 24.6612 24.9063 14.7573 37.1232 14.7569H37.1237C37.5811 14.7569 38.0241 14.7964 38.4697 14.8358L38.8151 14.8647C39.7784 14.9059 40.5924 14.1584 40.6332 13.1952C40.6338 13.1861 40.6338 13.1777 40.6343 13.1692Z" fill="#45070A" />
//                     <path d="M48.1837 16.6001V23.2103L35.8205 35.5733C35.0883 36.2807 35.068 37.4477 35.7754 38.1799C36.4828 38.9121 37.6499 38.9325 38.382 38.2252C38.3973 38.2104 38.4125 38.1953 38.4272 38.1799L50.7904 25.8169H57.4003C57.8892 25.8169 58.3578 25.6226 58.7039 25.2766L69.7635 14.2165C70.4832 13.4968 70.4832 12.3298 69.7635 11.6099C69.5924 11.4388 69.3892 11.303 69.1656 11.2104C68.942 11.1178 68.7024 11.0702 68.4604 11.0702H62.9303V5.54016C62.9303 4.52223 62.1051 3.69681 61.0864 3.69739C60.5979 3.6975 60.1294 3.89162 59.784 4.23707L48.7239 15.2972C48.5526 15.4682 48.4167 15.6713 48.324 15.8949C48.2313 16.1184 48.1836 16.3581 48.1837 16.6001ZM51.8704 17.3635L59.2436 9.99013V12.9136C59.2436 13.9315 60.069 14.7569 61.087 14.7569H64.0104L56.637 22.1302H51.8704V17.3635Z" fill="#45070A" />
//                   </g>
//                   <defs>
//                     <clipPath id="clip0_4736_11639">
//                       <rect width="74" height="74" fill="white" />
//                     </clipPath>
//                   </defs>
//                 </svg>
//               </div>

//               <div className="missioncontent">
//                 <h3>Our Mission</h3>
//                 <p>
//                   To provide authentic, accessible, and scientifically
//                   structured Kuchipudi education for students worldwide.
//                 </p>
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default OurVisionMission;