import * as React from 'react';
import Link from 'next/link';
import {Layouts} from '@tesseract-design/viewfinder-react';
import {Brand} from '@/components/molecules/Brand';
import {Pillar} from '@/components/molecules/Pillar';
import {BackgroundGrid} from '@/components/molecules/BackgroundGrid';
import {Icon} from '@/components/molecules/Icon';

export interface MainLandingSectionProps {
	backgroundImages: string[];
}

export const MainLandingSection: React.FC<MainLandingSectionProps> = ({
	backgroundImages
}) => {
	const scrollDown: React.MouseEventHandler<HTMLAnchorElement> = React.useCallback((event) => {
		event.preventDefault();

		const target = window.document.querySelector(event.currentTarget.getAttribute('href')!);
		if (!target) {
			return;
		}

		target.scrollIntoView({
			behavior: 'smooth',
		});
	}, []);

	return (
		<div
			className="sm:py-24 flex items-center min-h-full relative overflow-hidden"
		>
			<div
				className="fixed top-0 left-0 w-full h-full"
			>
				<div className="w-[125%] h-[125%] absolute -top-[12.5%] -left-[12.5%] opacity-25">
					<BackgroundGrid images={backgroundImages} />
				</div>
			</div>
			<div
				className="absolute top-0 left-0 w-full h-full bg-shade opacity-25"
			/>
			<Layouts.Basic.ContentContainer
				span="wide"
				className="relative py-24"
			>
				<div className="flex flex-col sm:flex-row sm:items-center gap-8 sm:gap-16">
					<h1 className="text-center m-0 before:text-7xl sm:before:text-8xl before:block before:content-['I_am.'] text-base leading-none">
					<span className="text-4xl">
						<Brand/>
					</span>
					</h1>
					<div className="w-full sm:w-auto flex-auto flex flex-row sm:flex-col gap-2 h-64 sm:h-64">
						<div className="w-0 sm:w-auto flex-auto">
							<Link
								href="/credentials"
								className="block w-full h-full"
							>
								<Pillar>
									Credentials
								</Pillar>
							</Link>
						</div>
						<div className="w-0 sm:w-auto flex-auto">
							<Link
								href="/portfolio"
								className="block w-full h-full"
							>
								<Pillar>
									Portfolio
								</Pillar>
							</Link>
						</div>
						<div className="w-0 sm:w-auto flex-auto">
							<Link
								href="/blog"
								className="block w-full h-full"
							>
								<Pillar>
									Blog
								</Pillar>
							</Link>
						</div>
						<div className="w-0 sm:w-auto flex-auto">
							<Link
								href="/services-values"
								className="block w-full h-full"
							>
								<Pillar>
									Services &amp; Values
								</Pillar>
							</Link>
						</div>
					</div>
				</div>
			</Layouts.Basic.ContentContainer>
			<div className="absolute bottom-0 left-0 w-full h-24 flex justify-center items-center">
				<div className="w-12 h-12">
					<a
						href="#start"
						className="relative rounded-full overflow-hidden w-12 h-12 block"
						onClick={scrollDown}
					>
						<span
							className="absolute top-0 left-0 w-full h-full bg-current opacity-75"
						/>
						<span className="text-negative rounded-inherit absolute top-0 left-0 w-full h-full flex items-center justify-center">
							<Icon
								name="scroll-down"
							/>
						</span>
					</a>
				</div>
			</div>
		</div>
	);
}
