import React, { useEffect } from "react";
import "./Our_philosophy.css";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useDispatch, useSelector } from "react-redux";
import { getContent } from "../../../features/aboutus/aboutusSlice";
import { Link } from "react-router-dom";
import parse from 'html-react-parser';
const philosophyData = [
  {
    heading: "OUR PHILOSOPHY",
    subheading:
      "At ARC Diamond, Farming isn’t just What We do it’s How we Live.",
    paragraph: `We see farmers as thoughtful problem solvers, earth stewards, and community builders. Our approach goes beyond organic — it's regenerative, mindful, and deeply connected to the rhythms of nature. Every product we create — from Bilona Cow Ghee to Kalanmak Rice, Desi Tuar Dal, and Black Turmeric, to Kasturi Haldi and Home Made Chat Masala — is a reflection of this living philosophy. We don’t just grow food — we nurture soil, protect biodiversity, and honour age-old traditions with every ARC Diamond.`,
    image: "/assets/images/home/our_philosophy/kisaan.png",
    imageFirst: false,
  },
  {
    heading: <>GHEE MADE FROM CURD. <br /> THE TRADITIONAL WAY</>,
    subheading: "Why choose ARC Diamond's Bilona Ghee?",
    paragraph: `Our Bilona Cow Ghee is made from cultured curd using the ancient hand-churning method — not from cream. It’s crafted from the A2 milk of free-grazing Desi cows, raised naturally on chemical-free land. This slow, authentic process enhances digestibility, preserves nutrients, and results in a ghee that’s rich in aroma, flavor, and health benefits.`,
    image: "/assets/images/home/our_philosophy/ghee.png",
    imageFirst: true,
  },
];

function Our_philosophy() {

  const cardContent = useSelector((state) => state.aboutus.content);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getContent());
  }, [dispatch]);
  return (
    <section className="Our_philosophy">
      <div className="container-fluid">
        {cardContent?.data?.map((item, index) => (
          <div className="Our_philosophy_row_holder" key={index}>
            <div className="row justify-content-center">
              <div
                className={`col-md-7 col-sm-7 col-12  ${index % 2 == 1 ? "order-sm-2 order-2" : "order-sm-1 order-2"
                  }`}
              >
                <div className="content_holder">
                  <div className="text_holder">
                    <h2 className="heading_text">{item.name}</h2>
                    <h3>{item.subname}</h3>
                    <p>{parse(typeof item?.description === "string" ? item.description : "")}</p>
                    <Link to={`/about-us`}>
                    <Green_round_btn btnText={"Know More"} />
                    </Link>
                  </div>
                </div>
              </div>
              <div
                className={`col-md-5 col-sm-5  col-6 ${index % 2 == 1 ? "order-sm-1 order-1" : "order-sm-2 order-1"
                  }`}
              >
                <div className="img_holder">
                  <img
                    className="Our_philosophy_img"
                    src={process.env.NEXT_PUBLIC_IMG_URL + item.image}
                    alt="Our_philosophy_img"
                  />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

export default Our_philosophy;
