diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx new file mode 100644 index 0000000..7c10a5c --- /dev/null +++ b/src/components/sections/ContactSection.tsx @@ -0,0 +1,156 @@ +'use client' + +import { useState } from 'react' +import { useVulaContent } from '@/hooks/useVulaContent' +import Button from '@/components/ui/Button' +import Input from '@/components/ui/Input' +import { ArrowRight, Mail, MapPin, MessageCircle, Phone, Send } from 'lucide-react' + +export default function ContactSection() { + const { items, loading } = useVulaContent('business_hours') + + // Form state — MUST be declared before any early return + const [formState, setFormState] = useState({ name: '', email: '', message: '' }) + const [sent, setSent] = useState(false) + + if (loading) { + return
+ } + if (items.length === 0) return null + + const handleChange = (field: string) => (e: React.ChangeEvent) => { + setFormState((prev) => ({ ...prev, [field]: e.target.value })) + } + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + setSent(true) + setFormState({ name: '', email: '', message: '' }) + } + + return ( +
+ {/* Gold top strip */} +
+ +
+
+ {/* Left column — contact info */} +
+ Hit Us Up +

+ Connect with the movement +

+ + {/* Business hours from CMS */} +
+

Pop-up Shop Hours

+ {items.map((item) => { + const d = item.data as { + day_of_week?: string + open_time?: string + close_time?: string + is_closed?: boolean + note?: string + } + return ( +
+ {d.day_of_week} + + {d.is_closed ? 'Closed' : `${d.open_time} – ${d.close_time}`} + {d.note && {d.note}} + +
+ ) + })} +
+ + {/* Contact details */} +
+
+ + 854 Mofolo Central, Soweto, Johannesburg, 1804 +
+
+ + +27 11 234 5678 +
+
+ + hello@urbanthreads.co.za +
+ + + WhatsApp Us + +
+ + {/* Social links */} + +
+ + {/* Right column — form */} +
+ {sent ? ( +
+
+ +

Message sent!

+

We'll get back to you within 24 hours.

+
+
+ ) : ( + <> +

Send a message

+
+ + +