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

<svelte:head>
	<title>About Us - Nexus</title>
	<meta
		name="description"
		content="Learn about Nexus Cleaning Solutions, a Macomb County commercial cleaning company committed to delivering dependable janitorial services throughout Southeast Michigan."
	/>
</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">About Nexus</h1>
			<p class="mt-6 text-xl text-theme-secondary">
				Nexus Cleaning Solutions is a Macomb County-based commercial cleaning company dedicated
				to providing dependable janitorial services, floor care, and specialty cleaning for
				businesses throughout Southeast Michigan.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- Story 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>
				<h2 class="mb-6 text-3xl font-bold text-theme">Our Story</h2>
				<div class="space-y-4 text-theme-secondary">
					<p>
						Nexus Cleaning Solutions was founded on a simple principle: businesses deserve a
						cleaning partner they can rely on. We've built our reputation on showing up when we say
						we will and delivering consistent, quality results.
					</p>
					<p>
						We understand that a clean facility is more than just appearances. It's about creating a
						healthy, productive environment for your employees and a welcoming space for your
						customers.
					</p>
					<p>
						Today, we're proud to serve a growing roster of commercial clients across Macomb County,
						Oakland County, and Metro Detroit. From office buildings and medical facilities to
						restaurants and industrial spaces.
					</p>
				</div>
			</div>
			<div class="aspect-video overflow-hidden rounded-2xl">
				<img
					src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop"
					alt="Professional cleaning team"
					class="h-full w-full object-cover"
				/>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Why We Do This Section -->
<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 Do This</h2>
			<div class="space-y-6 text-lg text-theme-secondary">
				<p>
					Commercial cleaning has a reputation problem. Too often, it's treated as an afterthought,
					something to get done as cheaply as possible, by whoever will do it for less. The result?
					A race to the bottom that hurts everyone: businesses get unreliable service, and the
					people doing the work aren't valued for what they bring.
				</p>
				<p>
					We started Nexus because we believe cleaning deserves better. It's skilled work. It
					keeps people healthy. It makes businesses function. And the people who do it well deserve
					to be paid fairly and treated with respect.
				</p>
				<p>
					That's why we're committed to elevating the standard, not just in how we clean, but in how
					we operate. We pay our team what the work is worth. We invest in proper training and
					equipment. We show up when we say we will. And we stand behind every job with <a
						href="/standard"
						class="text-primary-600 hover:underline dark:text-primary-400"
						>a guarantee that means something</a
					>.
				</p>
				<p>
					This isn't about being the cheapest option. It's about being the partner you can actually
					count on.
				</p>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Values Section -->
<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">Our Values</h2>
			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
				These principles guide everything we do at Nexus.
			</p>
		</div>

		<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
			<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 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">Dependability</h3>
				<p class="text-sm text-theme-secondary">
					We show up on time, every time. You can count on us.
				</p>
			</div>

			<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="M5 13l4 4L19 7"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Quality</h3>
				<p class="text-sm text-theme-secondary">We take pride in our work and never cut corners.</p>
			</div>

			<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="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Communication</h3>
				<p class="text-sm text-theme-secondary">We listen to your needs and keep you informed.</p>
			</div>

			<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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
						/>
					</svg>
				</div>
				<h3 class="mb-2 text-lg font-semibold text-theme">Respect</h3>
				<p class="text-sm text-theme-secondary">We treat your space and your people with care.</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">Ready to work with us?</h2>
			<p class="mt-4 text-lg text-theme-secondary">
				Contact us today for a free consultation and see how Nexus can help keep your facility
				spotless.
			</p>
			<div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
				<a
					href="/contact"
					class="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 in Touch
				</a>
				<a
					href="/pricing"
					class="inline-flex items-center justify-center rounded-lg border border-theme interactive px-8 py-4 font-medium text-theme"
				>
					View Pricing
				</a>
			</div>
		</div>
	</ContentContainer>
</section>
