Deploy

2026-06-23 08:47:29 +00:00
parent b3d3228c71
commit c497fc1d89
1 changed files with 91 additions and 0 deletions
@@ -0,0 +1,91 @@
 'use client'
 import { useEmDashContent } from "@/hooks/useEmDashContent"
 import { Car, Clock, MapPin } from 'lucide-react'
 export default function KwaNtofontofoLocationSection() {
  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-[#d4af37] border-t-transparent animate-spin" />
      </div>
    )
  }
  if (items.length === 0) return null
  return (
    <section
      id="location"
      data-vula-section="kwantofontofolocation"
      data-vula-cms="business_hours"
      className="bg-white py-16 px-4"
    >
      <div className="max-w-5xl mx-auto">
        <h2 className="text-3xl font-bold text-gray-900 mb-6 text-center">Our Location</h2>
        <div className="grid md:grid-cols-2 gap-8">
          {/* Address and Map */}
          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-[#d4af37] mt-1" />
              <div>
                <p className="font-semibold">Address</p>
                <p className="text-gray-600">44 Rutherford Circle, Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Car className="w-5 h-5 text-[#d4af37] mt-1" />
              <div>
                <p className="font-semibold">Convenience &amp; Safety</p>
                <p className="text-gray-600">
                  Opposite the Bisley Nature Reserve. Just 1 km from Pietermaritzburg Airport. Secure parking under burglar alarm.
                </p>
              </div>
            </div>
            {/* Embedded Map */}
            <div className="w-full h-64 rounded-xl overflow-hidden border border-gray-200">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.678!2d30.361!3d-29.627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef6f2f2f2f2f2f%3A0x1234567890abcdef!2s44+Rutherford+Circle%2C+Bisley%2C+Pietermaritzburg%2C+3201!5e0!3m2!1sen!2sza!4v1234567890"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="KwaNtofontofo Guest House location"
              />
            </div>
          </div>
          {/* Business Hours from CMS */}
          <div className="bg-neutral-50 rounded-xl p-6 border border-gray-200">
            <div className="flex items-center gap-2 mb-4">
              <Clock className="w-5 h-5 text-[#d4af37]" />
              <h3 className="text-xl font-semibold text-gray-900">Business Hours</h3>
            </div>
            <ul className="space-y-2">
              {items.map((item) => {
                const d = item.data as { day_of_week?: string; open_time?: string; close_time?: string; is_closed?: boolean; note?: string }
                return (
                  <li key={item.id} className="flex justify-between text-gray-700">
                    <span className="font-medium">{d.day_of_week || ""}</span>
                    <span>
                      {d.is_closed ? (
                        <span className="text-red-500">Closed</span>
                      ) : (
                        <span>{d.open_time} – {d.close_time}</span>
                      )}
                    </span>
                  </li>
                )
              })}
            </ul>
            <p className="text-sm text-gray-500 mt-4">* Public holidays may differ. Please enquire.</p>
          </div>
        </div>
      </div>
    </section>
  )
 }