import { noop } from "@tanstack/react-query";
import React, { useEffect, useMemo, useState } from "react";

import "./LandingPage.css";
import { Link } from "react-router-dom";

import { Swiper, SwiperSlide } from "swiper/react";
// import required modules
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import SwaperSlideContent from "./SwaperSlideContent";
import SwaperBlogContent from "./SwaperBlogContent";
import SubscriptionPlans from "./SubscriptionPlans";

const swiperConfig = {
  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",
};

const LandingPage = () => {
  const [swiperRef, setSwiperRef] = useState(null);
  return (
    <div>
      <nav className="layout-navbar shadow-none py-0">
        <div className="container">
          <div className="navbar navbar-expand-lg landing-navbar px-3 px-md-8">
            {/*  Menu logo wrapper: Start */}
            <div className="navbar-brand app-brand demo d-flex py-0 me-4 me-xl-8">
              {/*  Mobile menu toggle: Start*/}
              <button
                className="navbar-toggler border-0 px-0 me-4"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i className="tf-icons bx bx-menu bx-lg align-middle text-heading fw-medium"></i>
              </button>

              {/* <a href="/" className="app-brand-link">
                <span className="app-brand-logo demo">
                  <img src="/img/brand/marco.png" width={50}></img>
                </span>
                <span className="app-brand-text demo menu-text fw-bold ms-2 ps-1 ">
                  PMS
                 
                </span>
              </a> */}

              <a
                href="/"
                class="app-brand-link fw-bold navbar-brand text-green fs-5"
              >
                <span class="app-brand-logo demo">
                  <img src="/img/brand/marco.png" width="50" />
                </span>
                <span class="text-blue">OnField</span>
                <span>Work</span>
                <span class="text-dark">.com</span>
              </a>
            </div>
            {/*  Menu logo wrapper: End */}

            {/*  Menu wrapper: Start */}
            <div
              className="collapse navbar-collapse landing-nav-menu"
              id="navbarSupportedContent"
            >
              <button
                className="navbar-toggler border-0 text-heading position-absolute end-0 top-0 scaleX-n1-rtl p-2"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i className="tf-icons bx bx-x bx-lg"></i>
              </button>
              <ul className="navbar-nav me-auto">
                <li className="nav-item">
                  <a
                    className="nav-link fw-medium"
                    aria-current="page"
                    href="#landingHero"
                  >
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link fw-medium" href="#landingFeatures">
                    Features
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link fw-medium" href="#landingPricing">
                    Pricing
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link fw-medium" href="#landingFAQ">
                    FAQ
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link fw-medium" href="#sectionBlog">
                    Blogs
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link fw-medium" href="#landingCTA">
                    Contact us
                  </a>
                </li>
              </ul>
            </div>
            <div className="landing-menu-overlay d-lg-none"></div>
            {/*  Menu wrapper: End */}
            {/*  Toolbar: Start */}
            <ul className="navbar-nav flex-row align-items-center ms-auto">
              <li>
                <Link className="btn btn-danger" to="/auth/login">
                  <span className="tf-icons bx bx-log-in-circle scaleX-n1-rtl me-md-1"></span>
                  <span className="d-none d-md-block">Login/Register</span>
                </Link>
              </li>
            </ul>
            {/*  Toolbar: End */}
          </div>
        </div>
      </nav>
      {/*  Navbar: End */}

      {/*  Sections:Start */}

      <div data-bs-spy="scroll" className="scrollspy-example">
        {/*  Hero: Start */}
        <section id="hero-animation">
          <div
            id="landingHero"
            className="section-py landing-hero position-relative"
          >
            <div className="container">
              <div className="hero-text-box text-center position-relative">
                <h1 className="text-primary hero-title display-6 fw-extrabold">
                  All-in-one platform to manage projects, people, and resources
                  seamlessly.
                </h1>
                {/* <h2 className="hero-sub-title h6 mb-6">
                  Production-ready & easy to use Admin Template
                  <br className="d-none d-lg-block" />
                  for Reliability and Customizability.
                </h2> */}
                <div className="landing-hero-btn d-inline-block position-relative">
                  {/* <span className="hero-btn-item position-absolute d-none d-md-flex fw-medium">
                    Join community
                    <img
                      src="./../../public/img/icons/Join-community-arrow.png"
                      alt="Join community arrow"
                      className="scaleX-n1-rtl"
                    />
                  </span> */}
                  <a
                    href="#landingPricing"
                    className="btn btn-primary btn-lg me-5"
                  >
                    Get Early Access
                  </a>
                  <a
                    href="/auth/reqest/demo"
                    className="btn btn-lg btn-primary"
                  >
                    Request a Demo
                  </a>
                </div>
              </div>

              <div
                id="heroDashboardAnimation"
                className="hero-animation-img mt-10"
              >
                <div
                  id="heroAnimationImg"
                  className="position-relative hero-dashboard-img"
                >
                  <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) => {}}
                  >
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-01.png"
                        Title="Project & Task Management"
                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
                      ></SwaperSlideContent>
                    </SwiperSlide>

                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-02.png"
                        Title="Attendance & Leave Tracking"
                        Body="Monitor employee attendance and manage leave requests with ease."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-09.png"
                        Title="Role-based Permissions"
                        Body="Securely control access with customizable roles and permissions."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-05.png"
                        Title="Expense & Budget Tracking"
                        Body="Keep projects on budget with real-time expense and cost management."
                        ContentAlign="left"
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="img/app/dashboard-light-06.png"
                        Title="Reporting & Analytics"
                        Body="Gain actionable insights through powerful reports and analytics dashboards."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-07.png"
                        Title="Document Management"
                        Body="Organize, share, and access all your project and employee documents in one place."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="/img/app/dashboard-light-08.png"
                        Title="Inventory Management"
                        Body="Track materials, supplies, and assets — never run short again."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                  </Swiper>
                </div>
              </div>
            </div>
          </div>
          <div className="landing-hero-blank"></div>
        </section>
        {/*  Hero: End */}

        {/*  Useful features: Start */}
        <section id="landingFeatures" className="section-py landing-features">
          <div className="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary heading">
                Useful Features
              </span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1">
                From tasks to teams, documents to inventory —
                {/* <img
                  src="./../../public/img/icons/section-title-icon.png"
                  alt="laptop charging"
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                /> */}
              </span>
              everything your business needs in one place.
            </h4>
            <p className="text-center mb-12">
              All-in-one platform to manage projects, people, and resources
              seamlessly.
            </p>
            <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/laptop.svg" alt="laptop charging" />
                </div>
                <h5 className="mb-2">Project & Task Management</h5>
                <p className="features-icon-description">
                  Plan, assign, and track projects and tasks seamlessly for
                  better team collaboration.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/rocket.svg" alt="transition up" />
                </div>
                <h5 className="mb-2">Attendance & Leave Tracking</h5>
                <p className="features-icon-description">
                  Monitor employee attendance and manage leave requests with
                  ease.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/paper.svg" alt="edit" />
                </div>
                <h5 className="mb-2">Role-based Permissions</h5>
                <p className="features-icon-description">
                  Securely control access with customizable roles and
                  permissions.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/check.svg" alt="3d select solid" />
                </div>
                <h5 className="mb-2">Expense & Budget Tracking</h5>
                <p className="features-icon-description">
                  Keep projects on budget with real-time expense and cost
                  management.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/user.svg" alt="user" />
                </div>
                <h5 className="mb-2">Reporting & Analytics</h5>
                <p className="features-icon-description">
                  Gain actionable insights through powerful reports and
                  analytics dashboards.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
                </div>
                <h5 className="mb-2">Document Management</h5>
                <p className="features-icon-description">
                  Organize, share, and access all your project and employee
                  documents in one place.
                </p>
              </div>
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
                </div>
                <h5 className="mb-2">
                  Service Provider & Subcontractor Tracking
                </h5>
                <p className="features-icon-description">
                  Manage multiple service providers and subcontractors
                  efficiently within projects.
                </p>
              </div>{" "}
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                <div className="text-center mb-4">
                  <img src="/img/icons/user.svg" alt="keyboard" />
                </div>
                <h5 className="mb-2">Inventory Management</h5>
                <p className="features-icon-description">
                  Track materials, supplies, and assets — never run short again.
                </p>
              </div>{" "}
            </div>
            <div className="col-lg-3 col-sm-4 text-center features-icon-box">
              <div className="text-center mb-4">
                <img src="/img/icons/keyboard.svg" alt="keyboard" />
              </div>
              <h5 className="mb-2">Directory</h5>
              <p className="features-icon-description">
                Your team, suppliers, vendors organized and connected in one
                unified directory.
              </p>
            </div>{" "}
          </div>
        </section>
        {/*  Useful features: End */}

        {/* <!-- Real blog/ case studies: Start --> */}
        <section
          id="sectionBlog"
          class="section-py bg-body landing-reviews pb-0"
          hidden
        >
          {/* <!-- What people say slider: Start --> */}
          <div class="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary heading">
                Case Studies
              </span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1 me-2">
                Proven results, showcased
              </span>
              through client success stories
            </h4>
            <p className="text-center pb-2 mb-7">
              Every business has unique goals, and our case studies highlight
              <strong>
                {" "}
                how we tailor solutions to deliver real impact.
              </strong>{" "}
              <br></br>
              See the transformations our clients have achieved with us
            </p>

            <div class="row">
              <div class="swiper-reviews-carousel">
                <Swiper
                  onSwiper={setSwiperRef}
                  slidesPerView={4}
                  centeredSlides={true}
                  spaceBetween={30}
                  pagination={{
                    clickable: true,
                  }}
                  navigation={true}
                  modules={[Autoplay, Pagination, Navigation]}
                  className="mySwiper"
                >
                  <SwiperSlide>
                    {" "}
                    <SwaperBlogContent
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs28_JnxJUKdAgaZsiWW4NyekVmfmLtpUtaA&s"
                      Title="Transforming Residential Project Delivery with OnFieldWork.com"
                      Body="Sunrise Builders struggled with delays, cost overruns, and lack of transparency in their multi-phase township project. Different contractors for civil, electrical, and finishing works operated in silos, and communication gaps with the Project Management Consultant (PMC) often led to rework and disputes."
                    ></SwaperBlogContent>
                  </SwiperSlide>
                  <SwiperSlide>
                    {" "}
                    <SwaperBlogContent
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaQ0iKVDfpfTY3kS2WgSH1n4yBhFhLQfiESg&s"
                      Title="Commercial Tower Project Delivered On Time"
                      Body="Metro Infra Developers faced coordination challenges between multiple stakeholders—PMC, structural consultants, MEP contractors, and vendors. Manual tracking via Excel sheets was slowing decision-making and progress reporting."
                    ></SwaperBlogContent>
                  </SwiperSlide>
                  <SwiperSlide>
                    {" "}
                    <SwaperBlogContent
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4ma1IiRhV1NRWVwQpzLi0kJK2E7ABP9Sn-Q&s"
                      Title="Smart Collaboration for Mixed-Use Development"
                      Body="The project required close collaboration between multiple consultants—architecture, interiors, civil, and MEP. Email-based communication caused delays, and the client had limited visibility into daily progress."
                    ></SwaperBlogContent>
                  </SwiperSlide>
                  <SwiperSlide>
                    {" "}
                    <SwaperBlogContent
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROvl-qI8KIDHMKLfMyGppCLpluAj9nxFPqFy-YJ7kqc9L7LvPeSW3AZDWSOV62VAaYKO0&usqp=CAU"
                      Title="On-Time Delivery of a Luxury Villa Project"
                      Body="Elite Constructions was managing multiple luxury villas in parallel, each with unique specifications. The PMC struggled with tracking progress across sites, ensuring quality compliance, and keeping the high-profile clients updated. Manual reporting caused delays, and missed dependencies risked extending timelines."
                    ></SwaperBlogContent>
                  </SwiperSlide>
                </Swiper>
              </div>
            </div>
          </div>
        </section>
        {/* <!-- Real customers reviews: End --> */}

        {/*  Pricing plans: Start */}
        <section
          id="landingPricing"
          className="section-py bg-body landing-pricing"
        >
          <div className="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary heading">
                Pricing Plans
              </span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1 me-2">
                Tailored pricing plans
                {/* <img
                  src="./../../public/img/icons/section-title-icon.png"
                  alt="laptop charging"
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                /> */}
              </span>
              designed for you
            </h4>
            <p className="text-center pb-2 mb-7">
              No matter which plan you choose, you’ll get access to powerful
              features. <strong>Choose the best plan to fit your needs.</strong>
            </p>
            {/* <SubscriptionPlans/> */}
            <SubscriptionPlans />
          </div>
        </section>
        {/*  Pricing plans: End */}

        {/*  Fun facts: Start */}
        <section
          id="landingFunFacts"
          className="section-py landing-fun-facts "
          style={{ display: "none" }}
        >
          <div className="container">
            <div className="row gy-6">
              <div className="col-sm-6 col-lg-3">
                <div className="card border border-primary shadow-none">
                  <div className="card-body text-center">
                    <img
                      src="/img/icons/laptop.svg"
                      alt="laptop"
                      className="mb-4"
                    />
                    <h3 className="mb-0">7.1k+</h3>
                    <p className="fw-medium mb-0">
                      Support Tickets
                      <br />
                      Resolved
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-sm-6 col-lg-3">
                <div className="card border border-success shadow-none">
                  <div className="card-body text-center">
                    <img
                      src="/img/icons/user-success.svg"
                      alt="laptop"
                      className="mb-4"
                    />
                    <h3 className="mb-0">50k+</h3>
                    <p className="fw-medium mb-0">
                      Join creatives
                      <br />
                      community
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-sm-6 col-lg-3">
                <div className="card border border-info shadow-none">
                  <div className="card-body text-center">
                    <img
                      src="/img/icons/diamond-info.svg"
                      alt="laptop"
                      className="mb-4"
                    />
                    <h3 className="mb-0">4.8/5</h3>
                    <p className="fw-medium mb-0">
                      Highly Rated
                      <br />
                      Products
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-sm-6 col-lg-3">
                <div className="card border border-warning shadow-none">
                  <div className="card-body text-center">
                    <img
                      src="/img/icons/check-warning.svg"
                      alt="laptop"
                      className="mb-4"
                    />
                    <h3 className="mb-0">100%</h3>
                    <p className="fw-medium mb-0">
                      Money Back
                      <br />
                      Guarantee
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  Fun facts: End */}

        {/*  FAQ: Start */}
        <section id="landingFAQ" className="section-py bg-body landing-faq">
          <div className="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary heading">FAQ</span>
            </div>
            <h4 className="text-center mb-1">
              Frequently Asked
              <span className="position-relative fw-extrabold z-1 ms-2">
                Questions
                {/* <img
                  src="/img/icons/section-title-icon.png"
                  alt="laptop charging"
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                /> */}
              </span>
            </h4>
            <p className="text-center mb-12 pb-md-4">
              Browse through these FAQs to find answers to commonly asked
              questions.
            </p>
            <div className="row gy-12 align-items-center">
              <div className="col-lg-5">
                <div className="text-center">
                  <img
                    src="/img/illustrations/faq-boy-with-logos.png"
                    alt="faq boy with logos"
                    className="faq-image"
                  />
                </div>
              </div>
              <div className="col-lg-7">
                <div className="accordion" id="accordionExample">
                  <div className="card accordion-item">
                    <h2 className="accordion-header" id="headingOne">
                      <button
                        type="button"
                        className="accordion-button"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionOne"
                        aria-expanded="true"
                        aria-controls="accordionOne"
                      >
                        What is OnFieldWork.com?
                      </button>
                    </h2>

                    <div
                      id="accordionOne"
                      className="accordion-collapse collapse"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        A smart Project Management System designed to bring
                        teams, tasks, and timelines together in one place. With
                        AI-driven insights, role-based access, and seamless
                        reporting, it empowers organizations to deliver projects
                        faster and smarter.
                      </div>
                    </div>
                  </div>
                  <div className="card accordion-item">
                    <h2 className="accordion-header" id="headingTwo">
                      <button
                        type="button"
                        className="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionTwo"
                        aria-expanded="false"
                        aria-controls="accordionTwo"
                      >
                        Can I switch or cancel my plan?
                      </button>
                    </h2>
                    <div
                      id="accordionTwo"
                      className="accordion-collapse collapse"
                      aria-labelledby="headingTwo"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        Yes, you have full flexibility to manage your
                        subscription. You can upgrade to a higher plan to unlock
                        more features, downgrade to a smaller plan if your needs
                        change, or cancel your subscription anytime. Plan
                        changes take effect instantly, and billing adjustments
                        are applied on a pro-rated basis.
                      </div>
                    </div>
                  </div>
                  <div className="card accordion-item active">
                    <h2 className="accordion-header" id="headingThree">
                      <button
                        type="button"
                        className="accordion-button"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionThree"
                        aria-expanded="false"
                        aria-controls="accordionThree"
                      >
                        How secure is OnFieldWork.com?
                      </button>
                    </h2>
                    <div
                      id="accordionThree"
                      className="accordion-collapse collapse show"
                      aria-labelledby="headingThree"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        Security is at the core of OnFieldWork.com. We use
                        industry-standard encryption (SSL/TLS) to protect data
                        in transit and advanced encryption to safeguard data at
                        rest. Role-based access controls ensure that only
                        authorized users can access sensitive information. Our
                        system is hosted on secure, cloud-ready infrastructure
                        with regular backups, monitoring, and compliance with
                        best practices to keep your data safe and available at
                        all times.
                      </div>
                    </div>
                  </div>
                  <div className="card accordion-item">
                    <h2 className="accordion-header" id="headingFour">
                      <button
                        type="button"
                        className="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionFour"
                        aria-expanded="false"
                        aria-controls="accordionFour"
                      >
                        Where can i get help if I have more questions?
                      </button>
                    </h2>
                    <div
                      id="accordionFour"
                      className="accordion-collapse collapse"
                      aria-labelledby="headingFour"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        You can reach our support team anytime through the
                        in-app help center, email, or live chat. We also provide
                        a detailed knowledge base and FAQs to guide you through
                        common queries. For personalized assistance, our support
                        specialists are always ready to help you.
                      </div>
                    </div>
                  </div>
                  <div className="card accordion-item">
                    <h2 className="accordion-header" id="headingFive">
                      <button
                        type="button"
                        className="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionFive"
                        aria-expanded="false"
                        aria-controls="accordionFive"
                      >
                        Which license is applicable for SASS application?
                      </button>
                    </h2>
                    <div
                      id="accordionFive"
                      className="accordion-collapse collapse"
                      aria-labelledby="headingFive"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        OnFieldWork.com operate under a proprietary license
                        combined with a subscription model. This means customers
                        don’t own the software but are granted the right to
                        access and use it through the cloud under our Terms of
                        Service. Depending on the plan, licensing may be based
                        on users, features, or usage, and you can upgrade,
                        downgrade, or cancel at any time. non!
                      </div>
                    </div>
                  </div>
                  <div className="card accordion-item">
                    <h2 className="accordion-header" id="headingSix">
                      <button
                        type="button"
                        className="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordionSix"
                        aria-expanded="false"
                        aria-controls="accordionSix"
                      >
                        Can I customize OnFieldWork.com for my business needs?
                      </button>
                    </h2>
                    <div
                      id="accordionSix"
                      className="accordion-collapse collapse"
                      aria-labelledby="headingSix"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body text-start">
                        Yes, OnFieldWork.com is designed to be flexible and
                        adaptable. You can customize workflows, user roles,
                        permissions, and reporting to match your organization’s
                        unique processes. Depending on your plan, we also
                        support advanced customization such as integrating with
                        third-party tools, adding custom fields, and tailoring
                        modules to fit your business requirements.
                      </div>
                    </div>
                  </div>{" "}
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  FAQ: End */}

        {/*  CTA: Start */}
        <section id="landingCTA" className="section-py landing-cta ">
          <img
            src="img/backgrounds/cta-bg-light.png"
            className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
            alt="cta image"
            data-app-light-img="backgrounds/cta-bg-light.png"
            data-app-dark-img="backgrounds/cta-bg-dark.png"
          />
          <div className="container">
            <div className="text-center mb-4 mt-5">
              <span className="badge bg-label-primary heading">Contact US</span>
            </div>

            <div className="row align-items-center gy-12  mb-12">
              <div className="col-lg-6 pt-lg-12 text-center text-lg-start">
                <img
                  style={{ width: "80%" }}
                  src="/img/images/contact-customer-service.png"
                  alt="hero elements"
                ></img>
              </div>
              <div
                className="col-lg-6 text-start text-sm-center text-lg-start p-5 rounded"
                style={{
                  border: "1px solid #d5d5d5",
                }}
              >
                <div className="mt-5">
                  {" "}
                  <h4 className="text-start mb-1">
                    <span className="position-relative fw-extrabold z-1">
                      Let's Work
                      {/* <img
                        src="/img/icons/section-title-icon.png"
                        alt="laptop charging"
                        className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                      /> */}
                    </span>
                    Together
                  </h4>
                  <p className="text-start pb-md-4">
                    Any question or remark? just write us a message
                  </p>
                  <div className="row g-4 ">
                    <div className="col-md-6 col-lg-12 col-xl-6">
                      <div className="d-flex align-items-center">
                        <div className="badge bg-label-primary rounded p-1_5 me-3">
                          <i className="bx bx-envelope bx-lg"></i>
                        </div>
                        <div>
                          <p className="mb-0">Email</p>
                          <h6 className="mb-0">
                            <a
                              href="mailto:example@gmail.com"
                              className="text-heading"
                            >
                              sales@marcoaiot.com
                            </a>
                          </h6>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6 col-lg-12 col-xl-6">
                      <div className="d-flex align-items-center">
                        <div className="badge bg-label-success rounded p-1_5 me-3">
                          <i className="bx bx-phone-call bx-lg"></i>
                        </div>
                        <div>
                          <p className="mb-0">Phone</p>
                          <h6 className="mb-0">
                            <a
                              href="tel:+1234-568-963"
                              className="text-heading"
                            >
                              +91 70288 83755
                            </a>
                          </h6>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-10">
                  <h5 className="cta-title text-primary  mb-1">
                    Ready to Get Started?
                  </h5>
                  <h5 className="text-body mb-8">
                    Start your project with a free trial
                  </h5>
                  {/* <a href="#landingPricing" className="btn btn-lg btn-primary">
                    Get Started
                  </a>{" "} */}
                  <a
                    href="/auth/reqest/demo"
                    className="btn btn-lg btn-primary"
                  >
                    Request a Demo
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  CTA: End */}

        {/*  Contact Us: Start */}
        <section
          id="landingContact"
          className="section-py bg-body landing-contact"
          style={{ display: "none" }}
        >
          <div className="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary heading">Contact US</span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1">
                Let's work
                <img
                  src="/img/icons/section-title-icon.png"
                  alt="laptop charging"
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                />
              </span>
              together
            </h4>
            <p className="text-center mb-12 pb-md-4">
              Any question or remark? just write us a message
            </p>
            <div className="row g-6">
              <div className="col-lg-5">
                <div className="contact-img-box position-relative border p-2 h-100">
                  <img
                    src="/img/icons/contact-border.png"
                    alt="contact border"
                    className="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl"
                  />
                  <img
                    src="/img/images/contact-customer-service.png"
                    alt="contact customer service"
                    className="contact-img w-100 scaleX-n1-rtl"
                  />
                  <div className="p-4 pb-2">
                    <div className="row g-4">
                      <div className="col-md-6 col-lg-12 col-xl-6">
                        <div className="d-flex align-items-center">
                          <div className="badge bg-label-primary rounded p-1_5 me-3">
                            <i className="bx bx-envelope bx-lg"></i>
                          </div>
                          <div>
                            <p className="mb-0">Email</p>
                            <h6 className="mb-0">
                              <a
                                href="mailto:example@gmail.com"
                                className="text-heading"
                              >
                                sales@marcoaiot.com
                              </a>
                            </h6>
                          </div>
                        </div>
                      </div>
                      <div className="col-md-6 col-lg-12 col-xl-6">
                        <div className="d-flex align-items-center">
                          <div className="badge bg-label-success rounded p-1_5 me-3">
                            <i className="bx bx-phone-call bx-lg"></i>
                          </div>
                          <div>
                            <p className="mb-0">Phone</p>
                            <h6 className="mb-0">
                              <a
                                href="tel:+1234-568-963"
                                className="text-heading"
                              >
                                +1234 568 963
                              </a>
                            </h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-7">
                <div className="card h-100">
                  <div className="card-body">
                    <h4 className="mb-2">Send a message</h4>
                    <p className="mb-6">
                      If you would like to discuss anything related to payment,
                      account, licensing,
                      <br className="d-none d-lg-block" />
                      partnerships, or have pre-sales questions, you’re at the
                      right place.
                    </p>
                    <form>
                      <div className="row g-4">
                        <div className="col-md-6">
                          <label
                            className="form-label"
                            for="contact-form-fullname"
                          >
                            Full Name
                          </label>
                          <input
                            type="text"
                            className="form-control"
                            id="contact-form-fullname"
                            placeholder="john"
                          />
                        </div>
                        <div className="col-md-6">
                          <label
                            className="form-label"
                            for="contact-form-email"
                          >
                            Email
                          </label>
                          <input
                            type="text"
                            id="contact-form-email"
                            className="form-control"
                            placeholder="johndoe@gmail.com"
                          />
                        </div>
                        <div className="col-12">
                          <label
                            className="form-label"
                            for="contact-form-message"
                          >
                            Message
                          </label>
                          <textarea
                            id="contact-form-message"
                            className="form-control"
                            rows="11"
                            placeholder="Write a message"
                          ></textarea>
                        </div>
                        <div className="col-12">
                          <button type="submit" className="btn btn-primary">
                            Send inquiry
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  Contact Us: End */}
      </div>

      {/*  / Sections:End */}

      {/*  Footer: Start */}
      <footer className="landing-footer bg-body footer-text">
        <div
          className="footer-top position-relative overflow-hidden z-1"
          hidden
        >
          <img
            src="/img/backgrounds/footer-bg.png"
            alt="footer bg"
            className="footer-bg banner-bg-img z-n1"
          />
          <div className="container">
            <div className="row ">
              <div className="col-lg-6">
                <a href="#" className="app-brand-link ">
                  <span className="app-brand-logo demo">
                    <svg
                      width="25"
                      viewBox="0 0 25 42"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <defs>
                        <path
                          d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
                          id="path-1"
                        ></path>
                        <path
                          d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
                          id="path-3"
                        ></path>
                        <path
                          d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
                          id="path-4"
                        ></path>
                        <path
                          d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
                          id="path-5"
                        ></path>
                      </defs>
                      <g
                        id="g-app-brand"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="Brand-Logo"
                          transform="translate(-27.000000, -15.000000)"
                        >
                          <g
                            id="Icon"
                            transform="translate(27.000000, 15.000000)"
                          >
                            <g
                              id="Mask"
                              transform="translate(0.000000, 8.000000)"
                            >
                              <mask id="mask-2" fill="white">
                                <use xlink:href="#path-1"></use>
                              </mask>
                              <use fill="#696cff" xlink:href="#path-1"></use>
                              <g id="Path-3" mask="url(#mask-2)">
                                <use fill="#696cff" xlink:href="#path-3"></use>
                                <use
                                  fill-opacity="0.2"
                                  fill="#FFFFFF"
                                  xlink:href="#path-3"
                                ></use>
                              </g>
                              <g id="Path-4" mask="url(#mask-2)">
                                <use fill="#696cff" xlink:href="#path-4"></use>
                                <use
                                  fill-opacity="0.2"
                                  fill="#FFFFFF"
                                  xlink:href="#path-4"
                                ></use>
                              </g>
                            </g>
                            <g
                              id="Triangle"
                              transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) "
                            >
                              <use fill="#696cff" xlink:href="#path-5"></use>
                              <use
                                fill-opacity="0.2"
                                fill="#FFFFFF"
                                xlink:href="#path-5"
                              ></use>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </span>
                  <span className="app-brand-text demo text-white fw-bold ms-2 ps-1">
                    <Link className="cta-title">
                      <div className="app-brand-logo demo">
                        <img
                          className="rounded rounded-circle"
                          style={{
                            border: "3px solid #efdedeff",
                            padding: "0px",
                            borderRadius: "50px",
                          }}
                          src="/img/brand/marco.png"
                          width="50"
                        />
                        <span> OnFieldWork.com</span>
                      </div>
                    </Link>
                  </span>
                </a>
                <p className="footer-text footer-logo-description" hidden>
                  Work smarter, track faster, and manage everything from one
                  platform.
                </p>
                <form className="footer-form" hidden>
                  <label for="footer-email" className="small">
                    Subscribe to newsletter
                  </label>
                  <div className="d-flex mt-1">
                    <input
                      type="email"
                      className="form-control rounded-0 rounded-start-bottom rounded-start-top"
                      id="footer-email"
                      placeholder="Your email"
                    />
                    <button
                      type="submit"
                      className="btn btn-primary shadow-none rounded-0 rounded-end-bottom rounded-end-top"
                    >
                      Subscribe
                    </button>
                  </div>
                </form>
              </div>

              <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
                <h6 className="footer-title mt-3">Download our app</h6>
                <a href="javascript:void(0);" hidden>
                  <img src="/img/icons/apple-icon.png" alt="apple icon" />
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=com.marco.aiotstage&pcampaignid=web_share"
                  target="_blank"
                >
                  <img
                    src="/img/icons/google-play-icon.png"
                    alt="google play icon"
                  />
                </a>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-bottom py-md-4">
          <div className="container d-flex flex-wrap justify-content-between flex-md-row flex-column text-center text-md-start">
            <div className="col-lg-4 col-md-4 d-flex  align-items-center justify-content-start">
              <a
                href="https://www.facebook.com/marcoaiot/"
                className="me-4"
                target="_blank"
              >
                <img src="/img/icons/facebook.svg" alt="facebook icon" />
              </a>
              <a
                href="https://twitter.com/marcoaiot"
                className="me-4"
                target="_blank"
              >
                <img src="/img/icons/twitter.svg" alt="twitter icon" />
              </a>
              <a href="https://www.instagram.com/marcoaiot/" target="_blank">
                <img src="/img/icons/instagram.svg" alt="google icon" />
              </a>
            </div>
            <div className="col-lg-4 col-md-4 mb-2 mb-md-0 d-flex gap-3 align-items-center justify-content-center">
              <span className="footer-bottom-text me-1">
                ©{new Date().getFullYear()}
              </span>
              <a
                href="https://marcoaiot.com"
                target="_blank"
                className="text-white"
              >
                Marco AIoT Technologies Pvt. Ltd.,
              </a>
            </div>

            <div className="col-lg-4 col-md-4 d-flex gap-3 align-items-center justify-content-end">
              <h6 className="footer-title mt-3">Download our app</h6>
              <a href="javascript:void(0);" hidden>
                <img src="/img/icons/apple-icon.png" alt="apple icon" />
              </a>
              <a
                href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share	"
                target="_blank"
              >
                <img
                  src="/img/icons/google-play-icon.png"
                  alt="google play icon"
                />
              </a>
            </div>
          </div>
        </div>
      </footer>
      {/*   Footer: End */}
    </div>
  );
};
export default LandingPage;