import React from "react";
import { Col, Row } from "react-bootstrap";
import RoadMapLine from "../../Components/RoadmapLine/RoadmapLine";
export default function RoadMapMobile() {
  const roadmaplist = [
    {
      title: "Phase one:",
      text: "Integration of Admin requests Integration of the Audit System Task Tree added Expanded system of Statistics,",
      bgColor: "#51D9FC",
      borderColor: "#0dcaf052",
      linebackgroundColor: "rgb(81 217 252 / 47%)",
      titleColor: "#51D9FC",
    },
    {
      title: "Phase Two:",
      text: "Working time assistance Tutorials and video guides Naplozz Token integration in the Naplozz app",
      bgColor: "#FF3F70",
      borderColor: "rgb(255 63 112 / 45%)",
      linebackgroundColor: "#FF3F70",
      titleColor: "#FF3F70",
    },
    {
      title: "Phase Three:",
      text: "Naplozz Token ICO Integration of a Bitcoin payment system Initial marketing campaign Implementation of a HACCP order system Automatic import system",
      bgColor: "#FE9520",
      borderColor: "#fe952066",
      linebackgroundColor: "#FE9520",
      titleColor: "#FE9520",
    },
    {
      title: "Phase Four:",
      text: "Automatic import system Launch of the Naplozz Educational Platform More tracking log integrations Listing of the Naplozz Token on a large number of exchanges",
      bgColor: "#0263F7",
      borderColor: "#0263f75e",
      linebackgroundColor: "#0263F7",
      titleColor: "#0263F7",
    },
  ];
  return (
    <div style={{ marginBottom: "200px", marginTop: "200px" }}>
      <Row className="p-3 justify-content-center">
        <Col md={8} xs={12}>
          <div
            className="pb-5"
            style={{
              color: "white",
              fontFamily: "semibold",
              fontSize: "50px",
            }}
          >
            RoadMap
          </div>
        </Col>
      </Row>

      {roadmaplist.map((value) => {
        return (
          <Row
            className="p-3 justify-content-center"
            style={{ height: "150px" }}
          >
            <Col md={8} xs={12}>
              <Row>
                <Col xs="auto">
                  <RoadMapLine
                    mobile
                    bgColor={value.bgColor}
                    borderColor={value.borderColor}
                  />
                </Col>
                <Col className="p-0">
                  {/* <p>Phase 1</p> */}

                  <div
                    style={{
                      width: "165px",
                      height: "2px",
                      backgroundColor: value.linebackgroundColor,
                      marginTop: "8px",
                      marginLeft: "-30px",
                    }}
                  />

                  <div
                    style={{
                      color: "white",
                      padding: "20px 0px 50px 30px",
                      marginTop: "-60px",
                      fontFamily: "light",
                    }}
                  >
                    <div
                      className="pb-4"
                      style={{
                        color: value.titleColor,
                        fontFamily: "semibold",
                        fontSize: "20px",
                      }}
                    >
                      {value.title}
                    </div>
                    {value.text}
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
        );
      })}
    </div>
  );
}
