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 } from "@/components/reuseables/variants";
const OurApproachData = [
  {
    title: "Life Sciences   ",
    subtitle: "Our Approach",
    paragraphs: [
      "Our firm supports the life sciences industry by offering tailored financial solutions that drive research and development, statutory compliance, and market expansion. With many global pharma companies establishing their research hubs in India, we provide strategic financial guidance to enhance their operational and financial efficiency. Our expertise ensures that life sciences companies can focus on advancing healthcare while we manage their financial health. ",
    ],
    imageSrc: "/images/about/people.jpg",
    imageAlt: "OurApproch",
  },
  // Add more objects here if you have more content sections
];
const Sidebar = [
  { name: "Transaction Advisory" },
  { name: "Business Advisory" },
  { name: "Risk Advisory" },
];

const TransactionAdvisory = [
  {
    title: "Deal Advisory",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Merger & Acquisition",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Due Diligence",
    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: "Project Management ",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
];

const BusinessAdvisory = [
  {
    title: "Strategic Office",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Taxation",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Business Modelling ",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  {
    title: "Family Business Structuring ",
    serviceIcon: "ri-group-2-line",
    descr: "Lorem Ipsum is simply dummy text",
  },
  // Add other services here...
];

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 LifeSciences = () => {
  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}>
                        <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>
                      </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 LifeSciences;