<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
	import floorsPhoto from '$lib/assets/floors.jpg';
	import kitchensPhoto from '$lib/assets/kitchens.jpg';
</script>

<svelte:head>
	<title>Our Services - Nexus Cleaning Solutions</title>
	<meta
		name="description"
		content="Commercial cleaning services in Macomb County, MI and surrounding areas. Routine janitorial, floor care, commercial kitchen cleaning, and specialty deep cleaning projects."
	/>
</svelte:head>

<!-- Hero Section -->
<section class="py-20 md:py-28">
	<ContentContainer>
		<PublicBackLink class="mb-6" />
		<div class="max-w-3xl">
			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Our Services</h1>
			<p class="mt-6 text-xl text-theme-secondary">
				From routine janitorial maintenance to specialized deep cleaning projects, Nexus
				Cleaning Solutions provides comprehensive commercial cleaning services throughout Macomb
				County and the greater Detroit area.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- Routine Janitorial Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="grid items-center gap-12 md:grid-cols-2">
			<div>
				<div
					class="mb-4 inline-flex items-center gap-2 rounded-full bg-primary-100 px-3 py-1 text-sm font-medium text-primary-700 dark:bg-primary-900 dark:text-primary-300"
				>
					<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="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>
					Recurring Service
				</div>
				<h2 class="mb-4 text-3xl font-bold text-theme">Janitorial Service</h2>
				<p class="mb-6 text-theme-secondary">
					Our core service offering. We work with you to develop a customized scope of work that
					covers every area of your facility, with task frequencies tailored to your needs and
					schedule.
				</p>
				<div class="space-y-3">
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Daily, weekly, and monthly task scheduling</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Restroom cleaning and sanitation</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Trash removal and recycling</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Dusting, vacuuming, and mopping</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Break room and common area maintenance</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-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>
						<span class="text-theme-secondary">Window and glass cleaning (interior)</span>
					</div>
				</div>
			</div>
			<div class="aspect-square overflow-hidden rounded-2xl">
				<img
					src="https://images.unsplash.com/photo-1628177142898-93e36e4e3a50?w=500&h=500&fit=crop"
					alt="Office cleaning service"
					class="h-full w-full object-cover"
				/>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Floor Care Section -->
<section class="py-16">
	<ContentContainer>
		<div class="grid items-center gap-12 md:grid-cols-2">
			<div class="order-2 aspect-square overflow-hidden rounded-2xl md:order-1">
				<img
					src={floorsPhoto}
					alt="Floor care and maintenance"
					class="h-full w-full object-cover"
				/>
			</div>
			<div class="order-1 md:order-2">
				<div
					class="mb-4 inline-flex items-center gap-2 rounded-full bg-secondary-100 px-3 py-1 text-sm font-medium text-secondary-700 dark:bg-secondary-900 dark:text-secondary-300"
				>
					<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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
						/>
					</svg>
					Project-Based
				</div>
				<h2 class="mb-4 text-3xl font-bold text-theme">Floor Care</h2>
				<p class="mb-6 text-theme-secondary">
					Keep your floors looking their best with professional floor care services. Whether you
					need regular maintenance or a complete restoration, we have the equipment and expertise to
					handle it.
				</p>
				<div class="space-y-3">
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-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>
						<span class="text-theme-secondary">Strip and wax (VCT, LVT, and other hard floors)</span
						>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-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>
						<span class="text-theme-secondary">High-speed buffing and burnishing</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-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>
						<span class="text-theme-secondary">Scrub and recoat maintenance</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-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>
						<span class="text-theme-secondary">Carpet extraction and deep cleaning</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-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>
						<span class="text-theme-secondary">Tile and grout cleaning</span>
					</div>
				</div>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Commercial Kitchen Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="grid items-center gap-12 md:grid-cols-2">
			<div>
				<div
					class="mb-4 inline-flex items-center gap-2 rounded-full bg-accent-100 px-3 py-1 text-sm font-medium text-accent-700 dark:bg-accent-900 dark:text-accent-300"
				>
					<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="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>
					Specialty Service
				</div>
				<h2 class="mb-4 text-3xl font-bold text-theme">Commercial Kitchen Cleaning</h2>
				<p class="mb-6 text-theme-secondary">
					A thorough top-down cleaning service for commercial kitchens. We cover everything from
					ceiling tiles to floors, giving your kitchen a deep clean that goes beyond daily
					maintenance.
				</p>
				<div class="space-y-3">
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-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>
						<span class="text-theme-secondary">Ceiling tile cleaning and degreasing</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-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>
						<span class="text-theme-secondary">Wall washing and degreasing</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-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>
						<span class="text-theme-secondary">Equipment exterior cleaning</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-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>
						<span class="text-theme-secondary">Conveyor pizza oven cleaning</span>
					</div>
					<div class="flex items-start gap-3">
						<svg
							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-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>
						<span class="text-theme-secondary">Floor degreasing and deep cleaning</span>
					</div>
				</div>

			</div>
			<div class="aspect-square overflow-hidden rounded-2xl">
				<img
					src={kitchensPhoto}
					alt="Commercial kitchen cleaning"
					class="h-full w-full object-cover"
				/>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Deep Cleaning / Projects Section -->
<section class="py-16">
	<ContentContainer>
		<div class="mb-12 text-center">
			<h2 class="mb-4 text-3xl font-bold text-theme">Specialty & One-Time Projects</h2>
			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
				Beyond our core services, we handle a variety of specialty cleaning projects. If you have a
				unique cleaning need, let's talk.
			</p>
		</div>

		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Impact Cleaning</h3>
				<p class="text-sm text-theme-secondary">
					Intensive deep cleaning to reset your facility. Perfect for spaces that need a fresh start
					or have fallen behind on maintenance.
				</p>
			</div>
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Turnovers / Move-Out Cleaning</h3>
				<p class="text-sm text-theme-secondary">
					Deep cleaning for tenant transitions and property turnovers. We work with property
					managers to get spaces move-in ready.
				</p>
			</div>
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Post-Construction Cleanup</h3>
				<p class="text-sm text-theme-secondary">
					Remove construction dust and debris to prepare your space for occupancy.
				</p>
			</div>
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Window Cleaning</h3>
				<p class="text-sm text-theme-secondary">
					Interior and exterior window cleaning for a spotless finish.
				</p>
			</div>
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Emergency Response</h3>
				<p class="text-sm text-theme-secondary">
					Rapid response cleaning for unexpected situations.
				</p>
			</div>
			<div class="rounded-xl border border-theme bg-theme-card p-5">
				<h3 class="mb-2 font-semibold text-theme">Something Else?</h3>
				<p class="text-sm text-theme-secondary">
					Have a unique cleaning challenge? Give us a call. You'd be surprised what we've tackled.
					We love a good project.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- How It Works Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="mb-12 text-center">
			<h2 class="mb-4 text-3xl font-bold text-theme">How It Works</h2>
			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
				Getting started with Nexus is simple. Here's what to expect.
			</p>
		</div>

		<div class="grid gap-8 md:grid-cols-4">
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
				>
					1
				</div>
				<h3 class="mb-2 font-semibold text-theme">Consultation</h3>
				<p class="text-sm text-theme-secondary">
					We visit your facility to understand your needs and assess the scope of work.
				</p>
			</div>
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
				>
					2
				</div>
				<h3 class="mb-2 font-semibold text-theme">Custom Proposal</h3>
				<p class="text-sm text-theme-secondary">
					You receive a detailed proposal outlining services, frequency, and pricing.
				</p>
			</div>
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
				>
					3
				</div>
				<h3 class="mb-2 font-semibold text-theme">Onboarding</h3>
				<p class="text-sm text-theme-secondary">
					We set up your service schedule and provide access to your customer portal.
				</p>
			</div>
			<div class="text-center">
				<div
					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
				>
					4
				</div>
				<h3 class="mb-2 font-semibold text-theme">Service Begins</h3>
				<p class="text-sm text-theme-secondary">
					Our team arrives on schedule to deliver consistent, quality cleaning.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Service Area Section -->
<section class="py-16">
	<ContentContainer>
		<div class="mb-10 text-center">
			<h2 class="mb-4 text-3xl font-bold text-theme">Proudly Serving Southeast Michigan</h2>
			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
				Based in Macomb County, we provide commercial cleaning services to businesses throughout
				Sterling Heights, Warren, Clinton Township, Shelby Township, and the surrounding
				communities. We also serve Oakland County and the greater Metro Detroit area.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- CTA Section -->
<section class="border-t 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">Let's discuss your cleaning needs</h2>
			<p class="mt-4 text-lg text-theme-secondary">
				Every facility is different. Contact us for a free consultation and customized quote.
			</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"
			>
				Request a Quote
			</a>
		</div>
	</ContentContainer>
</section>
