Deploy

2026-07-25 19:05:20 +00:00
parent 5d1d64759c
commit ec44429c66
1 changed files with 116 additions and 0 deletions
@@ -0,0 +1,116 @@
 'use client'
 import { useEmDashContent } from "@/hooks/useEmDashContent"
 import { Clock, MapPin, Navigation } from 'lucide-react'
 export default function LocationSection() {
  const { items, loading } = useEmDashContent("business_hours")
  if (loading) {
    return (
      <div className="flex justify-center py-16 bg-[#17120f]">
        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin text-[#d4af37]" />
      </div>
    )
  }
  if (items.length === 0) return null
  return (
    <section
      id="location"
      data-vula-section="location"
      data-vula-cms="business_hours"
      className="py-28 bg-[#1a1511]"
    >
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center mb-14">
          <div className="flex items-center justify-center gap-4 mb-5">
            <span className="h-px w-14 bg-[#d4af37]" />
            <span className="text-xs uppercase tracking-[0.2em] text-[#d4af37]">Find us</span>
            <span className="h-px w-14 bg-[#d4af37]" />
          </div>
          <h2 className="text-4xl md:text-5xl font-light text-[#eeeae7] mb-4">
            Nestled on the edge of{" "}
            <span className="italic text-[#d4af37] font-serif">Nairobi</span>
          </h2>
          <p className="text-[#c4b8ae] max-w-xl mx-auto">
            A peaceful retreat minutes from Nairobi National Park and the city centre.
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-8 items-start">
          {/* Map */}
          <div className="border border-[#403630] overflow-hidden rounded-sm">
            <iframe
              title="Masai Suites location"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.811432840346!2d36.8179633!3d-1.2920659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d7c4b3e0e1%3A0x1e4e2e3a5b5f3e3a!2sNairobi%2C%20Kenya!5e0!3m2!1sen!2s!4v"
              width="100%"
              height="340"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              className="w-full"
            />
          </div>
          {/* Hours & directions */}
          <div className="space-y-8">
            <div>
              <h3 className="flex items-center gap-2 text-sm uppercase tracking-[0.1em] text-[#d4af37] mb-4">
                <Clock className="w-4 h-4" />
                Reception hours
              </h3>
              <div className="space-y-2 border border-[#403630] rounded-sm p-4">
                {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 justify-between text-sm text-[#c4b8ae]"
                    >
                      <span className="font-medium text-[#eeeae7]">
                        {d.day_of_week}
                      </span>
                      <span>
                        {d.is_closed
                          ? "Closed"
                          : `${d.open_time} \u2013 ${d.close_time}${d.note ? ` (${d.note})` : ""}`}
                      </span>
                    </div>
                  )
                })}
              </div>
            </div>
            <div>
              <h3 className="flex items-center gap-2 text-sm uppercase tracking-[0.1em] text-[#d4af37] mb-4">
                <Navigation className="w-4 h-4" />
                Driving from Nairobi
              </h3>
              <p className="text-sm text-[#c4b8ae] leading-relaxed">
                Take Langata Road south past the National Park gate. After 8 km,
                turn onto Magadi Road at the <span className="text-[#eeeae7]">Oloolua</span> junction.
                Masai Suites is 800 m ahead on the right – look for the acacia-lined driveway.
              </p>
            </div>
            <div className="flex items-start gap-2 text-sm text-[#c4b8ae]">
              <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-[#d4af37]" />
              <span>
                Off Magadi Road, Langata, Nairobi<br />
                <span className="text-[#eeeae7]">GPS</span>: -1.2920, 36.8179
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }