import React from "react";
import { MarketingHeroBanner } from "../../components/marketing/MarketingHeroBanner";
import { MarketingFeature } from "../../components/marketing/MarketingFeature";
import { SliderImageTop } from "../../components/marketing/SliderImageTop";
import { PhotoGridMobile } from "../../components/marketing/PhotoGridMobile";
import { ExploreLocationsSlider } from "../../components/marketing/ExploreLocationsSlider";
import { CTABlock } from "../../components/marketing/CTABlock";
import {Session} from "meteor/session";
import {FlowRouter} from "meteor/ostrio:flow-router-extra";

export const Marketing = () => {
    return (
        <>
            <div className={"marketing"}>
                <MarketingHeroBanner />

                <MarketingFeature />

                <PhotoGridMobile />

                <SliderImageTop
                    content={[
                        {
                            text: "Booking a film-friendly location has never been easier. Seriously. Chat directly to property owners, negotiate a budget-friendly hourly rate and get those cameras rolling. Boom! You’re in show business!",
                            heading: "Hassle-Free Bookings"
                        },
                        {
                            text: "Browse Everyspace listings for free from anywhere in the world. Whether you need a commercial property or residential home, unique vehicle or professional studio, there’s an epic Filmspace just waiting for you and the crew.",
                            heading: "Ready, Set, Search"
                        },
                        {
                            text: "It’s your time to shine, buddy! With safe and easy payment systems and automated location agreements, it’s easy to focus on your next award-winning production in a unique, affordable (and totally awesome) Everyspace. ",
                            heading: "Make The Magic Happen"
                        }
                    ]}
                    img={<img src={"/images/hassle-free.jpg"} style={{ height: window.innerWidth < 768 ? "auto":500, width: "auto" }} />}
                    sectionVerticalText={"Scout from the Couch"}
                />

                <ExploreLocationsSlider />

                <CTABlock
                    imageURL={'/images/filming_booth.jpg'}
                    heading={'Rent your Space and Start Earning'}
                    buttonText={"Become a Host"}
                />

                <div className={"marketing-feature"}>
                    <div className={"grid-container"}>
                        <h2 className={"heading"}>Bring Home the Cash... Your Way</h2>
                        <p className="common desktop-max-width-520">
                            Filmmakers of all shapes and sizes want to use your Filmspace as a shoot location.
                            No matter what type of property you own, it’s never been easier to level up your income.
                        </p>
                        <div>
                            <button onClick={() => {
                                if (Meteor.userId()) {
                                    Session.set("userActingAs", "host");
                                }
                                FlowRouter.go("ListingCreate")
                            }} className="marketing-button" style={{ margin: "auto" }}>List Your Space</button>
                        </div>
                    </div>
                </div>

                <SliderImageTop
                    content={[
                        {
                            text: "Home is where the cash is. From suburban bliss to ultra chic pads, listing your home as a Filmspace is a great way of making moola on your terms.",
                            heading: "Residential Property"
                        },
                        {
                            text: "Don’t let business hours dictate your income. Rent your commercial property by the hour to industry pros and earn extra money with zero hassles.",
                            heading: "Commercial Property"
                        },
                        {
                            text: "Just because you’re in the game doesn’t mean you can’t up your game. Easily rent your studio to even more filmmakers and photographers to make the most of your space.",
                            heading: "Professional Studios"
                        },
                        {
                            text: "Go from zero to a hundred in no time! Rent your totally unique car, bike, plane, caravan, boat or even one-of-a-kind tricycle by the hour and let your mobile Filmspace pay for itself.",
                            heading: "Anything That Moves"
                        }
                    ]}
                    img={<img src={"/images/blob1.jpg"} style={{ height: window.innerWidth < 768 ? "auto":500, width: "auto" }} />}
                    sectionVerticalText={"Become a host today"}
                />

            </div>
        </>
    );
};