89:I[903690,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/1d27mj4qznfw8.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/262yb2pe9fy9_.js","/chat-static/_next/static/immutable/chunks/3b3l5lmcnswqe.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/01etxn2ecg_6v.js","/chat-static/_next/static/immutable/chunks/29i4a2o6wnoak.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3i1puq8mkpe_5.js","/chat-static/_next/static/immutable/chunks/2ctxmc2asjzvh.js","/chat-static/_next/static/immutable/chunks/23as0qwiyp1ai.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/230ic2p60gqrp.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/2-ed33pdk-vzd.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/3q6tj5ri-dhhq.js"],"ExplicitChatIdProvider"] 8a:I[838238,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/1d27mj4qznfw8.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/262yb2pe9fy9_.js","/chat-static/_next/static/immutable/chunks/3b3l5lmcnswqe.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/01etxn2ecg_6v.js","/chat-static/_next/static/immutable/chunks/29i4a2o6wnoak.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3i1puq8mkpe_5.js","/chat-static/_next/static/immutable/chunks/2ctxmc2asjzvh.js","/chat-static/_next/static/immutable/chunks/23as0qwiyp1ai.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/230ic2p60gqrp.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/2-ed33pdk-vzd.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/3q6tj5ri-dhhq.js"],"SWRDataProvider"] 8c:[] 8d:[["b_xClB0OAgY00",null],["b_Yaf7gOL6zZF",null],["b_8pqLF6kdqa5",null]] 8e:[["b_xClB0OAgY00",{"templateVersionId":null,"templateCanonId":null}],["b_Yaf7gOL6zZF",{"templateVersionId":null,"templateCanonId":null}],["b_8pqLF6kdqa5",{"templateVersionId":null,"templateCanonId":null}]] 8f:[["uw7m66DArAg","$D2025-04-05T20:53:42.011Z"],["b_HGv8CWEUOfl","$D2025-04-08T16:37:40.644Z"],["b_N1jSItNh1ep","$D2025-04-08T17:20:01.350Z"],["b_MisBDTHHbe3","$D2025-04-08T17:27:40.369Z"],["b_4uDeNi0iksE","$D2025-04-08T17:36:24.466Z"],["b_ORvOuJMbOc5","$D2025-04-08T17:45:31.844Z"],["b_WZKGiIxudwL","$D2025-04-08T17:55:04.137Z"],["b_oSQEqsgEzQS","$D2025-04-08T18:51:03.958Z"],["b_JCGWNV7i1H8","$D2025-04-08T18:58:08.849Z"],["b_Z1UljGMLRj2","$D2025-04-08T19:01:51.234Z"],["b_brH0CCSID3G","$D2025-05-01T17:29:18.030Z"],["b_ZjlkW3jJ8ms","$D2025-05-01T17:36:18.908Z"],["b_1CsMhO4utZh","$D2025-05-01T17:48:16.762Z"],["b_MwOinGa95m1","$D2025-05-19T18:04:31.640Z"],["b_7H1nMR0qaSl","$D2025-05-19T18:17:07.046Z"],["b_y5aAU65uS88","$D2025-05-19T18:25:44.559Z"],["b_AB6qLGHmGA6","$D2025-05-19T18:28:23.409Z"],["b_e6MLHhObJta","$D2025-05-19T18:40:03.919Z"],["b_6wT7jXTlK19","$D2025-05-19T18:43:36.159Z"],["b_CGyQzsqBxBO","$D2025-05-19T18:48:59.952Z"],["b_rF00MroVcU4","$D2025-05-19T19:00:49.884Z"],["b_4YpVgne0UoI","$D2025-09-25T19:48:09.460Z"],["b_3p7wyJujlmv","$D2025-09-25T20:12:29.719Z"],["b_kCWBU1JuINp","$D2025-09-25T20:14:48.539Z"],["b_xClB0OAgY00","$D2025-09-25T20:27:54.325Z"],["b_Yaf7gOL6zZF","$D2025-09-25T20:29:16.276Z"],["b_8pqLF6kdqa5","$D2025-09-26T20:37:46.096Z"]] 90:[["b_xClB0OAgY00",false],["b_Yaf7gOL6zZF",false],["b_8pqLF6kdqa5",false]] 91:[["b_xClB0OAgY00","$undefined"],["b_Yaf7gOL6zZF",{"deploymentId":"dpl_9qohxj8EEJyY12A2jxfHCX68bXjB"}],["b_8pqLF6kdqa5",{"deploymentId":"dpl_531cBpPQVziCYzoeqeEi2HLmpDDX"}]] 92:[["b_xClB0OAgY00",null],["b_Yaf7gOL6zZF",null],["b_8pqLF6kdqa5",null]] 93:[["b_xClB0OAgY00",true],["b_Yaf7gOL6zZF",true],["b_8pqLF6kdqa5",true]] 94:[["b_xClB0OAgY00",true],["b_Yaf7gOL6zZF",true],["b_8pqLF6kdqa5",true]] 95:[] 96:T30345,[V0_FILE]typescriptreact:file="app/subscribe/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]plaintext:file="public/images/concrete-cleaning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Concrete-Cleaning-1024x675.jpg-Ncygb8ehRvoEUPeFbPHdHqYRIooeJE.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/patio-cleaning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pressure-washing-jobs.jpg-PFFonfdULzN1lDJYoMmbL1SUMeWF0A.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/house-siding.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/house-siding-powerwashing-copy.jpg-t3Kw2V8lsr8jO2d3OvbSQxAOKC6Nr7.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/pavers-cleaning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/homeguide-pressure-washing-concrete-sidewalk-bricks-before-and-after.jpg-s0bLfVJFfVluKM84fqL0U0BqW6Jz3V.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/driveway-cleaning.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/AdobeStock_179729415_2_720x-htwFjrwF7ZDzUrhuwODo9Qk3xNcj8d.webp" isMerged="true"
[V0_FILE]plaintext:file="public/images/siding-closeup.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Importance-of-Pressure-Washing-Before-Painting-Your-House.jpg-ISYUlv6h0Esb71q2neUmpHeEsB5zcd.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/before-after.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/House-Washing-Pressure-Washing-Service-Hudsonville-MI.jpg-DcZf7T9ZRnWinrfHbuS1brJEydnmMX.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/subscribe/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { ArrowLeft, Calendar, CheckCircle, CreditCard, Droplets } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const plans = [
  {
    id: "basic",
    name: "Basic Plan",
    monthlyPrice: "99",
    annualPrice: "1188",
    annualDiscountPrice: "999",
    oneTimePrice: "299",
    oneTimeDiscountPrice: "254",
    description: "",
    features: ["Bi-monthly service", "Driveway & walkway cleaning", "Front porch washing", "Email support"],
  },
  {
    id: "standard",
    name: "Standard Plan",
    monthlyPrice: "159",
    annualPrice: "1908",
    annualDiscountPrice: "1718",
    oneTimePrice: "599",
    oneTimeDiscountPrice: "509",
    description: "",
    features: [
      "Monthly service",
      "Full exterior house washing (once per year)",
      "Driveway & walkway cleaning",
      "Deck or patio cleaning",
      "Priority scheduling",
      "Phone & email support",
    ],
    popular: true,
  },
  {
    id: "premium",
    name: "Premium Plan",
    monthlyPrice: "199",
    annualPrice: "2388",
    annualDiscountPrice: "1999",
    oneTimePrice: "699",
    oneTimeDiscountPrice: "595",
    description: "",
    features: [
      "Monthly service",
      "Full exterior house washing (once per year)",
      "Driveway, walkway & patio cleaning",
      "Gutter cleaning (once per year)",
      "Window washing (once per year)",
      "24/7 priority support",
      "Dedicated account manager",
    ],
  },
  {
    id: "commercial",
    name: "Commercial Plan",
    description: "For business properties",
    features: [
      "Custom cleaning schedule",
      "Tailored service package",
      "Dedicated account manager",
      "Priority scheduling",
      "24/7 support",
      "Customized reporting",
    ],
    isCommercial: true,
  },
]

export default function SubscribePage() {
  const searchParams = useSearchParams()
  const [selectedPlan, setSelectedPlan] = useState("standard")
  const [activeTab, setActiveTab] = useState("plan")
  const [paymentType, setPaymentType] = useState("annual") // "annual", "monthly", or "onetime"
  const [isNewCustomer, setIsNewCustomer] = useState(false)

useEffect(() => {
    const planParam = searchParams.get("plan")
    const typeParam = searchParams.get("type")

if (planParam && plans.some((plan) => plan.id === planParam)) {
      setSelectedPlan(planParam)
      setActiveTab("details")
    }

if (typeParam === "onetime") {
      setPaymentType("onetime")
    } else if (typeParam === "subscription") {
      setPaymentType("annual") // Default to annual for subscriptions
    }
  }, [searchParams])

const handlePlanSelect = (planId: string) => {
    setSelectedPlan(planId)
    setActiveTab("details")
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setActiveTab("schedule")
  }

const handleScheduleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setActiveTab("payment")
  }

const handlePaymentSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setActiveTab("confirmation")
  }

const calculatePrice = (plan: any, paymentType: string, isNewCustomer: boolean) => {
    if (!plan) return { original: "0", final: "0" }

if (plan.isCommercial) {
      return { original: "Custom", final: "Custom" }
    }

let price = 0
    let originalPrice = 0

if (paymentType === "monthly") {
      // Monthly price
      price = Number.parseFloat(plan.monthlyPrice)
      originalPrice = price
      return {
        original: `${originalPrice.toFixed(2)}`,
        final: `${price.toFixed(2)}`,
      }
    } else if (paymentType === "annual") {
      // Annual payment with discount
      originalPrice = Number.parseFloat(plan.annualPrice)
      price = Number.parseFloat(plan.annualDiscountPrice)
      return {
        original: `${originalPrice.toFixed(2)}`,
        final: `${price.toFixed(2)}`,
      }
    } else {
      // One-time payment
      originalPrice = Number.parseFloat(plan.oneTimePrice)

if (isNewCustomer) {
        price = Number.parseFloat(plan.oneTimeDiscountPrice)
      } else {
        price = originalPrice
      }

return {
        original: `${originalPrice.toFixed(2)}`,
        final: `${price.toFixed(2)}`,
      }
    }
  }

const getSelectedPlanData = () => {
    return plans.find((p) => p.id === selectedPlan) || plans[1] // Default to standard if not found
  }

return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
              Services
            </Link>
            <Link href="/#pricing" className="text-sm font-medium hover:underline underline-offset-4">
              Pricing
            </Link>
            <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
              Testimonials
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
              Contact
            </Link>
          </nav>
        </div>
      </header>

{/* Visual Banner */}
      <div className="w-full overflow-hidden h-48 md:h-64 lg:h-80 mb-8">
        <div className="relative w-full h-full">
          <img
            src="/images/concrete-cleaning.png"
            alt="Professional power washing service"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-blue-900/30 flex items-center justify-center">
            <h2 className="text-white text-2xl md:text-3xl lg:text-4xl font-bold text-center px-4">
              Choose Your Perfect Power Washing Plan
            </h2>
          </div>
        </div>
      </div>

<main className="flex-1 py-12">
        <div className="container px-4 md:px-6">
          <div className="mb-8">
            <Link href="/" className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800">
              <ArrowLeft className="h-4 w-4" />
              Back to Home
            </Link>
            <h1 className="mt-4 text-3xl font-bold tracking-tight">Subscribe to JetGlowWash</h1>
            <p className="mt-2 text-gray-500">
              Choose your plan, provide your details, and schedule your first service.
            </p>
          </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full max-w-4xl mx-auto">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="plan">1. Select Plan</TabsTrigger>
              <TabsTrigger value="details">2. Your Details</TabsTrigger>
              <TabsTrigger value="schedule">3. Schedule</TabsTrigger>
              <TabsTrigger value="payment">4. Payment</TabsTrigger>
            </TabsList>

<TabsContent value="plan" className="mt-6">
              {/* Payment Type Selector */}
              <div className="mb-8">
                <h3 className="text-lg font-medium mb-4">Choose your payment option:</h3>
                <div className="flex flex-wrap gap-4">
                  <div
                    className={`border rounded-lg p-4 cursor-pointer flex-1 min-w-[200px] ${paymentType === "annual" ? "border-blue-600 bg-blue-50" : ""}`}
                    onClick={() => setPaymentType("annual")}
                  >
                    <h4 className="font-medium">Annual Payment</h4>
                    <p className="text-sm text-gray-500">Pay for the full year upfront and save 10%</p>
                    <div className="mt-2 inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                      10% DISCOUNT
                    </div>
                  </div>
                  <div
                    className={`border rounded-lg p-4 cursor-pointer flex-1 min-w-[200px] ${paymentType === "monthly" ? "border-blue-600 bg-blue-50" : ""}`}
                    onClick={() => setPaymentType("monthly")}
                  >
                    <h4 className="font-medium">Monthly Billing</h4>
                    <p className="text-sm text-gray-500">Pay monthly with 1-year commitment</p>
                  </div>
                  <div
                    className={`border rounded-lg p-4 cursor-pointer flex-1 min-w-[200px] ${paymentType === "onetime" ? "border-blue-600 bg-blue-50" : ""}`}
                    onClick={() => setPaymentType("onetime")}
                  >
                    <h4 className="font-medium">One-Time Service</h4>
                    <p className="text-sm text-gray-500">Single service without subscription</p>
                    {paymentType === "onetime" && (
                      <div className="mt-2 flex items-center gap-2">
                        <input
                          type="checkbox"
                          id="new-customer"
                          checked={isNewCustomer}
                          onChange={(e) => setIsNewCustomer(e.target.checked)}
                          className="h-4 w-4 rounded border-gray-300"
                        />
                        <label htmlFor="new-customer" className="text-sm">
                          I'm a new customer (15% discount)
                        </label>
                      </div>
                    )}
                  </div>
                </div>
              </div>

<p className="text-xs text-gray-500 mb-4 text-center">
                All pricing is for small standard homes. Prices may vary depending on the size of the home.
              </p>

<div className="grid gap-6 md:grid-cols-3">
                {plans.map((plan) => {
                  const priceInfo = calculatePrice(plan, paymentType, isNewCustomer)

return (
                    <Card
                      key={plan.id}
                      className={`flex flex-col ${plan.popular ? "border-blue-600" : ""} ${selectedPlan === plan.id ? "ring-2 ring-blue-600" : ""}`}
                    >
                      <CardHeader className={plan.popular ? "bg-blue-50 rounded-t-lg" : ""}>
                        {plan.popular && (
                          <div className="py-1 px-3 text-xs font-medium text-white bg-blue-600 rounded-full w-fit mx-auto">
                            MOST POPULAR
                          </div>
                        )}
                        <CardTitle className={plan.popular ? "mt-2" : ""}>{plan.name}</CardTitle>
                        <CardDescription>{plan.description}</CardDescription>

{!plan.isCommercial && (
                          <div className="mt-4">
                            {paymentType === "monthly" && (
                              <div>
                                <div className="text-3xl font-bold">
                                  ${plan.monthlyPrice}
                                  <span className="text-sm font-normal text-gray-500">/month</span>
                                </div>
                                <p className="text-sm text-gray-500 mt-1">with 1-year commitment</p>
                                <p className="text-sm text-gray-500 mt-1">(${plan.annualPrice} total)</p>
                              </div>
                            )}

{paymentType === "annual" && (
                              <div>
                                <div className="flex items-center justify-center gap-2">
                                  <span className="text-sm line-through text-gray-400">${plan.annualPrice}</span>
                                  <div className="text-3xl font-bold">${plan.annualDiscountPrice}</div>
                                </div>
                                <p className="text-sm text-gray-500 mt-1">billed annually (save ~15%)</p>
                              </div>
                            )}

{paymentType === "onetime" && (
                              <div>
                                {isNewCustomer ? (
                                  <div className="flex items-center justify-center gap-2">
                                    <span className="text-sm line-through text-gray-400">${plan.oneTimePrice}</span>
                                    <div className="text-3xl font-bold">${plan.oneTimeDiscountPrice}</div>
                                  </div>
                                ) : (
                                  <div className="text-3xl font-bold">${plan.oneTimePrice}</div>
                                )}
                                <p className="text-sm text-gray-500 mt-1">one-time service</p>
                                {isNewCustomer && (
                                  <div className="mt-1 inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                                    15% NEW CUSTOMER DISCOUNT
                                  </div>
                                )}
                              </div>
                            )}
                          </div>
                        )}

{plan.isCommercial && <div className="mt-4 text-xl font-bold">Custom Pricing</div>}
                      </CardHeader>

<CardContent className="flex-1">
                        <ul className="space-y-2">
                          {plan.features.map((feature, index) => (
                            <li key={index} className="flex items-center gap-2">
                              <CheckCircle className="h-4 w-4 text-green-500" />
                              <span>{feature}</span>
                            </li>
                          ))}
                        </ul>
                      </CardContent>

<CardFooter>
                        {!plan.isCommercial ? (
                          <Button
                            className={`w-full ${plan.popular ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                            onClick={() => handlePlanSelect(plan.id)}
                          >
                            Select Plan
                          </Button>
                        ) : (
                          <Link href="/contact?type=commercial" className="w-full">
                            <Button className="w-full">Contact for Custom Quote</Button>
                          </Link>
                        )}
                      </CardFooter>
                    </Card>
                  )
                })}
              </div>
            </TabsContent>

<TabsContent value="details" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Your Details</CardTitle>
                  <CardDescription>Please provide your contact and property information.</CardDescription>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="first-name">First Name</Label>
                          <Input id="first-name" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="last-name">Last Name</Label>
                          <Input id="last-name" required />
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" type="email" required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        <Input id="phone" type="tel" required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="address">Street Address</Label>
                        <Input id="address" required />
                      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="city">City</Label>
                          <Input id="city" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="state">State</Label>
                          <Input id="state" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="zip">ZIP Code</Label>
                          <Input id="zip" required />
                        </div>
                      </div>

<div className="space-y-2">
                        <Label>Property Type</Label>
                        <RadioGroup defaultValue="residential" className="flex flex-col space-y-1">
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="residential" id="residential" />
                            <Label htmlFor="residential">Residential</Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="commercial" id="commercial" />
                            <Label htmlFor="commercial">Commercial</Label>
                          </div>
                        </RadioGroup>
                      </div>
                    </div>

{selectedPlan === "premium" && activeTab === "details" && (
                      <div className="mt-4 p-4 bg-purple-50 rounded-md">
                        <h4 className="font-medium text-purple-800 mb-2">Note About Premium Services</h4>
                        <p className="text-sm text-purple-700">
                          Heavy work services (gutter cleaning and exterior window cleaning) are performed once per
                          year. Other months will include regular cleaning services.
                        </p>
                      </div>
                    )}

<div className="flex justify-end">
                      <Button type="submit">Continue to Scheduling</Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="schedule" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Schedule Your Service</CardTitle>
                  <CardDescription>Choose when you'd like your first service to begin.</CardDescription>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleScheduleSubmit} className="space-y-6">
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="preferred-date">Preferred Start Date</Label>
                        <div className="flex items-center">
                          <Input id="preferred-date" type="date" required className="rounded-r-none" />
                          <div className="bg-muted p-2 border border-l-0 border-input rounded-r-md">
                            <Calendar className="h-5 w-5 text-muted-foreground" />
                          </div>
                        </div>
                      </div>

<div className="space-y-2">
                        <Label>Preferred Time of Day</Label>
                        <RadioGroup defaultValue="morning" className="flex flex-col space-y-1">
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="morning" id="morning" />
                            <Label htmlFor="morning">Morning (8am - 12pm)</Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="afternoon" id="afternoon" />
                            <Label htmlFor="afternoon">Afternoon (12pm - 4pm)</Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="evening" id="evening" />
                            <Label htmlFor="evening">Evening (4pm - 7pm)</Label>
                          </div>
                        </RadioGroup>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="special-instructions">Special Instructions</Label>
                        <textarea
                          id="special-instructions"
                          className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                          placeholder="Any special instructions or access information we should know about"
                        />
                      </div>
                    </div>

<div className="flex justify-end">
                      <Button type="submit">Continue to Payment</Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="payment" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Payment Information</CardTitle>
                  <CardDescription>
                    Provide your payment details to complete your{" "}
                    {paymentType === "onetime" ? "purchase" : "subscription"}.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handlePaymentSubmit} className="space-y-6">
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label>Selected Plan</Label>
                        <div className="flex items-center justify-between p-4 border rounded-md bg-muted/50">
                          <div>
                            <p className="font-medium">{getSelectedPlanData().name}</p>
                            <p className="text-sm text-muted-foreground">{getSelectedPlanData().description}</p>
                            <p className="text-sm text-muted-foreground mt-1">
                              {paymentType === "monthly"
                                ? "Monthly billing with 1-year commitment"
                                : paymentType === "annual"
                                  ? "Annual payment (10% discount)"
                                  : "One-time service"}
                            </p>
                          </div>
                          <div>
                            {paymentType === "monthly" && (
                              <p className="text-xl font-bold">
                                ${getSelectedPlanData().monthlyPrice}
                                <span className="text-sm font-normal text-muted-foreground">/month</span>
                              </p>
                            )}

{paymentType === "annual" && (
                              <div className="text-right">
                                <p className="text-sm line-through text-gray-400">
                                  ${getSelectedPlanData().annualPrice}
                                </p>
                                <p className="text-xl font-bold">${getSelectedPlanData().annualDiscountPrice}</p>
                              </div>
                            )}

{paymentType === "onetime" && (
                              <div className="text-right">
                                {isNewCustomer && (
                                  <p className="text-sm line-through text-gray-400">
                                    ${getSelectedPlanData().oneTimePrice}
                                  </p>
                                )}
                                <p className="text-xl font-bold">
                                  $
                                  {isNewCustomer
                                    ? getSelectedPlanData().oneTimeDiscountPrice
                                    : getSelectedPlanData().oneTimePrice}
                                </p>
                              </div>
                            )}
                          </div>
                        </div>
                        <p className="text-xs text-gray-500 mt-1">
                          All pricing is for small standard homes. Prices may vary depending on the size of the home.
                        </p>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="card-number">Card Number</Label>
                        <div className="flex items-center">
                          <Input
                            id="card-number"
                            placeholder="1234 5678 9012 3456"
                            required
                            className="rounded-r-none"
                          />
                          <div className="bg-muted p-2 border border-l-0 border-input rounded-r-md">
                            <CreditCard className="h-5 w-5 text-muted-foreground" />
                          </div>
                        </div>
                      </div>

<div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="expiry">Expiration Date</Label>
                          <Input id="expiry" placeholder="MM/YY" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="cvc">CVC</Label>
                          <Input id="cvc" placeholder="123" required />
                        </div>
                      </div>

{paymentType !== "onetime" && (
                        <div className="p-4 bg-blue-50 rounded-md">
                          <h4 className="font-medium text-blue-800 mb-2">Subscription Terms</h4>
                          <p className="text-sm text-blue-700">
                            By subscribing, you agree to a 1-year commitment.
                            {paymentType === "annual"
                              ? " Your card will be charged the full annual amount today."
                              : " Your card will be charged monthly for 12 months."}
                          </p>
                        </div>
                      )}

<div className="flex items-center space-x-2">
                        <input type="checkbox" id="terms" className="h-4 w-4 rounded border-gray-300" required />
                        <Label htmlFor="terms" className="text-sm font-normal">
                          I agree to the{" "}
                          <Link href="/terms" className="text-blue-600 hover:underline">
                            Terms of Service
                          </Link>
                        </Label>
                      </div>
                    </div>

<div className="flex justify-end">
                      <Button type="submit">
                        {paymentType === "onetime" ? "Complete Purchase" : "Complete Subscription"}
                      </Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="confirmation" className="mt-6">
              <Card>
                <CardHeader className="text-center">
                  <div className="mx-auto w-16 h-16 flex items-center justify-center rounded-full bg-green-100 mb-4">
                    <CheckCircle className="h-8 w-8 text-green-600" />
                  </div>
                  <CardTitle className="text-2xl">
                    {paymentType === "onetime" ? "Purchase Confirmed!" : "Subscription Confirmed!"}
                  </CardTitle>
                  <CardDescription>Thank you for choosing JetGlowWash services.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-4">
                    <div className="bg-muted/50 p-4 rounded-md">
                      <h3 className="font-medium mb-2">
                        {paymentType === "onetime" ? "Purchase Details" : "Subscription Details"}
                      </h3>
                      <div className="grid grid-cols-2 gap-2 text-sm">
                        <p className="text-muted-foreground">Plan:</p>
                        <p>{getSelectedPlanData().name}</p>

<p className="text-muted-foreground">Type:</p>
                        <p>
                          {paymentType === "monthly"
                            ? "Monthly billing (1-year commitment)"
                            : paymentType === "annual"
                              ? "Annual payment"
                              : "One-time service"}
                        </p>

<p className="text-muted-foreground">Price:</p>
                        <p>
                          {paymentType === "monthly"
                            ? `${getSelectedPlanData().monthlyPrice}/month for 12 months (total ${getSelectedPlanData().annualPrice})`
                            : paymentType === "annual"
                              ? `${getSelectedPlanData().annualDiscountPrice} (saved ${Number(getSelectedPlanData().annualPrice) - Number(getSelectedPlanData().annualDiscountPrice)})`
                              : isNewCustomer
                                ? `${getSelectedPlanData().oneTimeDiscountPrice} (saved ${Number(getSelectedPlanData().oneTimePrice) - Number(getSelectedPlanData().oneTimeDiscountPrice)})`
                                : `${getSelectedPlanData().oneTimePrice}`}
                        </p>

{(paymentType === "annual" || (paymentType === "onetime" && isNewCustomer)) && (
                          <>
                            <p className="text-muted-foreground">Savings:</p>
                            <p>
                              {paymentType === "annual"
                                ? `~15% annual payment discount (${Number(getSelectedPlanData().annualPrice) - Number(getSelectedPlanData().annualDiscountPrice)})`
                                : `15% new customer discount (${Number(getSelectedPlanData().oneTimePrice) - Number(getSelectedPlanData().oneTimeDiscountPrice)})`}
                            </p>
                          </>
                        )}

<p className="text-muted-foreground">Service Date:</p>
                        <p>To be confirmed</p>
                      </div>

<p className="text-xs text-gray-500 mt-2">
                        All pricing is for small standard homes. Prices may vary depending on the size of the home.
                      </p>
                    </div>

<div className="space-y-2">
                      <p>
                        We've sent a confirmation email with all the details of your{" "}
                        {paymentType === "onetime" ? "purchase" : "subscription"}.
                      </p>
                      <p>Our team will contact you shortly to confirm your service date and time.</p>
                    </div>
                  </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                    <Link href="/dashboard">
                      <Button>Go to Your Dashboard</Button>
                    </Link>
                    <Link href="/">
                      <Button variant="outline">Return to Home</Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t bg-gray-100 mt-12">
        <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <p className="text-sm text-gray-500">© 2025 JetGlowWash. All rights reserved.</p>
            <div className="flex gap-4">
              <Link href="/privacy" className="text-sm text-gray-500 hover:text-gray-900">
                Privacy Policy
              </Link>
              <Link href="/terms" className="text-sm text-gray-500 hover:text-gray-900">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowRight, Bell, Calendar, CreditCard, Droplets, Home, LogOut, Menu, Settings, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DashboardPage() {
  const [activeTab, setActiveTab] = useState("overview")

// Mock data for the dashboard
  const upcomingService = {
    date: "June 15, 2025",
    time: "10:00 AM - 12:00 PM",
    type: "Standard Cleaning",
    status: "Scheduled",
  }

const subscriptionDetails = {
    plan: "Standard Plan",
    price: "$149/month",
    nextBilling: "July 1, 2025",
    status: "Active",
  }

const serviceHistory = [
    { date: "May 15, 2025", type: "Standard Cleaning", status: "Completed" },
    { date: "April 15, 2025", type: "Standard Cleaning", status: "Completed" },
    { date: "March 15, 2025", type: "Standard Cleaning", status: "Completed" },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2 md:gap-4">
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-72">
                <Link href="/" className="flex items-center gap-2 py-4">
                  <Droplets className="h-6 w-6 text-blue-600" />
                  <span className="text-xl font-bold">JetGlowWash</span>
                </Link>
                <div className="grid gap-2 py-6">
                  <Link href="/dashboard" className="flex items-center gap-2 text-lg font-semibold">
                    <Home className="h-5 w-5" />
                    Dashboard
                  </Link>
                  <Link href="/dashboard/schedule" className="flex items-center gap-2 text-lg font-semibold">
                    <Calendar className="h-5 w-5" />
                    Schedule Service
                  </Link>
                  <Link href="/dashboard/billing" className="flex items-center gap-2 text-lg font-semibold">
                    <CreditCard className="h-5 w-5" />
                    Billing
                  </Link>
                  <Link href="/dashboard/profile" className="flex items-center gap-2 text-lg font-semibold">
                    <User className="h-5 w-5" />
                    Profile
                  </Link>
                  <Link href="/dashboard/settings" className="flex items-center gap-2 text-lg font-semibold">
                    <Settings className="h-5 w-5" />
                    Settings
                  </Link>
                </div>
              </SheetContent>
            </Sheet>
            <Link href="/" className="flex items-center gap-2">
              <Droplets className="h-6 w-6 text-blue-600" />
              <span className="text-xl font-bold hidden md:inline-block">JetGlowWash</span>
            </Link>
          </div>
          <nav className="hidden md:flex items-center gap-6">
            <Link
              href="/dashboard"
              className={`text-sm font-medium ${activeTab === "overview" ? "text-blue-600" : "text-muted-foreground"} hover:text-primary`}
            >
              Dashboard
            </Link>
            <Link href="/dashboard/schedule" className="text-sm font-medium text-muted-foreground hover:text-primary">
              Schedule Service
            </Link>
            <Link href="/dashboard/billing" className="text-sm font-medium text-muted-foreground hover:text-primary">
              Billing
            </Link>
          </nav>
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" className="relative">
              <Bell className="h-5 w-5" />
              <span className="sr-only">Notifications</span>
              <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
                2
              </Badge>
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/placeholder.svg" alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  Profile
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CreditCard className="mr-2 h-4 w-4" />
                  Billing
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <LogOut className="mr-2 h-4 w-4" />
                  Log out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>
      <main className="flex-1 py-8">
        <div className="container">
          <div className="flex flex-col gap-4 md:gap-8">
            <div className="flex flex-col gap-2">
              <h1 className="text-3xl font-bold tracking-tight">Welcome back, John!</h1>
              <p className="text-muted-foreground">Manage your power washing subscription and schedule services.</p>
            </div>
            <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="space-y-4">
              <TabsList>
                <TabsTrigger value="overview">Overview</TabsTrigger>
                <TabsTrigger value="services">Services</TabsTrigger>
                <TabsTrigger value="subscription">Subscription</TabsTrigger>
              </TabsList>
              <TabsContent value="overview" className="space-y-4">
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Next Service</CardTitle>
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{upcomingService.date}</div>
                      <p className="text-xs text-muted-foreground">{upcomingService.time}</p>
                      <div className="mt-4 flex items-center gap-2">
                        <Badge variant="outline" className="bg-blue-50 text-blue-700 hover:bg-blue-50">
                          {upcomingService.status}
                        </Badge>
                        <span className="text-sm text-muted-foreground">{upcomingService.type}</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" size="sm" className="w-full">
                        Reschedule
                      </Button>
                    </CardFooter>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Subscription</CardTitle>
                      <CreditCard className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{subscriptionDetails.plan}</div>
                      <p className="text-xs text-muted-foreground">{subscriptionDetails.price}</p>
                      <div className="mt-4 flex items-center gap-2">
                        <Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50">
                          {subscriptionDetails.status}
                        </Badge>
                        <span className="text-sm text-muted-foreground">
                          Next billing: {subscriptionDetails.nextBilling}
                        </span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" size="sm" className="w-full">
                        Manage Plan
                      </Button>
                    </CardFooter>
                  </Card>
                  <Card className="md:col-span-2 lg:col-span-1">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Quick Actions</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-4">
                      <Button className="w-full justify-between">
                        Schedule Extra Service
                        <ArrowRight className="h-4 w-4" />
                      </Button>
                      <Button variant="outline" className="w-full justify-between">
                        View Service History
                        <ArrowRight className="h-4 w-4" />
                      </Button>
                      <Button variant="outline" className="w-full justify-between">
                        Update Property Details
                        <ArrowRight className="h-4 w-4" />
                      </Button>
                    </CardContent>
                  </Card>
                </div>
                <Card>
                  <CardHeader>
                    <CardTitle>Recent Services</CardTitle>
                    <CardDescription>View your recent power washing service history.</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {serviceHistory.map((service, index) => (
                        <div
                          key={index}
                          className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
                        >
                          <div className="space-y-1">
                            <p className="font-medium">{service.date}</p>
                            <p className="text-sm text-muted-foreground">{service.type}</p>
                          </div>
                          <Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50">
                            {service.status}
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      View All Services
                    </Button>
                  </CardFooter>
                </Card>
              </TabsContent>
              <TabsContent value="services" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Schedule a Service</CardTitle>
                    <CardDescription>Book additional power washing services for your property.</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                          Service Type
                        </label>
                        <select className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                          <option>Standard Cleaning</option>
                          <option>Deep Cleaning</option>
                          <option>Roof Washing</option>
                          <option>Gutter Cleaning</option>
                          <option>Deck & Patio Cleaning</option>
                        </select>
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                          Preferred Date
                        </label>
                        <input
                          type="date"
                          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                        Special Instructions
                      </label>
                      <textarea
                        className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        placeholder="Any special instructions or access information"
                      >

Upcoming Services View and manage your scheduled services.

June 15, 2025

Standard Cleaning

10:00 AM - 12:00 PM

July 15, 2025

Standard Cleaning

10:00 AM - 12:00 PM

Subscription Details Manage your power washing subscription plan.

{subscriptionDetails.plan}

Monthly service for medium-sized homes

{subscriptionDetails.price}

Next billing: {subscriptionDetails.nextBilling}

Includes:

Monthly service
Full exterior house washing
Driveway & walkway cleaning
Deck or patio cleaning
Priority scheduling

Payment Method Manage your payment information.

Visa ending in 4242

Expires 12/25

Billing History View your past invoices and payments.

{[ { date: "May 1, 2025", amount: "$149.00", status: "Paid" }, { date: "April 1, 2025", amount: "$149.00", status: "Paid" }, { date: "March 1, 2025", amount: "$149.00", status: "Paid" }, ].map((invoice, index) => (

{invoice.date}

Monthly subscription

{invoice.amount}

{invoice.status}

))}

) } [V0_FILE]jpeg:file="public/images/roof-washing.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/PC-RW-pic.jpg-IUZdQMeW1OiIFZKONoQPDQckAZTZL9.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/commercial-kitchen.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Intro-Kitchen-Hood.jpg-R1WA0Z2vmwWy7NSLooLJ4Uosnz9jmj.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/gutter-cleaning.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Cleaning-Gutters.jpg-eqKlhCzP8uyBKsJBq6pKouPETRzBF1.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/quote/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/contact/loading.tsx" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]plaintext:file="public/images/customers/customer1.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0230412ef8587c9a6d073bf740046c1e-AE6C4ztHLopq5hijb5LVg9SCExhUjU.webp" isMerged="true" [V0_FILE]plaintext:file="public/images/customers/customer2.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/669726fa9a0e9d5c9dc4e8cf_66403c3d1bccb9054cbc0021_lsoYsdAh_SR00_1024-xEeBusgJr6ZrPkoLsT9dCLcHJJUSsa.webp" isMerged="true" [V0_FILE]jpeg:file="public/images/customers/customer3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v3_0025297.jpg-xy4hJd73EVlf3G2dIZ6FQJ3hbMVECK.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/testimonial-card.tsx" isMerged="true" import { Avatar, AvatarFallback } from "@/components/ui/avatar" interface TestimonialCardProps { name: string role: string content: string image?: string rating?: number } export function TestimonialCard({ name, role, content, image, rating = 5 }: TestimonialCardProps) { return (

{[...Array(rating)].map((_, i) => ( ))}

{content}

{image ? (

) : ( {name.charAt(0)} )}

{name}

{role}

) } [V0_FILE]typescriptreact:file="app/admin/testimonials/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Droplets, Plus, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { TestimonialCard } from "@/components/testimonial-card" // This would typically come from a database const initialTestimonials = [ { id: "1", name: "Michael Rodriguez", role: "Business Owner", content: "As a restaurant owner, maintaining a clean exterior is crucial. JetGlowWash's commercial cleaning service made our storefront look brand new.", image: "/images/customers/customer1.webp", rating: 5, }, { id: "2", name: "Smith Williams", role: "Homeowner", content: "JetGlowWash did an amazing job on our driveway and patio. The difference is incredible, and the team was professional and efficient. Our whole family is thrilled with the results!", image: "/images/customers/customer2.webp", rating: 5, }, { id: "3", name: "Jennifer Williams", role: "Property Manager", content: "Managing multiple properties is so much easier with JetGlowWash. Their team is reliable, thorough, and the results are consistently excellent.", image: "/images/customers/customer3.jpeg", rating: 5, }, ] export default function TestimonialsAdminPage() { const [testimonials, setTestimonials] = useState(initialTestimonials) const [newTestimonial, setNewTestimonial] = useState({ name: "", role: "", content: "", image: "", rating: 5, }) const [previewImage, setPreviewImage] = useState(null) const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { // In a real application, you would upload this to a server or cloud storage // For this demo, we'll just create a local URL const imageUrl = URL.createObjectURL(file) setPreviewImage(imageUrl) setNewTestimonial({ ...newTestimonial, image: imageUrl }) } } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setNewTestimonial({ ...newTestimonial, [name]: value }) } const handleAddTestimonial = (e: React.FormEvent) => { e.preventDefault() // In a real application, you would save this to a database const newId = (testimonials.length + 1).toString() setTestimonials([...testimonials, { ...newTestimonial, id: newId }]) // Reset form setNewTestimonial({ name: "", role: "", content: "", image: "", rating: 5, }) setPreviewImage(null) // Reset file input const fileInput = document.getElementById("customer-photo") as HTMLInputElement if (fileInput) fileInput.value = "" } const handleDeleteTestimonial = (id: string) => { setTestimonials(testimonials.filter((testimonial) => testimonial.id !== id)) } return (

{/* Navigation */}

JetGlowWash

Back to Home

Manage Testimonials

Add, edit, or remove customer testimonials and their photos.

Add New Testimonial Add a new customer testimonial with their photo.

Customer Name

Role/Title

Testimonial Content

</div>

<div className="space-y-2">
                    <Label htmlFor="rating">Rating (1-5)</Label>
                    <Input
                      id="rating"
                      name="rating"
                      type="number"
                      min="1"
                      max="5"
                      value={newTestimonial.rating}
                      onChange={handleInputChange}
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="customer-photo">Customer Photo</Label>
                    <Input id="customer-photo" type="file" accept="image/*" onChange={handleImageUpload} />
                    {previewImage && (
                      <div className="mt-2">
                        <p className="text-sm text-gray-500 mb-2">Preview:</p>
                        <div className="h-20 w-20 overflow-hidden rounded-full">
                          <img
                            src={previewImage || "/placeholder.svg"}
                            alt="Preview"
                            className="h-full w-full object-cover"
                          />
                        </div>
                      </div>
                    )}
                  </div>

<Button type="submit" className="w-full">
                    <Plus className="mr-2 h-4 w-4" /> Add Testimonial
                  </Button>
                </form>
              </CardContent>
            </Card>

<div className="space-y-6">
              <h2 className="text-2xl font-bold">Current Testimonials</h2>
              <div className="space-y-4">
                {testimonials.map((testimonial) => (
                  <div key={testimonial.id} className="relative">
                    <TestimonialCard
                      name={testimonial.name}
                      role={testimonial.role}
                      content={testimonial.content}
                      image={testimonial.image}
                      rating={testimonial.rating}
                    />
                    <Button
                      variant="destructive"
                      size="sm"
                      className="absolute top-2 right-2"
                      onClick={() => handleDeleteTestimonial(testimonial.id)}
                    >
                      <Trash className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t bg-gray-100 mt-12">
        <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="text-sm text-gray-500">
              <p>© 2025 JetGlowWash. All rights reserved.</p>
              <p className="mt-1">Admin Panel</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]jpg:file="public/professional-truck-washing-service-in-action.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-truck-washing-service-in-action-zk0JrPDJxjkjym3xVrJSA9EzqAs5Wz.jpg" isMerged="true"
[V0_FILE]jpg:file="public/before-and-after-truck-washing-semi-trailer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/before-and-after-truck-washing-semi-trailer-RHFfXSVwHDMO9hniYENRpWNodMbAOP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/truck-cab-washing-before-after-professional-cleani.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/truck-cab-washing-before-after-professional-cleani-F5PuQa2SPxyQLwS8igqyUppHv1cwAL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/fleet-truck-washing-multiple-vehicles-clean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fleet-truck-washing-multiple-vehicles-clean-jUW5N0lWJMEzOF3ud8JeDOQOxAZlEP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-truck-washing-service.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-truck-washing-service-oVsRDkAR9FiHNz5Gzx91io9Worf58N.jpg" isMerged="true"
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

.center-content {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

.full-width-container {
    @apply w-full;
    margin-left: auto;
    margin-right: auto;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

* {
    @apply border-border;
  }

html {
    scroll-behavior: smooth;
  }

body {
    @apply bg-background text-foreground;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

/* Ensure proper container centering */
  .container {
    @apply mx-auto;
    width: 100%;
    max-width: 1200px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

/* Responsive container adjustments */
  @media (min-width: 640px) {
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

@media (min-width: 1024px) {
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

@media (min-width: 1280px) {
    .container {
      max-width: 1280px;
    }
  }

@media (min-width: 1536px) {
    .container {
      max-width: 1400px;
    }
  }
}

/* Ensure images don't cause layout shifts */
img {
  max-width: 100%;
  height: auto;
}

/* Fix any potential flexbox issues */
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Prevent content from overflowing */
* {
  box-sizing: border-box;
}

/* Fix for any potential grid issues */
.grid-container {
  display: grid;
  width: 100%;
  margin: 0 auto;
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "1.5rem",
        lg: "2rem",
        xl: "2rem",
        "2xl": "2rem",
      },
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      maxWidth: {
        "8xl": "88rem",
        "9xl": "96rem",
      },
      spacing: {
        "18": "4.5rem",
        "88": "22rem",
        "128": "32rem",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/layout-wrapper.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface LayoutWrapperProps {
  children: React.ReactNode
  className?: string
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full"
}

export function LayoutWrapper({ children, className, maxWidth = "7xl" }: LayoutWrapperProps) {
  const maxWidthClasses = {
    sm: "max-w-sm",
    md: "max-w-md",
    lg: "max-w-lg",
    xl: "max-w-xl",
    "2xl": "max-w-2xl",
    "3xl": "max-w-3xl",
    "4xl": "max-w-4xl",
    "5xl": "max-w-5xl",
    "6xl": "max-w-6xl",
    "7xl": "max-w-7xl",
    full: "max-w-full",
  }

return (
    <div className={cn("w-full mx-auto px-4 sm:px-6 lg:px-8", maxWidthClasses[maxWidth], className)}>{children}</div>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
import Link from "next/link"
import { Droplets, Home } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
        </div>
      </header>

{/* 404 Content */}
      <main className="flex-1 flex items-center justify-center py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-6xl font-bold text-blue-600">404</h1>
              <h2 className="text-3xl font-bold tracking-tighter">Page Not Found</h2>
              <p className="max-w-[600px] text-gray-500 md:text-xl">
                Sorry, we couldn't find the page you're looking for. It might have been moved or doesn't exist.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Link href="/">
                <Button size="lg" className="gap-1">
                  <Home className="h-4 w-4" />
                  Back to Home
                </Button>
              </Link>
              <Link href="/contact">
                <Button size="lg" variant="outline">
                  Contact Us
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </main>

import Link from "next/link"
import { Droplets, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <div className="flex flex-col min-h-screen">
          {/* Navigation */}
          <header className="border-b">
            <div className="container flex h-16 items-center justify-between px-4 md:px-6">
              <Link href="/" className="flex items-center gap-2">
                <Droplets className="h-6 w-6 text-blue-600" />
                <span className="text-xl font-bold">JetGlowWash</span>
              </Link>
            </div>
          </header>

{/* Error Content */}
          <main className="flex-1 flex items-center justify-center py-12">
            <div className="container px-4 md:px-6">
              <div className="flex flex-col items-center justify-center space-y-4 text-center">
                <div className="space-y-2">
                  <h1 className="text-6xl font-bold text-red-600">500</h1>
                  <h2 className="text-3xl font-bold tracking-tighter">Something went wrong</h2>
                  <p className="max-w-[600px] text-gray-500 md:text-xl">
                    We're experiencing some technical difficulties. Please try again in a moment.
                  </p>
                </div>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Button onClick={reset} size="lg" className="gap-1">
                    <RefreshCw className="h-4 w-4" />
                    Try Again
                  </Button>
                  <Link href="/">
                    <Button size="lg" variant="outline">
                      Back to Home
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </main>

{/* Footer */}
          <footer className="border-t bg-gray-100">
            <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div className="text-sm text-gray-500">
                  <p>© 2025 JetGlowWash. All rights reserved.</p>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </body>
    </html>
  )
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "jetglowwash-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
import { Droplets } from "lucide-react"

export default function Loading() {
  return (
    <div className="flex flex-col min-h-screen">
      <div className="flex-1 flex items-center justify-center">
        <div className="flex flex-col items-center space-y-4">
          <div className="animate-spin">
            <Droplets className="h-8 w-8 text-blue-600" />
          </div>
          <p className="text-gray-500">Loading...</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { ArrowRight, Droplets, Calendar, CheckCircle, Truck } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
              Services
            </Link>
            <Link href="/truck-washing" className="text-sm font-medium hover:underline underline-offset-4">
              Truck Washing
            </Link>
            <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
              Testimonials
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
              Contact
            </Link>
          </nav>
          <div className="flex gap-4">
            <Link href="/contact">
              <Button>Contact Us</Button>
            </Link>
          </div>
        </div>
      </header>

{/* New Service Announcement Banner */}
      <div className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3">
        <div className="container px-4 md:px-6">
          <div className="flex items-center justify-center gap-2 text-center">
            <Truck className="h-5 w-5" />
            <span className="font-medium">🚛 NEW: Professional Truck Washing Services Now Available!</span>
            <Link href="/truck-washing" className="underline hover:no-underline ml-2">
              Learn More →
            </Link>
          </div>
        </div>
      </div>

{/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-blue-50 to-white">
        <div className="container px-4 md:px-6">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-4">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">💦 Make Your Home Shine</h1>
              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Power washing services tailored to your home's needs. We specialize in driveway, walkway, front porch,
                and exterior cleaning.
              </p>
              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                No subscriptions, no hassle — just one-time deep cleaning with flexible pricing.
              </p>
              <div className="flex flex-col gap-2 min-[400px]:flex-row">
                <Link href="/contact">
                  <Button size="lg" className="gap-1">
                    Contact Us <ArrowRight className="h-4 w-4" />
                  </Button>
                </Link>
                <Link href="/#services">
                  <Button size="lg" variant="outline">
                    View Services
                  </Button>
                </Link>
              </div>
            </div>
            <img
              src="/images/driveway-cleaning.webp"
              alt="Power washing in action"
              className="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
            />
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="w-full py-12 md:py-24 lg:py-32" id="services">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Our Services</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">🧼 What We Offer</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Professional power washing services to keep your property looking its best.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            {[
              {
                title: "Residential Washing",
                description: "Complete exterior cleaning for homes, including siding, driveways, and patios.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Commercial Services",
                description: "Maintain your business's appearance with our commercial power washing services.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Truck Washing",
                description: "Professional fleet cleaning services for trucks and commercial vehicles.",
                icon: <Truck className="h-10 w-10 text-blue-600" />,
                isNew: true,
                link: "/truck-washing",
              },
              {
                title: "Deck & Patio Cleaning",
                description: "Restore the beauty of your outdoor living spaces with our specialized cleaning.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Roof Washing",
                description: "Remove algae, moss, and stains from your roof to extend its lifespan.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Concrete Cleaning",
                description: "Restore driveways, sidewalks, and other concrete surfaces to like-new condition.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
            ].map((service, index) => (
              <div
                key={index}
                className="flex flex-col items-center space-y-2 rounded-lg border p-6 shadow-sm relative"
              >
                {service.isNew && (
                  <div className="absolute top-2 right-2 bg-green-500 text-white px-2 py-1 rounded-full text-xs font-medium">
                    NEW!
                  </div>
                )}
                {index === 0 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/images/house-siding.png"
                      alt="Residential Washing"
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : index === 1 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/images/commercial-kitchen.jpeg"
                      alt="Commercial Kitchen Hood Cleaning"
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : index === 2 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/professional-truck-washing-service.jpg"
                      alt="Truck Washing Service"
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : index === 3 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/images/patio-cleaning.png"
                      alt="Deck & Patio Cleaning"
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : index === 4 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img src="/images/roof-washing.jpeg" alt="Roof Washing" className="w-full h-full object-cover" />
                  </div>
                ) : index === 5 ? (
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/images/concrete-cleaning.png"
                      alt="Concrete Cleaning"
                      className="w-full h-full object-cover"
                    />
                  </div>
                ) : (
                  service.icon
                )}
                <h3 className="text-xl font-bold">{service.title}</h3>
                <p className="text-center text-gray-500">{service.description}</p>
                {service.link && (
                  <Link href={service.link}>
                    <Button variant="outline" size="sm" className="mt-2 bg-transparent">
                      Learn More
                    </Button>
                  </Link>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Services List Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Our Services</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">What We Offer</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Professional one-time cleaning services for your home or business.
              </p>
            </div>
          </div>

<div className="mx-auto max-w-3xl mt-8 bg-white rounded-lg shadow-sm border p-8">
            <ul className="space-y-4 text-lg">
              <li className="flex items-start gap-3">
                <CheckCircle className="h-6 w-6 text-blue-600 mt-0.5" />
                <span>Driveway & walkway cleaning</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle className="h-6 w-6 text-blue-600 mt-0.5" />
                <span>Front porch washing</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle className="h-6 w-6 text-blue-600 mt-0.5" />
                <span>Sidewalk and entry area power wash</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle className="h-6 w-6 text-blue-600 mt-0.5" />
                <span>Custom jobs available upon request</span>
              </li>
              <li className="flex items-start gap-3">
                <Truck className="h-6 w-6 text-green-600 mt-0.5" />
                <span className="flex items-center gap-2">
                  <strong>NEW:</strong> Professional truck & fleet washing
                  <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">Just Added!</span>
                </span>
              </li>
            </ul>

<div className="mt-8 text-center">
              <p className="text-lg font-medium text-blue-600">
                🎁 First-time customer? Ask us about our current discounts!
              </p>
            </div>

<div className="mt-8 flex justify-center gap-4">
              <Link href="/contact">
                <Button size="lg" className="gap-1">
                  Contact Us <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/truck-washing">
                <Button size="lg" variant="outline" className="gap-1 bg-transparent">
                  <Truck className="h-4 w-4" />
                  Truck Washing
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">How It Works</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Simple Process, Amazing Results</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Our service is designed to be hassle-free and convenient.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
            {[
              {
                title: "Contact Us",
                description: "Tell us about your property and cleaning needs.",
                icon: <Droplets className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Schedule Service",
                description: "Choose a convenient date and time for your power washing service.",
                icon: <Calendar className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Enjoy the Results",
                description: "Sit back and relax as we transform your property's appearance.",
                icon: <CheckCircle className="h-10 w-10 text-blue-600" />,
              },
            ].map((step, index) => (
              <div key={index} className="flex flex-col items-center space-y-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">{step.icon}</div>
                <h3 className="text-xl font-bold">{step.title}</h3>
                <p className="text-center text-gray-500">{step.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Before & After Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Before & After</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">See The Difference</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Our professional power washing services deliver dramatic results. See the transformation for yourself.
              </p>
            </div>
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img src="/images/before-after.png" alt="Before and after house washing" className="w-full h-auto" />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">House Siding Transformation</h3>
                <p className="text-gray-500">
                  Remove years of dirt, mold, and algae with our professional house washing.
                </p>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img src="/images/pavers-cleaning.png" alt="Paver cleaning in progress" className="w-full h-auto" />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">Paver Restoration</h3>
                <p className="text-gray-500">
                  Bring your walkways and patios back to life with our specialized cleaning.
                </p>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img src="/images/siding-closeup.png" alt="Siding cleaning closeup" className="w-full h-auto" />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">Detailed Cleaning</h3>
                <p className="text-gray-500">
                  We pay attention to every detail to ensure your property looks its best.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50" id="testimonials">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Testimonials</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">What Our Customers Say</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Don't just take our word for it. Here's what our satisfied customers have to say.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            {[
              {
                name: "Michael Rodriguez",
                role: "Business Owner",
                content:
                  "As a restaurant owner, maintaining a clean exterior is crucial. JetGlowWash's commercial cleaning service made our storefront look brand new.",
                image: "/images/customers/customer1.webp",
              },
              {
                name: "Smith Williams",
                role: "Homeowner",
                content:
                  "JetGlowWash did an amazing job on our driveway and patio. The difference is incredible, and the team was professional and efficient. Our whole family is thrilled with the results!",
                image: "/images/customers/customer2.webp",
              },
              {
                name: "Jennifer Williams",
                role: "Property Manager",
                content:
                  "Managing multiple properties is so much easier with JetGlowWash. Their team is reliable, thorough, and the results are consistently excellent.",
                image: "/images/customers/customer3.jpeg",
              },
            ].map((testimonial, index) => (
              <div key={index} className="flex flex-col justify-between space-y-4 rounded-lg border p-6 shadow-sm">
                <div className="space-y-2">
                  <div className="flex space-x-1">
                    {[...Array(5)].map((_, i) => (
                      <svg
                        key={i}
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="h-4 w-4 fill-current text-yellow-400"
                      >
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                      </svg>
                    ))}
                  </div>
                  <p className="text-gray-500">{testimonial.content}</p>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="h-12 w-12 overflow-hidden rounded-full">
                    <img
                      src={testimonial.image || "/placeholder.svg"}
                      alt={testimonial.name}
                      className="h-full w-full object-cover"
                    />
                  </div>
                  <div>
                    <p className="text-sm font-medium">{testimonial.name}</p>
                    <p className="text-sm text-gray-500">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-blue-600 text-white">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">📩 Contact Us Today</h2>
              <p className="max-w-[700px] text-blue-100 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Every home is different — we'll provide a personalized service for your needs.
                <br />
                Get in touch with us today to discuss your power washing project.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Link href="/contact">
                <Button size="lg" variant="secondary" className="gap-1">
                  Contact Us <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t bg-gray-100">
        <div className="container flex flex-col gap-6 py-8 md:py-12 px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10">
            <Link href="/" className="flex items-center gap-2">
              <Droplets className="h-6 w-6 text-blue-600" />
              <span className="text-xl font-bold">JetGlowWash</span>
            </Link>
            <nav className="flex gap-4 md:gap-6 flex-wrap">
              <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
                Services
              </Link>
              <Link href="/truck-washing" className="text-sm font-medium hover:underline underline-offset-4">
                Truck Washing
              </Link>
              <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
                Testimonials
              </Link>
              <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
                Contact
              </Link>
              <Link href="/privacy" className="text-sm font-medium hover:underline underline-offset-4">
                Privacy
              </Link>
              <Link href="/terms" className="text-sm font-medium hover:underline underline-offset-4">
                Terms
              </Link>
            </nav>
          </div>
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="text-sm text-gray-500">
              <p>© 2025 JetGlowWash. All rights reserved.</p>
              <p className="mt-1">+1 215-869-4444 | fatih@jetglowwash.com</p>
            </div>
            <div className="flex gap-4">
              <Link
                href="https://www.facebook.com/profile.php?id=61575566774258&sk=about"
                className="text-gray-500 hover:text-gray-900"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                </svg>
                <span className="sr-only">Facebook</span>
              </Link>
              <Link href="https://www.instagram.com/jetglowwash/" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                </svg>
                <span className="sr-only">Instagram</span>
              </Link>
              <Link href="https://x.com/jetglowwash" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                </svg>
                <span className="sr-only">Twitter</span>
              </Link>
              <Link href="https://www.tiktok.com/@jetgglowwash?lang=en" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M9 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
                  <path d="M15 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                  <path d="M15 8v8a4 4 0 0 1-4 4" />
                  <line x1="15" y1="4" x2="15" y2="12" />
                </svg>
                <span className="sr-only">TikTok</span>
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/quote/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Droplets } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function QuotePage() {
  const [activeTab, setActiveTab] = useState("details")
  const [isNewCustomer, setIsNewCustomer] = useState(false)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setActiveTab("confirmation")
  }

return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
              Services
            </Link>
            <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
              Testimonials
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
              Contact
            </Link>
          </nav>
        </div>
      </header>

{/* Visual Banner */}
      <div className="w-full overflow-hidden h-48 md:h-64 lg:h-80 mb-8">
        <div className="relative w-full h-full">
          <img
            src="/images/concrete-cleaning.png"
            alt="Professional power washing service"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-blue-900/30 flex items-center justify-center">
            <h2 className="text-white text-2xl md:text-3xl lg:text-4xl font-bold text-center px-4">
              Request Your Free Quote
            </h2>
          </div>
        </div>
      </div>

<main className="flex-1 py-12">
        <div className="container px-4 md:px-6">
          <div className="mb-8">
            <Link href="/" className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800">
              <ArrowLeft className="h-4 w-4" />
              Back to Home
            </Link>
            <h1 className="mt-4 text-3xl font-bold tracking-tight">Get a Free Quote</h1>
            <p className="mt-2 text-gray-500">
              Tell us about your property and cleaning needs, and we'll provide a personalized quote.
            </p>
          </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full max-w-4xl mx-auto">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="details">1. Your Details</TabsTrigger>
              <TabsTrigger value="confirmation">2. Confirmation</TabsTrigger>
            </TabsList>

<div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" type="email" required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        <Input id="phone" type="tel" required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="address">Street Address</Label>
                        <Input id="address" required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="property-size">Approximate Property Size (sq ft)</Label>
                        <Input id="property-size" type="number" placeholder="e.g., 2000" />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="special-instructions">Special Instructions or Comments</Label>
                        <textarea
                          id="special-instructions"
                          className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                          placeholder="Any special instructions or details about your property"
                        />
                      </div>

<div className="flex items-center space-x-2">
                        <input
                          type="checkbox"
                          id="new-customer"
                          checked={isNewCustomer}
                          onChange={(e) => setIsNewCustomer(e.target.checked)}
                          className="h-4 w-4 rounded border-gray-300"
                        />
                        <Label htmlFor="new-customer" className="font-normal">
                          I'm a new customer (eligible for first-time customer discount)
                        </Label>
                      </div>
                    </div>

<div className="flex justify-end">
                      <Button type="submit">Submit Quote Request</Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="confirmation" className="mt-6">
              <Card>
                <CardHeader className="text-center">
                  <div className="mx-auto w-16 h-16 flex items-center justify-center rounded-full bg-green-100 mb-4">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-8 w-8 text-green-600"
                    >
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </div>
                  <CardTitle className="text-2xl">Quote Request Received!</CardTitle>
                  <CardDescription>Thank you for choosing JetGlowWash services.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-4">
                    <div className="bg-muted/50 p-4 rounded-md">
                      <h3 className="font-medium mb-2">What Happens Next?</h3>
                      <p className="text-sm text-gray-600 mb-4">
                        Our team will review your request and prepare a personalized quote based on your property's
                        specific needs. We'll contact you within 24 hours with pricing details and to answer any
                        questions you may have.
                      </p>
                      <p className="text-sm text-gray-600">
                        {isNewCustomer && (
                          <span className="block text-green-600 font-medium mb-2">
                            As a new customer, you'll receive our special first-time discount!
                          </span>
                        )}
                        If you need immediate assistance, please call us at (555) 123-4567.
                      </p>
                    </div>

<div className="space-y-2">
                      <p>We've sent a confirmation email with a summary of your quote request.</p>
                    </div>
                  </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                    <Link href="/">
                      <Button variant="outline">Return to Home</Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t bg-gray-100 mt-12">
        <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="text-sm text-gray-500">
              <p>© 2025 JetGlowWash. All rights reserved.</p>
              <p className="mt-1">+1 215-869-4444 | fatih@jetglowwash.com</p>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex gap-4">
                <Link href="/privacy" className="text-sm text-gray-500 hover:text-gray-900">
                  Privacy Policy
                </Link>
                <Link href="/terms" className="text-sm text-gray-500 hover:text-gray-900">
                  Terms of Service
                </Link>
              </div>
              <div className="flex gap-4">
                <Link
                  href="https://www.facebook.com/profile.php?id=61575566774258&sk=about"
                  className="text-gray-500 hover:text-gray-900"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                  </svg>
                  <span className="sr-only">Facebook</span>
                </Link>
                <Link href="https://www.instagram.com/jetglowwash/" className="text-gray-500 hover:text-gray-900">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                  </svg>
                  <span className="sr-only">Instagram</span>
                </Link>
                <Link href="https://x.com/jetglowwash" className="text-gray-500 hover:text-gray-900">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                  </svg>
                  <span className="sr-only">Twitter</span>
                </Link>
                <Link href="https://www.tiktok.com/@jetgglowwash?lang=en" className="text-gray-500 hover:text-gray-900">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M9 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
                    <path d="M15 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                    <path d="M15 8v8a4 4 0 0 1-4 4" />
                    <line x1="15" y1="4" x2="15" y2="12" />
                  </svg>
                  <span className="sr-only">TikTok</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/truck-washing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Droplets, CheckCircle, Clock, Shield, Truck, Star, Calendar } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function TruckWashingPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
              Services
            </Link>
            <Link
              href="/truck-washing"
              className="text-sm font-medium text-blue-600 hover:underline underline-offset-4"
            >
              Truck Washing
            </Link>
            <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
              Testimonials
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
              Contact
            </Link>
          </nav>
          <div className="flex gap-4">
            <Link href="/contact">
              <Button>Get Quote</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-blue-50 to-white">
        <div className="container px-4 md:px-6">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-4">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">
                New Service Available
              </div>
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                🚛 Professional Truck Washing Services
              </h1>
              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Keep your fleet looking professional with our specialized truck washing services. We understand the
                importance of maintaining a clean, professional image for your business.
              </p>
              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                From single trucks to entire fleets, we provide thorough cleaning that removes road grime, salt, and
                debris while protecting your investment.
              </p>
              <div className="flex flex-col gap-2 min-[400px]:flex-row">
                <Link href="/contact">
                  <Button size="lg" className="gap-1">
                    Get Free Quote <Calendar className="h-4 w-4" />
                  </Button>
                </Link>
                <Link href="#services">
                  <Button size="lg" variant="outline">
                    View Services
                  </Button>
                </Link>
              </div>
            </div>
            <div className="relative">
              <img
                src="/professional-truck-washing-service-in-action.jpg"
                alt="Professional truck washing service"
                className="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
              />
              <div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                Now Available!
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Why Choose Our Truck Washing */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Why Choose Us</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Professional Fleet Cleaning</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Your trucks represent your business. Keep them looking professional with our specialized cleaning
                services.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            {[
              {
                title: "Professional Image",
                description: "Clean trucks project professionalism and attention to detail to your customers.",
                icon: <Shield className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Fleet Maintenance",
                description: "Regular washing helps prevent corrosion and extends the life of your vehicles.",
                icon: <Truck className="h-10 w-10 text-blue-600" />,
              },
              {
                title: "Quick Turnaround",
                description: "We understand your trucks need to stay on the road. Fast, efficient service.",
                icon: <Clock className="h-10 w-10 text-blue-600" />,
              },
            ].map((benefit, index) => (
              <div key={index} className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
                  {benefit.icon}
                </div>
                <h3 className="text-xl font-bold">{benefit.title}</h3>
                <p className="text-center text-gray-500">{benefit.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Services Offered */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50" id="services">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Our Services</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Truck Washing Services</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Comprehensive cleaning services for all types of commercial vehicles.
              </p>
            </div>
          </div>

<div className="mx-auto max-w-4xl mt-8">
            <div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Truck className="h-5 w-5 text-blue-600" />
                    Exterior Truck Washing
                  </CardTitle>
                  <CardDescription>Complete exterior cleaning and detailing</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Full cab and trailer washing</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Wheel and tire cleaning</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Chrome polishing</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Bug and tar removal</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Road salt removal</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5 text-blue-600" />
                    Fleet Services
                  </CardTitle>
                  <CardDescription>Specialized services for fleet operators</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Multiple vehicle discounts</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Scheduled maintenance washing</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>On-site service available</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Flexible scheduling</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Commercial invoicing</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Before & After Gallery */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Before & After</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">See The Transformation</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Professional truck washing makes a dramatic difference in your fleet's appearance.
              </p>
            </div>
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="/before-and-after-truck-washing-semi-trailer.jpg"
                alt="Before and after truck washing"
                className="w-full h-auto"
              />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">Semi-Trailer Transformation</h3>
                <p className="text-gray-500">
                  Complete exterior cleaning removes months of road grime and salt buildup.
                </p>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="/truck-cab-washing-before-after-professional-cleani.jpg"
                alt="Truck cab cleaning"
                className="w-full h-auto"
              />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">Cab Detailing</h3>
                <p className="text-gray-500">
                  Professional cab cleaning including chrome polishing and wheel detailing.
                </p>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="/fleet-truck-washing-multiple-vehicles-clean.jpg"
                alt="Fleet washing service"
                className="w-full h-auto"
              />
              <div className="p-4 bg-white">
                <h3 className="text-lg font-bold">Fleet Services</h3>
                <p className="text-gray-500">
                  Efficient cleaning of multiple vehicles with consistent, professional results.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Pricing Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Pricing</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Transparent Pricing</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Professional truck washing services with competitive rates and fleet discounts.
              </p>
            </div>
          </div>

<div className="mx-auto max-w-4xl mt-8">
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle>Single Truck</CardTitle>
                  <CardDescription>Perfect for owner-operators</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="text-3xl font-bold mb-4">Starting at $75</div>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Exterior wash & rinse</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Wheel cleaning</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Basic chrome polish</span>
                    </li>
                  </ul>
                  <Button className="w-full mt-4">Get Quote</Button>
                </CardContent>
              </Card>

<Card className="border-blue-600">
                <CardHeader>
                  <div className="flex justify-center mb-2">
                    <div className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">Most Popular</div>
                  </div>
                  <CardTitle>Fleet Package</CardTitle>
                  <CardDescription>Best value for multiple vehicles</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="text-3xl font-bold mb-4">
                    $60<span className="text-lg font-normal">/truck</span>
                  </div>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Everything in Single Truck</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Volume discounts (5+ trucks)</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Scheduled service</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Priority booking</span>
                    </li>
                  </ul>
                  <Button className="w-full mt-4">Get Fleet Quote</Button>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Premium Detail</CardTitle>
                  <CardDescription>Complete detailing service</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="text-3xl font-bold mb-4">Starting at $125</div>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Everything in Fleet Package</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Interior cleaning</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Premium chrome polish</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Tire shine</span>
                    </li>
                  </ul>
                  <Button className="w-full mt-4">Get Premium Quote</Button>
                </CardContent>
              </Card>
            </div>
            <p className="text-center text-sm text-gray-500 mt-6">
              *Pricing may vary based on vehicle size and condition. Contact us for a personalized quote.
            </p>
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-600">Testimonials</div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">What Fleet Owners Say</h2>
              <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Hear from satisfied customers who trust us with their fleet cleaning needs.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
            {[
              {
                name: "Mike Thompson",
                role: "Fleet Manager, ABC Logistics",
                content:
                  "JetGlowWash has been cleaning our 15-truck fleet for 6 months. Professional service, competitive pricing, and our trucks always look great.",
                rating: 5,
              },
              {
                name: "Sarah Rodriguez",
                role: "Owner-Operator",
                content:
                  "As an independent trucker, image matters. JetGlowWash keeps my rig looking professional at a price I can afford.",
                rating: 5,
              },
              {
                name: "David Chen",
                role: "Operations Director",
                content:
                  "Reliable, efficient, and thorough. They work around our schedule and deliver consistent results every time.",
                rating: 5,
              },
            ].map((testimonial, index) => (
              <div key={index} className="flex flex-col justify-between space-y-4 rounded-lg border p-6 shadow-sm">
                <div className="space-y-2">
                  <div className="flex space-x-1">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-current text-yellow-400" />
                    ))}
                  </div>
                  <p className="text-gray-500">"{testimonial.content}"</p>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="h-12 w-12 overflow-hidden rounded-full bg-blue-100 flex items-center justify-center">
                    <span className="text-blue-600 font-semibold">{testimonial.name.charAt(0)}</span>
                  </div>
                  <div>
                    <p className="text-sm font-medium">{testimonial.name}</p>
                    <p className="text-sm text-gray-500">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-blue-600 text-white">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Ready to Get Started?</h2>
              <p className="max-w-[700px] text-blue-100 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Contact us today for a free quote on truck washing services. We'll work with your schedule and provide
                competitive pricing for single trucks or entire fleets.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Link href="/contact">
                <Button size="lg" variant="secondary" className="gap-1">
                  Get Free Quote <Calendar className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="tel:+12158694444">
                <Button
                  size="lg"
                  variant="outline"
                  className="text-white border-white hover:bg-white hover:text-blue-600 bg-transparent"
                >
                  Call Now: (215) 869-4444
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t bg-gray-100">
        <div className="container flex flex-col gap-6 py-8 md:py-12 px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10">
            <Link href="/" className="flex items-center gap-2">
              <Droplets className="h-6 w-6 text-blue-600" />
              <span className="text-xl font-bold">JetGlowWash</span>
            </Link>
            <nav className="flex gap-4 md:gap-6 flex-wrap">
              <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
                Services
              </Link>
              <Link href="/truck-washing" className="text-sm font-medium hover:underline underline-offset-4">
                Truck Washing
              </Link>
              <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
                Testimonials
              </Link>
              <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
                Contact
              </Link>
              <Link href="/privacy" className="text-sm font-medium hover:underline underline-offset-4">
                Privacy
              </Link>
              <Link href="/terms" className="text-sm font-medium hover:underline underline-offset-4">
                Terms
              </Link>
            </nav>
          </div>
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="text-sm text-gray-500">
              <p>© 2025 JetGlowWash. All rights reserved.</p>
              <p className="mt-1">+1 215-869-4444 | fatih@jetglowwash.com</p>
            </div>
            <div className="flex gap-4">
              <Link
                href="https://www.facebook.com/profile.php?id=61575566774258&sk=about"
                className="text-gray-500 hover:text-gray-900"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                </svg>
                <span className="sr-only">Facebook</span>
              </Link>
              <Link href="https://www.instagram.com/jetglowwash/" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                </svg>
                <span className="sr-only">Instagram</span>
              </Link>
              <Link href="https://x.com/jetglowwash" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                </svg>
                <span className="sr-only">Twitter</span>
              </Link>
              <Link href="https://www.tiktok.com/@jetgglowwash?lang=en" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M9 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
                  <path d="M15 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                  <path d="M15 8v8a4 4 0 0 1-4 4" />
                  <line x1="15" y1="4" x2="15" y2="12" />
                </svg>
                <span className="sr-only">TikTok</span>
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescript:file="app/robots.ts"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  const baseUrl =
    process.env.VERCEL_ENV === "production"
      ? "https://seninsite.com"
      : process.env.VERCEL_URL
        ? `https://${process.env.VERCEL_URL}`
        : "http://localhost:3000"

// Block indexing for preview/development environments
  if (process.env.VERCEL_ENV !== "production") {
    return {
      rules: {
        userAgent: "*",
        disallow: "/",
      },
    }
  }

// Production robots.txt
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin/", "/api/", "/_next/", "/dashboard/"],
    },
    sitemap: "https://seninsite.com/sitemap.xml",
    host: "https://seninsite.com",
  }
}
[V0_FILE]typescript:file="app/sitemap.ts"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://seninsite.com"

// Only generate sitemap for production
  if (process.env.VERCEL_ENV !== "production") {
    return []
  }

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/truck-washing`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/quote`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.7,
    },
  ]
}
[V0_FILE]typescript:file="lib/seo-utils.ts"
/**
 * SEO utility functions for handling production vs preview environments
 */

export function getCanonicalUrl(path = ""): string {
  const productionUrl = "https://seninsite.com"
  return `${productionUrl}${path}`
}

export function isProductionEnvironment(): boolean {
  return process.env.VERCEL_ENV === "production"
}

export function getMetaRobots(): string {
  // Block indexing for preview/development environments
  if (!isProductionEnvironment()) {
    return "noindex, nofollow"
  }

// Allow indexing for production
  return "index, follow"
}

export function shouldShowToSearchEngines(): boolean {
  return isProductionEnvironment()
}

export interface SEOConfig {
  title: string
  description: string
  path?: string
  ogImage?: string
}

export function generateSEOMetadata(config: SEOConfig) {
  const { title, description, path = "", ogImage } = config
  const canonicalUrl = getCanonicalUrl(path)
  const robots = getMetaRobots()

return {
    title,
    description,
    robots,
    canonical: canonicalUrl,
    openGraph: {
      title,
      description,
      url: canonicalUrl,
      siteName: "JetGlowWash",
      images: ogImage ? [{ url: ogImage }] : undefined,
      locale: "en_US",
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: ogImage ? [ogImage] : undefined,
    },
    alternates: {
      canonical: canonicalUrl,
    },
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { generateSEOMetadata } from "@/lib/seo-utils"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = generateSEOMetadata({
  title: "JetGlowWash - Professional Power Washing Services",
  description:
    "Transform your property with JetGlowWash's premium power washing services. Subscribe for regular cleanings and enjoy a consistently pristine exterior all year round.",
})

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`${inter.className} antialiased`}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <div className="min-h-screen w-full overflow-x-hidden">{children}</div>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import type { Metadata } from "next"

import { generateSEOMetadata } from "@/lib/seo-utils"
import ContactClientPage from "./contact-client"

// Generate metadata for this page
export const metadata: Metadata = generateSEOMetadata({
  title: "Contact JetGlowWash - Get Your Free Power Washing Quote",
  description:
    "Contact JetGlowWash for professional power washing services. Serving Pennsylvania, New Jersey, Delaware, and Maryland. Get your free quote today!",
  path: "/contact",
})

export default function ContactPage() {
  return <ContactClientPage />
}
[V0_FILE]typescriptreact:file="app/contact/contact-client.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"
import Link from "next/link"
import { ArrowLeft, Droplets, Mail, Phone } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useState, useRef } from "react"

export default function ContactClientPage() {
  const [submitted, setSubmitted] = useState(false)
  const formRef = useRef<HTMLFormElement>(null)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const formData = new FormData(e.target as HTMLFormElement)

// Send form data to Formspree with new email endpoint
      const response = await fetch("https://formspree.io/f/xpzgkqyw", {
        method: "POST",
        body: formData,
        headers: {
          Accept: "application/json",
        },
      })

if (response.ok) {
        setSubmitted(true)
        if (formRef.current) {
          formRef.current.reset()
        }
      } else {
        // Handle error
        console.error("Form submission failed")
        alert("There was a problem submitting your message. Please try again.")
      }
    } catch (error) {
      console.error("Form submission error:", error)
      alert("There was a problem submitting your message. Please try again.")
    }
  }

return (
    <div className="flex flex-col min-h-screen">
      {/* Navigation */}
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <Droplets className="h-6 w-6 text-blue-600" />
            <span className="text-xl font-bold">JetGlowWash</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
              Services
            </Link>
            <Link href="/truck-washing" className="text-sm font-medium hover:underline underline-offset-4">
              Truck Washing
            </Link>
            <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
              Testimonials
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
              Contact
            </Link>
          </nav>
        </div>
      </header>

<main className="flex-1 py-12">
        <div className="container px-4 md:px-6">
          <div className="mb-8">
            <Link href="/" className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800">
              <ArrowLeft className="h-4 w-4" />
              Back to Home
            </Link>
            <h1 className="mt-4 text-3xl font-bold tracking-tight">Contact Us</h1>
            <p className="mt-2 text-gray-500">Have questions or need a service? Get in touch with our team.</p>
          </div>

<div className="grid gap-8 md:grid-cols-2">
            {!submitted ? (
              <Card>
                <CardHeader>
                  <CardTitle>Send Us a Message</CardTitle>
                  <CardDescription>
                    Fill out the form below and we'll get back to you as soon as possible.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <form className="space-y-4" onSubmit={handleSubmit} ref={formRef}>
                    <input type="hidden" name="_replyto" value="fatih@jetglowwash.com" />
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="first-name">First Name</Label>
                        <Input id="first-name" name="first-name" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="last-name">Last Name</Label>
                        <Input id="last-name" name="last-name" required />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input id="email" name="email" type="email" required />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input id="phone" name="phone" type="tel" required />
                    </div>

<div className="space-y-2">
                      <Label>Property Type</Label>
                      <div className="grid grid-cols-2 gap-2">
                        <div className="flex items-center space-x-2">
                          <input
                            type="radio"
                            id="residential"
                            name="property-type"
                            value="residential"
                            className="h-4 w-4"
                            required
                          />
                          <Label htmlFor="residential" className="font-normal">
                            Residential
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="radio"
                            id="commercial"
                            name="property-type"
                            value="commercial"
                            className="h-4 w-4"
                          />
                          <Label htmlFor="commercial" className="font-normal">
                            Commercial
                          </Label>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label>Services Needed (Select all that apply)</Label>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="driveway"
                            name="services"
                            value="driveway"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="driveway" className="font-normal">
                            Driveway & Walkway Cleaning
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="porch"
                            name="services"
                            value="porch"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="porch" className="font-normal">
                            Front Porch Washing
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="house"
                            name="services"
                            value="house"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="house" className="font-normal">
                            House Exterior Washing
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="deck"
                            name="services"
                            value="deck"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="deck" className="font-normal">
                            Deck/Patio Cleaning
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="roof"
                            name="services"
                            value="roof"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="roof" className="font-normal">
                            Roof Washing
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="gutter"
                            name="services"
                            value="gutter"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="gutter" className="font-normal">
                            Gutter Cleaning
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="truck-washing"
                            name="services"
                            value="truck-washing"
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="truck-washing" className="font-normal">
                            Truck Washing
                          </Label>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="message">Message</Label>
                      <Textarea
                        id="message"
                        name="message"
                        className="min-h-[120px]"
                        placeholder="Tell us about your property and cleaning needs..."
                        required
                      />
                    </div>

<div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="new-customer"
                        name="new-customer"
                        value="yes"
                        className="h-4 w-4 rounded border-gray-300"
                      />
                      <Label htmlFor="new-customer" className="font-normal">
                        I'm a new customer (eligible for first-time customer discount)
                      </Label>
                    </div>

<Button type="submit" className="w-full">
                      Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle>Message Sent!</CardTitle>
                  <CardDescription>Thank you for contacting JetGlowWash.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="bg-green-50 text-green-700 p-4 rounded-md">
                    <p>
                      We've received your message and will get back to you as soon as possible, usually within 24 hours.
                    </p>
                  </div>
                  <p>
                    If you need immediate assistance, please call us directly at the phone number listed on this page.
                  </p>
                  <Button onClick={() => setSubmitted(false)} className="w-full">
                    Send Another Message
                  </Button>
                </CardContent>
              </Card>
            )}

<div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                  <CardDescription>Reach out to us directly using the information below.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="w-full h-40 mb-4 overflow-hidden rounded-lg">
                    <img
                      src="/images/house-siding.png"
                      alt="Professional power washing"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="flex items-start gap-4">
                    <Phone className="h-5 w-5 text-blue-600 mt-0.5" />
                    <div>
                      <h3 className="font-medium">Phone</h3>
                      <p className="text-gray-500">+1 215-869-4444</p>
                      <p className="text-sm text-gray-500">Mon-Fri: 8am-6pm, Sat: 9am-3pm</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <Mail className="h-5 w-5 text-blue-600 mt-0.5" />
                    <div>
                      <h3 className="font-medium">Email</h3>
                      <p className="text-gray-500">fatih@jetglowwash.com</p>
                      <p className="text-sm text-gray-500">We'll respond within 24 hours</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Service Areas</CardTitle>
                  <CardDescription>We provide power washing services in the following areas:</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-medium mb-2">Pennsylvania:</h3>
                      <ul className="grid grid-cols-2 gap-2 text-gray-500">
                        <li>Philadelphia</li>
                        <li>Allentown</li>
                        <li>Bethlehem</li>
                        <li>Easton</li>
                        <li>Reading</li>
                        <li>Doylestown</li>
                        <li>Phoenixville</li>
                        <li>Norristown</li>
                        <li>Bensalem</li>
                        <li>Media</li>
                        <li>Upper Darby</li>
                        <li>Conshohocken</li>
                        <li>Ardmore</li>
                      </ul>
                    </div>

<div>
                      <h3 className="font-medium mb-2">New Jersey:</h3>
                      <ul className="grid grid-cols-2 gap-2 text-gray-500">
                        <li>Cherry Hill</li>
                        <li>Collingswood</li>
                        <li>Woodbury</li>
                        <li>Trenton</li>
                        <li>Vineland</li>
                      </ul>
                    </div>

<div>
                      <h3 className="font-medium mb-2">Delaware and Maryland:</h3>
                      <ul className="grid grid-cols-2 gap-2 text-gray-500">
                        <li>Wilmington, DE</li>
                        <li>Smyrna, DE</li>
                        <li>Cecil County, MD</li>
                      </ul>
                    </div>
                  </div>
                  <p className="mt-4 text-sm text-gray-500">
                    Not sure if we service your area? Contact us to find out!
                  </p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>First-Time Customer?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-500">
                    🎁 Ask about our special discounts for first-time customers when you contact us!
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t bg-gray-100 mt-12">
        <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10">
            <Link href="/" className="flex items-center gap-2">
              <Droplets className="h-6 w-6 text-blue-600" />
              <span className="text-xl font-bold">JetGlowWash</span>
            </Link>
            <nav className="flex gap-4 md:gap-6 flex-wrap">
              <Link href="/#services" className="text-sm font-medium hover:underline underline-offset-4">
                Services
              </Link>
              <Link href="/truck-washing" className="text-sm font-medium hover:underline underline-offset-4">
                Truck Washing
              </Link>
              <Link href="/#testimonials" className="text-sm font-medium hover:underline underline-offset-4">
                Testimonials
              </Link>
              <Link href="/contact" className="text-sm font-medium hover:underline underline-offset-4">
                Contact
              </Link>
              <Link href="/privacy" className="text-sm font-medium hover:underline underline-offset-4">
                Privacy
              </Link>
              <Link href="/terms" className="text-sm font-medium hover:underline underline-offset-4">
                Terms
              </Link>
            </nav>
          </div>
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="text-sm text-gray-500">
              <p>© 2025 JetGlowWash. All rights reserved.</p>
              <p className="mt-1">+1 215-869-4444 | fatih@jetglowwash.com</p>
            </div>
            <div className="flex gap-4">
              <Link
                href="https://www.facebook.com/profile.php?id=61575566774258&sk=about"
                className="text-gray-500 hover:text-gray-900"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                </svg>
                <span className="sr-only">Facebook</span>
              </Link>
              <Link href="https://www.instagram.com/jetglowwash/" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                </svg>
                <span className="sr-only">Instagram</span>
              </Link>
              <Link href="https://x.com/jetglowwash" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                </svg>
                <span className="sr-only">Twitter</span>
              </Link>
              <Link href="https://www.tiktok.com/@jetgglowwash?lang=en" className="text-gray-500 hover:text-gray-900">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5"
                >
                  <path d="M9 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
                  <path d="M15 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                  <path d="M15 8v8a4 4 0 0 1-4 4" />
                  <line x1="15" y1="4" x2="15" y2="12" />
                </svg>
                <span className="sr-only">TikTok</span>
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]javascript:file="next.config.mjs" isEdit="true" isQuickEdit="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['blob.v0.app'],
    unoptimized: true,
  },
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  // Ensure proper static file handling
  trailingSlash: false,
  // Optimize for better performance
  poweredByHeader: false,
  // Ensure proper viewport handling
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block',
          },
          // Add canonical header for production
          ...(process.env.VERCEL_ENV === 'production' ? [
            {
              key: 'Link',
              value: '<https://seninsite.com>; rel="canonical"',
            },
          ] : []),
        ],
      },
    ]
  },
  // Add redirects for SEO
  async redirects() {
    return [
      // Redirect www to non-www in production
      ...(process.env.VERCEL_ENV === 'production' ? [
        {
          source: '/:path*',
          has: [
            {
              type: 'host',
              value: 'www.seninsite.com',
            },
          ],
          destination: 'https://seninsite.com/:path*',
          permanent: true,
        },
      ] : []),
    ]
  },
}

export default nextConfig97:T30345,[V0_FILE]typescriptreact:file="app/subscribe/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"