import React from "react";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
import Heading from "@/components/reuseables/Heading";
import Link from "next/link";
const areasofExpertise = [
  {
    id: 1,
    image: "/images/home/areas_of_expertise/assurance.webp",
    altText: "Project Image",
    title: "Assurance",
    category:
      "Value creation for us means delivering more than advice; it's about tangible, assured results through our integrated Assurance expertise",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 2,
    image: "/images/home/areas_of_expertise/direct_tax.webp",
    altText: "Project Image",
    title: "Direct Tax",
    category: "Expertise in Indian and International tax challenges",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 3,
    image: "/images/home/areas_of_expertise/indirect_tax.webp",
    altText: "Project Image",
    title: "Indirect Tax",
    category: "Deep expertise navigating GST complexities",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 4,
    image: "/images/home/areas_of_expertise/corporate_legal.webp",
    altText: "Project Image",
    title: "Corporate Legal",
    category: "Our Corporate Legal expertise ensures we cover all the entire ground in all our engagements",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 5,
    image: "/images/home/areas_of_expertise/corporate_law.webp",
    altText: "Project Image",
    title: "Corporate Law and FEMA",
    category: "Setting up a company to getting Foreign Control law clearance - we do it all",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 6,
    image: "/images/home/areas_of_expertise/cross_border_transactions.webp",
    altText: "Project Image",
    title: "Cross Border Transactions",
    category: "Excelling at complex cross-border transactions",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
];

const AreasofExpertise = () => {
  return (
    <>
      <div className="areas-of-expertise pt-100 pb-70 bglight">
        <Container>
          <div className="section-title">
            <Heading el="h2" heading="Areas of Expertise" className="h2" />
          </div>

          <Row className="justify-content-center">
            {areasofExpertise &&
              areasofExpertise.map((item, index) => (
                <Col lg={4} md={6} key={item.id}>
                  <div className="single-projects-box">
                    <motion.div
                      variants={fadeIn(index * 1)}
                      initial={"hidden"}
                      whileInView={"show"}
                      viewport={{ once: false, amount: 0.5 }}
                    >
                      <Image
                        src={item.image}
                        alt={item.altText}
                        layout="fill"
                        className="img-fluid rounded-3 image"
                      />
                      <h3>{item.title}</h3>
                      <span className="default-btn area_expertise">{item.category}</span>
                    </motion.div>
                  </div>
                </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default AreasofExpertise;