import React, {useEffect, useState, useRef} from "react";
import ReactDOM from "react-dom";
import {getCurrentUser, getJamTrackPublic} from '../../helpers/rest';
import JKJamTrackPreview from './JKJamTrackPreview';
import {AppDataProvider} from '../../context/AppDataContext';
import {JamTrackPreviewProvider} from '../../context/JamTrackPreviewContext'
import {useHistory} from "react-router-dom";
import useJamTrackShopping from "../../hooks/useJamTrackShopping";
import UserAuth, {useAuth} from '../../context/UserAuth';
const awesome1 = '/img/landing/jamtracks/Top 10 Image - Number 1.png';
const awesome2 = '/img/landing/jamtracks/Top 10 Image - Number 2.png';
const awesome3 = '/img/landing/jamtracks/Top 10 Image - Number 3.png';
const awesome4 = '/img/landing/jamtracks/Top 10 Image - Number 4.png';
const awesome5 = '/img/landing/jamtracks/Top 10 Image - Number 5.png';
const awesome6 = '/img/landing/jamtracks/Top 10 Image - Number 6.png';
const awesome7 = '/img/landing/jamtracks/Top 10 Image - Number 7.png';
const awesome8 = '/img/landing/jamtracks/Top 10 Image - Number 8.png';
const awesome9 = '/img/landing/jamtracks/Top 10 Image - Number 9.png';
// To test this component in isolation, go to:
// http://beta.jamkazam.local:4000/public/backing-tracks/artist/song
// But this is only for development

const BodyComponent = ({
                           id = "1",
                           plan_code = "jamtrack-acdc-backinblack",
                           slug = "ac-dc-back-in-black",
                           artist = "AC/DC (defaulted)",
                           song = "Back in Black (defaulted)",
                           provided_jam_track = null
                       }) => {

    const [jamTrack, setJamTrack] = useState(provided_jam_track)
    const [jamTrackLoading, setJamTrackLoading] = useState(false)
    const history = useHistory()
    const {addToCart} = useJamTrackShopping()
    const { currentUser } = useAuth();

    console.log(`loading jamtrack with slug ${slug}`)
    
    const isLoggedIn = () => {
        return currentUser != null
    }

    const hasFreeJamTrack = () => {
        return currentUser == null || currentUser.show_free_jamtrack
    }

    const ctaClick = () => {
        const addJamTrackToCart = async () => {
            try {
                await addToCart(jamTrack, true);
            } catch (error) {
                console.error(error);
                alert("Unable to add JamTrack to your cart.");
            }
        }

        if (hasFreeJamTrack()) {
            if (isLoggedIn()) {
                // add to shopping cart automatically and then redirect to shopping cart page
                addJamTrackToCart()
            } else {
                console.log("no user")
                // redirect to the signup screen with the jamtrack & artist params set
                window.location.href = "/auth/signup?jamtrack=" + encodeURIComponent(slug)
            }

        } else {
            // This would mean there is a user in context, also, don't show the free option for this user (they already have a free jamtrack)
            addJamTrackToCart()
        }
    }

    const ConditionalLoader = () => {
        if (jamTrack == null) {
            return <div className="spinner-border ml-2" role="status">
                <span className="sr-only">Loading...</span>
            </div>
        }
        return null;
    }

    const CtaButton = () => {
        const btnText = hasFreeJamTrack() ? "Claim Free Backing Track" : "Add To Cart"
        return <button onClick={ctaClick} className="btn btn-primary claim-free-backing-track">{btnText}</button>
    };

    const freeRef = useRef(null);
    const limitedRef = useRef(null);
  
    // Function to sync height
    const updateHeight = () => {
        // Matches when width >= 1000px - check in _landing.scss for the matching 999px rule
        const isWideScreen = window.matchMedia("(min-width: 1000px)").matches;

        if (!isWideScreen) {
        // Reset the height when inactive
        if (limitedRef.current) limitedRef.current.style.maxHeight = "unset";
        return; // Do nothing if screen width < 999px
        }

        if (freeRef.current && limitedRef.current) {
            limitedRef.current.style.maxHeight = `${freeRef.current.offsetHeight}px`;
        }
    };

    //coming to signup page after clicking on jamtrack or artist
    useEffect(() => {

        console.log("useEffect, currentUser", currentUser)
        updateHeight(); // Run after initial render

        window.addEventListener("resize", updateHeight); // Listen to resize
        
        const jamtrack_api_options = {plan_code: plan_code}

        console.log(`jamtrack properties id=${id} plan_code=${plan_code} slug=${slug} artist=${artist} song=${song}`)

        // This ensures we only try once here as well
        if (!jamTrackLoading && jamTrack == null) {
            // tracks should look like:

            console.log("loading jamtrack", jamTrack)
            // {
            //     "id": "43554b1d-d95e-4910-bf4f-ed025f9625f3",
            //     "part": "Master",
            //     "instrument": {
            //     "id": "acoustic guitar",
            //         "description": "Acoustic Guitar",
            //         "created_at": "2013-01-03T01:57:43.040Z",
            //         "updated_at": "2013-01-03T01:57:43.040Z",
            //         "popularity": 3
            //     },
            //     "track_type": "Master",
            //     "position": 1000,
            //     "preview_mp3_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-aabb9fc9774e5657a54e00733269abb8.mp3",
            //     "preview_ogg_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-72bc0b532410e5ac3aa7d89c854ef57b.ogg",
            //     "preview_aac_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-4402df19d0615844db14fb77bd4da467.aac"
            // }

            // Out of convenience, we can support both a generated, 'I have everything I need', as well as a developer
            // friendly, grab tracks from my local server
            const fetchJamTrack = async () => {
                try {
                    const response = await getJamTrackPublic(jamtrack_api_options);
                    const jamTrack = await response.json();
                    console.log("jamtrack loaded", jamTrack);
                    setJamTrack(jamTrack)
                    setJamTrackLoading(false)
                } catch (error) {
                    console.error(error);
                    setJamTrackLoading(false)
                    const dev_track = {
                        "id": "43554b1d-d95e-4910-bf4f-ed025f9625f3",
                        "part": "Master",
                        "instrument": {
                            "id": "acoustic guitar",
                            "description": "Acoustic Guitar",
                            "created_at": "2013-01-03T01:57:43.040Z",
                            "updated_at": "2013-01-03T01:57:43.040Z",
                            "popularity": 3
                        },
                        "track_type": "Master",
                        "position": 1000,
                        "preview_mp3_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-aabb9fc9774e5657a54e00733269abb8.mp3",
                        "preview_ogg_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-72bc0b532410e5ac3aa7d89c854ef57b.ogg",
                        "preview_aac_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-4402df19d0615844db14fb77bd4da467.aac"
                    }
                    setJamTrack({id, tracks: [dev_track]})
                }
            }
            setJamTrackLoading(true);
            fetchJamTrack();
        }

        return () => window.removeEventListener("resize", updateHeight); 
    
    }, [currentUser, jamTrack, jamTrackLoading]);

    return (
        <div className="jamtrack-landing-body">
            <UserAuth path={"/"}>
                <AppDataProvider>
                    <JamTrackPreviewProvider>
                        <div className="content-row landing-page">
                            <div className="left-column">
                            <h1 className="top-title">Free {song} By {artist} Backing Track</h1>
                                        
                                <div className="top-region-container">
                                    <div className="region mb-4 top-explanation-region free" ref={freeRef}>
                                        <p>Our JamTracks take backing tracks to another level. Click the play icons in the
                                            Preview box
                                            to hear the full backing track mix and each of its parts. You can use our free
                                            website or our
                                            free app to easily make custom backing track mixes – e.g. to hear just one part
                                            as you learn
                                            it, to mute that one part to play along with the band, to slow down playback for
                                            practice
                                            while building up your speed, to change pitch/key up or down, and to record
                                            yourself in
                                            high-quality audio and video playing or singing with the track to share with
                                            family and
                                            friends. Click the button below to get your {song} by {artist} backing track
                                            now! Or
                                            scroll down to learn more.
                                        </p>
                                        <div className="center-children">
                                            <CtaButton/>
                                        </div>
                                        <div className="center-children">
                                            <p className="claim-free-backing-track-text hint">Join 300,000+ other musicians
                                                who love our backing tracks!</p>
                                        </div>
                                    </div>
                                    <div className="region mb-4 preview-region card limited" ref={limitedRef}>
                                        <div className="card-header bg-light">
                                            <h2>Preview Backing Track</h2>{ConditionalLoader()}
                                            <p>{artist} - {song}</p>
                                        </div>
                                        <div className="card-body bg-white">
                                            <p>
                                                Click the play buttons below to preview the master mix and 20-second samples
                                                of each fully isolated part of the backing track.
                                            </p>
                                            {jamTrack != null && <JKJamTrackPreview jamTrack={jamTrack} columns={false}
                                                                                    initialJamTracksShowCount={100}/>}

                                        </div>
                                    </div>
                                </div>
                                <div className="region mb-4">
                                    <h2>Watch Video to See How Our Backing Tracks Work</h2>
                                    <div className="video-wrapper">
                                        <div className="video-container">
                                            <iframe src="//www.youtube.com/embed/07zJC7C2ICA" border="0"
                                                    allowFullScreen></iframe>
                                        </div>
                                    </div>
                                </div>
                                <div className="region mb-4">
                                    <h2>What Makes Our Backing Tracks Awesome?</h2>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Huge, High Quality Backing Track Catalog
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome1} className="awesome-image-right"
                                                 alt="Backing track screenshot with volume controls for each part"/>
                                            <span className="awesome-text">JamKazam offers a catalog of 9,000+ backing tracks. We carefully curate each backing
                        track for quality, and every one includes fully isolated tracks for each part of the music -
                        .e.g. lead vocal, backing vocals, lead guitar, rhythm guitar, keys, bass, drums, etc. This gives
                        you complete creative control over every aspect of the music and how you want to use it for
                        learning, practice, recording, mixing, and other creative endeavors.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667L760,416.633C760,228.305 605.029,73.333 416.7,73.333L416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,566.667L300,566.667L300,550C300,478.1 358.733,446.5 410.567,418.6C456.933,393.667 496.967,372.133 496.967,327.9C494.662,293.374 465.616,266.203 431.013,266.203C428.402,266.203 425.793,266.358 423.2,266.667C398.972,265.071 375.105,273.376 357.1,289.667C342.449,305.897 334.023,326.812 333.333,348.667L300,349C300.61,318.375 312.427,289.011 333.2,266.5C357.361,243.563 389.933,231.559 423.2,233.333C425.859,233.118 428.526,233.011 431.194,233.011C483.988,233.011 528.006,275.156 530.3,327.9C530.3,392.033 475.067,421.733 426.367,447.967C383.933,470.8 343.633,492.467 335.033,533.333L533.333,533.333L533.333,566.667Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Solo, Mute, Pan or Set Level on Any Part
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome2} className="awesome-image-left-tall"
                                                 alt="Backing track screenshot with controls to solo, mute, or pan each part"/>
                                            <span className="awesome-text">When learning to play a part, it's incredibly valuable to be able to hear just one part in
isolation. Once you've learned your part, you can turn around and mute just that one part of
the backing track, and then play along with the rest of the band. Or if you prefer, you can
turn that part down low but keep it around as a subtle hint. Or pan the recorded track into
your left ear while your live performance is panned into your right ear. You are in control.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM416.667,566.667C360.685,569.763 311.954,526.55 308.333,470.6L341.667,470.6C345.357,508.221 378.986,536.349 416.667,533.333C454.347,536.349 487.976,508.221 491.667,470.6C491.667,437.367 459.433,412.333 416.667,412.333L416.667,379C459.433,379 491.667,355.767 491.667,325C486.519,288.736 453.082,262.73 416.667,266.667C380.251,262.73 346.815,288.736 341.667,325L308.333,325C313.332,270.347 361.94,229.217 416.667,233.333C471.394,229.217 520.001,270.347 525,325C524.463,354.849 507.653,382.132 481.233,396.033C508.041,411.288 524.751,439.757 525,470.6C521.379,526.55 472.648,569.763 416.667,566.667Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Make Custom Mixes
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome3} className="awesome-image-right-tall"
                                                 alt="Backing track screenshot with custom mixes created by the user"/>
                                            <span className="awesome-text">When you've customized your backing track mix, you can easily save your custom mixes to
use them again later without having to recreate them. Your custom mixes are saved to the
JamKazam cloud, so you can access them from almost any Internet-connected device. If you want to use your mixes outside the JamKazam website or app, you can also export
custom mixes as a simple .mp3, .wav, or .ogg audio files to use anywhere.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM500,566.667L466.667,566.667L466.667,500L252.867,500L500,226.433L500,466.667L566.667,466.667L566.667,500L500,500L500,566.667ZM333.333,466.667L466.667,466.667L466.667,306.9L333.333,466.667Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Slow Down Backing Track For Practice
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome4} className="awesome-image-left-tall"
                                                 alt="Backing track screenshot with controls to slow down or speed up tempo"/>
                                            <span className="awesome-text">You can easily slow down playback of your backing track by a specific % without changing
pitch, so the song still sounds "right", just slower. This is great for building your technique
on tougher sections while gradually increasing tempo. You can also make backing tracks
play faster if you want to hit the jets.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,266.667L366.667,266.667L366.667,363.267C374.872,360.763 383.266,358.924 391.767,357.767C399.958,356.574 408.223,355.961 416.5,355.933C432.137,355.766 447.69,358.246 462.5,363.267C475.904,367.827 488.308,374.923 499.033,384.167C509.284,393.089 517.474,404.133 523.033,416.533C528.785,429.545 531.672,443.642 531.5,457.867C531.639,472.749 528.747,487.505 523,501.233C517.519,514.275 509.339,526.011 499,535.667C488.189,545.598 475.54,553.32 461.767,558.4C446.484,564.054 430.294,566.856 414,566.667C391.296,567.421 368.813,561.945 349,550.833C331.63,540.587 317.436,525.723 308,507.9L340.533,494.567C346.744,507.907 356.782,519.106 369.367,526.733C382.233,534.696 397.103,538.836 412.233,538.667C423.613,538.78 434.919,536.826 445.6,532.9C455.358,529.331 464.309,523.858 471.933,516.8C479.326,509.848 485.214,501.452 489.233,492.133C497.765,471.869 497.584,448.96 488.733,428.833C484.386,419.375 478.053,410.962 470.167,404.167C461.968,397.233 452.521,391.926 442.333,388.533C431.023,384.747 419.16,382.877 407.233,383C394.458,383.005 381.734,384.629 369.367,387.833C357.012,390.985 345.007,395.374 333.533,400.933L333.333,233.333L533.333,233.333L533.333,266.667Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Change Backing Track Pitch/Key
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome5} className="awesome-image-right-tall"
                                                 alt="Backing track screenshot with controls to change pitch or key"/>
                                            <span className="awesome-text">If you're a singer and you need to bring the song down into your vocal range, or if you're an
instrumentalist and want to change the piece to a different key, you can change the pitch of
any backing track up or down by a specified number of semitones (half steps).</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM376,375.2L376.933,376.133C383.292,371.871 390.428,368.903 397.933,367.4C406.491,365.325 415.261,364.251 424.067,364.2C437.723,364.077 451.278,366.566 464,371.533C475.89,376.187 486.751,383.13 495.967,391.967C505.139,400.949 512.357,411.73 517.167,423.633C522.417,436.541 525.046,450.366 524.9,464.3C525.072,478.615 522.362,492.82 516.933,506.067C511.885,518.266 504.254,529.229 494.567,538.2C484.632,547.271 473.058,554.365 460.467,559.1C432.753,569.194 402.347,569.194 374.633,559.1C362.042,554.365 350.468,547.271 340.533,538.2C330.836,529.238 323.203,518.273 318.167,506.067C312.718,492.814 310.008,478.594 310.2,464.267C310.056,448.233 313.08,432.328 319.1,417.467C324.959,403.138 331.983,389.314 340.1,376.133L430.167,233.333L468.867,233.333L376,375.2ZM343.8,464.267C343.684,474.407 345.506,484.476 349.167,493.933C352.572,502.676 357.735,510.629 364.333,517.3C371.016,523.984 378.943,529.295 387.667,532.933C406.838,540.574 428.229,540.574 447.4,532.933C456.123,529.295 464.051,523.984 470.733,517.3C477.338,510.614 482.51,502.652 485.933,493.9C489.564,484.447 491.373,474.392 491.267,464.267C491.354,454.326 489.626,444.453 486.167,435.133C482.92,426.392 477.904,418.414 471.433,411.7C464.837,404.977 456.882,399.738 448.1,396.333C428.389,388.991 406.678,388.991 386.967,396.333C378.179,399.726 370.221,404.967 363.633,411.7C357.186,418.42 352.193,426.398 348.967,435.133C345.485,444.449 343.734,454.322 343.8,464.267Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Make & Share Recordings
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome6} className="awesome-image-left-tall"
                                                 alt="Backing track screenshot with recording features"/>
                                            <span className="awesome-text">Use the JamKazam app to make either audio-only or video + audio recordings of yourself
playing or singing along with your backing track. The app captures video from built-in or
external webcams and combines this video with the audio of the backing track mixed with
your live performance into a single integrated video, delivering far higher audio quality than
a smartphone recording.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,267.067L380.533,566.667L339.367,566.667L495.967,266.667L300,266.667L300,233.333L533.333,233.333L533.333,267.067Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Download the Parts of the Backing Track
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome7} className="awesome-image-right-tall"
                                                 alt="Backing track screenshot with download features"/>
                                            <span className="awesome-text">If you want to use the individual parts of the backing track outside the JamKazam website
or app, you can also download all the individual parts (e.g. lead vocal, drums, bass, etc.) to
your computer to use in a DAW (digital audio workstation) or other apps for creating
remixes, etc.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM460.067,391.667C478.022,396.892 493.769,407.882 504.867,422.933C516.974,439.392 523.22,459.444 522.6,479.867C522.811,493.505 519.844,507.007 513.933,519.3C508.379,530.735 500.527,540.903 490.867,549.167C480.882,557.6 469.406,564.09 457.033,568.3C430.883,577.319 402.45,577.319 376.3,568.3C363.927,564.09 352.451,557.6 342.467,549.167C332.806,540.896 324.943,530.73 319.367,519.3C313.455,507.007 310.488,493.505 310.7,479.867C310.603,469.338 312.19,458.861 315.4,448.833C318.357,439.635 322.768,430.969 328.467,423.167C333.962,415.659 340.664,409.115 348.3,403.8C355.953,398.504 364.373,394.411 373.267,391.667L373.267,390.733C365.907,388.301 359.035,384.589 352.967,379.767C346.84,374.902 341.548,369.069 337.3,362.5C332.891,355.697 329.447,348.316 327.067,340.567C324.569,332.641 323.31,324.377 323.333,316.067C323.157,303.536 325.705,291.116 330.8,279.667C335.533,269.083 342.451,259.62 351.1,251.9C359.803,244.2 369.864,238.186 380.767,234.167C403.89,225.774 429.244,225.774 452.367,234.167C463.348,238.149 473.48,244.165 482.233,251.9C490.863,259.638 497.778,269.096 502.533,279.667C507.628,291.116 510.176,303.536 510,316.067C510.007,324.375 508.748,332.637 506.267,340.567C503.848,348.307 500.395,355.685 496,362.5C491.752,369.069 486.46,374.902 480.333,379.767C474.278,384.597 467.417,388.321 460.067,390.767L460.067,391.667ZM344.333,476.133C344.263,485.707 346.005,495.207 349.467,504.133C352.704,512.567 357.717,520.207 364.167,526.533C370.742,532.889 378.515,537.875 387.033,541.2C406.135,548.356 427.198,548.356 446.3,541.2C454.815,537.867 462.586,532.882 469.167,526.533C475.616,520.207 480.63,512.567 483.867,504.133C487.328,495.207 489.07,485.707 489,476.133C489.098,466.709 487.354,457.356 483.867,448.6C480.541,440.349 475.535,432.879 469.167,426.667C462.612,420.334 454.83,415.41 446.3,412.2C427.143,405.349 406.19,405.349 387.033,412.2C378.5,415.402 370.716,420.327 364.167,426.667C357.799,432.879 352.792,440.349 349.467,448.6C345.979,457.356 344.235,466.709 344.333,476.133ZM356,317.933C355.885,326.105 357.474,334.211 360.667,341.733C363.697,348.785 368.145,355.139 373.733,360.4C397.749,382.897 435.584,382.897 459.6,360.4C465.179,355.13 469.625,348.779 472.667,341.733C475.844,334.206 477.433,326.103 477.333,317.933C477.386,309.541 475.8,301.219 472.667,293.433C469.74,286.109 465.376,279.445 459.833,273.833C441.975,256.675 415.558,251.63 392.633,261C385.485,263.998 378.986,268.357 373.5,273.833C367.957,279.445 363.594,286.109 360.667,293.433C357.517,301.214 355.931,309.54 356,317.933Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Use Plugins with Backing Tracks
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome8} className="awesome-image-left trim-down"
                                                 alt="Backing track screenshot with audio plugin effect example"/>
                                            <span className="awesome-text">The free JamKazam app lets you easily apply VST & AU plugins to your live performance,
mixed together seamlessly with your backing track. For example, guitarists can apply
popular amp sims like AmpliTube to get just the right guitar tone to match the song, and
vocalists can apply effects like reverb or pitch correction.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <path
                                                        d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM464.467,422.467L463.533,421.533C457.191,425.853 450.052,428.868 442.533,430.4C433.983,432.521 425.21,433.618 416.4,433.667C402.741,433.794 389.188,431.258 376.5,426.2C364.574,421.465 353.707,414.406 344.533,405.433C335.311,396.279 328.082,385.316 323.3,373.233C318.088,360.095 315.484,346.067 315.633,331.933C315.479,317.472 318.175,303.12 323.567,289.7C328.526,277.23 336.161,265.998 345.933,256.8C355.837,247.622 367.399,240.416 380,235.567C407.695,225.308 438.171,225.308 465.867,235.567C478.486,240.42 490.069,247.626 500,256.8C509.752,266.016 517.384,277.242 522.367,289.7C527.743,303.124 530.439,317.473 530.3,331.933C530.443,348.223 527.432,364.388 521.433,379.533C515.552,394.065 508.53,408.109 500.433,421.533L410.333,566.667L371.6,566.667L464.467,422.467ZM496.667,331.933C496.737,321.732 494.917,311.605 491.3,302.067C487.949,293.099 482.786,284.918 476.133,278.033C469.478,271.258 461.548,265.865 452.8,262.167C433.658,254.38 412.209,254.38 393.067,262.167C384.321,265.869 376.392,271.261 369.733,278.033C363.081,284.918 357.918,293.099 354.567,302.067C350.961,311.608 349.153,321.734 349.233,331.933C349.123,342.049 350.851,352.102 354.333,361.6C357.545,370.442 362.537,378.531 369,385.367C375.579,392.191 383.548,397.523 392.367,401C412.051,408.485 433.815,408.485 453.5,401C462.307,397.519 470.264,392.187 476.833,385.367C483.311,378.518 488.325,370.419 491.567,361.567C495.029,352.075 496.757,342.037 496.667,331.933Z"
                                                        style={{fill: "currentColor", fillRule: "nonzero"}}/>
                                                    <rect x="0" y="0" width="800" height="800"
                                                          style={{fill: "none", fillRule: "nonzero"}}/>
                                                </svg>
                                            </div>
                                            Use MIDI Instruments with Backing Tracks
                                        </h3>


                                        <p className="card-body bg-light">
                                            <img src={awesome9} className="awesome-image-right trim-down"
                                                 alt="Backing track screenshot with MIDI keyboard example"/>
                                            <span className="awesome-text">The free JamKazam app also lets you use MIDI instruments and mix and record this
instrumental audio with backing tracks. For example, keys players can use MIDI keyboard
controllers with plugins to generate traditional piano sounds, Rhodes electric piano,
Hammond organ, and other classic keys tones. And drummers who use electronic kits can
use their favorite plugins to power their percussive audio.</span></p>
                                    </div>

                                    <div className="card awesome-card">
                                        <h3 className="card-header">
                                            <div className="number-icon">
                                                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
                                                     style={{
                                                         fillRule: "evenodd",
                                                         clipRule: "evenodd",
                                                         strokeLinejoin: "round",
                                                         strokeMiterlimit: 2
                                                     }}>
                                                    <g transform="matrix(1,0,0,1,-104,0)">
                                                        <path
                                                            d="M433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z"
                                                            style={{fill: "rgb(54,64,79)"}}/>
                                                    </g>
                                                    <path
                                                        d="M416.667,73.333L416.7,73.333C605.029,73.333 760,228.305 760,416.633L760,416.667C760,605.014 605.014,760 416.667,760C228.32,760 73.333,605.014 73.333,416.667C73.333,228.32 228.32,73.333 416.667,73.333ZM416.667,726.667C586.659,726.484 726.484,586.659 726.667,416.667C726.667,246.606 586.728,106.667 416.667,106.667C246.606,106.667 106.667,246.606 106.667,416.667C106.667,586.728 246.606,726.667 416.667,726.667Z"

                                                        style={{fill: "rgb(54,64,79)"}}/>
                                                    <g transform="matrix(1,0,0,1.04274,86,-16.8444)">
                                                        <path
                                                            d="M400,237.5C436.38,237.5 466.315,255.853 486.572,290.573C503.293,319.229 512.5,358.093 512.5,400C512.5,441.904 503.293,480.765 486.572,509.424C466.315,544.147 436.38,562.5 400,562.5C363.62,562.5 333.685,544.147 313.428,509.424C296.707,480.765 287.5,441.904 287.5,400C287.5,358.093 296.707,319.229 313.428,290.573C333.685,255.853 363.62,237.5 400,237.5ZM400,537.5C460.443,537.5 487.5,468.442 487.5,400C487.5,331.558 460.443,262.5 400,262.5C339.557,262.5 312.5,331.558 312.5,400C312.5,468.442 339.557,537.5 400,537.5Z"
                                                            style={{fill: "rgb(54,64,79)"}}/>
                                                    </g>
                                                    <rect x="0" y="0" width="800" height="800" style={{fill: "none"}}/>
                                                </svg>
                                            </div>
                                            Play Live In Sync With Others Over the Internet
                                        </h3>


                                        <div className="card-body bg-light">
                                            <div className="video-wrapper awesome-image-right">
                                                <div className="video-container">
                                                    <iframe src="//www.youtube.com/embed/euxDykIqUdo" border="0"
                                                            allowFullScreen></iframe>
                                                </div>
                                            </div>
                                            Perhaps the most mind-blowing thing you can do with JamKazam is that you can
                                            play live in
                                            sync with others from different locations over the Internet using the free
                                            JamKazam app
                                            and platform. You can play with your backing tracks in these sessions, with
                                            live musicians
                                            playing some parts and the backing track filling in the others.
                                        </div>
                                    </div>
                                </div>
                                <div className="center-children">
                                 <CtaButton/>
                                </div>
                            </div>
                        </div>
                    </JamTrackPreviewProvider>
                </AppDataProvider>
            </UserAuth>
        </div>
    );
};

export default BodyComponent;