import React, { FC, Fragment } from "react";
import Link from "next/link";

export const Layout: FC = ({ children }) => {
  return (
    <Fragment>
      <nav id="home" className="grey darken-4" role="navigation">
        <div className="nav-wrapper container">
          <Link href="/">
            <a>
              <img
                id="logo-container"
                className="brand-logo"
                src="/assets/images/RoninDojo-logo.png"
                alt="RoninDojo Logo"
              />
            </a>
          </Link>
          <ul className="right hide-on-med-and-down">
            <li>
              <Link href="/">
                <a>Home</a>
              </Link>
            </li>
            <li>
              <a href="/project">Project</a>
            </li>
            <li>
              <a href="#features">Features</a>
            </li>
            <li>
              <a href="#products">Products</a>
            </li>
            <li>
              <a href="#resources">Resources</a>
            </li>
            <li>
              <a target="_blank" rel="noreferrer" href="https://wiki.ronindojo.io">
                Wiki
              </a>
            </li>
          </ul>
          <ul id="nav-mobile" className="sidenav grey darken-3">
            <li>
              <Link href="/">
                <a className="white-text">Home</a>
              </Link>
            </li>
            <li>
              <a className="white-text" href="/project">
                Project
              </a>
            </li>
            <li>
              <a className="white-text" href="#features">
                Features
              </a>
            </li>
            <li>
              <a className="white-text" href="#products">
                Products
              </a>
            </li>
            <li>
              <a className="white-text" href="#resources">
                Resources
              </a>
            </li>
            <li>
              <a className="white-text" target="_blank" rel="noreferrer" href="https://wiki.ronindojo.io">
                Wiki
              </a>
            </li>
          </ul>
          <a href="#" data-target="nav-mobile" className="sidenav-trigger">
            <i className="material-icons">menu</i>
          </a>
        </div>
      </nav>

      {children}

      <footer id="resources" className="page-footer grey darken-3">
        <div className="container">
          <div className="row">
            <div className="col l6 s12">
              <h5 className="white-text">About Us</h5>
              <p className="grey-text text-lighten-4">
                Our team of Ronin are Samourai Wallet users and enthusiasts. This project was born out of a passion of
                bringing sovereignty to as many people as possible by building and maintaining software around the
                Samourai stack.
              </p>
            </div>
            <div className="col l3 s12">
              <h5 className="white-text">Resources</h5>
              <ul>
                <li>
                  <a className="red-text text-darken-2" href="https://wiki.ronindojo.io/FAQ">
                    FAQ
                  </a>
                </li>
                <li>
                  <Link href="/pgp">
                    <a className="red-text text-darken-2">PGP Keys</a>
                  </Link>
                </li>
                <li>
                  <a className="red-text text-darken-2" href="/project">
                    Project
                  </a>
                </li>
                <li>
                  <a className="red-text text-darken-2" href="https://wiki.ronindojo.io/en/Troubleshooting">
                    Troubleshoot
                  </a>
                </li>
              </ul>
            </div>
            <div className="col l3 s12">
              <h5 className="white-text">Social</h5>
              <ul>
                <li>
                  <a
                    className="red-text text-darken-2"
                    href="mailto:ronindojo@ronindojo.io"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Contact
                  </a>
                </li>
                <li>
                  <a
                    className="red-text text-darken-2"
                    href="mailto:support@ronindojo.io"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Support
                  </a>
                </li>
                <li>
                  <a
                    className="red-text text-darken-2"
                    href="https://t.me/RoninDojoUI"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Telegram
                  </a>
                </li>
                <li>
                  <a
                    className="red-text text-darken-2"
                    href="https://twitter.com/RoninDojoUI"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Twitter
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div className="footer-copyright grey darken-4">
          <div className="container">
            Founded 2019 @ The Local Talent Bar, America - © {new Date().getFullYear()} Ronin Dev Group -{" "}
            <Link href="/canary">
              <a className="red-text text-darken-2">Warrant Canary</a>
            </Link>
          </div>
        </div>
      </footer>
    </Fragment>
  );
};