/* global React */

const ROOMS = {
  "bedroom-1-orange": {
    name: "Bedroom 1 · Orange Room",
    eyebrow: "The Rooms · Bedroom 1",
    hero: window.WS_PHOTO_SRC("bedroom1Orange", 4),
    intro: "A warm double room with soft colour, calm light and comfortable details.",
    body: [
      "Bedroom 1 is the Orange Room, a warm and restful guest room with soft lighting, considered finishes and the quiet character of the restored townhouse.",
      "A comfortable double bed and calm upper-floor setting make it a restful room for couples or individual guests.",
    ],
    facts: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "shirt", label: "Storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTO_SET("bedroom1Orange", 4).map((photo) => photo.src),
  },
  "bedroom-2-red": {
    name: "Bedroom 2 · Red Room",
    eyebrow: "The Rooms · Bedroom 2",
    hero: window.WS_PHOTO_SRC("bedroom2Red", 0),
    intro: "A rich, cosy bedroom for a comfortable Listowel stay.",
    body: [
      "Bedroom 2 is the Red Room, bringing deeper colour and a cosy feel to the house while keeping the same simple comfort and practical storage.",
      "Its warm palette and considered lighting give guests a private place to settle in during a family or group stay.",
    ],
    facts: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "lamp", label: "Soft lighting" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTOS.bedroom2Red.map((photo) => photo.src),
  },
  "bedroom-3-green": {
    name: "Bedroom 3 · Green Room",
    eyebrow: "The Rooms · Bedroom 3",
    hero: window.WS_PHOTO_SRC("bedroom3Green", 0),
    intro: "A calm green bedroom that completes the four-bedroom house layout.",
    body: [
      "Bedroom 3 is the Green Room, a quiet double room with simple comfort and calm heritage colour.",
      "The room combines soft natural light, practical bedside space and a relaxed atmosphere.",
    ],
    facts: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "shirt", label: "Storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTOS.bedroom3Green.map((photo) => photo.src),
  },
  "bedroom-4-twin": {
    name: "Bedroom 4 · Twin Room",
    eyebrow: "The Rooms · Bedroom 4",
    hero: window.WS_PHOTO_SRC("bedroom4Twin", 3),
    intro: "Two single beds, perfect for children, friends or travelling together.",
    body: [
      "Bedroom 4 is the Twin Room, the most flexible sleeping space in the house. It works naturally for friends, children, teenagers or guests who prefer separate beds.",
      "Its flexible layout makes it especially useful for families and mixed groups sharing the townhouse.",
    ],
    facts: [
      { icon: "bed", label: "Two single beds" },
      { icon: "users", label: "Flexible setup" },
      { icon: "shirt", label: "Storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTO_SET("bedroom4Twin", 3).map((photo) => photo.src),
  },
  "bathrooms": {
    name: "Bathrooms",
    eyebrow: "The Rooms · Bathrooms",
    hero: window.WS_PHOTO_SRC("bathroomGroundFloor", 5),
    intro: "Bathroom spaces across the ground, first and third floors.",
    body: [
      "The house is listed on Airbnb with 2.5 bathrooms, including an ensuite, shared bathing facilities and a guest WC.",
      "Bathroom spaces are arranged across the house for practical group stays, with clean finishes and generous natural light.",
    ],
    facts: [
      { icon: "bath", label: "2.5 bathrooms" },
      { icon: "shower-head", label: "Walk-in showers" },
      { icon: "droplets", label: "Guest toiletries" },
      { icon: "wind", label: "Hair dryer" },
    ],
    gallery: [
      ...window.WS_PHOTO_SET("bathroomGroundFloor", 5).map((photo) => photo.src),
      ...window.WS_PHOTOS.bathroomFirstFloor.map((photo) => photo.src),
      ...window.WS_PHOTOS.bathroomThirdFloor.map((photo) => photo.src),
    ],
  },
  "living-room": {
    name: "Living Room 1",
    eyebrow: "The House · Living Room 1",
    hero: window.WS_PHOTO_SRC("livingRoom1", 1),
    intro: "A cosy TV lounge with comfortable seating for quiet evenings together.",
    body: [
      "Living Room 1 is the cosy TV lounge at 59 William Street, giving groups a comfortable place to slow down after a day in Listowel or along the Kerry coast.",
      "Soft seating, natural light and the built-in television make it an easy room for relaxed evenings.",
    ],
    facts: [
      { icon: "armchair", label: "Main lounge" },
      { icon: "users", label: "Group seating" },
      { icon: "home", label: "Whole-house stay" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTO_SET("livingRoom1", 1).map((photo) => photo.src),
  },
  "living-room-2": {
    name: "Living Room 2",
    eyebrow: "The House · Living Room 2",
    hero: window.WS_PHOTO_SRC("livingRoom2", 0),
    intro: "An open-plan second living area beside the stone wall, dining space and kitchen.",
    body: [
      "Living Room 2 gives the house another social area, useful for families and groups who want space to gather during a longer stay.",
      "The stone wall and connection to the dining room and kitchen give this part of the house its distinctive character.",
    ],
    facts: [
      { icon: "armchair", label: "Second lounge" },
      { icon: "users", label: "Group space" },
      { icon: "home", label: "Whole-house stay" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
    gallery: window.WS_PHOTOS.livingRoom2.map((photo) => photo.src),
  },
  "dining-room": {
    name: "Dining Room",
    eyebrow: "The House · Dining Room",
    hero: window.WS_PHOTO_SRC("diningRoom", 1),
    intro: "Perfect for meals together, celebrations or a quiet evening in.",
    body: [
      "The Dining Room is set up for group meals and slower evenings in the house.",
      "The open-plan setting connects the table with the kitchen and living areas, making it a natural gathering point.",
    ],
    facts: [
      { icon: "users", label: "Group dining" },
      { icon: "utensils", label: "Tableware" },
      { icon: "wine", label: "Dining details" },
      { icon: "sparkles", label: "Restored character" },
    ],
    gallery: window.WS_PHOTO_SET("diningRoom", 1).map((photo) => photo.src),
  },
  "kitchen": {
    name: "Kitchen",
    eyebrow: "The House · Kitchen",
    hero: window.WS_PHOTO_SRC("kitchen", 11),
    intro: "A bright, fully equipped kitchen with generous prep space and modern appliances.",
    body: [
      "The kitchen is designed for real use during a stay, with full-size appliances, generous worktops and a calm, contemporary finish.",
      "It has the space and equipment needed for breakfasts, long lunches and easy dinners during a self-catering stay.",
    ],
    facts: [
      { icon: "chef-hat", label: "Fully equipped kitchen" },
      { icon: "utensils", label: "Cookware & tableware" },
      { icon: "coffee", label: "Coffee station" },
      { icon: "sparkles", label: "Modern finishes" },
    ],
    gallery: window.WS_PHOTO_SET("kitchen", 11).map((photo) => photo.src),
  },
};

const ROOM_ALIASES = {
  master: "bedroom-1-orange",
  "master-bedroom": "bedroom-1-orange",
  one: "bedroom-1-orange",
  two: "bedroom-2-red",
  "bedroom-two": "bedroom-2-red",
  three: "bedroom-3-green",
  "bedroom-three": "bedroom-3-green",
  "bedroom-3-twin": "bedroom-4-twin",
  four: "bedroom-4-twin",
  "bedroom-four": "bedroom-4-twin",
  "bedroom-4-green": "bedroom-3-green",
};

function RoomPage({ slug, onNavigate }) {
  const canonicalSlug = ROOM_ALIASES[slug] || slug;
  const r = ROOMS[canonicalSlug];
  if (!r) {
    return (
      <div className="ws-section ws-on-cream" style={{ paddingTop: 200, textAlign: "center" }}>
        <h2>Room not found</h2>
        <button className="ws-btn ws-btn--ghost" onClick={() => onNavigate("house")}>Back to The House</button>
      </div>
    );
  }
  const roomSlugs = Object.keys(ROOMS);
  const idx = roomSlugs.indexOf(canonicalSlug);
  const prev = roomSlugs[(idx - 1 + roomSlugs.length) % roomSlugs.length];
  const next = roomSlugs[(idx + 1) % roomSlugs.length];

  return (
    <div>
      {/* HERO */}
      <section className="ws-hero ws-hero--split">
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">{r.eyebrow}</div>
          <h1 className="ws-hero__title">{r.name}</h1>
          <p className="ws-hero__body" style={{ fontSize: 17 }}>{r.intro}</p>
          <div className="ws-hero__cta">
            <button className="ws-btn ws-btn--gold" onClick={() => onNavigate("book")}>Book Your Stay</button>
            <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold)" }} onClick={() => onNavigate("house")}>← All Rooms</button>
          </div>
        </div>
        <div className="ws-hero__bg" style={{ backgroundImage: `url(${r.hero})` }} />
      </section>

      {/* BODY + FACTS */}
      <section className="ws-section ws-on-cream" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <div className="ws-twocol" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 80 }}>
            <div>
              <SectionOpener align="left" eyebrow="In the room" title={r.name} />
              {r.body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <div>
              <div className="ws-opener is-left" style={{ marginBottom: 24 }}>
                <div className="ws-opener__eyebrow">Features</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                {r.facts.map((f, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--ws-rule-cream)" }}>
                    <span style={{ color: "var(--ws-gold-deep)", flex: "0 0 auto" }}>
                      <Icon name={f.icon} size={18} />
                    </span>
                    <span style={{ fontSize: 14, color: "var(--ws-ink)" }}>{f.label}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="ws-section ws-on-cream" style={{ paddingTop: 0 }}>
        <div className="ws-container">
          <SectionOpener eyebrow="Gallery" title={`Inside the ${r.name}`} />
          <div className="ws-gallery-grid">
            {r.gallery.map((g, i) => (
              <div key={i} className="tile">
                <img
                  src={g}
                  alt={`${r.name} photo ${i + 1} at 59 William Street Listowel`}
                  loading={i < 4 ? "eager" : "lazy"}
                  decoding="async"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PREV / NEXT */}
      <section className="ws-section ws-on-cream" style={{ paddingTop: 0, paddingBottom: 60 }}>
        <div className="ws-container ws-room-nav" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--ws-rule-cream)", paddingTop: 32 }}>
          <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold-deep)" }} onClick={() => onNavigate("room:" + prev)}>
            ← {ROOMS[prev].name}
          </button>
          <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold-deep)" }} onClick={() => onNavigate("house")}>
            All Rooms
          </button>
          <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold-deep)" }} onClick={() => onNavigate("room:" + next)}>
            {ROOMS[next].name} →
          </button>
        </div>
      </section>

      <CTAStrip
        title={`Ready to book the ${r.name.toLowerCase()}?`}
        body="The whole house is booked together. Check availability for your dates."
        onPrimary={() => onNavigate("book")}
      />
    </div>
  );
}

window.RoomPage = RoomPage;
window.ROOMS = ROOMS;