import Heading from "@/components/reuseables/Heading";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
import Image from "next/image";
import { cleanImage } from "@/layout/imageHandling";
const OurApproachData = [
  {
    title: "Education   ",
    subtitle: "Our Approach",
    paragraphs: [
      "At Advith Consulting, we provide specialized financial consulting services tailored to the education sector. We help educational institutions manage their finances & strategic operations effectively, ensuring long-term sustainability and growth.",
    ],
    imageSrc: "/images/industry/education.png",
    imageAlt: "OurApproch",
  },
  // Add more objects here if you have more content sections
];
const IndustryOverview = ({ title, subtitle, description ,image }) => {
  console.log(description);
  return (
    <>
      <div className="our-approch ptb-100" id="eduction">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="what-we-do-text">
                <span className="sub-title">{subtitle}</span>
                <Heading el="h2" heading={title} className="h2" />

                {description && (
                  <p className="mb-2">
                    {description}
                  </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={cleanImage(image?.url)}
                    alt= "overview"
                    layout="fill"
                    className="img-fluid image w-100 rounded-3"
                  />
                </motion.div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default IndustryOverview;