import React from "react";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
const serviceContent = [
  {
    subTitle: "Our Services",
    title: "Knowledge",
    paragraphs: [
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy a eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At verorh eos et accusam at vero eos et accusam.",
    ],
  },
  // You can add more content objects here
];
const KnowledgeContent = () => {
  return (
    <>
      <div className="knowledge-area ptb-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="call-back-request-image">
                <motion.div
                  variants={fadeIn(0.4)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.2 }}
                >
                  <Image
                    layout="fill"
                    className="img-fluid image"
                    src="/images/call-back-request.png"
                    alt="image"
                  />
                </motion.div>
                <Image
                  width={300}
                  height={300}
                  src="/images/shape/shape8.png"
                  className="shape4"
                  alt="image"
                />
                <Image
                  width={300}
                  height={300}
                  src="/images/shape/shape8.png"
                  className="shape5"
                  alt="image"
                />
              </div>
            </Col>
            <Col lg={6} md={12}>
              {serviceContent.map((content, index) => (
                <div className="call-back-request-content" key={index}>
                  <span className="sub-title">{content.subTitle}</span>
                  <Heading el="h2" heading={content.title} className="h2" />
                  {content.paragraphs.map((paragraph, pIndex) => (
                    <p key={pIndex}>{paragraph}</p>
                  ))}
                </div>
              ))}
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default KnowledgeContent;