Vula Builder
97 lines
4.5 KiB
TypeScript
97 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import { useMedusaProducts } from '@/hooks/useMedusaProducts'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
|
|
import Button from '@/components/ui/Button'
|
|
import Badge from '@/components/ui/Badge'
|
|
|
|
const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£' }
|
|
const formatPrice = (amount: number, code?: string) => {
|
|
const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
|
|
return `${sym}${(amount / 100).toFixed(0)}`
|
|
}
|
|
|
|
export default function RoomsSection() {
|
|
const { products: rooms, isLoading } = useMedusaProducts(6)
|
|
|
|
return (
|
|
<section data-vula-section="rooms" id="rooms" className="py-20 bg-[#f9f5f4]">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-sm uppercase tracking-[0.2em] text-[#ea580c] font-semibold mb-2">
|
|
Six exclusive suites
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-[#21140d]" style={{ fontFamily: 'Bricolage Grotesque, sans-serif' }}>
|
|
Suites designed for the bush
|
|
</h2>
|
|
<p className="mt-3 text-[#21140d]/70 max-w-2xl mx-auto" style={{ fontFamily: "Lora, serif", fontStyle: "italic" }}>
|
|
Each suite tells a story — Zulu beadwork, private decks, freestanding baths overlooking the acacia plain.
|
|
</p>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-center py-12">
|
|
<div className="inline-block w-8 h-8 border-2 border-[#ea580c] border-t-transparent rounded-full animate-spin" />
|
|
<p className="mt-4 text-[#21140d]/60">Loading suites...</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{rooms && rooms.length > 0 ? rooms.map((room: any) => {
|
|
const price = room.variants?.[0]?.prices?.[0]
|
|
const imageUrl = room.thumbnail || 'https://images.pexels.com/photos/8849246/pexels-photo-8849246.jpeg?auto=compress&cs=tinysrgb&h=350'
|
|
|
|
return (
|
|
<Card key={room.id} className="bg-white border border-[#e2d9d4] overflow-hidden hover:shadow-xl transition-shadow duration-300">
|
|
<div className="relative h-56 overflow-hidden">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={room.title || 'Zulwini Lodge suite'}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
|
|
/>
|
|
</div>
|
|
<CardHeader className="pb-2 pt-4 px-5">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-xl font-bold text-[#21140d]">
|
|
{room.title || 'Bush Suite'}
|
|
</CardTitle>
|
|
{price && (
|
|
<Badge variant="default" className="bg-[#ea580c] text-white text-sm px-3 py-1">
|
|
{formatPrice(price.amount, price.currency_code)} / night
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-5 pb-5">
|
|
<p className="text-[#21140d]/70 text-sm line-clamp-2 mb-4" style={{ fontFamily: 'Lora, serif' }}>
|
|
{room.description || 'Enjoy panoramic views, en-suite bathroom with outdoor shower, and a private deck.'}
|
|
</p>
|
|
<Link href={`/booking/${room.id}`}>
|
|
<Button variant="outline" size="sm" className="w-full border-[#ea580c] text-[#ea580c] hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
|
|
View & Book
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}) : (
|
|
<p className="col-span-full text-center text-[#21140d]/60">No suites available at the moment. Please check back soon.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-center mt-10">
|
|
<Link href="/rooms">
|
|
<Button variant="default" className="bg-[#ea580c] hover:bg-[#d04d0a] text-white px-8 py-3">
|
|
See all suites →
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|