import React from "react";
import Link from "next/link";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import Image from "next/image";
const services = [
  {
    id: 1,
    serviceIcon: "icon ri-group-2-line",
    serviceTitle: "Budget Panorama - 2024",
    serviceShortDescription:
      "Advith Consulting is a seasoned business consulting firm with nearly 40 years of experience. The firm is led by a core team of highly experienced professionals with sound knowledge in their area of expertise. ",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 2,
    serviceIcon: "icon ri-briefcase-line",
    serviceTitle: "Budget Panorama - 2023",
    serviceShortDescription:
      "Advith Consulting is a business consulting firm with almost 40 years of experience on its resume. We provide a myriad of business consulting services in the fields of Direct tax, Indirect tax, Outsourcing (CFO services, Accounts, Payroll & Compliance Management), Corporate law & Advisory among others",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 3,
    serviceIcon: "icon ri-money-dollar-box-line",
    serviceTitle: "Budget Panorama - 2022",
    serviceShortDescription:
      "Amidst the growing worry due to the 3rd Covid wave, in particular the Omicron wave, the Hon'ble Finance Minister of India (FM) presented the Budget 2022 on 1st February 2022. The Economic Survey which was tabled before the India Parliament indicated a real GDP expansion of 9.2% in 2021-22, which showed a faster recovery of the economy after it contracted in FY 2020-21. This a positive sign and also shows the resilience that the Indian economy inherently has.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
];

const BudgetPanorama = () => {
  return (
    <>
      <div className="budget-panorama-area pt-70 pb-100 bg-light">
        <Container>
          <Row>
            <Col lg={8} md={8} sm={12}>
              <div className="text-align-left">
                <Heading
                  heading={"Budget Panorama"}
                  el="h2"
                />

                <p className="mb-lg-5 mb-3">
                  Budget Panorama is an annual edition released soon after the
                  Union budget is presented by the Finance Minister of India.
                  Budget Panorama gives a panoramic view of the recently
                  announced budget with the objective of educating the audience.
                </p>
              </div>
            </Col>
            <Col
              lg={4}
              md={4}
              sm={12}
              className="d-flex align-self-center justify-content-start justify-content-lg-end mb-5 mb-lg-0"
            >
              <Link href="/budgetpanorama" className="default-btn-two">
                Load More <i className="ri-arrow-right-line"></i>
              </Link>
            </Col>
          </Row>

          <Row className="align-items-center">
            {services &&
              services.map((service, index) => (
                <Col lg={4} md={6} sm={12} key={service.id}>
                  <motion.div
                    variants={slideFromLeft(index * 0.5)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.4 }}
                  >
                    <div className="services-box-budget">
                      <div className="d-flex align-items-center">
                        {/* <i className={service.serviceIcon}></i> */}
                        <Image
                          src="../images/knoweledge/budget_panorama.svg"
                          alt={service.serviceTitle}
                          width={40}
                          height={40}
                          className="img-fluid me-3"
                        />
                        <h3>
                          <Link href={service.serviceDetailsUrl}>
                            {service.serviceTitle}
                          </Link>
                        </h3>
                      </div>

                      <p>{service.serviceShortDescription}</p>

                      <Link
                        href={service.serviceDetailsUrl}
                        className="default-btn"
                      >
                        {service.readMoreText}{" "}
                        <i className="ri-arrow-right-line"></i>
                      </Link>
                    </div>
                  </motion.div>
                </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default BudgetPanorama;