/* global React */

function photoSources(set, featuredIndex = 0) {
  return window.WS_PHOTO_SET(set, featuredIndex).map((photo) => photo.src);
}

const HOUSE_PAGE_ROOMS = [
  {
    id: "bedroom-1-orange",
    photos: photoSources("bedroom1Orange", 4),
    title: "Bedroom 1 · Orange Room",
    text: "A warm double room with soft colour, calm light and comfortable details.",
    long: "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.",
    amenities: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "shirt", label: "Storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
  },
  {
    id: "bedroom-2-red",
    photos: photoSources("bedroom2Red"),
    title: "Bedroom 2 · Red Room",
    text: "A rich, cosy bedroom for a comfortable Listowel stay.",
    long: "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.",
    amenities: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "lamp", label: "Soft lighting" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
  },
  {
    id: "bedroom-3-green",
    photos: photoSources("bedroom3Green"),
    title: "Bedroom 3 · Green Room",
    text: "A calm green bedroom that completes the four-bedroom house layout.",
    long: "Bedroom 3 is the Green Room, giving larger groups another quiet place to settle.",
    amenities: [
      { icon: "bed", label: "Double bed" },
      { icon: "users", label: "Guest room" },
      { icon: "shirt", label: "Storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
  },
  {
    id: "bedroom-4-twin",
    photos: photoSources("bedroom4Twin", 3),
    title: "Bedroom 4 · Twin Room",
    text: "Two single beds, perfect for children, friends or travelling together.",
    long: "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.",
    amenities: [
      { icon: "bed", label: "Two single beds" },
      { icon: "users", label: "Flexible setup" },
      { icon: "shirt", label: "Wardrobe & storage" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
  },
  {
    id: "bathrooms",
    photos: [
      ...photoSources("bathroomGroundFloor", 5),
      ...photoSources("bathroomFirstFloor"),
      ...photoSources("bathroomThirdFloor"),
    ],
    title: "Bathrooms",
    text: "Bathroom spaces across the ground, first and third floors.",
    long: "The house is listed on Airbnb with 2.5 bathrooms, including an ensuite, shared bathing facilities and a guest WC. Each space is finished in a clean, practical style with generous towels and the small touches you'd expect from a boutique townhouse stay.",
    amenities: [
      { icon: "shower-head", label: "Rainfall showers" },
      { icon: "bath", label: "2.5 bathrooms" },
      { icon: "sparkles", label: "Guest toiletries" },
      { icon: "wind", label: "Hair dryer" },
    ],
  },
  {
    id: "living-room",
    photos: photoSources("livingRoom1", 1),
    title: "Living Room 1",
    text: "A cosy TV lounge with comfortable seating for quiet evenings together.",
    long: "Living Room 1 is the cosy TV lounge, giving guests a comfortable place to slow down after a day in Listowel or along the Kerry coast.",
    amenities: [
      { icon: "tv", label: "Smart TV" },
      { icon: "armchair", label: "Group seating" },
      { icon: "users", label: "Relaxed lounge" },
      { icon: "wifi", label: "High-speed WiFi" },
    ],
  },
  {
    id: "living-room-2",
    photos: photoSources("livingRoom2"),
    title: "Living Room 2",
    text: "An open-plan second living area beside the stone wall, dining space and kitchen.",
    long: "Living Room 2 is part of the bright open-plan social space, useful for families and groups who want room to gather beside the dining area and kitchen.",
    amenities: [
      { icon: "armchair", label: "Second lounge" },
      { icon: "users", label: "Group space" },
      { icon: "wifi", label: "High-speed WiFi" },
      { icon: "home", label: "Whole-house stay" },
    ],
  },
  {
    id: "dining-room",
    photos: photoSources("diningRoom", 1),
    title: "Dining Room",
    text: "Perfect for meals together, celebrations or a quiet evening in.",
    long: "A long table for six under a brass pendant, with a sideboard of glassware and good china. The dining room is set up for proper meals, birthdays, anniversaries and a long Sunday lunch, but works just as well for a quiet supper after a day on the coast.",
    amenities: [
      { icon: "utensils", label: "Group dining" },
      { icon: "wine", label: "Glassware & china" },
      { icon: "lamp", label: "Brass pendant lighting" },
      { icon: "speaker", label: "Sonos sound system" },
    ],
  },
  {
    id: "kitchen",
    photos: photoSources("kitchen", 11),
    title: "Kitchen",
    text: "A bright, fully equipped kitchen with generous prep space and modern appliances.",
    long: "The kitchen is set up for proper stays: full-size appliances, plenty of counter space, warm lighting and everything needed for breakfast, long lunches or an easy dinner after a day exploring Kerry.",
    amenities: [
      { icon: "chef-hat", label: "Fully equipped" },
      { icon: "utensils", label: "Cookware & tableware" },
      { icon: "coffee", label: "Coffee station" },
      { icon: "sparkles", label: "Modern finishes" },
    ],
  },
];

function HousePage({ onNavigate }) {
  const [openRoom, setOpenRoom] = React.useState(null);
  const openRoomDetails = (room) => {
    const mobileRoomExperience = window.matchMedia(
      "(max-width: 760px), (hover: none), (pointer: coarse), (max-width: 960px) and (max-height: 520px)"
    ).matches;
    if (mobileRoomExperience) {
      onNavigate("room:" + room.id);
      return;
    }
    setOpenRoom(room);
  };

  return (
    <div>
      <section className="ws-hero ws-hero--split ws-house-hero">
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">Home / The House</div>
          <h1 className="ws-hero__title">The House</h1>
          <p className="ws-hero__sub" style={{ fontStyle:"normal", fontFamily:"var(--ws-sans)", fontSize:13, letterSpacing:"0.22em", textTransform:"uppercase" }}>
            A Beautifully Restored Townhouse in Listowel
          </p>
          <p className="ws-hero__body">59 William Street is a place to slow down, unwind and feel at home. Carefully restored with timeless style and thoughtful details, the house combines heritage charm with modern comfort.</p>
          <div className="ws-hero__cta">
            <button className="ws-btn ws-btn--ghost" onClick={() => onNavigate("book")}>Book Your Stay</button>
          </div>
        </div>
        <div
          className="ws-hero__bg"
          style={{
            backgroundImage: `url(${window.WS_PHOTO_SRC("exterior", 0)})`,
            backgroundPosition: "center 48%",
          }}
        />
      </section>

      <section className="ws-section ws-on-cream" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <div className="ws-twocol">
            <div>
              <SectionOpener align="left" title={<span>Space to relax,<br />connect &amp; enjoy</span>} />
              <p>With spacious living areas, a fully equipped kitchen, four bedrooms and quality finishes throughout, the house is ideal for families and groups looking for short term stays in the heart of Kerry.</p>
              <div className="ws-inline-links">
                <a href="/townhouse-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("townhouse-accommodation-listowel"); }}>Townhouse accommodation</a>
                <a href="/listowel-accommodation" onClick={(event) => { event.preventDefault(); onNavigate("listowel-accommodation"); }}>Listowel accommodation</a>
              </div>
              <div className="ws-overview-icons" style={{ marginTop: 28 }}>
                <div className="row"><Icon name="users" size={20} /> Sleeps up to<br />10 Guests</div>
                <div className="row"><Icon name="bed-double" size={20} /> 4 Bedrooms<br />5 Beds</div>
                <div className="row"><Icon name="bath" size={20} /> 2.5 Bathrooms</div>
                <div className="row"><Icon name="wifi" size={20} /> High Speed<br />WiFi</div>
              </div>
            </div>
            <div className="ws-photo-frame" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("kitchen", 11)})` }} />
          </div>
        </div>
      </section>

      <section className="ws-section ws-on-cream" style={{ paddingTop: 0 }}>
        <div className="ws-container">
          <SectionOpener eyebrow="The Rooms" title="Designed for comfort" />
          <div className="ws-rooms">
            {HOUSE_PAGE_ROOMS.map((r) => (
              <RoomCard
                key={r.id}
                photo={r.photos[0]}
                title={r.title}
                text={r.text}
                onClick={() => openRoomDetails(r)}
              />
            ))}
          </div>
        </div>
      </section>

      <CTAStrip
        title="Ready to stay in?"
        body="Send a direct enquiry for your preferred dates at 59 William Street."
        onPrimary={() => onNavigate("book")}
      />

      <RoomModal
        room={openRoom}
        onClose={() => setOpenRoom(null)}
        onBook={() => onNavigate("book")}
      />
    </div>
  );
}

window.HousePage = HousePage;