package pages

import (
	"strings"

	"www/layouts"
	"www/components"
)

type HomepageProps struct {
	Projects []components.Project
	Blogs    []components.Blog
	Images   []string
}

templ Homepage(props HomepageProps) {
	@layouts.Page("013") {
		@components.Nav([]components.Link{
			{Text: "about", Link: templ.SafeURL("#about")},
			{Text: "projects", Link: templ.SafeURL("#projects")},
			// {Text: "gallery", Link: templ.SafeURL("#gallery")},
			{Text: "blog", Link: templ.SafeURL("#blog")},
			{Text: "contact", Link: templ.SafeURL("#contact")},
		})
		<section
			id="homepage"
			class={ "w-screen h-screen overflow-x-hidden overflow-y-scroll scroll-smooth motion-reduce:scroll-auto " +
					"snap-y scrollbar thumb-gray contrast-more:thumb-light-gray track-black" }
		>
			<header
				class="h-screen w-screen flex justify-center items-center snap-start"
				id="about"
			>
				<div class="flex flex-col lg:flex-row lg:justify-between lg:gap-5rem w-90% lg:w-80% xl:w-60%">
					<div class="w-50% xl:w-25%">
						<img
							src="/logo-013.svg"
							class="animate slide-from-b fade-in"
							style="--anim-stagger: 1;  opacity: 0;"
							alt="013 Logo"
						/>
					</div>
					<h1
						class={ "w-full lg:max-w-45rem mb-0 lg:mt-0 prose text-2.9rem lg:text-6xl xl:text-4.3rem " +
									"animate slide-from-b fade-in" }
						style="--anim-stagger: 2; opacity: 0;"
					>
						Someone who's trying to improve
					</h1>
				</div>
			</header>
			<main
				aria-labelledby="about-header"
				class="w-screen h-50vh lg:h-60vh xl:h-50vh flex justify-center items-center"
			>
				<div class="w-90% xl:w-50% lg:text-xl -translate-y-20% xl:-translate-y-45% text-justify snap-center">
					<h2 id="about-header" class="opacity-0">About</h2>
					<p class="animate slide-from-b fade-in" style="--anim-stagger: 4; opacity: 0;">
						Lorem ipsum dolor sit amet, officia excepteur ex fugiat
						reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex
						esse exercitation amet. Nisi anim cupidatat excepteur officia.
						Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
						voluptate dolor minim nulla est proident. Nostrud officia pariatur ut
						officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
						commodo officia dolor Lorem duis laboris cupidatat officia voluptate.
						Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis
						officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis
						sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
						consectetur et est culpa et culpa duis.
					</p>
					<p class="animate slide-from-b fade-in" style="--anim-stagger: 5; opacity: 0;">
						Lorem ipsum dolor sit amet, officia excepteur ex fugiat
						reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex
						esse exercitation amet. Nisi anim cupidatat excepteur officia.
						Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
						voluptate dolor minim nulla est proident. Nostrud officia pariatur ut
						officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
						commodo officia dolor Lorem duis laboris cupidatat officia voluptate.
						Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis
						officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis
						sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
						consectetur et est culpa et culpa duis.
					</p>
				</div>
			</main>
			<section
				aria-labelledby="projects-header"
				id="projects"
				class="w-screen h-screen flex justify-center items-center"
			>
				<div class="w-90% xl:w-50% snap-center">
					<hgroup class="flex justify-between my-5">
						<h2 id="projects-header" class="font-cal text-5xl m-0">Projects.</h2>
						<p class="m-0">
							<a
								href="/projects"
								class="decoration-none text-light-gray flex items-center"
							>
								See more
								<span
									class="w-5 h-5 bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
								></span>
							</a>
						</p>
					</hgroup>
					<div class="grid grid-flow-row auto-rows-[minmax(6.7rem,_2fr)] md:grid-cols-2 gap-5">
						for i, project := range components.SortProjects(props.Projects) {
							if i == 0 {
								<div class="row-span-2">
									@components.ProjectCard(project)
								</div>
							} else if i < 3 {
								<div>
									@components.ProjectCard(project)
								</div>
							} else {
								<div class="hidden md:block">
									@components.ProjectCard(project)
								</div>
							}
						}
					</div>
				</div>
			</section>
			<!-- <section
				aria-labelledby="gallery-header"
				id="gallery"
				class="w-screen min-h-screen flex justify-center items-center"
			>
				<div class="w-90% xl:w-50% max-h-60% snap-start">
					<hgroup class="flex justify-between my-5">
						<h2 id="gallery-header" class="font-cal text-5xl m-0">Gallery.</h2>
						<p class="m-0">
							<a
								href="/gallery"
								class="decoration-none text-light-gray flex items-center"
							>
								See more
								<span
									class="w-5 h-5 bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
								></span>
							</a>
						</p>
					</hgroup>
					<div class="flex flex-wrap flex-col w-100% max-h-65vh md:max-h-70vh overflow-hidden">
						for _, img := range props.Images {
							<div class="w-50% md:w-33.3%">
								@components.Image(templ.SafeURL(img), "", "block max-w-100%")
							</div>
						}
					</div>
				</div>
			</section> -->
			<section
				aria-labelledby="blog-header"
				id="blog"
				class="w-screen min-h-screen flex justify-center items-center"
			>
				<div class="w-90% xl:w-50% max-h-60% snap-center">
					<hgroup class="flex justify-between my-5">
						<h2 id="blog-header" class="font-cal text-5xl m-0">Blog.</h2>
						<p class="m-0">
							<a
								href="/blog"
								class="decoration-none text-light-gray flex items-center"
							>
								See more
								<span
									class="w-5 h-5 bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
								></span>
							</a>
						</p>
					</hgroup>
					<div
						class={ "w-100% max-h-65vh md:max-h-70vh overflow-hidden " +
								"md:grid grid-cols-2 gap-4" }
					>
						for i, blog := range props.Blogs {
							if i < 2 {
								<div class="">
									@components.BlogSummary(blog)
								</div>
							} else if i < 4 {
								<div class="hidden md:block">
									@components.BlogSummary(blog)
								</div>
							}
						}
					</div>
				</div>
			</section>
			<section
				aria-labelledby="contact-header"
				id="contact"
				class="w-screen min-h-screen flex justify-center items-center"
			>
				<div class="w-90% xl:w-50% max-h-60% snap-start">
					<hgroup class="flex justify-between my-5">
						<h2 id="contact-header" class="font-cal text-5xl m-0">Contact.</h2>
					</hgroup>
					<ul class="text-xl pl-0 grid grid-cols-2 md:grid-cols-4 list-none w-100%">
						<li>
							@contactList("Software") {
								@contactItem("i-simple-icons:github", "GitHub", "http://github.com/guz013")
								@contactItem("i-simple-icons:codeberg", "Codeberg", "http://codeberg.org/guz013")
							}
						</li>
						<li>
							@contactList("Social") {
								@contactItem("i-simple-icons:twitter", "Twitter", "http://twitter.com/guz013_")
								@contactItem("i-simple-icons:mastodon", "Mastodon", "http://mastodon.social/@guz013")
							}
						</li>
						<li>
							@contactList("Photography") {
								@contactItem("i-simple-icons:instagram", "Instagram", "http://instagram.com/guz013_")
								@contactItem("i-simple-icons:pixelfed", "Pixelfed", "http://pixelfed.social/guz013")
							}
						</li>
						<li>
							@contactList("Art") {
								@contactItem("i-simple-icons:instagram", "Instagram", "http://instagram.com/guzsart")
								@contactItem("i-simple-icons:pixelfed", "Pixelfed", "http://pixelfed.social/guzsart")
							}
						</li>
					</ul>
					<div
						class="mt-3 md:mt-10"
						aria-labelledby="business-contact"
					>
						<h3
							class="text-gray contrast-more:text-white text-xl font-normal mb-0 inline-flex items-center gap-2"
							id="business-contact"
						>
							Business
							<a
								class={ "inline-flex items-center text-black text-sm p-0.5 px-2 rounded-lg no-underline " +
										"transition-all transition-2s bg-gray hover:bg-light-gray bg-gradient-to-t from-black/50 " +
										"contrast-more:bg-light-gray contrast-more:hover:bg-white contrast-more:from-black/0" }
								rel="noopener nofollow noreferrer"
								href="mailto:contact.guz013@gmail.com"
							>
								<span
									class="inline-block i-solar:hand-shake-bold-duotone w-4.5 h-4.5"
									aria-hidden="true"
								></span>
								<span class="opacity-0">(</span>Open to hire!<span class="opacity-0">)</span>
							</a>
						</h3>
						<ul class="list-none pl-0 flex gap-2 md:gap-5 relative">
							<li>
								<a
									class={ "transition-all transition-2s text-light-gray hover:text-white " +
											"flex items-center gap-1 no-underline hover:underline" }
									target="_blank"
									rel="noopener nofollow noreferrer"
									href="mailto:contact.guz013@gmail.com"
								>
									<span
										aria-hidden="true"
										class="inline-block w-4.5 h-4.5 i-solar:mailbox-bold-duotone"
									></span>
									<span
										class="transform-gpu pl-4.5 -translate-x-4.5 hover:-translate-y-0.2 transition-transform"
									>
										contact.guz013@gmail.com
									</span>
								</a>
							</li>
							@contactItem("i-simple-icons:linkedin", "LinkedIn", "http://linkedin.com/in/guz013")
							<div
								aria-hidden="true"
								class="h-0 w-0 pointer-events-none bg-transparent! contrast-more:hidden"
							>
								<div
									class={ "absolute left-0 top-0 h-100% w-100% " +
									"bg-transparent bg-gradient-to-t from-black/50" }
								></div>
							</div>
						</ul>
					</div>
				</div>
			</section>
			<footer
				aria-labelledby="footer-header"
				class="w-screen min-h-screen flex justify-center items-center"
			>
				<div
					class="w-90% xl:w-50% max-h-60% snap-start text-center"
					id="footer"
				>
					<h3 id="footer-header" class="opacity-0">Footer</h3>
					<p>Copyright &copy; 2024 Gustavo "Guz" L. de Mello</p>
					<p class="text-sm text-gray contrast-more:text-light-gray" id="license">
						Unless otherwise noticed, contents of this website itself are licensed under
						the
						<a
							class={ "transition-all transition-2s text-gray hover:text-light-gray "+
									"contrast-more:text-light-gray contrart-more:hover:text-white "+
									"underline" }
							href="https://creativecommons.org/licenses/by-sa/4.0/"
							rel="noopener nofollow noreferrer"
						>
							Creative Commons Attribution-Share Alike 4.0 International ("CC BY-SA 4.0")
						</a>.
						Guz013, the 013 Logo, are trademarks of Gustavo L. de Mello. The underlyng
						source code used to format and display that content is, unless otherwise noticed,
						licensed under the
						<a
							class={ "transition-all transition-2s text-gray hover:text-light-gray "+
									"contrast-more:text-light-gray contrart-more:hover:text-white "+
									"underline" }
							href="https://www.mozilla.org/en-US/MPL/2.0/"
							rel="noopener nofollow noreferrer"
						>
							Mozilla Public License 2.0
						</a>.
					</p>
				</div>
			</footer>
			<div
				aria-hidden="true"
				class="h-0 w-0 pointer-events-none bg-transparent!"
			>
				<div
					class={ "fixed bottom-0 left-0 w-screen h-40vh md:h-20vh " +
							"bg-transparent bg-gradient-to-t from-black from-10%" }
				></div>
			</div>
		</section>
	}
}

templ contactList(label string) {
	<h3
		class="mb-2 text-gray contrast-more:text-white font-normal text-xl"
		id={ "contact-list-" + strings.ReplaceAll(label, " ", "-") }
	>{ label }</h3>
	<ul
		class="list-none pl-0 relative"
		aria-labelledby={ "contact-list-" + strings.ReplaceAll(label, " ", "-") }
	>
		{ children... }
		<div
			aria-hidden="true"
			class="h-0 w-0 pointer-events-none bg-transparent! contrast-more:hidden"
		>
			<div
				class={ "absolute left-0 top-0 h-100% w-100% " +
						"bg-transparent bg-gradient-to-t from-black/50" }
			></div>
		</div>
	</ul>
}

templ contactItem(icon string, label string, url string) {
	<li>
		<a
			class={ "transition-all transition-2s text-light-gray hover:text-white " +
					"flex items-center gap-1 no-underline hover:underline" }
			target="_blank"
			rel="noopener nofollow noreferrer"
			href={ templ.URL(url) }
		>
			<span
				aria-hidden="true"
				class={ "inline-block w-4.5 h-4.5 " + icon }
			></span>
			<span
				class="transform-gpu pl-4.5 -translate-x-4.5 hover:-translate-y-0.2 transition-transform"
			>{ label }</span>
			<span
				aria-hidden="true"
				class="inline-block i-solar:arrow-right-up-line-duotone w-4.5 h-4.5 -translate-x-4.5"
			></span>
		</a>
	</li>
}
