185 lines
11 KiB
TypeScript
185 lines
11 KiB
TypeScript
import { useState } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||
import { useSaasMutation } from "@/hooks/use-tygarun";
|
||
import {
|
||
MapPin, Phone, Mail, Clock, AlertTriangle, Send
|
||
} from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
|
||
const faqs = [
|
||
{ q: "What insurance plans do you accept?", a: "We accept most major insurance plans including BlueCross BlueShield, Aetna, UnitedHealthcare, Cigna, Kaiser Permanente, and Humana. Please contact our billing department for specific coverage questions." },
|
||
{ q: "How long is the average wait time?", a: "We respect your time. Most appointments begin within 15 minutes of your scheduled time. For walk-in visits, wait times average 30–45 minutes depending on patient volume." },
|
||
{ q: "What should new patients bring?", a: "New patients should bring a valid photo ID, insurance card, list of current medications, and any relevant medical records or imaging. Please arrive 15 minutes early to complete paperwork." },
|
||
{ q: "Do you handle medical emergencies?", a: "For life-threatening emergencies, always call 911. Our clinic provides urgent care for non-life-threatening conditions. Our 24/7 emergency line is available for guidance on whether to visit the ER or schedule an urgent appointment." },
|
||
];
|
||
|
||
export default function ContactPage() {
|
||
const [sending, setSending] = useState(false);
|
||
const { mutate: bookAppointment } = useSaasMutation("scheduling", "/bookings");
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const form = e.currentTarget as HTMLFormElement;
|
||
const body = Object.fromEntries(new FormData(form).entries());
|
||
setSending(true);
|
||
try {
|
||
await bookAppointment(body);
|
||
toast.success("Appointment request submitted!", {
|
||
description: "Our team will call you within 24 hours to confirm your appointment.",
|
||
});
|
||
form.reset();
|
||
} catch {
|
||
toast.error("Could not submit request. Please call us or try again.");
|
||
} finally {
|
||
setSending(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||
<Header />
|
||
|
||
{/* ── HERO ── */}
|
||
<section className="pt-32 pb-16 bg-gradient-to-b from-sky-950 via-slate-900 to-background">
|
||
<div className="mx-auto max-w-4xl px-6 text-center animate-fade-up">
|
||
<Badge variant="secondary" className="mb-4 bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur">Get in Touch</Badge>
|
||
<h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">Contact Us</h1>
|
||
<p className="mt-4 text-slate-300 max-w-2xl mx-auto">We are here to help. Reach out to schedule an appointment or ask any questions about our services.</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── MAIN CONTENT ── */}
|
||
<section className="py-20">
|
||
<div className="mx-auto max-w-6xl px-6">
|
||
<div className="grid lg:grid-cols-2 gap-12">
|
||
|
||
{/* LEFT: LOCATIONS */}
|
||
<div className="space-y-6 animate-fade-up">
|
||
<Card className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-semibold text-lg mb-4">Main Campus</h3>
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-sky-500 flex-shrink-0" /><span>1200 Wellness Boulevard, Suite 100, San Francisco, CA 94102</span></div>
|
||
<div className="flex items-center gap-3"><Phone className="h-4 w-4 text-sky-500" /><span>(415) 555-0180</span></div>
|
||
<div className="flex items-center gap-3"><Mail className="h-4 w-4 text-sky-500" /><span>care@vitalitymedical.com</span></div>
|
||
<div className="flex items-center gap-3"><Clock className="h-4 w-4 text-sky-500" /><span>Mon–Fri 8:00 AM – 6:00 PM, Sat 9:00 AM – 1:00 PM</span></div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60">
|
||
<CardContent className="p-6">
|
||
<h3 className="font-semibold text-lg mb-4">Satellite Clinic – Marina District</h3>
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-sky-500 flex-shrink-0" /><span>3456 Chestnut Street, San Francisco, CA 94123</span></div>
|
||
<div className="flex items-center gap-3"><Phone className="h-4 w-4 text-sky-500" /><span>(415) 555-0195</span></div>
|
||
<div className="flex items-center gap-3"><Clock className="h-4 w-4 text-sky-500" /><span>Mon–Fri 9:00 AM – 5:00 PM</span></div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-900/50">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2 text-red-600 dark:text-red-400 font-semibold mb-2">
|
||
<AlertTriangle className="h-5 w-5" /> Emergency Line
|
||
</div>
|
||
<p className="text-2xl font-bold text-red-700 dark:text-red-300">(415) 555-0911</p>
|
||
<p className="text-sm text-red-500 dark:text-red-400 mt-1">Available 24 hours, 7 days a week</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* MAP PLACEHOLDER */}
|
||
<div className="aspect-video rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 flex items-center justify-center">
|
||
<div className="text-center text-muted-foreground">
|
||
<MapPin className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||
<p className="text-sm">Interactive Map</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT: FORM */}
|
||
<div className="animate-fade-up">
|
||
<Card className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60">
|
||
<CardContent className="p-8">
|
||
<h3 className="text-xl font-semibold mb-6">Request an Appointment</h3>
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="grid sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Full Name</label>
|
||
<Input name="name" placeholder="John Doe" required className="rounded-lg" />
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Email</label>
|
||
<Input name="email" type="email" placeholder="john@example.com" required className="rounded-lg" />
|
||
</div>
|
||
</div>
|
||
<div className="grid sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Phone</label>
|
||
<Input name="phone" type="tel" placeholder="(415) 555-0000" required className="rounded-lg" />
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Department</label>
|
||
<Select>
|
||
<SelectTrigger className="rounded-lg">
|
||
<SelectValue placeholder="Select department" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="primary">Primary Care</SelectItem>
|
||
<SelectItem value="cardiology">Cardiology</SelectItem>
|
||
<SelectItem value="neurology">Neurology</SelectItem>
|
||
<SelectItem value="orthopedics">Orthopedics</SelectItem>
|
||
<SelectItem value="ophthalmology">Ophthalmology</SelectItem>
|
||
<SelectItem value="pediatrics">Pediatrics</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Preferred Date</label>
|
||
<Input name="date" type="date" required className="rounded-lg" />
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium mb-1.5 block">Message</label>
|
||
<Textarea name="message" placeholder="Tell us about your symptoms or concerns..." rows={4} className="rounded-lg resize-none" />
|
||
</div>
|
||
<Button type="submit" disabled={sending} className="w-full bg-sky-500 hover:bg-sky-600 text-white rounded-full shadow-lg shadow-sky-500/20 active:scale-[0.97] transition-all">
|
||
{sending ? "Submitting..." : (<><Send className="mr-2 h-4 w-4" /> Submit Request</>)}
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FAQ ── */}
|
||
<section className="py-20 bg-slate-50 dark:bg-slate-950">
|
||
<div className="mx-auto max-w-3xl px-6">
|
||
<div className="text-center mb-12 animate-fade-up">
|
||
<h2 className="text-2xl sm:text-3xl font-bold">Frequently Asked Questions</h2>
|
||
</div>
|
||
<Accordion type="single" collapsible className="space-y-3 animate-fade-up">
|
||
{faqs.map((f, i) => (
|
||
<AccordionItem key={i} value={`faq-${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
|
||
<AccordionTrigger className="text-left font-medium hover:no-underline">{f.q}</AccordionTrigger>
|
||
<AccordionContent className="text-muted-foreground">{f.a}</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
} |