import "swiper/css";
import "./LandingPage.css";

import DashboardImage from "/img/app/dashboard-light-04.png";

const LandingPage = () => {
  return (
    <>
      <nav
        className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top"
        style={{ background: "#efefef !important" }}
      >
        <div className="container-fluid px-5 w-100">
          <div className="row w-100">
            <div className="col-md-auto">
              <a className="navbar-brand fw-bold text-primary" href="#">
                <span className="text-blue">OnField</span>
                <span>Work</span>
                <span className="text-dark">.com</span>
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
              >
                <span className="navbar-toggler-icon"></span>
              </button>
            </div>

            {/* <div className=" col-6 collapse navbar-collapse justify-content-center">
              <ul className="navbar-nav"></ul>
            </div> */}
            <div
              className="d-flex collapse navbar-collapse justify-content-end  col-md-auto"
              id="navbarNav"
            >
              <ul className="navbar-nav align-items-center ">
                <li className="nav-item">
                  <a className="nav-link" href="#">
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#features">
                    Features
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#pricing">
                    Pricing
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#about">
                    About
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#faq">
                    FAQ
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#contact">
                    Contact
                  </a>
                </li>
              </ul>
              <ul className=" navbar-nav align-items-center ms-5">
                <li className="nav-item">
                  <a
                    className="btn btn-sm btn-success px-3 my-1 "
                    href="/auth/login"
                  >
                    Login
                  </a>
                </li>
                <li className="nav-item ms-2">
                  <a className="btn btn-sm btn-success px-3  my-1" href="#">
                    Get Started
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>

      {/* <!-- ? Hero Carousel --> */}
      <div
        id="heroCarousel"
        className="carousel slide"
        data-bs-ride="carousel"
        data-bs-interval="5000"
      >
        <div className="carousel-inner">
          <div
            className="carousel-item active"
            style={{
              backgroundImage: `url("https://onfieldwork.com/bg-1.jpg")`,
            }}
          >
            <div className="hero-overlay"></div>
            <div className="carousel-caption text-start text-white">
              <h1 className="fw-bold display-4">Manage Projects Smarter</h1>
              <p className="lead">
                Track progress, assign tasks, and monitor work in real-time.
              </p>
              <a href="#" className="btn btn-success btn-lg mt-3">
                Start Free Trial
              </a>
            </div>
          </div>

          <div
            className="carousel-item"
            style={{
              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
            }}
          >
            <div className="hero-overlay"></div>
            <div className="carousel-caption text-start text-white">
              <h1 className="fw-bold display-4">Simplify Field Operations</h1>
              <p className="lead">
                Empower your team with attendance, expense, and task management
                tools.
              </p>
              <a href="#" className="btn btn-success btn-lg mt-3">
                Learn More
              </a>
            </div>
          </div>

          <div
            className="carousel-item"
            style={{
              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
            }}
          >
            <div className="hero-overlay"></div>
            <div className="carousel-caption text-start text-white">
              <h1 className="fw-bold display-4">
                Insightful Reports, Real Results
              </h1>
              <p className="lead">
                Make data-driven decisions with real-time project analytics.
              </p>
              <a href="#" className="btn btn-success btn-lg mt-3">
                View Demo
              </a>
            </div>
          </div>
        </div>

        <button
          className="carousel-control-prev"
          type="button"
          data-bs-target="#heroCarousel"
          data-bs-slide="prev"
        >
          <span className="carousel-control-prev-icon"></span>
        </button>
        <button
          className="carousel-control-next"
          type="button"
          data-bs-target="#heroCarousel"
          data-bs-slide="next"
        >
          <span className="carousel-control-next-icon"></span>
        </button>
      </div>

      {/* <!-- ? Features Section --> */}
      <section id="features" className="section-py">
        <div className="container text-center">
          <h3 className="mb-5">Powerful Features for Every Role</h3>
          <div className="row g-4">
            <div className="col-md-4">
              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
                <div className="feature-icon mb-3">
                  <img
                    src="../../../public/img/icons/dashboard.png"
                    alt="Dashboard"
                    className="w-14 mb-4 feature-icon-image"
                  />
                </div>
                <h5>Analytical Dashboard</h5>
                <p>
                  Real-time insights on attendance, expenses, tasks, and project
                  progress in one view.
                </p>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card-slider p-4 bg-light rounded-4 h-100  text-start border">
                <div className="feature-icon mb-3">
                  <img
                    src="../../../public/img/icons/attendance.png"
                    alt="Smart Attendance"
                    className="w-14 mb-4 feature-icon-image"
                  />
                </div>
                <h5>Smart Attendance</h5>
                <p>
                  Site managers mark attendance with employee photos and
                  location verification.
                </p>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
                <div className="feature-icon mb-3">
                  <img
                    src="../../../public/img/icons/spending.png"
                    alt="Expense & Budget Tracking"
                    className="w-14 mb-4 feature-icon-image"
                  />
                </div>
                <h5>Expense & Budget Tracking</h5>
                <p>
                  Track daily operations, procurement, and travel expenses with
                  approval workflows.
                </p>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
                <div className="feature-icon mb-3">
                  <img
                    src="../../../public/img/icons/ai.png"
                    alt="Advanced Reporting"
                    className="w-14 mb-4 feature-icon-image"
                  />
                </div>
                <h5>Advanced Reporting</h5>
                <p>
                  Get performance insights with role-based dashboards and
                  category-wise analytics.
                </p>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
                <div className="feature-icon mb-3">
                  <img
                    src="../../../public/img/icons/cloud-service.png"
                    alt="Cloud Scalability"
                    className="w-14 mb-4 feature-icon-image"
                  />
                </div>
                <h5>Cloud Scalability</h5>
                <p>
                  Built on secure cloud infrastructure for seamless scaling and
                  24/7 availability.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* <!-- Pricing Section (Bootstrap 5) --> */}
      <section id="pricing" className="bg-light section-py vh-100">
        <div className="container text-center">
          <h3 className="mb-5">Simple & Transparent Pricing</h3>
          <div className="row g-4 justify-content-center">
            <div className="col-md-4">
              <div className="card pricing-card border-0 shadow-sm">
                <div className="card-body">
                  <h5 className="text-primary fw-bold">Starter</h5>
                  <h2>
                    ₹499<span className="fs-6 text-muted">/month</span>
                  </h2>
                  <ul className="list-unstyled mt-3 mb-4 text-muted">
                    <li>Up to 10 users</li>
                    <li>Basic reporting</li>
                    <li>Project tracking</li>
                  </ul>
                  <a href="#" className="btn btn-outline-primary">
                    Request Demo
                  </a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card pricing-card border-primary shadow-lg">
                <div className="card-body">
                  <h5 className="text-primary fw-bold">Professional</h5>
                  <h2>
                    ₹999<span className="fs-6 text-muted">/month</span>
                  </h2>
                  <ul className="list-unstyled mt-3 mb-4 text-muted">
                    <li>Unlimited projects</li>
                    <li>Expense & attendance tracking</li>
                    <li>Advanced analytics</li>
                  </ul>
                  <a
                    href="https://ofw.marcoaiot.com/auth/reqest/demo"
                    className="btn btn-primary"
                  >
                    Request Demo
                  </a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card pricing-card border-0 shadow-sm">
                <div className="card-body">
                  <h5 className="text-primary fw-bold">Enterprise</h5>
                  <h2>Custom</h2>
                  <ul className="list-unstyled mt-3 mb-4 text-muted">
                    <li>Dedicated support</li>
                    <li>Custom integrations</li>
                    <li>Private cloud hosting</li>
                  </ul>
                  <a href="#" className="btn btn-outline-primary">
                    Request Demo
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* <!-- About --> */}
      <section id="about" className="section-py vh-100">
        <div className="container text-center">
          <h2 className="fw-bold mb-4">About OnFieldWork</h2>
          <p className="text-muted mx-auto" style={{ maxWidth: "700px" }}>
            OnFieldWork is a SaaS-based Project Management System that
            simplifies field operations for businesses. From tracking attendance
            and expenses to generating actionable reports — everything is
            designed to keep your projects on track and teams connected.
          </p>
        </div>
      </section>

      <section id="faq" className="bg-light  section-py vh-100">
        <div className="container text-center">
          <h3>
            Frequently AskedQuestions <br />
            <h6 className="text-normal">
              {" "}
              Browse through these FAQs to find answers to commonly asked
              questions.
            </h6>
          </h3>

          <div className="accordion mt-5" 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 MarcoPMS?
                </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 Marco PMS?
                </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 Marco PMS. 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">
                  Marco PMS 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 Marco PMS 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, Marco PMS 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>
      </section>

      {/* <!-- Contact --> */}
      <section
        id="contact"
        className="text-white text-center section-py vh-100"
        style={{ background: "#49bf3c" }}
      >
        <div className="container">
          <h2 className="fw-bold mb-3">Get in Touch</h2>
          <p className="mb-4">
            Want a live demo or have questions? Our team will respond within 24
            hours.
          </p>
          <a href="mailto:sales@marcoaiot.com" className="btn btn-light px-4">
            Email Us
          </a>
        </div>
      </section>

      {/* <!-- ? Footer --> */}
      <footer className="py-2 bg-dark text-white text-center">
        <p className="mb-0">© 2025 OnFieldWork.com All Rights Reserved.</p>
      </footer>
      <a
        href="#"
        id="scroll-top"
        class="scroll-top d-flex align-items-center justify-content-center active"
      >
        <i class="bx bxs-chevrons-up"></i>
      </a>
    </>
  );
};

export default LandingPage;