<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
</script>

<svelte:head>
	<title>Pricing - Nexus Cleaning Solutions</title>
	<meta
		name="description"
		content="Transparent commercial cleaning pricing in Macomb County. Learn how janitorial service costs are determined and what factors affect your quote."
	/>
</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">
				Honest Pricing, No Surprises
			</h1>
			<p class="mt-6 text-xl text-theme-secondary">
				Commercial cleaning isn't one-size-fits-all, and neither is pricing. Here's a transparent
				look at how we determine costs and what you can expect when working with us.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- The Reality Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="max-w-3xl">
			<h2 class="mb-6 text-3xl font-bold text-theme">The Reality of Cleaning Costs</h2>
			<div class="space-y-4 text-theme-secondary">
				<p>
					Let's be upfront: quality commercial cleaning has real costs. Professional-grade
					chemicals, reliable equipment, trained staff, insurance, and the simple reality of getting
					to your location all factor into what you pay.
				</p>
				<p>
					We've seen the race to the bottom in this industry. Companies quoting impossibly low
					prices, then cutting corners or disappearing entirely. That's not how we operate. Our
					pricing reflects the true cost of doing the job right, consistently, with people who are
					paid fairly for their work.
				</p>
				<p>
					What you get in return is peace of mind. A cleaning partner who shows up, does the work
					properly, and stands behind it.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Janitorial Pricing Section -->
<section class="py-20">
	<ContentContainer>
		<div class="grid gap-12 lg: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 Accounts</h2>
				<p class="mb-6 text-theme-secondary">
					Our routine janitorial service starts at <span class="font-semibold text-theme"
						>$400/month</span
					>. This baseline typically covers:
				</p>
				<ul class="mb-8 space-y-3">
					<li 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"
							>Smaller facilities up to approximately 5,000 sq ft</span
						>
					</li>
					<li 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">Once-per-week service frequency</span>
					</li>
					<li 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">Single-stall restroom facilities</span>
					</li>
					<li 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">Standard office/retail cleaning scope</span>
					</li>
				</ul>
				<p class="text-sm text-theme-secondary">
					This represents our sweet spot: facilities that aren't so large they need a dedicated
					crew, but substantial enough to benefit from professional service. It's the kind of
					building where the owner or manager has real work to do and shouldn't be spending their
					evenings emptying trash cans.
				</p>
			</div>

			<div class="rounded-2xl border border-theme bg-theme-card p-8">
				<h3 class="mb-6 text-xl font-bold text-theme">What Affects Your Price</h3>
				<div class="space-y-6">
					<div>
						<h4 class="mb-2 font-semibold text-theme">Square Footage</h4>
						<p class="text-sm text-theme-secondary">
							More space means more time. A 15,000 sq ft facility costs more than a 3,000 sq ft
							office. That's just physics.
						</p>
					</div>
					<div>
						<h4 class="mb-2 font-semibold text-theme">Service Frequency</h4>
						<p class="text-sm text-theme-secondary">
							Once a week is our baseline. Twice weekly, three times, or daily service scales the
							price accordingly.
						</p>
					</div>
					<div>
						<h4 class="mb-2 font-semibold text-theme">Restroom Count & Complexity</h4>
						<p class="text-sm text-theme-secondary">
							A single-stall bathroom is quick. A facility with multiple multi-stall restrooms
							requires significantly more time and supplies.
						</p>
					</div>
					<div>
						<h4 class="mb-2 font-semibold text-theme">Facility Type</h4>
						<p class="text-sm text-theme-secondary">
							Medical offices have different requirements than retail stores. Industrial spaces
							differ from professional offices. We tailor our approach and pricing accordingly.
						</p>
					</div>
					<div>
						<h4 class="mb-2 font-semibold text-theme">Scope of Work</h4>
						<p class="text-sm text-theme-secondary">
							Basic cleaning vs. detailed cleaning. Standard tasks vs. specialized needs. Your scope
							determines your price.
						</p>
					</div>
				</div>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Project Pricing Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="grid gap-12 lg:grid-cols-2">
			<div class="order-2 rounded-2xl border border-theme bg-theme p-8 lg:order-1">
				<h3 class="mb-6 text-xl font-bold text-theme">What Goes Into the Price</h3>
				<div class="space-y-6">
					<div class="border-b border-theme pb-6">
						<div class="mb-2 flex items-baseline justify-between">
							<h4 class="font-semibold text-theme">Minimum Project Cost</h4>
							<span class="text-2xl font-bold text-primary-600 dark:text-primary-400">$300</span>
						</div>
						<p class="text-sm text-theme-secondary">
							For smaller, straightforward projects under ideal conditions.
						</p>
					</div>
					<div>
						<p class="mb-4 text-sm text-theme-secondary">
							Every project has real costs before we even start cleaning: professional-grade
							chemicals, equipment, transportation, and the expertise to use them properly.
						</p>
						<p class="text-sm text-theme-secondary">
							We price our work to reflect what it actually costs to do it right and to pay our team
							fairly for skilled work. That's not an apology. It's a commitment to <a
								href="/standard"
								class="text-primary-600 hover:underline dark:text-primary-400"
								>the standard we hold ourselves to</a
							>.
						</p>
					</div>
				</div>
			</div>

			<div class="order-1 lg: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>
					One-Time Projects
				</div>
				<h2 class="mb-4 text-3xl font-bold text-theme">Project-Based Work</h2>
				<p class="mb-6 text-theme-secondary">
					Floor care, deep cleans, post-construction cleanup, and other one-time projects start as
					low as <span class="font-semibold text-theme">$300</span>, depending on the scope and
					circumstances.
				</p>
				<p class="mb-6 text-theme-secondary">
					Project pricing varies more than recurring service because the variables are endless. A
					small office floor strip-and-wax is very different from a restaurant kitchen deep clean or
					a post-renovation cleanup.
				</p>
				<p class="text-theme-secondary">
					We provide detailed quotes after understanding exactly what you need. No ballpark figures
					that balloon later. Just honest pricing based on the actual work involved.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Why We Don't Race to the Bottom -->
<section class="py-20">
	<ContentContainer>
		<div class="mx-auto max-w-3xl">
			<h2 class="mb-6 text-center text-3xl font-bold text-theme">
				Why We Don't Race to the Bottom
			</h2>
			<div class="space-y-6 text-theme-secondary">
				<p>
					You can find cheaper cleaning services. We know that. There's always someone willing to
					quote less, pay their workers less, skip the insurance, or cut corners on supplies.
				</p>
				<p>
					Here's what we've learned in this industry: you get what you pay for. The company quoting
					half our price often delivers half the service, if they show up at all. We've taken over
					accounts from bargain providers more times than we can count, always hearing the same
					story: inconsistent service, missed cleanings, poor communication, and eventually, just...
					nothing.
				</p>
				<p>
					Our pricing reflects what it actually costs to run a professional operation. We pay our
					team fairly. We carry proper insurance. We use quality products. We answer our phones. We
					show up.
				</p>
				<p>
					This isn't just about business. It's about respect for the work itself. Cleaning is
					skilled labor that keeps workplaces healthy, safe, and functional. It deserves to be done
					well and compensated fairly. That belief is at the core of <a
						href="/about"
						class="text-primary-600 hover:underline dark:text-primary-400">who we are</a
					>.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Quote Process 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">Getting Your Quote</h2>
			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
				We don't do blind quotes. Here's our process for getting you accurate pricing.
			</p>
		</div>

		<div class="mx-auto grid max-w-4xl gap-8 md:grid-cols-3">
			<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">Initial Conversation</h3>
				<p class="text-sm text-theme-secondary">
					Tell us about your facility and what you're looking for. We'll ask questions to understand
					your needs.
				</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">Site Walkthrough</h3>
				<p class="text-sm text-theme-secondary">
					We visit your location to see the space firsthand. This is how we give you an accurate
					quote, not a guess.
				</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">Detailed Proposal</h3>
				<p class="text-sm text-theme-secondary">
					You receive a clear proposal outlining exactly what's included, how often, and what it
					costs. No hidden fees.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- CTA Section -->
<section class="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 talk numbers</h2>
			<p class="mt-4 text-lg text-theme-secondary">
				Every facility is different. Contact us for a free walkthrough and honest quote. No
				obligation, no pressure.
			</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>
