// HotelsBoard — full-screen overlay listing hotel partners with discount
// codes and booking links. Mirrors DetailsBoard / AttireBoard structure
// (sticky topbar with Back, editorial head, content grid, footer mark).

function HotelsBoard({ active, onBack }) {
  return (
    <div className={`hotels-wrap ${active ? 'hotels-active' : ''}`}>

      <div className="hotels-head">
        <h1 className="hotels-title">Hotel <em>Recommendations</em></h1>
        <div className="hotels-sub">Discounted group rates</div>
        <p className="hotels-copy">
          We've negotiated discounted rates with a handful of hotels around the
          venue. Use the codes and links below when booking.
        </p>
      </div>

      <div className="hotels-divider"><span>Our recommendations</span></div>

      <div className="hotels-grid">
        <div className="hotel-card">
          <h4>Pullman &amp; Mercure Melbourne Albert Park</h4>
          <p>
            Visit{' '}
            <a className="hotel-link" href="https://pullmanalbertpark.com.au" target="_blank" rel="noopener noreferrer">pullmanalbertpark.com.au</a>
            {' '}and enter code{' '}
            <span className="hotel-code">SCP4222879</span>
            {' '}to receive your discounted rate.
          </p>
          <p className="hotel-meta">
            Access code: <span className="hotel-code">AD289AU867</span>
          </p>
          <a
            className="hotel-cta"
            href="https://pullmanalbertpark.com.au"
            target="_blank"
            rel="noopener noreferrer"
          >Book here →</a>
        </div>

        <div className="hotel-card">
          <h4>Shadow Play by Peppers</h4>
          <p>
            Enter code{' '}
            <span className="hotel-code">thebiggroup</span>
            {' '}to receive your discounted rate.
          </p>
          <a
            className="hotel-cta"
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >Book here →</a>
        </div>

        <div className="hotel-card">
          <h4>Marriott Hotel</h4>
          <p>
            Use promo code{' '}
            <span className="hotel-code">A6483</span>
            {' '}to receive 10% off your stay.
          </p>
          <a
            className="hotel-cta"
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >Book here →</a>
        </div>

        <div className="hotel-card">
          <h4>1 Hotel Melbourne</h4>
          <p>Use the link below to book at the discounted rate.</p>
          <a
            className="hotel-cta"
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >Book here →</a>
        </div>

        <div className="hotel-card">
          <h4>Tyrian Albert Park Lake</h4>
          <p>
            Enter code{' '}
            <span className="hotel-code">THEBIGGROUP</span>
            {' '}to receive your discounted rate.
          </p>
          <p>
            Or call{' '}
            <a className="hotel-link" href="tel:+61391351600">03 9135 1600</a>
            {' '}to book.
          </p>
          <a
            className="hotel-cta"
            href="https://tyrian.com.au"
            target="_blank"
            rel="noopener noreferrer"
          >Book here →</a>
        </div>
      </div>

      <div className="hotels-footer">
        <div className="hotels-footer-mark">
          <img src="assets/Logos/A%26N-logo-small.png" alt="A & N" />
        </div>
        <div className="hotels-footer-line">29 · 08 · 2026 · Audrey &amp; Nicholas</div>
      </div>
    </div>
  );
}

window.HotelsBoard = HotelsBoard;