Deploy

src/components/sections/LodgeRhythmsSection.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { Clock } from 'lucide-react'
+
+export default function LodgeRhythmsSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  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
+
+  return (
+    <section
+      id="lodgerhythms"
+      data-vula-section="lodgerhythms"
+      data-vula-cms="business_hours"
+      className="py-20 bg-[#f9f7f4]"
+    >
+      <div className="max-w-4xl mx-auto px-4">
+        <h2 className="text-4xl font-semibold text-[#211c0d] mb-2 text-center">
+          Daily Rhythms of the Lodge
+        </h2>
+        <p className="text-lg text-[#211c0d]/70 mb-12 text-center max-w-xl mx-auto">
+          From sunrise game drives to evening boma dinners — plan your immersion in the bush rhythm.
+        </p>
+        <div className="bg-white rounded-xl shadow-lg border border-[#e2dfd4] divide-y divide-[#e2dfd4]">
+          {items.map((item) => {
+            const d = item.data as {
+              day_of_week?: string
+              open_time?: string
+              close_time?: string
+              is_closed?: boolean
+              note?: string
+            }
+            return (
+              <div key={item.id} className="flex items-center justify-between px-6 py-4">
+                <div className="flex items-center gap-3">
+                  <Clock className="w-5 h-5 text-[#d4af37]" />
+                  <span className="font-medium text-[#211c0d]">{d.day_of_week}</span>
+                </div>
+                <div className="text-right">
+                  {d.is_closed ? (
+                    <span className="text-[#dc2626] font-semibold">Closed</span>
+                  ) : (
+                    <span className="text-[#211c0d]/80">
+                      {d.open_time} – {d.close_time}
+                    </span>
+                  )}
+                  {d.note && (
+                    <p className="text-xs text-[#211c0d]/50 mt-1">{d.note}</p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}