import React, {FunctionComponent, useState} from "react"
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

interface HowEverySpaceWorksProps {

}

// @ts-ignore
const ContentBlock = ({ number, title, description }) => {
    return <div className={"margin-bottom-2 large-margin-bottom-0"}>
        <h2 className="hiw-title">
            <span className="hiw-number">{number}</span>
            {title}
        </h2>
        <p className="hiw-description">{description}</p>
    </div>
}

export const HowEverySpaceWorks: FunctionComponent<HowEverySpaceWorksProps> = () => {

    const [viewingLeft, setViewingLeft] = useState(true);

    return <div className="grid-container">
        <div className={"everyspace-landing-content-section"}>

            <h1 className="heading">How everyspace works</h1>

            <div className={"everyspace-switch"}>
                <button onClick={() => setViewingLeft(true)} className={viewingLeft ? "active":""}>For Guests</button>
                <button onClick={() => setViewingLeft(false)} className={viewingLeft ? "":"active"}>For Hosts</button>
                <div className={`background-color ${viewingLeft ? "left":"right"}`} />
            </div>

            <div style={{ marginBottom: 48 }} />

            <div className="grid-x grid-margin-x">
                <div className="cell small-12 large-4">
                    <ContentBlock
                        title={viewingLeft ? "Discover fresh spaces":"List in minutes, all for free"}
                        description={
                            viewingLeft
                                ? "Start by easily exploring a world of exciting spaces. Search using filters like activity types, the number of attendees and pricing. Plus, you can even save your favourite spaces for next time."
                                : "No matter the type of property you own, it’s never been this easy to make extra cash. Follow the streamlined listing process where you’ll be guided step-by-step."
                        }
                        number={1}
                    />
                </div>
                <div className="cell small-12 large-4">
                    <ContentBlock
                        title={viewingLeft ? "Book with ease":"Bookings made easy"}
                        description={
                            viewingLeft
                                ? "Booking a spot has never been easier. Get to know the space, read reviews, chat with hosts and just like that, you’ve booked the perfect venue to make your vision come to life."
                                : "Confirm bookings and chat to renters, all on the world-class everyspace platform. Choose a rate, only accept bookings that work for you and manage bookings all in one place."
                        }
                        number={2}
                    />
                </div>
                <div className="cell small-12 large-4">
                    <ContentBlock
                        title={viewingLeft ? "Meet, Create or Celebrate" : "Stress-free Payouts" }
                        description={
                            viewingLeft
                                ? "You’re all set! Get the lowdown and inside info on your new space from your host, ask for advice or even reach out to the Everyspace team if you need a hand - we’re here to help! "
                                : <div>Your first payout is just a few clicks away. Fair cancellation policies, fuss-free R1 000 000 liability insurance, and more makes for total peace of mind. <a className={"text-mint text-underline"} href={FlowRouter.path("ListingCreate")}>Ready to list?</a></div>
                        }
                        number={3}
                    />
                </div>
            </div>

        </div>

    </div>
}