import React from "react";
import { Helmet } from "react-helmet-async";
import Oction, { Pencil, Markdown, Pin, GitBranch, Flame, Eye, Sync } from "@primer/octicons-react";
import Link from "../components/Link";
import Button from "../components/Button";
import LoginForm from "../components/LoginForm";

const Intro = () => (
	<>
		<Helmet>
			<title>MindNote - Intro page</title>
		</Helmet>

		<header className="header">
			<div className="container container--header">
				<div className="header__logo">
					<Oction icon={Pencil} size={20} />
					<h1 className="header__text">MindNote</h1>
				</div>
				<nav className="nav">
					<ul className="nav__list">
						<li className="nav__item">
							<Link
								className="link"
								rel="noopener noreferrer nofollow"
								target="_blank"
								href="https://github.com/youhosi/mind-note"
							>
								Github
							</Link>
						</li>

						<li className="nav__item">
							<Button onClick={() => console.log("show modal with form")}>Sign in</Button>
						</li>
					</ul>
				</nav>
			</div>
		</header>

		<main>
			<section className="hero">
				<div className="container container--hero">
					<div className="hero__meta">
						<h1 className="hero__title">Note App for developers</h1>

						<span className="hero__description">
							Light, clean, and simple. MindNote is a free, plain-text note-taking app for the web. All the features you
							need, and nothing you don&apos;t.
						</span>
					</div>

					<div className="hero__login-form">
						<LoginForm />
					</div>
				</div>
			</section>

			<section className="features">
				<div className="container container--features">
					<h1 className="features__header features__header--big">What makes MindNote is great?</h1>

					<div className="features__container">
						<div className="features__item">
							<div className="features__header">
								<Oction icon={Pin} size={18} />
								Stay organized
							</div>
							<div className="features__meta">Find notes quickly with instant searching and simple tags.</div>
						</div>

						<div className="features__item">
							<div className="features__header">
								<Oction icon={GitBranch} size={18} />
								Work together
							</div>
							<div className="features__meta">Share a list, post some instructions, or publish your notes online.</div>
						</div>

						<div className="features__item">
							<div className="features__header">
								<Oction icon={Flame} size={18} />
								It’s free
							</div>
							<div className="features__meta">Backups, syncing, sharing — it’s all completely free.</div>
						</div>

						<div className="features__item">
							<div className="features__header">
								<Oction icon={Markdown} size={18} />
								Markdown support
							</div>
							<div className="features__meta">Write, preview, and publish your notes in Markdown format.</div>
						</div>

						<div className="features__item">
							<div className="features__header">
								<Oction icon={Eye} size={18} />
								Beautiful
							</div>
							<div className="features__meta">
								Enjoy a beautiful, clean design reminiscent of your IDE with light and dark themes.
							</div>
						</div>

						<div className="features__item">
							<div className="features__header">
								<Oction icon={Sync} size={18} />
								Go back in time
							</div>
							<div className="features__meta">
								Your notes are backed up when you change them. Just drag the version slider to go back in time.
							</div>
						</div>
					</div>
				</div>
			</section>
		</main>

		<footer className="footer container--hero">
			<div className="footer__copy">2019 &copy; MindNote</div>

			<ul className="footer__technologies">
				<li className="footer__item">React</li>
				<li className="footer__item">Redux</li>
				<li className="footer__item">NodeJs</li>
				<li className="footer__item">Express</li>
				<li className="footer__item">MongoDB</li>
			</ul>
		</footer>
	</>
);

export default Intro;