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:
      "Mismatch in year of taxation of Income and TDS Credit – Form 71 to the relief",
    serviceShortDescription:
      "The Income Tax Law in India requires that income from a particular assessment year be subjected to tax in that assessment year. ",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 2,
    serviceIcon: "icon ri-briefcase-line",
    serviceTitle: "GST on Renting of residential property to registered person",
    serviceShortDescription:
      "For more than 15 years, renting of property has been covered under either service tax or Goods and Service Tax (GST).",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 3,
    serviceIcon: "icon ri-money-dollar-box-line",
    serviceTitle: "Remission of Duties and Taxes on Exported Products (RoDTEP)",
    serviceShortDescription:
      "RoDTEP rates and scheme details have been announced by the Ministry of Commerce and Industry by making suitable amendments to chapter 4 of the Foreign Trade Policy (FTP) in the notification (19/2015-2020) dated 17th August 2021.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
];

const TaxWire = () => {
  return (
    <>
      <div className="taxwire-area pt-70 pb-100 ">
        <Container>
          <Row>
            <Col lg={8} md={8} sm={12}>
              <div className="text-align-left">
                <Heading heading={"TaxWire"} el="h2" />

                <p className="mb-lg-5 mb-3">
                  Navigating the complex terrain of India's tax landscape?
                  TaxWire is your reliable companion,{" "}
                  <br className="d-none d-lg-block" />
                  serving up the latest news, developments, and insights to help
                  you stay informed and in the know.
                </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="/services" 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/taxwire.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 TaxWire;