package sections

templ Highlights() {
	<!-- Features -->
	<section class="relative bg-zinc-50">
		<div class="py-12 md:py-20">
			<div class="max-w-5xl mx-auto px-4 sm:px-6">
				<div class="max-w-3xl mx-auto text-center pb-12">
					<h2
						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
					>
						The Internet Rebuilt for You
					</h2>
					<p class="text-lg text-zinc-500">
						Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while
						providing Developers a cost-effective solution for decentralized authentication.
					</p>
				</div>
				<div x-data="{ tab: '1' }">
					<!-- Tabs buttons -->
					<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
						<button
							:class="tab !== '1' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
							class="text-left px-4 py-5 border border-transparent rounded"
							@click.prevent="tab = '1'"
						>
							<div class="flex items-center justify-between mb-1">
								<div class="font-inter-tight font-semibold text-zinc-900">
									Experience
								</div>
								<svg
									:class="tab !== '1' ? 'hidden' : ''"
									class="fill-zinc-400 shrink-0 ml-2"
									xmlns="http://www.w3.org/2000/svg"
									width="10"
									height="10"
								>
									<path
										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
									></path>
								</svg>
							</div>
							<div class="text-sm text-zinc-500">
								Sonr is completely designed to be frictionless for every kind of user.
							</div>
						</button>
						<button
							:class="tab !== '2' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
							class="text-left px-4 py-5 border border-transparent rounded"
							@click.prevent="tab = '2'"
						>
							<div class="flex items-center justify-between mb-1">
								<div class="font-inter-tight font-semibold text-zinc-900">
									Compliance
								</div>
								<svg
									:class="tab !== '2' ? 'hidden' : ''"
									class="fill-zinc-400 shrink-0 ml-2"
									xmlns="http://www.w3.org/2000/svg"
									width="10"
									height="10"
								>
									<path
										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
									></path>
								</svg>
							</div>
							<div class="text-sm text-zinc-500">
								Sonr is managed by a USA-based Wyoming DUNA, which is fully compliant with the GDPR.
							</div>
						</button>
						<button
							:class="tab !== '3' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
							class="text-left px-4 py-5 border border-transparent rounded"
							@click.prevent="tab = '3'"
						>
							<div class="flex items-center justify-between mb-1">
								<div class="font-inter-tight font-semibold text-zinc-900">
									Interoperability
								</div>
								<svg
									:class="tab !== '3' ? 'hidden' : ''"
									class="fill-zinc-400 shrink-0 ml-2"
									xmlns="http://www.w3.org/2000/svg"
									width="10"
									height="10"
								>
									<path
										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
									></path>
								</svg>
							</div>
							<div class="text-sm text-zinc-500">
								Sonr is designed to work cross-platform, cross-network, and cross-chain.
							</div>
						</button>
						<button
							:class="tab !== '4' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
							class="text-left px-4 py-5 border border-transparent rounded"
							@click.prevent="tab = '4'"
						>
							<div class="flex items-center justify-between mb-1">
								<div class="font-inter-tight font-semibold text-zinc-900">
									Security
								</div>
								<svg
									:class="tab !== '4' ? 'hidden' : ''"
									class="fill-zinc-400 shrink-0 ml-2"
									xmlns="http://www.w3.org/2000/svg"
									width="10"
									height="10"
								>
									<path
										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
									></path>
								</svg>
							</div>
							<div class="text-sm text-zinc-500">
								Sonr eliminates 99.9% of attack vectors with its quantum-resistant encryption.
							</div>
						</button>
					</div>
					<!-- Tabs items -->
					<div
						class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6"
					>
						<div class="relative flex flex-col pt-12 md:pt-20 mx-6">
							<!-- Item 1 -->
							<div
								class="w-full text-center"
								x-show="tab === '1'"
								x-transition:enter="transition ease-in-out duration-700 transform order-first"
								x-transition:enter-start="opacity-0 -translate-y-4"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in-out duration-300 transform absolute"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 translate-y-4"
							>
								<div class="inline-flex relative align-top">
									<img
										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
										src="./images/feature-01.png"
										width="600"
										height="360"
										alt="Feature 01"
									/>
								</div>
							</div>
							<!-- Item 2 -->
							<div
								class="w-full text-center"
								x-show="tab === '2'"
								x-transition:enter="transition ease-in-out duration-700 transform order-first"
								x-transition:enter-start="opacity-0 -translate-y-4"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in-out duration-300 transform absolute"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 translate-y-4"
							>
								<div class="inline-flex relative align-top">
									<img
										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
										src="./images/feature-01.png"
										width="600"
										height="360"
										alt="Feature 02"
									/>
								</div>
							</div>
							<!-- Item 3 -->
							<div
								class="w-full text-center"
								x-show="tab === '3'"
								x-transition:enter="transition ease-in-out duration-700 transform order-first"
								x-transition:enter-start="opacity-0 -translate-y-4"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in-out duration-300 transform absolute"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 translate-y-4"
							>
								<div class="inline-flex relative align-top">
									<img
										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
										src="./images/feature-01.png"
										width="600"
										height="360"
										alt="Feature 03"
									/>
								</div>
							</div>
							<!-- Item 4 -->
							<div
								class="w-full text-center"
								x-show="tab === '4'"
								x-transition:enter="transition ease-in-out duration-700 transform order-first"
								x-transition:enter-start="opacity-0 -translate-y-4"
								x-transition:enter-end="opacity-100 translate-y-0"
								x-transition:leave="transition ease-in-out duration-300 transform absolute"
								x-transition:leave-start="opacity-100 translate-y-0"
								x-transition:leave-end="opacity-0 translate-y-4"
							>
								<div class="inline-flex relative align-top">
									<img
										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
										src="./images/feature-01.png"
										width="600"
										height="360"
										alt="Feature 04"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
}