Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,130 @@
|
||||
'use client'
|
||||
|
||||
import { useState, type ChangeEvent } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight } from 'lucide-react'
|
||||
import Button from '@/components/ui/Button'
|
||||
import Input from '@/components/ui/Input'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
|
||||
import BusinessContact from '@/components/BusinessContact'
|
||||
import BusinessHours from '@/components/BusinessHours'
|
||||
import BusinessMap from '@/components/BusinessMap'
|
||||
import { useEnquiry } from '@/hooks/useEnquiry'
|
||||
|
||||
type Form = { name: string; phone: string; email: string; message: string }
|
||||
|
||||
export default function VisitTheClinicSection() {
|
||||
const enquiry = useEnquiry()
|
||||
const [form, setForm] = useState<Form>({ name: '', phone: '', email: '', message: '' })
|
||||
const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null)
|
||||
const [sending, setSending] = useState(false)
|
||||
|
||||
const set =
|
||||
(key: keyof Form) =>
|
||||
(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }))
|
||||
|
||||
return (
|
||||
<section data-vula-section="visittheclinic" id="visit-the-clinic" className="bg-muted text-foreground py-20 sm:py-24">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid gap-12 lg:grid-cols-12">
|
||||
<div className="lg:col-span-7">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Visit the clinic</span>
|
||||
<h2 className="mt-3 text-3xl font-bold leading-tight sm:text-4xl">
|
||||
Come in for an adjustment, or send us a message first.
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[44ch] text-base text-muted-foreground">
|
||||
The practice is set up for families: a pram fits through the door, there is room for kids in the waiting area, and a newborn check does not need a full adult appointment slot.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Where to find us</h3>
|
||||
<BusinessContact className="mt-2 text-sm text-muted-foreground" />
|
||||
</div>
|
||||
<BusinessHours title="Clinic hours" />
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<BusinessMap />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Send a message</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{result?.ok ? (
|
||||
<p className="text-sm leading-relaxed text-foreground">{result.message}</p>
|
||||
) : enquiry.available ? (
|
||||
<div className="space-y-4">
|
||||
<Input label="Your name" value={form.name} onChange={set('name')} />
|
||||
<Input label="Phone or WhatsApp number" value={form.phone} onChange={set('phone')} />
|
||||
<Input label="Email (optional)" type="email" value={form.email} onChange={set('email')} />
|
||||
<div>
|
||||
<label htmlFor="visit-message" className="mb-1 block text-sm font-medium text-foreground">
|
||||
What would you like help with?
|
||||
</label>
|
||||
<textarea
|
||||
id="visit-message"
|
||||
rows={4}
|
||||
value={form.message}
|
||||
onChange={set('message')}
|
||||
className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-all duration-200 ease-out focus:border-primary focus:ring-2 focus:ring-primary/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{result && !result.ok ? (
|
||||
<p className="text-sm font-medium text-foreground">{result.message}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-col gap-3 pt-2">
|
||||
{enquiry.channels.map((channel) => (
|
||||
<Button
|
||||
key={channel}
|
||||
type="button"
|
||||
fullWidth
|
||||
disabled={sending}
|
||||
variant={channel === 'whatsapp' ? 'default' : 'outline'}
|
||||
onClick={async () => {
|
||||
if (!form.name.trim() || !form.phone.trim()) {
|
||||
setResult({ ok: false, message: 'Please add your name and a contact number so the practice can reach you.' })
|
||||
return
|
||||
}
|
||||
setSending(true)
|
||||
const res = await enquiry.send(form, channel)
|
||||
setResult(res)
|
||||
setSending(false)
|
||||
}}
|
||||
>
|
||||
{channel === 'whatsapp' ? 'Send on WhatsApp' : 'Send by email'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
Online messaging is not switched on yet. Book a time from the services page and the practice will confirm it with you directly.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-card p-6 shadow-md transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-xl">
|
||||
<p className="text-base font-semibold text-foreground">Prefer to pick a time yourself?</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Choose a slot online and the practice confirms it with you.</p>
|
||||
<Button asChild fullWidth className="mt-4">
|
||||
<Link href="/services">
|
||||
Book an appointment
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user