import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import './styles/Home.css'
import Button from '@mui/material/Button';
import cycle from './styles/cycle.svg';
import cycle2 from './styles/cycle2.png';
import cycle3 from './styles/cycle3.png';
import logo from './styles/logo.svg';
import { AuthContext } from "../helpers/AuthContext";

export default function Home() {
    const navigate = useNavigate();
    const {authState} = useContext(AuthContext);

    return (
        <div className="bg-grey w-100">
            <div className="parallax-1">
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12 col-sm-8 col-sm-offset-1 col-md-8 col-md-offset-1 col-lg-8 col-lg-offset-0">
                            <div className="centered promo-box">
                                <h1 className="promo-title">Earlybird promo</h1>
                                <h2 className="promo-sub-title">Monthly membership available now!</h2>
                                <div className="price-box w-50 px-3">
                                    <div className="price fw-light"><p>$18/ mo <small>+tx</small></p></div>
                                </div>
                                <br />
                                {!authState.provisionAccess && !(authState.roles && authState.roles.includes("ADMIN")) &&
                                <Button
                                    className='w-50'
                                    onClick={
                                        () => {
                                            navigate(`/pricing`)
                                        }
                                    }
                                    variant="contained"
                                    sx={{ mt: 3, mb: 2, bgcolor: "#EEB2A5" }}
                                >
                                    Subscribe!
                                </Button>}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <section>
                <div className="container p-4 mt-5 bg-light rounded-top-half shadow-custom w-100">
                    <div className="text-center">
                        <div className="row ">
                            <div className="col-sm-6 col-md-offset-1 col-md-5 content">
                                <h1>1 billion trips!!</h1>
                                <h2 className="fst-italic">We've gone places together!</h2>
                                <p>
                                    Spring is here and that means it's time to say Hello Velo! And what a season it will be! A season of celebration, for sure, during which we will honour the 1 billion trips taken together since the arrival of Hello Velo on the streets of Montreal in 2009.
                                </p>
                                <p>We look forward to seeing you on the streets on April 11!</p>
                                <p>See you soon,</p>
                                <p>- Hello Velo Team</p>
                            </div>

                            <div className="col-sm-6 aside">
                                <img className="img-fluid" alt="cyclist by Delesign Graphics" src={logo} />
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container p-4 mt-3 mb-3 bg-light rounded-3 shadow-custom w-100 ">
                    <div className="text-center">
                        <h1>Bike rental</h1>
                        <h2 className="mb-5">How does Hello Velo work?</h2>

                        <div className="mb-5">
                            <div className="container spaced">
                                <div className="row">
                                    <div className="col-sm-6 aside">
                                        <img className="" alt="cyclist by Delesign Graphics" src={cycle} />
                                        <small>
                                            <a href="https://iconscout.com/illustrations/boy-riding-cycle" target="_blank">Boy riding cycle Illustration</a> by
                                            <a href="https://iconscout.com/contributors/delesign" target="_blank"> Delesign Graphics</a>
                                        </small>
                                    </div>

                                    <div className="col-sm-6 col-md-5">
                                        <div className="bg-steps shadow p-5 my-1 rounded-pill">
                                            <h2 >1. Purchase a membership</h2>
                                            <p>
                                                The Hello Velo application makes it simple! Buy a Hello Velo membership. Simply click on “Rent a bike.” from the map page. If you already have a membership, log in to your account, click on the station nearest your location, and request an unlocking code
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="container mb-5">
                            <div className="row">
                                <div className="col-sm-12 col-md-6 col-md-offset-1">
                                    <div className="bg-steps shadow p-5 my-5 rounded-pill">
                                        <h2 className="mb-5">2. Take a bike</h2>
                                        <p>
                                            After you've identified the the bike of your choice using the serial number engraved on the handlebar, choose it from the station menu and click rent. When you see the green light, pull the bike toward you to remove it from its docking point. It's that simple!
                                            <br />
                                            <small>* Recieve a discount on your subscription by renting your bike from full a station and returning at an empty one! Look for the discount ACTIVE tag on the map. </small>
                                        </p>
                                    </div>
                                </div>

                                <div className="col-sm-6">
                                    <img className="img-fluid" src={cycle2} />
                                </div>
                            </div>
                        </div>

                        <div className="mb-5">
                            <div className="container spaced">
                                <div className="row block-elements">
                                    <div className="col-sm-6">
                                        <img className="img-fluid" src={logo} />
                                    </div>

                                    <div className="col-sm-6  col-md-5">
                                        <div className="bg-steps shadow p-5 my-1 rounded-pill">
                                            <h2>3. Cycle</h2>
                                            <p>
                                                Once your bike is removed from the dock, you're free to ride for 45 minutes! If you'd like to extend your ride, simply dock your bike at a station and check it out again. If you don't want to interupt your bliss, you're welcome to continue riding for a modest fee of 3 dollars every 30 minutes.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="mb-5">
                            <div className="container spaced">
                                <div className="row block-elements">
                                    <div className="col-sm-6 col-md-offset-1 col-md-5">
                                        <div className="bg-steps shadow p-5 my-1 rounded-pill">
                                            <h2>4. Return the bike</h2>
                                            <p>
                                                When you're ready to end your ride, simply dock your bike at your chosen station, find that station on the map and click the return bike button. Confirm the station and return your bike and we'll take it from there.
                                            </p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6">
                                        <img className="img-fluid" src={cycle3} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container p-4 bg-light rounded-bottom-half shadow-custom w-100">
                    <div className="text-center">
                        <div className="row ">
                            <div className="col-12">
                                <h2>Ready to say HELLO!?</h2>
                                <p>Subscribe to the Hello Velo service, then find and unlock your bike!</p>

                                <div className='d-flex justify-content-center'>
                                    <hr />
                                    {!authState.provisionAccess && !(authState.roles && authState.roles.includes("ADMIN")) &&
                                     <Button
                                        className='w-25'
                                        onClick={
                                            () => {
                                                navigate("/pricing")
                                            }
                                        }
                                        variant="contained"
                                        sx={{ mt: 3, mb: 2, bgcolor: "#EEB2A5" }}
                                    >
                                        Subscribe
                                    </Button>}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}