import { FC } from "react";
import styles from "./brandStory.module.scss";
import cx from "classnames";
import Image from "next/image";
import BrandImageGallery from "./brandImageGallery";

const BrandStory: FC<any> = (props) => {
  return (
    <>
      <div className={styles.brandStoryDiv}>
        <h1 className={styles.title}>Brand Story</h1>
        <div className={cx("ant-row", styles.BrandDiv)}>
          <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}>
            <div className="flex items-center justify-center">
              <Image
                src={`/images/brands/image135.jpg`}
                alt="image"
                className={styles.imagesStyle}
                layout="fill"
              />
            </div>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12",
              styles.aboutTextDiv
            )}
          >
            <div style={{ padding: "1.5em 3.5em" }}>
              <div className={styles.innerText}>What we do</div>
              <div className={cx(styles.text)}>
                The Bosch Group is a leading global supplier of technology and
                services. It employs roughly 402,600 associates worldwide (as of
                December 31, 2021).
              </div>
              <div className={cx(styles.subText, "pt-4")}>
                The company generated sales of 78.7 billion euros in 2021. Its
                operations are divided into four business sectors: Mobility
                Solutions, Industrial Technology, Consumer Goods, and Energy and
                Building Technology. As a leading IoT provider, Bosch offers
                innovative solutions for smart homes, Industry 4.0, and
                connected mobility.
              </div>
              <div className={cx(styles.subText, "pt-4")}>
                As a leading IoT provider, Bosch offers innovative solutions for
                smart homes, Industry 4.0, and connected mobility. Bosch is
                pursuing a vision of mobility that is sustainable, safe, and
                exciting. It uses its expertise in sensor technology, software,
                and services, as well as its own IoT cloud, to offer its
                customers connected, cross-domain solutions from a single
                source.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.promotedText}>
        <table>
          <thead style={{ borderBottom: "2px solid #EAEAEA" }}>
            <th>402,600 associates worldwide</th>

            <th>78.7 billion euros sales revenue</th>
            <th>76,100 researchers and developers worldwide</th>
            <th>
              440 subsidiaries and regional companies in some 60 countries
            </th>
          </thead>
          <tbody>
            <tr>
              <td>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Expedita, quae quibusdam voluptas magni recusandae veniam
                explicabo quidem neque quas nulla atque sunt mollitia iusto
                aperiam doloremque tempora illum dicta dolorum.
              </td>
              <td>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Expedita, quae quibusdam voluptas magni recusandae veniam
                explicabo quidem neque quas nulla atque sunt mollitia iusto
                aperiam doloremque tempora illum dicta dolorum.
              </td>
              <td>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Expedita, quae quibusdam voluptas magni recusandae veniam
                explicabo quidem neque quas nulla atque sunt mollitia iusto
                aperiam doloremque tempora illum dicta dolorum.
              </td>
              <td>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Expedita, quae quibusdam voluptas magni recusandae veniam
                explicabo quidem neque quas nulla atque sunt mollitia iusto
                aperiam doloremque tempora illum dicta dolorum.
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <BrandImageGallery />
    </>
  );
};
export default BrandStory;