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: "KnowledgeShack",
    paragraphs: [
      "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.",
    ],
  },
  // You can add more content objects here
];
const KnowledgeContent = () => {
  return (
    <>
      <div className="knowledge-area ptb-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={5} 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/knoweledge/knowledege_page.webp"
                    alt="image"
                    width={300}
                    height={400}
                    className="img-fluid image rounded-5"
                  />
                </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={7} 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;