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:
      "Knowledge is the cornerstone of Advith. We read & research, not only to deliver but primarily to learn with a view to achieve a 360º perspective on various subjects.",
    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
                    src="/images/call-back-request.png"
                    alt="image"
                    fill
                    className="img-fluid 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;