Deploy

2026-07-25 13:58:36 +00:00
parent 998d078228
commit 7abbe88337
1 changed files with 72 additions and 0 deletions
@@ -0,0 +1,72 @@
 'use client'
 import { useEmDashContent } from '@/hooks/useEmDashContent'
 export default function StayPracticalSection() {
  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
  const weekDays = items.filter(i => !(i.data as any).is_closed)
  const closedDays = items.filter(i => (i.data as any).is_closed)
  return (
    <section id="stay-info" data-vula-section="staypractical" data-vula-cms="business_hours" className="bg-white py-16">
      <div className="max-w-5xl mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-[#210d0d] mb-3 tracking-tight">Everything you need for a seamless stay</h2>
        <p className="text-[#210d0d] opacity-70 mb-10 max-w-xl">Check-in, dining hours, and how to reach us—so nothing surprises you.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="bg-[#f9f4f4] rounded-xl p-6 border border-[#e2d4d4]">
            <h3 className="font-semibold text-[#210d0d] mb-4">Reception &amp; Dining Hours</h3>
            <ul className="space-y-2">
              {weekDays.map((item) => {
                const d = item.data as { day_of_week?: string; open_time?: string; close_time?: string; note?: string }
                return (
                  <li key={item.id} className="flex justify-between text-sm text-[#210d0d] opacity-80">
                    <span className="font-medium">{d.day_of_week}</span>
                    <span>{d.open_time} – {d.close_time}</span>
                  </li>
                )
              })}
              {closedDays.map((item) => {
                const d = item.data as { day_of_week?: string; note?: string }
                return (
                  <li key={item.id} className="flex justify-between text-sm text-[#210d0d] opacity-80">
                    <span className="font-medium">{d.day_of_week}</span>
                    <span className="text-[#dc2626]">Closed {d.note ? `(${d.note})` : ''}</span>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className="bg-[#f9f4f4] rounded-xl p-6 border border-[#e2d4d4]">
            <h3 className="font-semibold text-[#210d0d] mb-4">Contact &amp; Check-in Info</h3>
            <ul className="space-y-3 text-sm text-[#210d0d] opacity-80">
              <li className="flex items-start gap-2">
                <span className="font-medium shrink-0">Check-in:</span>
                <span>2:00 PM – 10:00 PM (late arrival by arrangement)</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium shrink-0">Check-out:</span>
                <span>11:00 AM</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium shrink-0">Phone:</span>
                <span>+254 712 345 678</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium shrink-0">Email:</span>
                <span className="break-all">info@masaisuites.com</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="font-medium shrink-0">Address:</span>
                <span>Mara Serena Road, Maasai Mara, Kenya</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
 }