---
import Button from '@components/base/Button.astro';
import Header from '@components/base/Header.astro';
import Link from '@components/base/Link.astro';
import Paragraph from '@components/base/Paragraph.astro';
import Section from '@components/base/Section.astro';
import Icon from '@components/icons/Icon.astro';
import configConst from '@config';
import Layout from '@layouts/Layout.astro';
---
<Layout>
	<Section wrapperClass="min-h-screen" class="relative isolate px-6 lg:px-8">
		<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80 opacity-50">
			<svg
				class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
				viewBox="0 0 1155 678">
				<path
					fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
					fill-opacity=".3"
					d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
				/>
				<defs>
					<linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
						<stop stop-color="#2463EB" />
						<stop offset={1} stop-color="#0080B5" />
					</linearGradient>
				</defs>
			</svg>
		</div>
		<div class="mx-auto max-w-3xl py-36 lg:py-48">
			<div class="mt-4 mb-8 flex md:justify-center">
				<div class="font-medium relative rounded-full py-1 px-3 text-sm leading-6 text-navy-peony ring-1 ring-gray-900/10 hover:ring-gray-900/20 transition">
					Introducing OneConfig 1.0
					<Link href="/projects/oneconfig" class="font-semibold text-brand-600 ml-1">
						<span class="absolute inset-0" aria-hidden="true" />
						Read more
					</Link>
				</div>
			</div>
			<div class="text-left md:text-center">
				<Header size="xxl" class="tracking-tight text-navy-peony max-sm:!text-header">
					Passionate creators redefining the modding community
				</Header>
				<Paragraph class="mt-6 text-lg leading-8 text-navy-peony">
					With a dedicated team of developers and a passionate community of players, Polyfrost continues to push the boundaries of what's possible in Minecraft modding.
				</Paragraph>
				<div class="mt-7 flex items-center justify-start md:justify-center gap-x-6">
					<Button style="secondary" href="/about" iconLeft="book-open">About us</Button>
					<Button style="secondary" href="/contact" iconLeft="chat">Socials</Button>
				</div>
			</div>
		</div>
		<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-35rem)] opacity-50">
			<svg
				class="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
				viewBox="0 0 1155 678">
				<path
					fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
					fill-opacity=".3"
					d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
				/>
				<defs>
					<linearGradient id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
						<stop stop-color="#2463EB" />
						<stop offset={1} stop-color="#0080B5" />
					</linearGradient>
				</defs>
			</svg>
		</div>
	</Section>
	<Section wFull maxWidth="1024px" class="mt-0 sm:-mt-52 max-sm:!px-0 !px-5 items-center justify-center">
		<div class="flex flex-col justify-center items-center py-12 px-0 sm:py-12">
			<div class="relative isolate overflow-hidden bg-blue-75 pt-6 md:shadow sm:rounded-3xl px-6 md:pt-12 lg:flex lg:gap-x-20 lg:px-16 lg:pt-0 z-50 md:ring-gray-400/50 md:ring-1">
				<svg
					viewBox="0 0 1024 1024"
					class="absolute -z-10 h-[64rem] w-[64rem] [mask-image:radial-gradient(closest-side,white,transparent)] translate-x-64"
					aria-hidden="true">
					<circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
					<defs>
						<radial-gradient id="759c1415-0410-454c-8f7c-9a820de03641">
							<stop stop-color="#7775D6" />
							<stop offset={1} stop-color="#2463EB" />
						</radial-gradient>
					</defs>
				</svg>
				<div class="flex flex-col justify-center items-center lg:justify-start lg:items-start max-w-screen-md text-center lg:py-8 lg:text-left">
					<div class="flex flex-col justify-center items-center">
						<Icon icon="oneconfig" size={48} class="text-navy-peony mb-4"></Icon>
						<Header size="lg" class="text-3xl font-semibold tracking-tight text-navy-peony">
							OneConfig has <br>finally arrived.
						</Header>
					</div>
					<Paragraph class="mt-6 text-lg leading-8 text-gray-700">
						Learn more about what OneConfig is, and how it's revolutionized modding and user experience.
					</Paragraph>
					<div class="mt-10 flex items-center justify-center gap-x-4 lg:justify-start">
						<Button href="/projects/oneconfig" size="sm" iconLeft="oneconfig" style="secondary">Learn more</Button>
						<Button href="/mods" size="sm" iconLeft="link-external" style="secondary">Discover mods</Button>
					</div>
				</div>
				<div class="relative mt-16 h-40 lg:h-80 lg:mt-8 w-full">
					<img
						class="absolute top-0 left-1/2 -translate-x-1/2 lg:top-1/2 lg:-left-12 lg:translate-x-0 max-w-80 rounded-md bg-white/5 ring-1 ring-white/10 pointer-events-none"
						src="/media/oneconfig/page_media_3.svg"
						alt="OneConfig Screenshot"
						width={912}
						height={540}
					/>
				</div>
			</div>
		</div>
	</Section>

	<Section wFull maxWidth="1024px" wrapperClass="bg-blue-100 mb-40" class="-mt-20 flex flex-col">
		<div class="relative isolate overflow-hidden pt-24 mt-10">
			<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
				<div class="mx-auto max-w-2xl lg:mx-0">
					<Header class="text-5xl font-bold tracking-tight text-navy-peony mt-8">Who we are</Header>
					<Paragraph class="mt-3 text-md leading-8 text-navy-peony">
						We're a group of passionate, self-driven designers, developers, and modders creating mods and libraries for the Minecraft community.
					</Paragraph>
				</div>
				<div class="mt-3 flex flex-row gap-y-6 gap-x-8 text-base font-semibold leading-7 text-gray-600 lg:gap-x-10">
					<Button style="secondary" size="sm" iconLeft="link-external">Meet the team</Button>
				</div>
			</div>
		</div>
		<div class="flex justify-start md:justify-end mb-20">
			<div class="flex flex-col">
				<Header class="text-5xl font-bold tracking-tight text-navy-peony mt-8">
					Our commitment
				</Header>
				<Paragraph class="mt-3 text-md leading-8 text-navy-peony">
					Above all, we're committed to bringing quality, open sourced tools built <br> around usability, accessibility to the greater modding community.
				</Paragraph>
				<div class="flex flex-row justify-start items-start mt-3 gap-y-6 text-base font-semibold leading-7 text-brand-600 gap-x-4">
					<Button iconLeft="book-open" size="sm" href="/oss">Why open source?</Button>
					<Button iconLeft="github" style="secondary" size="sm" href={configConst.socials.github}>GitHub</Button>
				</div>
			</div>
		</div>
	</Section>
	<!-- <Section>
		<div class="bg-white pt-12 sm:pt-16">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="max-w-4xl mx-auto text-center">
					<h2 class="text-4xl font-semibold tracking-tight text-gray-800">About our projects</h2>
					<p class="mt-3 text-xl text-gray-500 sm:mt-4"></p>
				</div>
			</div>
			<div class="mt-10 pb-12 bg-white sm:pb-16">
				<div class="relative">
					<div class="absolute inset-0 h-1/2 bg-white" />
					<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
						<div class="max-w-3xl mx-auto">
							<dl class="sm:grid sm:grid-cols-3">
								{lang.home.blocks.stats.items.map((item, index) => (
									<div key={item.name} class="flex flex-col p-3 text-center">
										<dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">{item.name}</dt>
										<dd class="order-1 text-5xl font-extrabold text-brand-600">{humanNumber(item.number)}</dd>
									</div>
								))}
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
	</Section> -->
</Layout>