<script lang="ts">
	import { onMount } from 'svelte';
	const PHRASES = [
		'ABSOLUTE RESILIENCE.',
		'GLOBAL SCALE.',
		'UNBREAKABLE SECURITY.',
		'DEVSECOPS EXCELLENCE.',
		'NEXT-GEN COMPUTE.'
	];

	let index = $state(0);

	onMount(() => {
		const interval = setInterval(() => {
			index = (index + 1) % PHRASES.length;
		}, 4000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<section
	id="home"
	class="hero-gradient relative flex min-h-screen items-center overflow-hidden pt-24"
>
	<!-- Subtle Ambient Light -->
	<div
		class="absolute top-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-cyan-900/10 blur-[120px]"
	></div>

	<div class="relative z-10 container mx-auto px-8">
		<div class="max-w-4xl">
			<div
				class="mb-10 inline-flex items-center space-x-3 rounded-full border border-white/5 bg-white/5 px-5 py-2"
			>
				<span class="h-1.5 w-1.5 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(34,211,238,0.8)]"
				></span>
				<span class="text-[10px] font-bold tracking-[0.3em] text-white/60 uppercase">
					Advanced DevSecOps & Cloud Architecture
				</span>
			</div>

			<h1 class="mb-8 text-6xl leading-[1.05] font-black tracking-tighter text-white md:text-8xl">
				ENGINEERED FOR <br />

				<span class="inline-grid grid-cols-1 grid-rows-1">
					{#each PHRASES as phrase, i (phrase)}
						<span
							style="grid-area: 1 / 1"
							class="transform bg-gradient-to-r from-white via-white to-slate-500 bg-clip-text text-transparent transition-all duration-700 ease-in-out
              {i === index
								? 'translate-y-0 opacity-100'
								: 'pointer-events-none -translate-y-4 opacity-0'}"
						>
							{phrase}
						</span>
					{/each}
				</span>
			</h1>

			<p class="mb-12 max-w-2xl text-xl leading-relaxed font-light text-slate-400">
				ComputeCloud.in architecting the backbone for global enterprises. We specialize in hardened
				DevSecOps pipelines, zero-trust security, and high-velocity migrations.
			</p>

			<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6">
				<a
					href="#contact"
					class="rounded-full bg-white px-10 py-5 text-center text-xs font-black tracking-widest text-black uppercase shadow-2xl shadow-white/5 transition-all hover:scale-105 hover:bg-cyan-500"
				>
					Initiate Consultation
				</a>
			</div>

			<div class="mt-24 grid grid-cols-2 gap-12 border-t border-white/5 pt-12 md:grid-cols-4">
				<div>
					<p class="text-2xl font-black tracking-tighter text-white">ZERO</p>
					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
						Critical Breaches Reported
					</p>
				</div>

				<div>
					<p class="text-2xl font-black tracking-tighter text-white">99.999%</p>
					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
						Availability Target
					</p>
				</div>

				<div>
					<p class="text-2xl font-black tracking-tighter text-white">1200+</p>
					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
						Hardened Deployments
					</p>
				</div>

				<div>
					<p class="text-2xl font-black tracking-tighter text-white">ISO/SOC2</p>
					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
						Compliance Ready
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Background visual element -->
	<div
		class="pointer-events-none absolute top-1/2 right-[-5%] hidden w-1/3 -translate-y-1/2 opacity-20 lg:block"
	>
		<div class="animate-float">
			<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
				<path
					fill="#22D3EE"
					d="M44.7,-76.4C58.3,-69.2,70.1,-58.5,78.2,-45.5C86.3,-32.5,90.7,-17.3,89.5,-2.7C88.2,11.8,81.4,25.7,72.6,38C63.8,50.3,53.1,60.9,40.5,68.1C27.9,75.3,14,79,-0.3,79.5C-14.6,80,-29.2,77.3,-42,70.6C-54.8,63.9,-65.8,53.1,-73.4,40.3C-81,27.5,-85.2,12.7,-84.3,-1.5C-83.3,-15.7,-77.3,-29.3,-68.4,-40.5C-59.5,-51.7,-47.7,-60.5,-35.3,-68.5C-22.9,-76.5,-11.4,-83.7,2.3,-87.6C16.1,-91.5,31.2,-83.6,44.7,-76.4Z"
					transform="translate(100 100)"
				/>
			</svg>
		</div>
	</div>
</section>
