import React from "react";
import { Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import "../App.css"; // Asegúrate de ajustar el camino si es necesario
import AppAppBar from "./AppAppBar";

const LandingPage = () => {
  return (
    <div className="landing-page">
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container">
          <AppAppBar />
       
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
              
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <header className="header-section text-center py-5">
        <div className="container">
          <h1>Bienvenido a MiApp</h1>
          <p className="lead">
            La mejor solución para gestionar tus servicios y clientes.
          </p>
            <Link to="/login" className="nav-link" >
                  Login
                </Link>
          <Link to="/clientes" className="btn btn-primary btn-lg mt-4">
            Ir al Dashboard
          </Link>
          
        </div>
      </header>

      <section className="info-section py-5">
        <div className="container">
          <div className="row">
            <div className="col-md-4">
              <h3>Servicios</h3>
              <p>
                Gestiona todos tus servicios de manera eficiente y organizada.
              </p>
            </div>
            <div className="col-md-4">
              <h3>Clientes</h3>
              <p>
                Mantén toda la información de tus clientes en un solo lugar.
              </p>
            </div>
            <div className="col-md-4">
              <h3>Reportes</h3>
              <p>
                Genera reportes detallados de tus operaciones y servicios.
              </p>
            </div>
          </div>
        </div>
      </section>

      <footer className="footer-section bg-light py-3">
        <div className="container text-center">
          <p className="mb-0">© 2024 MiApp. Todos los derechos reservados.</p>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;