Deploy

src/components/sections/VisitOurPretoriaOasisSection.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { useVulaContent } from "@/hooks/useVulaContent"
+import { ArrowRight, Clock, MapPin } from 'lucide-react'
+import Button from "@/components/ui/Button"
+import Image from "next/image"
+
+export default function VisitOurPretoriaOasisSection() {
+  const { items, loading } = useVulaContent("business_hours")
+
+  // Hooks must be before early returns
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const 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
+  })
+
+  return (
+    <section
+      id="visit-pretoria-oasis"
+      data-vula-section="visit-pretoria-oasis"
+      data-vula-cms="business_hours"
+      className="py-20 bg-white"
+    >
+      <div className="container mx-auto px-4 max-w-6xl">
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          <div>
+            <h2 className="text-4xl font-serif font-bold text-[#21140d] mb-4">
+              Visit our little oasis in Pretoria
+            </h2>
+            <p className="text-lg text-[#21140d]/70 mb-8 leading-relaxed">
+              Come smell the botanicals, feel the textures, and meet the hands that
+              craft each batch. Our workshop door is always open — just knock and
+              say you&apos;re from the land of marula.
+            </p>
+
+            <div className="bg-[#f9f5f4] rounded-xl p-6 space-y-4 mb-8">
+              <div className="flex gap-3">
+                <MapPin className="w-5 h-5 text-[#8b5a3c] mt-0.5 shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#21140d]">Ndlovu Naturals Workshop</p>
+                  <p className="text-[#21140d]/70">
+                    123 Lynnwood Road, Pretoria,<br />Gauteng 0002
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-3">
+                <Clock className="w-5 h-5 text-[#8b5a3c] mt-0.5 shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#21140d] mb-2">Opening hours</p>
+                  <div className="space-y-1 text-sm">
+                    {hours.map((h, i) => (
+                      <div key={i} className="flex justify-between gap-4">
+                        <span className="text-[#21140d]/80">{h.day_of_week}</span>
+                        {h.is_closed ? (
+                          <span className="text-[#ea580c] font-medium">Closed</span>
+                        ) : (
+                          <span className="text-[#21140d]/70">
+                            {h.open_time} – {h.close_time}
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                    {hours.some((h) => h.note) && (
+                      <p className="text-xs text-[#21140d]/50 mt-2">
+                        {hours.find((h) => h.note)?.note}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <Button
+              variant="default"
+              size="lg"
+              className="bg-[#8b5a3c] hover:bg-[#7a4d32] text-white"
+              onClick={() =>
+                window.open(
+                  "https://maps.google.com/?q=123+Lynnwood+Road+Pretoria",
+                  "_blank"
+                )
+              }
+            >
+              Get directions <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="relative h-80 md:h-full min-h-[300px] rounded-xl overflow-hidden shadow-lg">
+            <Image
+              src="https://images.pexels.com/photos/20425270/pexels-photo-20425270.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop"
+              alt="Ndlovu Naturals workshop interior"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+          </div>
+        </div>
+
+        {/* Map embed */}
+        <div className="mt-12 rounded-xl overflow-hidden shadow-lg aspect-video">
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3590.123456!2d28.193!3d-25.746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDQ0JzQ1LjYiUyAyOMKwMTEnMzUuMCJF!5e0!3m2!1sen!2sza!4v1"
+            width="100%"
+            height="100%"
+            style={{ border: 0 }}
+            allowFullScreen
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+            title="Ndlovu Naturals location in Pretoria"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}