<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import heroImage from '$lib/assets/hero.jpg';
</script>

<svelte:head>
	<title>Nexus Cleaning Solutions - Commercial Cleaning Services</title>
	<meta
		name="description"
		content="Professional commercial cleaning services in Macomb County, MI and surrounding areas. Routine janitorial, floor care, and commercial kitchen cleaning for businesses throughout Metro Detroit."
	/>
</svelte:head>

<!-- Hero Section -->
<section class="relative flex min-h-[500px] items-center md:min-h-[600px]">
	<!-- Background Image -->
	<div class="absolute inset-0 z-0">
		<img src={heroImage} alt="Professional cleaning service" class="h-full w-full object-cover" />
		<!-- Overlay for text readability -->
		<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30"></div>
	</div>

	<!-- Content -->
	<ContentContainer>
		<div class="relative z-10 max-w-2xl py-20 md:py-32">
			<h1 class="text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
				We Don't Just Clean.
				<span class="text-primary-300">We Deliver Peace of Mind.</span>
			</h1>
			<p class="mt-6 text-lg text-gray-200 md:text-xl">
				Nexus Cleaning Solutions provides exceptional commercial cleaning and floor care
				services, built on 5 years of experience and specialized expertise. Outstanding workmanship
				and complete client satisfaction, every single time.
			</p>
			<div class="mt-10 flex flex-col gap-4 sm:flex-row">
				<a
					href="/contact"
					class="inline-flex items-center justify-center rounded-lg bg-primary-600 px-6 py-3 font-medium text-white transition-colors hover:bg-primary-700"
				>
					Request a Quote
				</a>
				<a
					href="/services"
					class="inline-flex items-center justify-center rounded-lg border border-white/30 px-6 py-3 font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
				>
					Our Services
				</a>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Services Overview Section -->
<section class="py-20">
	<ContentContainer>
		<div class="mb-16 text-center">
			<h2 class="text-3xl font-bold text-theme md:text-4xl">Comprehensive Cleaning Solutions</h2>
			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
				From daily janitorial services to specialized deep cleaning, we keep your facility spotless
				so you can focus on your business.
			</p>
		</div>

		<div class="grid gap-8 md:grid-cols-3">
			<!-- Service 1 -->
			<div class="rounded-2xl border border-theme bg-theme-card p-6">
				<div
					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900"
				>
					<svg
						class="h-6 w-6 text-primary-600 dark:text-primary-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-xl font-semibold text-theme">Janitorial Service</h3>
				<p class="text-theme-secondary">
					Scheduled cleaning services tailored to your facility. Custom scope of work with task
					frequencies that match your needs: daily, weekly, or monthly.
				</p>
			</div>

			<!-- Service 2 -->
			<div class="rounded-2xl border border-theme bg-theme-card p-6">
				<div
					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 dark:bg-secondary-900"
				>
					<svg
						class="h-6 w-6 text-secondary-600 dark:text-secondary-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-xl font-semibold text-theme">Floor Care</h3>
				<p class="text-theme-secondary">
					Professional floor maintenance including stripping, waxing, buffing, and deep cleaning.
					Keep your floors looking their best year-round.
				</p>
			</div>

			<!-- Service 3 -->
			<div class="rounded-2xl border border-theme bg-theme-card p-6">
				<div
					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-accent-100 dark:bg-accent-900"
				>
					<svg
						class="h-6 w-6 text-accent-600 dark:text-accent-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-xl font-semibold text-theme">Commercial Kitchen</h3>
				<p class="text-theme-secondary">
					Comprehensive kitchen cleaning covering equipment, walls, ceiling tiles, and floors. Keep
					your commercial kitchen spotless and sanitary.
				</p>
			</div>
		</div>

		<div class="mt-12 text-center">
			<a
				href="/services"
				class="inline-flex items-center gap-2 font-medium text-primary-600 hover:underline dark:text-primary-400"
			>
				View all services
				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
				</svg>
			</a>
		</div>
	</ContentContainer>
</section>

<!-- The Nexus Difference -->
<section class="border-y border-theme bg-theme-card py-20">
	<ContentContainer>
		<div class="mb-16 text-center">
			<h2 class="text-3xl font-bold text-theme md:text-4xl">The Nexus Difference</h2>
			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
				From your first call to the final walkthrough, you'll experience clear, professional
				communication and a team that truly listens. Big or small, every project benefits from our
				unwavering commitment to safety, reliability, and top-tier quality.
			</p>
		</div>

		<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
			<!-- No Contracts -->
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
				>
					<svg
						class="h-8 w-8 text-primary-600 dark:text-primary-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">No Contracts</h3>
				<p class="text-sm text-theme-secondary">
					One consultation, then book as needed. Our Nexus Standard guarantees quality at a
					transparent price.
				</p>
			</div>

			<!-- Safe Products -->
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-success-100 dark:bg-success-900"
				>
					<svg
						class="h-8 w-8 text-success-600 dark:text-success-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Safe & Effective</h3>
				<p class="text-sm text-theme-secondary">
					We carefully select our products for a spotless shine that's gentle on your workplace and
					your people.
				</p>
			</div>

			<!-- Easy Scheduling -->
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-secondary-100 dark:bg-secondary-900"
				>
					<svg
						class="h-8 w-8 text-secondary-600 dark:text-secondary-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Easy Scheduling</h3>
				<p class="text-sm text-theme-secondary">
					When cleaning falls off your to-do list, we step in. Book online or call for fast,
					reliable service.
				</p>
			</div>

			<!-- Transparent Pricing -->
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent-100 dark:bg-accent-900"
				>
					<svg
						class="h-8 w-8 text-accent-600 dark:text-accent-400"
						style="fill: none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Transparent Pricing</h3>
				<p class="text-sm text-theme-secondary">
					No hidden fees, no surprises. You'll know exactly what you're paying for before we start.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Our Commitment Section -->
<section class="py-20">
	<ContentContainer>
		<div class="grid items-center gap-12 md:grid-cols-2">
			<div class="aspect-square overflow-hidden rounded-2xl md:aspect-[4/3]">
				<img
					src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=450&fit=crop"
					alt="Professional cleaning team at work"
					class="h-full w-full object-cover"
				/>
			</div>
			<div>
				<h2 class="mb-6 text-3xl font-bold text-theme md:text-4xl">Our Commitment to You</h2>
				<p class="mb-8 text-lg text-theme-secondary">
					We understand that inviting a cleaning team into your business requires trust. That's why
					we're committed to earning it every single day.
				</p>
				<ul class="space-y-4">
					<li class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M5 13l4 4L19 7"
							/>
						</svg>
						<div>
							<span class="font-medium text-theme">Trained & Insured Team</span>
							<p class="text-sm text-theme-secondary">
								Our cleaning professionals are thoroughly trained, background-checked, and fully
								insured.
							</p>
						</div>
					</li>
					<li class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M5 13l4 4L19 7"
							/>
						</svg>
						<div>
							<span class="font-medium text-theme">Customized Cleaning Plans</span>
							<p class="text-sm text-theme-secondary">
								Every facility is different. We build a scope of work around your specific needs and
								schedule.
							</p>
						</div>
					</li>
					<li class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M5 13l4 4L19 7"
							/>
						</svg>
						<div>
							<span class="font-medium text-theme">Customer Portal Access</span>
							<p class="text-sm text-theme-secondary">
								Track services, view reports, and communicate with our team through your online
								account.
							</p>
						</div>
					</li>
					<li class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M5 13l4 4L19 7"
							/>
						</svg>
						<div>
							<span class="font-medium text-theme">The Nexus Standard</span>
							<p class="text-sm text-theme-secondary">
								Our quality guarantee means if you're not satisfied, we'll make it right.
							</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- CTA Section -->
<section class="border-y border-theme bg-theme-card py-20">
	<ContentContainer>
		<div class="mx-auto max-w-2xl text-center">
			<h2 class="text-3xl font-bold text-theme md:text-4xl">Ready for a cleaner facility?</h2>
			<p class="mt-4 text-lg text-theme-secondary">
				Serving businesses throughout Macomb County, Oakland County, and Metro Detroit. Get in touch
				for a free consultation. We'll walk through your space, understand your needs, and build a
				cleaning plan that works for you.
			</p>
			<a
				href="/contact"
				class="mt-8 inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
			>
				Get a Free Quote
			</a>
		</div>
	</ContentContainer>
</section>
