From 168c332ceed64e355c13610fe36c71041cf960de Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 15 Sep 2026 18:02:56 +0000
Subject: [PATCH] Deploy

---
 src/app/services/page.tsx | 148 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/app/services/page.tsx

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..0d73b25
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,148 @@
+'use client'
+import { useState, useMemo } from 'react'
+import { useProducts } from '@/hooks/useProducts'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Sparkles, ArrowLeft } from 'lucide-react'
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
+  return `${sym}${(amount / 100).toFixed(0)}`
+}
+
+export default function ServicesPage() {
+  const { products: services, loading, error } = useProducts(100)
+  const [activeCollection, setActiveCollection] = useState<string>('All')
+
+  const collections = useMemo(() => Array.from(
+    new Map(services.flatMap(s => s.collection ? [[s.collection.id, s.collection]] : [])).values()
+  ), [services])
+
+  const filtered = useMemo(() => {
+    if (activeCollection === 'All') return services
+    return services.filter(s => s.collection?.id === activeCollection)
+  }, [services, activeCollection])
+
+  // Does this business publish prices at all? Read from the services rather
+  // than configured, so a catalogue with no prices simply never mentions money.
+  // Computed over ALL services, not the filtered view — otherwise choosing a
+  // category would make prices appear and vanish.
+  const anyPriced = useMemo(
+    () => services.some(s => s.variants?.[0]?.prices?.[0]?.amount !== undefined),
+    [services],
+  )
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <p className="text-destructive">Failed to load services. Please try again.</p>
+      </div>
+    )
+  }
+
+  return (
+    <main className="min-h-screen bg-background">
+      {/* Page header */}
+      <div className="bg-card border-b border-border">
+        <div className="container mx-auto px-4 py-10">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground mb-4 transition-colors">
+            <ArrowLeft className="h-4 w-4" />
+            Back to home
+          </Link>
+          <h1 className="text-4xl font-bold tracking-tight">Our Services</h1>
+          {services.length > 0 && (
+            <p className="text-muted-foreground mt-1">{services.length} service{services.length !== 1 ? 's' : ''} available</p>
+          )}
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 py-10">
+        {/* Collection filter tabs */}
+        {collections.length > 0 && (
+          <div className="flex gap-2 flex-wrap mb-8">
+            {[{ id: 'All', title: 'All' }, ...collections].map(col => (
+              <button
+                key={col.id}
+                onClick={() => setActiveCollection(col.id)}
+                className={"px-4 py-2 rounded-full text-sm font-medium transition-colors " + (activeCollection === col.id ? "bg-primary text-primary-foreground shadow-sm" : "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground")}
+              >
+                {col.title ?? col.id}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Services grid */}
+        {filtered.length === 0 ? (
+          <div className="text-center py-24">
+            <Sparkles className="h-14 w-14 mx-auto mb-4 text-muted-foreground/30" />
+            <p className="text-muted-foreground text-lg">
+              {activeCollection !== 'All' ? 'No services in this category.' : 'Services coming soon.'}
+            </p>
+            {activeCollection !== 'All' && (
+              <button onClick={() => setActiveCollection('All')} className="mt-3 text-sm text-primary hover:underline">
+                View all services
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filtered.map((service) => {
+              const variant = service.variants?.[0]
+              const price = variant?.prices?.[0]
+              const amount = price?.amount
+              const currency = price?.currency_code
+              return (
+                <div key={service.id} className="bg-card rounded-2xl overflow-hidden border border-border hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 flex flex-col">
+                  {service.thumbnail && (
+                    <div className="relative aspect-video overflow-hidden bg-muted shrink-0">
+                      <Image src={service.thumbnail} alt={service.title} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" className="object-cover" />
+                    </div>
+                  )}
+                  <div className="p-5 flex flex-col flex-1">
+                    {service.collection?.title && (
+                      <span className="text-xs font-medium text-primary/70 uppercase tracking-wide mb-1">{service.collection.title}</span>
+                    )}
+                    <h2 className="text-lg font-semibold leading-snug mb-1">{service.title}</h2>
+                    {service.description && (
+                      <p className="text-muted-foreground text-sm leading-relaxed mb-3 flex-1 line-clamp-2">{service.description}</p>
+                    )}
+                    <div className={"flex items-center mt-auto pt-3 border-t border-border " + (anyPriced ? "justify-between" : "justify-end")}>
+                      {/* No prices anywhere: the row closes up and no card
+                          mentions money. Some priced: an empty span holds the
+                          column, so a service without one reads as deliberate
+                          rather than as a value that failed to load. Blank on
+                          purpose — any words here belong to the owner. */}
+                      {anyPriced && (
+                        amount !== undefined ? (
+                          <p className="text-xl font-bold text-primary">{formatPrice(amount, currency)}</p>
+                        ) : (
+                          <span aria-hidden="true" />
+                        )
+                      )}
+                      <Link
+                        href={"/booking/" + service.id}
+                        className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
+                      >
+                        Book Now
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}