import type { Metadata } from "next";
import { Bath, BedDouble, Check, Users } from "lucide-react";
import { PageHero, Reveal, SectionTitle, SiteFooter, SiteNav } from "../components";
import { bannerImages } from "../data";
import { getRooms } from "@/lib/rooms";
import { pageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export const metadata: Metadata = pageMetadata({
  title: "Hotel Rooms in Bhaktapur",
  description:
    "Browse current garden room options at Bass Resort in Bhaktapur with transparent nightly rates, Wi-Fi, parking, hot showers, and restaurant access.",
  path: "/rooms",
  image: "/images/generated-room.png",
  keywords: [
    "hotel rooms Bhaktapur",
    "AC room Bhaktapur",
    "garden room Bhaktapur",
    "affordable hotel Bhaktapur",
  ],
});

export default async function RoomsPage() {
  const rooms = await getRooms();
  return (
    <>
      <Reveal />
      <SiteNav />
      <main>
        <PageHero
          title="Rooms & Garden Stays"
          copy="Browse current room availability, guest capacity, amenities, and transparent nightly rates for your stay in Bhaktapur."
          image={bannerImages.rooms}
          imagePosition="center 42%"
        />
        <section className="section">
          <div className="container">
            <SectionTitle
              eyebrow="Choose Your Stay"
              title="Comfortable rooms for a peaceful Bhaktapur stay"
              description="Compare live room options, amenities, capacity, and rates before sending your reservation request."
            />
            <div className="room-list">
              {rooms.map((room, index) => (
                <article
                  className="room-row reveal"
                  key={room.id}
                  style={{ transitionDelay: `${index * 80}ms` }}
                >
                  <a className="room-detail-link" href={`/rooms/${encodeURIComponent(room.id)}`} aria-label={`View ${room.title}`} />
                  <div className="room-row-image">
                    <img src={room.image} alt={room.title} />
                  </div>
                  <div className="room-row-body">
                    <p className="room-type">{room.type}</p>
                    <h2>{room.title}</h2>
                    <p>{room.description}</p>
                    <div className="stats">
                      <span>
                        <Users size={15} /> {room.guests} Guests
                      </span>
                      <span>
                        <BedDouble size={15} /> {room.beds}
                      </span>
                      <span>
                        <Bath size={15} /> {room.baths} Bath
                      </span>
                    </div>
                    <div className="amenity-list">
                      {room.amenities.map((amenity) => (
                        <span key={amenity}>
                          <Check size={14} /> {amenity}
                        </span>
                      ))}
                    </div>
                  </div>
                  <aside className="rate-box">
                    <span>{room.status}</span>
                    <strong>NPR {room.price.toLocaleString()}</strong>
                    <small>per night</small>
                    <a className="view-room-link" href={`/rooms/${encodeURIComponent(room.id)}`}>View Room</a>
                    {["Available", "Few Left"].includes(room.status) ? (
                      <a href={`/booking?room=${room.id}`}>Reserve</a>
                    ) : (
                      <small>Currently unavailable</small>
                    )}
                  </aside>
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}