import { React, useRef } from "react";
import LoginPage from "./LoginPage";
import "./MainLogin.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
const MainLogin = () => {
  const progressCircle = useRef(null);
  const progressContent = useRef(null);
  const onAutoplayTimeLeft = (s, time, progress) => {
    progressCircle.current.style.setProperty("--progress", 1 - progress);
    progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
  };
  return (
    <>
      <div className="authentication-inner row m-0">
        <div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
          {/* <div className="w-75 text-start" style={{ marginTop: "75px" }}> */}
          <div
            class="w-75 text-start swiper-container login-pg-swiper"
            style={{ marginTop: "75px" }}
          >
            <Swiper
              spaceBetween={30}
              centeredSlides={true}
              rewind={true}
              autoplay={{
                delay: 3500,
                disableOnInteraction: false,
              }}
              pagination={{
                clickable: true,
              }}
              keyboard={{
                enabled: true,
              }}
              navigation={false}
              modules={[EffectFlip, Autoplay, Pagination, Navigation]}
              className="mySwiper"
              onSlideChange={() => {}}
              onSwiper={(swiper) => {}}
              onAutoplayTimeLeft={onAutoplayTimeLeft}
            >
              <div className="autoplay-progress" slot="container-end">
                <svg viewBox="0 0 48 48" ref={progressCircle}>
                  <circle cx="24" cy="24" r="20"></circle>
                </svg>
                <span ref={progressContent}></span>
              </div>
              <SwiperSlide>
                <img
                  className="login-pg-img-swiper"
                  src="/img/illustrations/03.png"
                ></img>
              </SwiperSlide>
              {/* <SwiperSlide>
                <img src="/img/illustrations/finaicial management.png"></img>
              </SwiperSlide> */}
              <SwiperSlide>
                <img
                  className="login-pg-img-swiper"
                  src="/img/illustrations/fm-01.png"
                ></img>
              </SwiperSlide>
              {/* <SwiperSlide>
                <div className="text-start">
                  <h1 className="display-header">
                    Financial Management (Expense & Billing)
                  </h1>
                  <h4 className="display-title">
                    Eliminate Paper Receipts. Take Control of Your Cash Flow.
                  </h4>
                  <p className="display-body">
                    Managing field expenses is often messy, slow, and prone to
                    errors. onfieldwork.com digitizes the entire process, giving
                    you real-time financial visibility and control, whether your
                    team is on a construction site or servicing a client's
                    facility.
                  </p>
                  <ul className="more-features-list list-unstyled">
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Billing & Collection:</b> Generate accurate
                          invoices based on logged project data and efficiently
                          track the status of payments to speed up collection
                          cycles.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Recurring Expenses:</b> Set up and manage
                          automatic payments for predictable costs (like monthly
                          equipment rentals or subscriptions) to ensure they are
                          never missed.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Advance Payment Management:</b> A clear system for
                          issuing and tracking advances given to field staff.
                          Easily reconcile these advances against submitted
                          expenses and salaries.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Petty Cash Management:</b> Maintain a secure,
                          digital ledger for small, daily expenditures,
                          replacing error-prone manual logbooks.
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </SwiperSlide> */}
              <SwiperSlide>
                <div className="text-start">
                  <h1 className="display-header">
                    Flexible Project Approval/Review Workflow
                  </h1>
                  <h4 className="display-title">
                    Streamline Decisions. Accelerate Project Completion.
                  </h4>
                  <p className="display-body">
                    The speed of a project often hinges on the efficiency of the
                    review and approval process. onfieldwork.com replaces
                    bottlenecks and email chains with flexible, defined digital
                    workflows that keep work moving forward.
                  </p>
                  <ul className="more-features-list list-unstyled">
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Customizable Approval Chains</b>
                          <ul>
                            <li>
                              <b> Define Your Process:</b> Easily configure
                              multi-step approval paths for any item: document
                              submissions, expense reports, task completion
                              sign-offs, or material requests.
                            </li>
                            <li>
                              <b>Role-Based Routing:</b> Approvals are
                              automatically routed to the correct individual
                              based on their Role (e.g., Site Supervisor,
                              Project Manager, Finance Admin) thanks to our
                              Role-Based Access Control (RBAC).
                            </li>
                          </ul>{" "}
                        </div>
                      </div>
                    </li>
                    {/* <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b>Real-Time Notifications & Tracking</b>
                          <ul>
                            <li>
                              <b>No More Delays:</b> Reviewers receive instant
                              alerts via the Web and Mobile app when an item
                              requires their attention.
                            </li>
                            <li>
                              <b> Audit Trail:</b> Every action, comment,
                              approval, or rejection is logged with a timestamp
                              and user ID, providing a complete, non-repudiable
                              history for every decision.
                            </li>
                          </ul>{" "}
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b>Seamless Task Handoff</b> Once a task or document
                          is approved, the next action is immediately
                          triggered—whether it's allocating a new work package
                          to the team or initiating a purchase order.
                        </div>
                      </div>
                    </li> */}
                  </ul>
                </div>
              </SwiperSlide>
              <SwiperSlide>
                <div className="text-start">
                  <h1 className="display-header">Project Management</h1>
                  <h4 className="display-title">
                    End-to-End Project Lifecycle Management
                  </h4>
                  <p className="display-body">
                    Stop using spreadsheets and start managing progress.
                    onfieldwork.com is your single source of truth for all
                    project activities.
                  </p>
                  <ul className="more-features-list list-unstyled">
                    <li className="more-features-list-items">
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b> Create & Manage Multiple Projects:</b>Organize all
                          current and upcoming work in a centralized dashboard.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b>Infrastructure Management:</b>Track and manage
                          project resources, equipment, and key locations.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b>Team & Document Management:</b>Secure storage for
                          drawings, contracts, and easy team setup.
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="d-flex">
                        <i className="bx bxs-check-circle text-success"></i>
                        <div className="list-item  ms-2 pb-2">
                          {" "}
                          <b>Work Allocation & Tracking:</b>Implement
                          customizable Approval/Review Workflows for tasks and
                          documents.
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
          {/* </div> */}
        </div>
        <LoginPage />
      </div>
    </>
  );
};
export default MainLogin;