Deploy

src/components/sections/BusinessHoursSection.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useEmDashContent } from "@/hooks/useEmDashContent"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"
+import { Clock } from 'lucide-react'
+
+export default function BusinessHoursSection() {
+  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="business-hours"
+      data-vula-section="businesshours"
+      data-vula-cms="business_hours"
+      className="bg-[#FDF6EC] py-20 px-6"
+    >
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-10">
+          <Clock className="w-10 h-10 text-[#C0392B] mx-auto mb-3" />
+          <h2 className="text-3xl font-bold text-[#2C1810]">Business Hours</h2>
+          <p className="text-[#2C1810]/70 mt-2">
+            Professional and flexible — we accommodate your travel schedule.
+          </p>
+        </div>
+
+        <Card className="bg-white shadow-md border border-[#e5e7eb]">
+          <CardHeader>
+            <CardTitle className="text-[#2C1810] text-xl">Reception &amp; Services</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-sm">
+                <thead>
+                  <tr className="border-b border-[#e5e7eb]">
+                    <th className="pb-3 font-semibold text-[#2C1810]">Day</th>
+                    <th className="pb-3 font-semibold text-[#2C1810]">Open</th>
+                    <th className="pb-3 font-semibold text-[#2C1810]">Close</th>
+                    <th className="pb-3 font-semibold text-[#2C1810]">Notes</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item) => {
+                    const d = item.data as {
+                      day_of_week?: string
+                      open_time?: string
+                      close_time?: string
+                      is_closed?: boolean
+                      note?: string
+                    }
+                    return (
+                      <tr key={item.id} className="border-b border-[#e5e7eb] last:border-0">
+                        <td className="py-3 text-[#2C1810] font-medium">
+                          {d.is_closed ? (
+                            <span className="text-red-600">{d.day_of_week || "—"} (Closed)</span>
+                          ) : (
+                            d.day_of_week || "—"
+                          )}
+                        </td>
+                        <td className="py-3 text-[#2C1810]/80">
+                          {d.is_closed ? "—" : d.open_time || "—"}
+                        </td>
+                        <td className="py-3 text-[#2C1810]/80">
+                          {d.is_closed ? "—" : d.close_time || "—"}
+                        </td>
+                        <td className="py-3 text-[#2C1810]/60 text-xs italic">
+                          {d.note || ""}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-6 p-4 bg-[#FDF6EC] rounded-lg border border-[#e5e7eb]">
+              <p className="text-sm text-[#2C1810]/80">
+                <span className="font-semibold">Early airport transfers:</span> Please request at least 24 hours in advance.
+                We offer flexible check-in and check-out times based on flight schedules.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}