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

<svelte:head>
	<title>The Service Standard - Our Commitment to Excellence</title>
	<meta
		name="description"
		content="The Service Standard of Excellence defines our commitment to quality, consistency, and accountability. Learn what sets Acme Services apart in your area."
	/>
</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">
				The Service Standard
			</h1>
			<p class="mt-6 text-xl text-theme-secondary">
				Excellence isn't a buzzword. It's how we operate. The Service Standard is our promise that
				every service, every visit, and every interaction meets the level of quality your business
				deserves.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- What It Means 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">What It Means</h2>
				<div class="space-y-4 text-theme-secondary">
					<p>
						When we say "Service Standard", we're talking about a measurable commitment, not just
						good intentions. It means your facility gets the same thorough attention whether it's
						our first visit or our hundredth.
					</p>
					<p>
						It means when something isn't right, we make it right. No excuses, no runaround. If
						you're not satisfied with a service, we'll return to address it at no additional cost.
					</p>
					<p>
						This standard exists because we believe <a
							href="/about"
							class="text-primary-600 hover:underline dark:text-primary-400"
							>cleaning work deserves respect</a
						>, and that starts with doing it well. When we hold ourselves to a higher bar, everyone
						benefits: our clients get reliable service, and our team takes pride in work that
						matters.
					</p>
				</div>
			</div>
			<div class="aspect-square overflow-hidden rounded-2xl">
				<img
					src="https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?w=500&h=500&fit=crop"
					alt="Quality cleaning service"
					class="h-full w-full object-cover"
				/>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Pillars Section -->
<section class="py-20">
	<ContentContainer>
		<div class="mb-16 text-center">
			<h2 class="text-3xl font-bold text-theme md:text-4xl">The Four Pillars</h2>
			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
				Every aspect of our service is built on these foundational commitments.
			</p>
		</div>

		<div class="grid gap-8 md:grid-cols-2">
			<!-- Consistency -->
			<div class="rounded-2xl border border-theme bg-theme-card p-8">
				<div
					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900"
				>
					<svg
						class="h-7 w-7 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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				</div>
				<h3 class="mb-3 text-xl font-bold text-theme">Consistency</h3>
				<p class="mb-4 text-theme-secondary">
					A clean building one week and a messy one the next isn't service. It's a gamble. We use
					detailed checklists and documented scopes of work to ensure every task gets completed,
					every time.
				</p>
				<ul class="space-y-2 text-sm text-theme-secondary">
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Documented task lists for every visit</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Same cleaning team when possible</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Routine quality inspections</span>
					</li>
				</ul>
			</div>

			<!-- Accountability -->
			<div class="rounded-2xl border border-theme bg-theme-card p-8">
				<div
					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-secondary-100 dark:bg-secondary-900"
				>
					<svg
						class="h-7 w-7 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="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 2m-6 9l2 2 4-4"
						/>
					</svg>
				</div>
				<h3 class="mb-3 text-xl font-bold text-theme">Accountability</h3>
				<p class="mb-4 text-theme-secondary">
					We own our work. When something falls short, we don't make excuses. We fix it. Our
					satisfaction guarantee means you never pay for service that doesn't meet expectations.
				</p>
				<ul class="space-y-2 text-sm text-theme-secondary">
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Satisfaction guarantee on every service</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Direct line to management</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Rapid response to concerns</span>
					</li>
				</ul>
			</div>

			<!-- Communication -->
			<div class="rounded-2xl border border-theme bg-theme-card p-8">
				<div
					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-accent-100 dark:bg-accent-900"
				>
					<svg
						class="h-7 w-7 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
						/>
					</svg>
				</div>
				<h3 class="mb-3 text-xl font-bold text-theme">Communication</h3>
				<p class="mb-4 text-theme-secondary">
					No surprises, no ghosting. We keep you informed about your service, respond promptly to
					questions, and proactively let you know if anything changes.
				</p>
				<ul class="space-y-2 text-sm text-theme-secondary">
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Customer portal for service tracking</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Prompt responses to inquiries</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>Proactive schedule updates</span>
					</li>
				</ul>
			</div>

			<!-- Professionalism -->
			<div class="rounded-2xl border border-theme bg-theme-card p-8">
				<div
					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-success-100 dark:bg-success-900"
				>
					<svg
						class="h-7 w-7 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
						/>
					</svg>
				</div>
				<h3 class="mb-3 text-xl font-bold text-theme">Professionalism</h3>
				<p class="mb-4 text-theme-secondary">
					We represent your facility when we're in it. Our team arrives prepared, treats your space
					with respect, and conducts themselves in a way that reflects well on both of us.
				</p>
				<ul class="space-y-2 text-sm text-theme-secondary">
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>
						<span>Background-checked team members</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>
						<span>Fully insured operations</span>
					</li>
					<li class="flex items-start gap-2">
						<svg
							class="mt-0.5 h-4 w-4 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>
						<span>Respectful of your space and people</span>
					</li>
				</ul>
			</div>
		</div>
	</ContentContainer>
</section>

<!-- Guarantee Section -->
<section class="border-y border-theme bg-theme-card py-16">
	<ContentContainer>
		<div class="mx-auto max-w-3xl text-center">
			<div
				class="mx-auto mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
			>
				<svg
					class="h-10 w-10 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>
			<h2 class="mb-6 text-3xl font-bold text-theme">Our Guarantee</h2>
			<p class="mb-6 text-lg text-theme-secondary">
				If you're not satisfied with any service we provide, let us know within 24 hours and we'll
				return to make it right, at no additional charge. No fine print, no hoops to jump through.
			</p>
			<p class="text-theme-secondary">
				This isn't just a policy. It's a reflection of how we do business. We'd rather lose money on
				a re-clean than lose your trust.
			</p>
		</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">Experience the difference</h2>
			<p class="mt-4 text-lg text-theme-secondary">
				Ready to see what the Service Standard looks like in your facility? Let's talk.
			</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 Consultation
			</a>
		</div>
	</ContentContainer>
</section>
