import React from "react";
import "./Explore_our_fresh_produce.css";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import Explore_our_fresh_produce_card from "./explore_our_fresh_produce_card/Explore_our_fresh_produce_card";
import { useNavigate } from "react-router-dom";
import Green_Outline_Btn from "../../common-components/common_btn/green_outline_btn/Green_Outline_Btn";

const cardData = [

  {
    nameText: "Nutrient Rich Soil",
    imgSrc: "/assets/images/home/explore_our_fresh_produce/NutrientRich_Soil.png",
  },
  {
    nameText: "Water Conservation",
    imgSrc: "/assets/images/home/explore_our_fresh_produce/Water_Conservation.png",
  },
  {
    nameText: "Carbon Farming",
    imgSrc: "/assets/images/home/explore_our_fresh_produce/Carbon_Farming.png",
  },
  {
    nameText: "Seasonal Harvests",
    imgSrc: "/assets/images/home/explore_our_fresh_produce/Seasonal_Harvests.png",
  },
  {
    nameText: "No Harmful Chemicals",
    imgSrc: "/assets/images/home/explore_our_fresh_produce/No_Harmful_Chemicals.png",
  },
];



function Explore_our_fresh_produce() {
  const navigate = useNavigate();
  return (
    <section className="Explore_our_fresh_produce">
      <div className="container-fluid">
        <div className="heading_holder">
          <h4 className="heading_text">
            GROWN THE NATURAL WAY <br /> FRESH, PURE & REGENERATIVE
          </h4>
        </div>

        <div className="Explore_our_fresh_produce_card_holder">
          <div className="row justify-content-sm-between  justify-content-center">
            {cardData.map((card, index) => (
              <div className="col-md-2 col-sm-2 col-4" key={index}>
                <Explore_our_fresh_produce_card
                  nameText={card.nameText}
                  imgSrc={card.imgSrc}
                />
              </div>
            ))}
          </div>
        </div>

        <div className="text_holder content_holder">
          <p>
            At Harvetera, we believe in growing food that's not just good for
            you, but good for the planet too. Every vegetable and fruit we
            offer is a promise — fresh, flavorful, and farmed with the future in
            mind.
          </p>
        </div>

        <div className="btn_holder">
          <Green_Outline_Btn
            btnText={"Explore Our Fresh Produce"}
            onClick={() => navigate("/shops")}
          />
        </div>
      </div>
    </section>
  );
}

export default Explore_our_fresh_produce;
