import * as React from 'react';
import {Layouts} from '@tesseract-design/viewfinder-react';
import {Brand} from '@/components/molecules/Brand';

export const Footer = () => (
	<footer className="py-12 sm:py-24 flex items-center relative">
		<div
			className="absolute top-0 left-0 w-full h-full bg-shade opacity-75"
		/>
		<Layouts.Basic.ContentContainer
			span="wide"
			className="flex flex-col gap-12 relative"
		>
			<div
				className="flex flex-col sm:flex-row gap-8 sm:gap-12"
			>
				<h2 className="m-0 flex-auto shrink-0">
					See you around.
				</h2>
				<dl
					className="flex flex-col xs:grid gap-8 xs:gap-12 xs:grid-cols-3"
				>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							LinkedIn
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://linkedin.com/in/allancrisostomo"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['/in/'] p-1 -m-1"
							>
								allancrisostomo
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							Modal Code
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://code.modal.sh/TheoryOfNekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								TheoryOfNekomata
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							GitHub
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://github.com/TheoryOfNekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								TheoryOfNekomata
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							Soundcloud
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://soundcloud.com/TheoryOfNekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								TheoryOfNekomata
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							YouTube
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://youtube.com/@TheoryOfNekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								TheoryOfNekomata
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							Pixiv
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://pixiv.me/theoryofnekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								theoryofnekomata
							</a>
						</dd>
					</div>
					<div className="flex flex-col gap-4">
						<dt className="text-xs uppercase font-bold">
							X (formerly Twitter)
						</dt>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://twitter.com/theoryofnekomata"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								theoryofnekomata
							</a>
						</dd>
						<dd className="text-xs font-mono leading-normal">
							<a
								href="https://twitter.com/clearfix.5essnce"
								rel="noreferrer noopener"
								target="_blank"
								className="no-underline before:content-['@'] p-1 -m-1"
							>
								clearfix.5essnce
							</a>
						</dd>
					</div>
				</dl>
			</div>
			<div className="text-center">
				&copy;
				{' '}
				<span className="text-2xl mx-3">
					<Brand/>
				</span>
				{' '}
				{new Date().getFullYear()}.
			</div>
		</Layouts.Basic.ContentContainer>
	</footer>
)
