import { createFileRoute, Link, notFound } from "@tanstack/react-router"; import { ArrowRight, Check, ChevronDown, Phone, Zap } from "lucide-react"; import { getService, services, type Service } from "@/data/services"; import { CtaBand } from "@/components/cta-band"; import { TrustBanner } from "@/components/trust-banner"; export const Route = createFileRoute("/services/$slug")({ loader: ({ params }) => { const service = getService(params.slug); if (!service) throw notFound(); return { service }; }, head: ({ loaderData }) => { const s = loaderData?.service; if (!s) return {}; const title = `${s.name} in Utah | O'Bray Electric`; const desc = `${s.short} Serving Salt Lake, Tooele, and Utah counties.`; return { meta: [ { title }, { name: "description", content: desc }, { property: "og:title", content: title }, { property: "og:description", content: desc }, ], links: [{ rel: "canonical", href: `/services/${s.slug}` }], }; }, component: ServiceDetail, }); function ServiceDetail() { const { service } = Route.useLoaderData() as { service: Service }; const related = services.filter((s) => s.category === service.category && s.slug !== service.slug).slice(0, 3); return ( <>

{service.category} · Utah

{service.name} in Utah

{service.short}

Overview

{service.name} done right, the first time.

{service.description}

{service.bullets.map((b) => (
{b}
))}
{service.faqs.length > 0 && (

Frequently asked

About {service.name.toLowerCase()}.

{service.faqs.map((f) => (
{f.q}

{f.a}

))}
)}
); }