import React, {Component} from 'react';
import './landingShit/landing.css';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBox } from '@fortawesome/free-solid-svg-icons';
import { faShippingFast } from '@fortawesome/free-solid-svg-icons';
import { faUserCheck } from '@fortawesome/free-solid-svg-icons';


library.add(faBox)
library.add(faShippingFast)
library.add(faUserCheck)


const Data = {
    txt: [
        {
            id: '1',
            header: 'What to use logiston for',
            text: 'Automate or make easier prosesses of inventory, routes building and scheduling tasks for couriers'
        }, {
            id: '2',
            header: 'For whom',
            text: 'For small and medium businesses, where transportations '
        }, {
            id: '3',
            header: 'How to start',
            text: 'Register a company, register employees, start adding tasks'
        }, {
            id: '4',
            header: 'Platforms',
            text: 'Use our web-client or android App to control your network'
        },
    ]
}

const Header = () => {
    return (
        <div className="prllx">
        <div className="main">
            <h1>Logiston</h1>
            <p>Develop. Manage. Save.</p>
            <div>
                <button type="button" className="btn">Sign In</button>
                <button  className="btn">Learn more</button>
            </div>
        </div>
    </div>
)
};

const LandingGroup = () => {
    return(
        <div>
        <LrnMoreGroup txtData={Data}/>
        <With />
        </div>
    )
}

const Home =()=>{
    <h1>000</h1>
}
const Starter = () => {
    return (<div className="Starter">
        <h2>What is modern logistics?</h2>
        <div>
            <p>
                When you can create logistic network in a few clicks
            </p>
        </div>
    </div>)
};

const Divider = () => {
    return(
    <div className="prllx dvdr">

    </div>
    )
};

class LrnMoreGroup extends Component {
    render() {
        return (<div>
            <Article txtData={this.props.txtData.txt}/>
        </div>);
    }
};

class Article extends Component {
    render() {
        var articles = this.props.txtData.map(function(txt) {
            return (<div className="lrn-item" key={txt.id}>
                <h3>{txt.header}:</h3>
                <div>
                    <p>{txt.text}</p>
                </div>
            </div>);
        });
        return (<div className="block">
            <div>{articles}</div>
        </div>);
    }
};

const With = () => {
    return (<div className="join">
        <h3>Develop. Manage. Save</h3>
        <p>with <em>logiston</em></p>
        <button className="btn">join</button>
    </div>)
}

class Landing extends Component {
    render() {
        return (
            <div>
            <Header/>
            <Starter />
            <Divider />
            <LandingGroup />
            </div>
        )
    }
}

export default Landing;