import React, { useState } from "react";
import { Tab, Tabs, TabPanel } from "react-tabs";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import Image from "next/image";
import IndustrySidebar from "./IndustrySidebar";
import Clientele from "@/components/reuseables/Clientele";
import { motion } from "framer-motion";
import { fadeIn, slideFromRight } from "@/components/reuseables/variants";
const OurApproachData = [
  {
    title: "Real Estate",
    subtitle: "Our Approach",
    paragraphs: [
      "Real estate finance is complex and dynamic. Through our expertise in the field of Real Estate, we will help you navigate the landscape and make informed decisions",
    ],
    imageSrc: "/images/about/people.jpg",
    imageAlt: "OurApproch",
  },
  // Add more objects here if you have more content sections
];
const Sidebar = [
  { name: "Business Advisory" },
  { name: "Transaction Advisory" },
];

const BusinessAdvisory = [
  {
    title: "Business Modelling",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Strategic Finance Office",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Structuring around Taxation",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
];

const TransactionAdvisory = [
  {
    title: "Deal Advisory ",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Mergers & Acquisitions",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  // Add other services here...
];

const serviceData = [BusinessAdvisory, TransactionAdvisory];

const partners = [
  {
    image: "/images/partner/partner1.png",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/partner/partner2.png",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/partner/partner1.png",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/partner/partner2.png",
    altText: "partner",
    link: "#",
  },
  {
    image: "/images/partner/partner1.png",
    altText: "partner",
    link: "#",
  },
];
const RealEstate = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <>
      <div className="our-approch ptb-100">
        <Container>
          {OurApproachData.map((item) => (
            <Row className="align-items-center" key={item.id}>
              <Col lg={6} md={12}>
                <div className="what-we-do-text">
                  <span className="sub-title">{item.subtitle}</span>
                  <Heading el="h2" heading={item.title} className="h2" />
                  {item.paragraphs.map((paragraph, index) => (
                    <p key={index}>{paragraph}</p>
                  ))}
                </div>
              </Col>

              <Col lg={6} md={12}>
                <div className="what-we-do-img">
                  <motion.div
                    variants={fadeIn(0.4)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.2 }}
                  >
                    <Image
                      src={item.imageSrc}
                      alt={item.imageAlt}
                      layout="fill"
                      className="img-fluid image"
                    />
                  </motion.div>
                </div>
              </Col>
            </Row>
          ))}
        </Container>
      </div>
      <section className="bg-light pb-100 pt-100">
        <Container>
          <Row>
            <Col md={3} sm={12}>
              <IndustrySidebar
                title="CFO Services"
                services={Sidebar}
                selectedIndex={selectedIndex}
                setSelectedIndex={setSelectedIndex}
              />
            </Col>
            <Col md={9} sm={12}>
              <Tabs selectedIndex={selectedIndex}>
                {serviceData.map((services, index) => (
                  <TabPanel key={index}>
                    <Row className="justify-content-center align-items-center">
                      {services.map((service, i) => (
                        <Col lg={4} md={6} sm={6} key={i}>
                          <motion.div
                            variants={slideFromRight(0.5 * i)}
                            initial={"hidden"}
                            whileInView={"show"}
                            viewport={{ once: false, amount: 0.4 }}
                          >
                            <div className="single-services-item border">
                              <div className="d-flex align-items-center icon">
                                <i className={service.serviceIcon}></i>
                              </div>
                              <h5>{service.title}</h5>
                              <p>{service.descr}</p>
                            </div>
                          </motion.div>
                        </Col>
                      ))}
                    </Row>
                  </TabPanel>
                ))}
              </Tabs>
            </Col>
          </Row>
        </Container>
        <Container className="pt-100">
          <Row>
            <Col md={3} sm={12}>
              <div className="what-we-do-text text-left">
                <span className="sub-title">Lorem</span>
                <Heading el="h2" heading="Clientele" />
              </div>
            </Col>
            <Col md={8} sm={12} className="align-self-center">
              <Clientele partners={partners} />
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
};

export default RealEstate;