/* global React */

function BookPage({ onNavigate, onBooked }) {
  return (
    <div>
      <section className="ws-hero ws-book-page-hero">
        <div className="ws-hero__bg" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("bedroom1Orange", 4)})` }} />
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">Book Your Stay</div>
          <h1 className="ws-hero__title">Stay with us at<br/>59 William Street</h1>
          <p className="ws-hero__body">Choose your dates and send a direct enquiry for 59 William Street, a private townhouse in the heart of Listowel.</p>
        </div>
      </section>

      <section className="ws-book-reservation ws-on-cream">
        <div className="ws-container">
          <div className="ws-book-reservation__panel">
          <BookingWidget onSubmit={onBooked} onEnquire={() => onNavigate("contact")} />
          </div>
        </div>
      </section>

      <section className="ws-section ws-book-direct ws-on-cream">
        <div className="ws-container">
          <div className="ws-book-direct__panel">
            <div className="ws-opener" style={{ marginBottom: 28 }}>
              <div className="ws-opener__eyebrow">Direct Enquiries</div>
              <span className="ws-opener__rule"><span className="d" /></span>
              <h2 className="ws-opener__title">Why Enquire Directly?</h2>
            </div>
            <div className="ws-benefits" style={{ marginTop: 16 }}>
              {[
                { icon: "tag", title: "Better Direct Value", text: "Request your stay directly for the best available direct rate, often better value than booking through third-party platforms." },
                { icon: "calendar-check", title: "Flexible Stays", text: "We can advise on dates, stay length and cancellation terms before you confirm." },
                { icon: "user", title: "Local Guidance", text: "Ask us directly about the house, Listowel and the best fit for your stay." },
                { icon: "lock", title: "Clear Confirmation", text: "Your stay is confirmed once availability, terms and payment details have been agreed." },
              ].map((b, i) => (
                <div className="ws-benefit" key={i}>
                  <div className="ws-benefit__icon"><Icon name={b.icon} size={26} strokeWidth={1.25} /></div>
                  <h4 className="ws-benefit__title">{b.title}</h4>
                  <p className="ws-benefit__text">{b.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="ws-section ws-on-cream" style={{ padding: "20px 0 80px" }}>
        <div className="ws-container">
          <div className="ws-book-info-grid">
            <div style={{ background:"var(--ws-paper)", padding:"32px 36px", borderRadius:4, border:"1px solid var(--ws-rule-cream)"}}>
              <div className="ws-opener is-left" style={{ marginBottom: 24 }}>
                <div className="ws-opener__eyebrow">About Your Stay</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <ul className="ws-bullets">
                <li><Icon name="check-circle-2" size={16} /> Sleeps up to 10 guests</li>
                <li><Icon name="check-circle-2" size={16} /> 4 bedrooms, 5 beds</li>
                <li><Icon name="check-circle-2" size={16} /> 2.5 bathrooms</li>
                <li><Icon name="check-circle-2" size={16} /> Fully equipped kitchen</li>
                <li><Icon name="check-circle-2" size={16} /> Cosy living room with fireplace</li>
                <li><Icon name="check-circle-2" size={16} /> High speed WiFi</li>
                <li><Icon name="check-circle-2" size={16} /> Free parking on premises</li>
                <li><Icon name="check-circle-2" size={16} /> Self check-in with lockbox</li>
                <li><Icon name="check-circle-2" size={16} /> Check-in after 16:00, checkout before 10:00</li>
                <li><Icon name="check-circle-2" size={16} /> Central Listowel location</li>
                <li><Icon name="check-circle-2" size={16} /> Short walk to cafés, pubs, shops</li>
                <li><Icon name="check-circle-2" size={16} /> Perfect base for exploring Kerry</li>
              </ul>
            </div>

            <div style={{ background:"var(--ws-paper)", padding:"32px 36px", borderRadius:4, border:"1px solid var(--ws-rule-cream)"}}>
              <div className="ws-opener is-left" style={{ marginBottom: 24 }}>
                <div className="ws-opener__eyebrow">Need Help?</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <p style={{ marginTop: 0 }}>If you have any questions about your stay, availability or special requests, we're here to help.</p>
              <div style={{ display:"flex", flexDirection:"column", gap: 14, marginTop: 22 }}>
                <div style={{ display:"flex", alignItems:"center", gap:14 }}><span style={{ width:36, height:36, borderRadius:"50%", background:"var(--ws-navy)", color:"var(--ws-gold)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="phone" size={14} /></span> {window.SITE_CONTACT.phone}</div>
                <div style={{ display:"flex", alignItems:"center", gap:14 }}><span style={{ width:36, height:36, borderRadius:"50%", background:"var(--ws-navy)", color:"var(--ws-gold)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="mail" size={14} /></span> {window.SITE_CONTACT.email}</div>
                <div style={{ display:"flex", alignItems:"center", gap:14 }}><span style={{ width:36, height:36, borderRadius:"50%", background:"var(--ws-navy)", color:"var(--ws-gold)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="map-pin" size={14} /></span> {window.SITE_CONTACT.addressLines[0]},<br />{window.SITE_CONTACT.addressLines[1]}<br />{window.SITE_CONTACT.addressLines[2]}</div>
                <div style={{ display:"flex", alignItems:"center", gap:14 }}><span style={{ width:36, height:36, borderRadius:"50%", background:"var(--ws-navy)", color:"var(--ws-gold)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}><Icon name="clock" size={14} /></span> We aim to reply within a few hours.</div>
              </div>
            </div>

            <div style={{ background:"var(--ws-navy)", padding:0, borderRadius: 4, overflow:"hidden", backgroundImage:`url(${window.WS_PHOTO_SRC("exterior", 3)})`, backgroundSize:"cover", backgroundPosition:"center", minHeight: 460 }} />
          </div>

          <div className="ws-book-planning">
            <div>
              <div className="ws-book-planning__eyebrow">Planning Your Stay</div>
              <h3>Local guides before you enquire</h3>
            </div>
            <div className="ws-book-planning__links">
              <a href="/family-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("family-accommodation-listowel"); }}>Family stays</a>
              <a href="/group-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("group-accommodation-listowel"); }}>Group stays</a>
              <a href="/self-catering-accommodation-listowel" onClick={(event) => { event.preventDefault(); onNavigate("self-catering-accommodation-listowel"); }}>Self-catering</a>
              <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="/day-trips-from-listowel" onClick={(event) => { event.preventDefault(); onNavigate("day-trips-from-listowel"); }}>Day Trips</a>
              <a href="/ballybunion-beach-from-listowel" onClick={(event) => { event.preventDefault(); onNavigate("ballybunion-beach-from-listowel"); }}>Ballybunion Beach</a>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip
        title="Ready to enquire about your stay?"
        body="Send your preferred dates and we'll come back with availability."
        primaryLabel="Choose Dates"
        onPrimary={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      />
    </div>
  );
}

window.BookPage = BookPage;