"use strict";
import React from "react";

import { Link, animateScroll as scroll, scroller } from "react-scroll";

export class Main extends React.Component {
    constructor(props) {
        super(props);

    }

    componentDidMount() {

    }

    render() {
        return (
            <section id="head">
                <div className="bg-overlay">
                    <div className="container">
                        <div className="row">
                            <div className="col-12 col-lg-6">
                                <div className="about">
                                    <h1>
                                        We are HKWTC
                                    </h1>
                                    <p>
                                        HKWTC 是一個 Minecraft 的建築伺服器，主要建築計劃包括鐵路開發、交通系統拓展、紅石系統研究、城市建設及自動化生產等等。
                                    </p>
                                    <p>
                                        本群組於2009年12月因一次「禁錯制」而形式，經過好幾年的發展和更新後，形成了現在難得一見，具有人情味及高自由度的伺服器團體。
                                    </p>
                                    <small>喔，對了...你知道我們全線伺服器已轉用 SSD 了嗎？&emsp;(´・ω・`)</small>
                                </div>
                            </div>
                            <div className="col-12 col-lg-6">
                                <div>
                                    <div id="mc-icon">
                                        <img
                                            src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/128/3D_Grass.png"
                                            alt="Minecraft" />
                                        Minecraft Vanilla 1.10.2
                                    </div>
                                    <button
                                        className="btn btn-primary"
                                        onClick={() => {
                                            scroller.scrollTo("srvIntro", {
                                                duration: 800,
                                                delay: 100,
                                                smooth: true,
                                                offset: 8
                                            })
                                        }}>
                                        加入我們
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <video
                    id="prom"
                    autoPlay={true}
                    muted={true}
                    loop={true}>
                    <source src="//hkwtc.org/autostation/assets/seq01.mp4" type="video/mp4" />
                </video>
            </section>
        );
    }
}