/* global React */

const NEARBY = [
  {
    photo: "/assets/ballybunion-beach-castle-atlantic-view-contained.jpg?v=20260531-contained2",
    name: "Ballybunion Beach",
    distance: "30 min drive",
    long: "A long, wild Atlantic strand framed by dramatic cliffs and the old ruined Ballybunion Castle at one end. Wide and uncrowded outside the summer weeks, the beach is a favourite spot for a long walk, a cold-water swim or watching the sunset over the ocean. Lifeguards in season. Park near the village and walk down through the dunes.",
    tags: ["Beach", "Walking", "Wild Atlantic Way", "Family-friendly"],
  },
  {
    photo: "/assets/ballybunion-golf-club-links-course-atlantic-view-contained.jpg?v=20260531-contained2",
    name: "Ballybunion Golf Club",
    distance: "30 min drive",
    long: "One of the world's great links courses, founded in 1893 and famously praised by Tom Watson as a place every golfer should play before they die. The Old Course winds along the Atlantic cliffs with views over the bay and the dunes. Visitors welcome; book a tee time in advance, especially May to September.",
    tags: ["Links golf", "Atlantic views", "1893", "Tee times advised"],
  },
  {
    photo: "/assets/tralee-town-park-rose-of-tralee-statue.jpg?v=20260531-tralee",
    name: "Tralee",
    distance: "25 min drive",
    long: "Kerry's county town and home to the famous Rose of Tralee festival in August. Worth a half-day for the Kerry County Museum, the wetlands centre, and a wander through the Town Park and the Georgian streets. Excellent restaurants for a proper dinner out.",
    tags: ["Town visit", "Museum", "Restaurants", "Festival in August"],
  },
  {
    photo: "/assets/dingle-peninsula-harbour-mountain-view.jpg",
    name: "Dingle Peninsula",
    distance: "1 hr drive",
    long: "A scenic Kerry day trip with harbour views, colourful streets, mountain roads and Atlantic air. Dingle town is a natural stop for seafood, independent shops and traditional music before continuing toward the Slea Head Drive and the wider peninsula.",
    tags: ["Day trip", "Harbour town", "Slea Head Drive", "Music & pubs"],
  },
  {
    photo: "/assets/castlegregory-beach-dunes-atlantic-view.jpg",
    name: "Castlegregory Beach",
    distance: "1 hr drive",
    long: "A beautiful Atlantic beach on the Dingle Peninsula, with long open sand, dunes and mountain views across Tralee Bay. It is a rewarding day trip from Listowel for a walk by the water, a scenic drive and a slower Kerry coast afternoon away from the busier stops.",
    tags: ["Beach", "Dingle Peninsula", "Dunes", "Day trip"],
  },
  {
    photo: "/assets/nuns-beach-ballybunion-cliffs-atlantic-view.jpg",
    name: "Nuns Beach",
    distance: "30 min drive",
    long: "A dramatic hidden cove beside Ballybunion, known for layered cliffs, Atlantic surf and a wilder, more secluded feel than the main strand. It is best enjoyed as a scenic stop from the cliff walk or viewpoint, especially on a clear day when the rock formations and coastline are at their most striking.",
    tags: ["Hidden cove", "Cliff views", "Atlantic coast", "Ballybunion"],
  },
];

const LISTOWEL_GALLERY = [
  {
    src: "/assets/kerry-writers-museum-entrance-listowel.jpg?v=20260531-doorstep",
    alt: "Kerry Writers' Museum entrance in Listowel",
  },
  {
    src: "/assets/listowel-castle-stone-archway.jpg?v=20260531-doorstep",
    alt: "Stone archway inside Listowel Castle",
  },
  {
    src: "/assets/listowel-bryan-macmahon-statue.jpg?v=20260531-doorstep",
    alt: "Bryan MacMahon statue in Listowel",
  },
  {
    src: "/assets/listowel-castle-clock-tower.jpg?v=20260531-doorstep",
    alt: "Listowel Castle clock tower",
  },
  {
    src: "/assets/kerry-writers-museum-schoolmaster-exhibit.jpg?v=20260531-doorstep",
    alt: "Schoolmaster exhibit at Kerry Writers' Museum",
  },
  {
    src: "/assets/kerry-writers-museum-story-bridge-sculpture.jpg?v=20260531-doorstep",
    alt: "Literary sculpture inside Kerry Writers' Museum",
  },
];

function ListowelPage({ onNavigate }) {
  const [openPlace, setOpenPlace] = React.useState(null);
  return (
    <div>
      <section className="ws-hero ws-hero--split ws-listowel-hero">
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">Listowel, Co. Kerry</div>
          <h1 className="ws-hero__title">Stay in the Heart<br/>of Listowel</h1>
          <p className="ws-hero__body">Listowel is one of Kerry's most charming heritage towns, known for its literary history, colourful streets, traditional pubs, cafés and warm local character.</p>
          <p className="ws-hero__body">From 59 William Street, you are right in the centre of town, with the coast, golf courses and Wild Atlantic Way within easy reach.</p>
          <div className="ws-hero__cta">
            <button className="ws-btn ws-btn--ghost">Explore The Town</button>
          </div>
        </div>
        <div className="ws-hero__bg" style={{ backgroundImage: "url(/assets/listowel-town-view.jpg)" }} />
      </section>

      <section className="ws-section ws-on-cream" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <div className="ws-twocol">
            <div>
              <SectionOpener
                align="left"
                eyebrow="Heritage, Culture &amp; Warm Welcome"
                title={<span>The best of Kerry,<br />right on your doorstep</span>}
              />
              <p>Listowel blends heritage, culture and community in a way few places can. Stroll the streets, enjoy a coffee in a local café, visit the castle, or take in a show during one of the town's famous festivals.</p>
              <p>Whether you're here for a weekend escape, a family visit or an adventure around Kerry, Listowel is the perfect base.</p>
              <div className="ws-inline-links">
                <a href="/things-to-do-in-listowel" onClick={(event) => { event.preventDefault(); onNavigate("things-to-do-in-listowel"); }}>Things to do in Listowel</a>
                <a href="/wild-atlantic-way-base-listowel" onClick={(event) => { event.preventDefault(); onNavigate("wild-atlantic-way-base-listowel"); }}>Wild Atlantic Way base</a>
                <a href="/listowel-accommodation" onClick={(event) => { event.preventDefault(); onNavigate("listowel-accommodation"); }}>Stay in Listowel</a>
                <a href="/wedding-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("wedding-accommodation-listowel"); }}>Wedding stays</a>
                <a href="/photo-shoot-location-listowel" onClick={(event) => { event.preventDefault(); onNavigate("photo-shoot-location-listowel"); }}>Photo shoot location</a>
              </div>
            </div>
            <ListowelDoorstepGallery photos={LISTOWEL_GALLERY} />
          </div>
        </div>
      </section>

      {/* THINGS TO ENJOY */}
      <section className="ws-section ws-on-navy" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <SectionOpener eyebrow="" title="Things to Enjoy" light />
          <div className="ws-things-grid" style={{ marginTop: 32 }}>
            <div className="ws-thing">
              <div className="ws-thing__icon"><Icon name="coffee" size={28} strokeWidth={1.25} /></div>
              <h4 className="ws-thing__title">Cafés &amp; Restaurants</h4>
              <p className="ws-thing__text">Great coffee, local food and friendly places to eat and unwind.</p>
            </div>
            <div className="ws-thing">
              <div className="ws-thing__icon"><Icon name="music" size={28} strokeWidth={1.25} /></div>
              <h4 className="ws-thing__title">Pubs &amp; Live Music</h4>
              <p className="ws-thing__text">Traditional pubs, warm welcome and great Irish music.</p>
            </div>
            <div className="ws-thing">
              <div className="ws-thing__icon"><Icon name="castle" size={28} strokeWidth={1.25} /></div>
              <h4 className="ws-thing__title">Heritage &amp; History</h4>
              <p className="ws-thing__text">Explore Listowel Castle, heritage buildings and local history.</p>
            </div>
            <div className="ws-thing">
              <div className="ws-thing__icon"><Icon name="shopping-bag" size={28} strokeWidth={1.25} /></div>
              <h4 className="ws-thing__title">Shops &amp; Markets</h4>
              <p className="ws-thing__text">Boutique shops, local produce and colourful street markets.</p>
            </div>
            <div className="ws-thing">
              <div className="ws-thing__icon"><Icon name="footprints" size={28} strokeWidth={1.25} /></div>
              <h4 className="ws-thing__title">Scenic Walks</h4>
              <p className="ws-thing__text">Walk along the river, through town and enjoy the fresh Kerry air.</p>
            </div>
          </div>
        </div>
      </section>

      {/* NEARBY */}
      <section className="ws-section ws-on-cream" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <SectionOpener eyebrow="" title="Nearby Places" />
          <div className="ws-nearby" style={{ marginTop: 32 }}>
            {NEARBY.map((it, i) => (
              <div
                className="ws-nearby__item"
                key={i}
                onClick={() => setOpenPlace(it)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpenPlace(it); } }}
                style={{ cursor: "pointer" }}
              >
                <div className="img" style={{ backgroundImage: `url(${it.photo})` }} />
                <p className="name">{it.name}</p>
                <p className="dist">{it.distance}</p>
                {it.name === "Ballybunion Golf Club" && (
                  <a className="ws-nearby__guide" href="/ballybunion-golf-accommodation" onClick={(event) => { event.stopPropagation(); event.preventDefault(); onNavigate("ballybunion-golf-accommodation"); }}>Golf stay guide</a>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip
        title="Ready to explore Listowel?"
        body="Enjoy the charm of a heritage town and the beauty of Kerry from 59 William Street."
        onPrimary={() => onNavigate("book")}
      />

      <PlaceModal place={openPlace} onClose={() => setOpenPlace(null)} onBook={() => onNavigate("book")} />
    </div>
  );
}

function ListowelDoorstepGallery({ photos }) {
  const railRef = React.useRef(null);
  const scroll = (direction) => {
    if (!railRef.current) return;
    railRef.current.scrollBy({
      left: direction * Math.round(railRef.current.clientWidth * 0.82),
      behavior: "smooth",
    });
  };

  return (
    <div className="ws-doorstep-gallery">
      <div className="ws-doorstep-gallery__controls" aria-label="Listowel photo gallery controls">
        <button type="button" onClick={() => scroll(-1)} aria-label="Scroll gallery left">
          <Icon name="chevron-left" size={18} />
        </button>
        <button type="button" onClick={() => scroll(1)} aria-label="Scroll gallery right">
          <Icon name="chevron-right" size={18} />
        </button>
      </div>
      <div className="ws-doorstep-gallery__rail" ref={railRef} aria-label="Listowel heritage photo gallery">
        {photos.map((photo) => (
          <figure className="ws-doorstep-gallery__item" key={photo.src}>
            <img src={photo.src} alt={photo.alt} loading="lazy" />
          </figure>
        ))}
      </div>
    </div>
  );
}

// Modal that opens when a Nearby Place card is clicked.
function PlaceModal({ place, onClose, onBook }) {
  React.useEffect(() => {
    if (!place) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [place, onClose]);

  if (!place) return null;
  return (
    <div className="ws-modal" onClick={onClose}>
      <div className="ws-modal__card" onClick={(e) => e.stopPropagation()}>
        <button className="ws-modal__close" onClick={onClose} aria-label="Close">
          <Icon name="x" size={20} />
        </button>
        <div className="ws-modal__photo-wrap ws-modal__photo-wrap--nearby">
          <img className="ws-modal__photo ws-modal__photo--nearby" src={place.photo} alt={`${place.name} near Listowel`} />
          <div className="ws-modal__photo-count" style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="map-pin" size={12} /> {place.distance}
          </div>
        </div>
        <div className="ws-modal__body">
          <div className="ws-modal__eyebrow">Nearby</div>
          <h2 className="ws-modal__title">{place.name}</h2>
          <span className="ws-opener__rule" style={{ marginBottom: 22, color: "var(--ws-gold)" }}>
            <span className="d" />
          </span>
          <p className="ws-modal__text">{place.long}</p>
          {place.tags && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 14 }}>
              {place.tags.map((t, i) => (
                <span key={i} style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "6px 12px", border: "1px solid var(--ws-rule-cream)",
                  borderRadius: 2, fontFamily: "var(--ws-sans)", fontSize: 11,
                  letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "var(--ws-ink-soft)", fontWeight: 500,
                }}>{t}</span>
              ))}
            </div>
          )}
          <div style={{ display: "flex", gap: 14, marginTop: 22, flexWrap: "wrap" }}>
            <button className="ws-btn ws-btn--gold" onClick={() => { onClose(); onBook && onBook(); }}>Book Your Stay</button>
            <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold-deep)" }} onClick={onClose}>
              Back to Listowel
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ListowelPage = ListowelPage;