Deploy

src/components/sections/LuxuryAccommodationsSection.tsx

@@ -0,0 +1,84 @@
+'use client'
+import Image from "next/image"
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } 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(2)}`
+}
+
+const defaultImg = "https://images.pexels.com/photos/38392428/pexels-photo-38392428.jpeg?auto=compress&cs=tinysrgb&h=350"
+
+export default function LuxuryAccommodationsSection() {
+  const { products: rooms, isLoading, error } = useMedusaProducts(6)
+
+  return (
+    <section data-vula-section="luxuryaccommodations" id="luxury-accommodations" className="py-24 bg-[#15221a]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center gap-4 justify-center mb-4">
+          <span className="h-px w-14 bg-[#d4af37]" />
+          <span className="text-[#d4af37] font-sans tracking-[0.2em] uppercase text-xs">The Suites</span>
+          <span className="h-px w-14 bg-[#d4af37]" />
+        </div>
+        <h2 className="font-serif text-4xl md:text-5xl text-[#e7eeea] text-center font-light mb-12">
+          Where each room tells a<span className="italic text-[#d4af37]"> wilderness</span> story
+        </h2>
+        {isLoading && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Card key={i} className="animate-pulse">
+                <div className="h-48 bg-white/5 rounded-t-lg" />
+                <CardContent><div className="h-4 bg-white/10 rounded w-3/4 mb-2" /><div className="h-3 bg-white/5 rounded w-1/2" /></CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+        {error && <p className="text-red-400 text-center">Unable to load rooms. Please try again later.</p>}
+        {rooms && rooms.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {rooms.map((room) => {
+              const price = room.variants?.[0]?.prices?.[0]
+              const img = room.thumbnail || defaultImg
+              return (
+                <Card key={room.id} className="border border-white/10 rounded-lg overflow-hidden group">
+                  <div className="relative h-48 overflow-hidden">
+                    <Image
+                      src={img}
+                      alt={room.title}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  </div>
+                  <CardHeader>
+                    <CardTitle className="font-serif text-xl text-[#e7eeea]">{room.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-sm text-[#b0c4b4] line-clamp-2">{room.description}</p>
+                    {price && (
+                      <Badge variant="accent" className="mt-3">
+                        {formatPrice(price.amount, price.currency_code)} / night
+                      </Badge>
+                    )}
+                  </CardContent>
+                  <CardFooter>
+                    <Link href={`/booking/${room.id}`}>
+                      <Button variant="outline" size="sm" className="w-full text-[#d4af37] border-[#d4af37] hover:bg-[#d4af37] hover:text-[#0f1712]">
+                        View Room
+                      </Button>
+                    </Link>
+                  </CardFooter>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}