// DetailsBoard — full-screen overlay containing all the practical wedding-day
// information. Mirrors AttireBoard's structure (sticky topbar with Back button,
// editorial head, content body, footer mark) so the two overlays feel like a
// matched set.

function DetailsBoard({ active, onBack, onOpenAttire, onOpenHotels }) {
  return (
    <div className={`details-wrap ${active ? 'details-active' : ''}`}>

      <div className="details-head">
        <h1 className="details-title">The <em>Details</em></h1>
        <div className="details-sub">29 · 08 · 2026</div>
        <p className="details-copy">
          Everything you need to know for the day. Times, addresses, parking,
          and a note on gifts. Tap through the cards below — and don't forget
          to check the dress code.
        </p>
      </div>

      <div className="details-divider"><span>Itinerary</span></div>

      <div className="details-grid">
        <div className="detail-card">
          <div className="icon">I</div>
          <h4>Ceremony</h4>
          <p>12:30 PM · Scots' Church<br />77 Russell Street, Melbourne VIC 3000</p>
        </div>
        <div className="detail-card">
          <div className="icon">II</div>
          <h4>Cocktail</h4>
          <p>6:30 PM · La Trobe<br />Reading Room</p>
        </div>
        <div className="detail-card">
          <div className="icon">III</div>
          <h4>Reception</h4>
          <p>7:30 PM · The Ian Potter<br />Queen's Hall</p>
        </div>
      </div>

      <div className="details-divider"><span>Practicalities</span></div>

      <div className="details-extra">
        <div className="extra-card">
          <h4>Parking</h4>
          <p>
            Two convenient options, both a short walk from the church and the
            State Library:
          </p>
          <p>
            <strong>Wilson Car Park</strong> — 460 Lonsdale Street.
            Three rooftop pay-and-stay options.
          </p>
          <p>
            <strong>QV Parking</strong> — 292 Lonsdale Street, entry via Russell
            or Lonsdale Street. Open 24 hours.
          </p>
        </div>

        <div className="extra-card">
          <h4>Gifts</h4>
          <p>
            Your presence at our wedding is the greatest gift of all. Should you
            wish to honour us with something, a contribution toward our wishing
            well would be warmly appreciated as we begin our life together.
          </p>
        </div>

        <div className="extra-card">
          <h4>Attire</h4>
          <p>
            Black tie. Long evening gowns or refined dresses for women;
            tuxedo or three-piece for men.
          </p>
          {onOpenAttire && (
            <button className="extra-link" onClick={onOpenAttire}>
              Dress code inspiration
            </button>
          )}
        </div>

        <div className="extra-card">
          <h4>Hotels</h4>
          <p>
            Discounted group rates with a handful of hotels around the venue.
            Use the codes when booking.
          </p>
          {onOpenHotels && (
            <button className="extra-link" onClick={onOpenHotels}>
              Book a Hotel
            </button>
          )}
        </div>
      </div>

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

window.DetailsBoard = DetailsBoard;