/* global React */

function HomePage({ onNavigate }) {
  return (
    <div>
      {/* HERO */}
      <section className="ws-hero ws-hero--full ws-home-hero">
        <div
          className="ws-hero__bg"
          style={{
            backgroundImage: `url(${window.WS_PHOTO_SRC("exterior", 0)})`,
            backgroundPosition: "center 48%",
          }}
        />
        <div className="ws-hero__copy" style={{ maxWidth: 720 }}>
          <div className="ws-hero__eyebrow">Welcome To</div>
          <h1 className="ws-hero__title">59 William Street</h1>
          <p className="ws-hero__sub ws-home-hero__sub">Luxury townhouse stays in the heart of Listowel</p>
          <p className="ws-hero__body ws-hero__body--one-line">Heritage charm, modern comfort and a perfect base for exploring Kerry.</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--ghost" onClick={() => onNavigate("house")}>View The House</button>
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section className="ws-section ws-on-cream ws-home-about">
        <div className="ws-container">
          <div className="ws-twocol">
            <div>
              <SectionOpener
                align="left"
                eyebrow="About"
                title={<span>A boutique townhouse<br />with heritage charm</span>}
              />
              <p>59 William Street is a beautifully renovated townhouse in the heart of Listowel, designed for guests who appreciate comfort, character and a sense of place.</p>
              <p>Elegant interiors, thoughtful details and a central location make it ideal for short stays, weekends away and trips around Kerry.</p>
            <button className="ws-btn ws-btn--text" style={{ color: "var(--ws-gold-deep)", marginTop: 16 }} onClick={() => onNavigate("house")}>
                Discover More →
              </button>
            </div>
            <div className="ws-photo-frame" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("diningRoom", 12)})` }} />
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section className="ws-section ws-on-navy" style={{ padding: "80px 0" }}>
        <div className="ws-container">
          <Benefits items={[
            { icon: "map-pin", title: "Central Listowel Location", text: "Walk to cafés, pubs, shops and local attractions." },
            { icon: "armchair", title: "Elegant Interiors", text: "A carefully designed townhouse with warm, refined details." },
            { icon: "calendar-days", title: "Short Term Stays", text: "Perfect for weekends, family visits and Kerry getaways." },
            { icon: "mountain", title: "Explore Kerry", text: "A great base for Ballybunion, Tralee, Dingle and the Wild Atlantic Way." },
          ]} />
        </div>
      </section>

      {/* OCCASIONS */}
      <section className="ws-section ws-on-cream ws-occasions" style={{ padding: "84px 0" }}>
        <div className="ws-container">
          <SectionOpener
            eyebrow="Occasions"
            title="Weddings, shoots and private stays"
            sub="A character townhouse for guests who need more than a bed for the night: a place to gather, get ready, create content and enjoy Listowel."
          />
          <div className="ws-occasion-grid">
            <article className="ws-occasion-card">
              <div className="ws-occasion-card__image" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("exterior", 1)})` }} />
              <div className="ws-occasion-card__copy">
                <div className="ws-occasion-card__eyebrow">Weddings in Kerry</div>
                <h3>Wedding accommodation in Listowel</h3>
                <p>Use 59 William Street for family stays, bridal morning preparation and a private base around wedding celebrations in Listowel and North Kerry.</p>
                <a href="/wedding-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("wedding-accommodation-listowel"); }}>Explore Wedding Stays</a>
              </div>
            </article>
            <article className="ws-occasion-card">
              <div className="ws-occasion-card__image" style={{ backgroundImage: "url(/assets/gallery-dining-detail.jpg)" }} />
              <div className="ws-occasion-card__copy">
                <div className="ws-occasion-card__eyebrow">Photo & Video</div>
                <h3>Photo shoot location</h3>
                <p>Enquire for interiors, lifestyle content, wedding portraits, brand photography, small filming days and photographer coordination.</p>
                <a href="/photo-shoot-location-listowel" onClick={(event) => { event.preventDefault(); onNavigate("photo-shoot-location-listowel"); }}>Plan A Shoot</a>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* PHOTO STRIP */}
      <section className="ws-section ws-on-cream">
        <div className="ws-container">
          <SectionOpener
            eyebrow="Inside"
            title="59 William Street"
          />
          <div className="ws-photo-strip">
            <div className="tile" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("bedroom1Orange", 4)})` }} />
            <div className="tile" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("bedroom4Twin", 3)})` }} />
            <div className="tile" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("bathroomGroundFloor", 5)})` }} />
            <div className="tile" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("diningRoom", 12)})` }} />
            <div className="tile" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("livingRoom2", 0)})` }} />
          </div>
          <div style={{ display:"flex", justifyContent:"center", marginTop: 32 }}>
            <button className="ws-btn ws-btn--ghost" style={{ color:"var(--ws-gold-deep)", borderColor:"var(--ws-gold-deep)" }} onClick={() => onNavigate("gallery")}>
              View Full Gallery
            </button>
          </div>
        </div>
      </section>

      {/* LISTOWEL PREVIEW */}
      <section className="ws-section ws-on-cream" style={{ paddingTop: 0 }}>
        <div className="ws-container">
          <div className="ws-twocol">
            <div className="ws-photo-frame ws-listowel-preview-photo" style={{ backgroundImage: "url(/assets/listowel-town-view.jpg)" }} />
            <div>
              <SectionOpener
                align="left"
                eyebrow="Listowel, Co. Kerry"
                title={<span>Stay in the heritage town<br />of Listowel</span>}
              />
              <p>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>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-inline-links">
                <a href="/listowel" onClick={(event) => { event.preventDefault(); onNavigate("listowel"); }}>Explore Listowel</a>
                <a href="/listowel-accommodation" onClick={(event) => { event.preventDefault(); onNavigate("listowel-accommodation"); }}>Listowel accommodation</a>
                <a href="/things-to-do-in-listowel" onClick={(event) => { event.preventDefault(); onNavigate("things-to-do-in-listowel"); }}>Things to do</a>
                <a href="/wild-atlantic-way-base-listowel" onClick={(event) => { event.preventDefault(); onNavigate("wild-atlantic-way-base-listowel"); }}>Wild Atlantic Way base</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <CTAStrip
        title="Ready to plan your stay?"
        body="Experience Listowel from a beautifully restored townhouse in the heart of town."
        onPrimary={() => onNavigate("book")}
      />
    </div>
  );
}

window.HomePage = HomePage;