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: "Hospitality",
    subtitle: "Our Approach",
    paragraphs: [
      "The hospitality industry requires precise financial management to thrive in a competitive market. Our consulting services focus on improving operational efficiency, maximizing profitability, and managing financial risks for hotels, restaurants, and tourism businesses. We are dedicated to enhancing the financial health of your hospitality venture. ",
    ],
    imageSrc: "/images/industry/Hospitality.webp",
    imageAlt: "OurApproch",
  },
  // Add more objects here if you have more content sections
];
const Sidebar = [
  { name: "Business Advisory" },
  { name: "Transaction Advisory" },
  { name: "Risk Advisory" },
];

const TransactionAdvisory = [
  {
    title: "Due Diligence ",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    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",
  },
  {
    title: "Fund Raise Assistance",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Restructuring",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Corporate Law Advisory",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
];

const BusinessAdvisory = [
  {
    title: "Business Modelling & Valuation",
    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 RiskAdvisory = [
  {
    title: "Establishing Process & Internal Controls",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Review of Internal Controls",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  // Add other services here...
];

const serviceData = [TransactionAdvisory, BusinessAdvisory, RiskAdvisory];

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 Hospitality = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <>
      <div className="our-approch ptb-100" id="hospitality">
        <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="services-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 rounded-5"
                    />
                  </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 Hospitality;