// pages/booking.jsx — Booking landing page

function BookingPage({ onBook, go }) {
  const moon = getMoonPhase();
  const best = moonBestFor(moon);

  return (
    <div className="page">
      <PageHero
        kicker="✦ Reserve your night"
        title="The booking page <em>that knows the sky</em>."
        intro="Pick a tour, pick a night, and see what the moon is doing. Two minutes."
      />

      {/* Top: Tonight banner + main tours */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap-wide">
          <div style={{
            padding: 28,
            borderRadius: 'var(--r-xl)',
            background: 'linear-gradient(135deg, #07111F, #182A46)',
            color: 'var(--c-star)',
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            gap: 28,
            alignItems: 'center',
            marginBottom: 36,
            position: 'relative',
            overflow: 'hidden',
          }} className="tonight-banner">
            <StarField stars={makeStars(30, 41)} opacity={0.6} />
            <MoonGlyph fraction={moon.fraction} size={64} />
            <div style={{ position: 'relative' }}>
              <div className="eyebrow on-night" style={{ marginBottom: 6 }}>Tonight</div>
              <div className="display" style={{ fontSize: 26, lineHeight: 1.1 }}>
                {moon.name}, {moon.illum}% lit — <em>{best.tag}</em>
              </div>
              <div style={{ fontFamily: 'var(--f-body)', fontSize: 14, color: 'rgba(248,244,232,0.7)',
                            fontStyle: 'italic', marginTop: 4 }}>
                {best.desc}. Tour starts 8:15 PM. 4 of 10 spots still open.
              </div>
            </div>
            <button className="btn btn--moon" onClick={onBook}>
              Reserve tonight <IconArrow size={16} />
            </button>
          </div>

          <SectionHead
            kicker="◇ All tours"
            title="Pick your night."
          />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="booking-tours-grid">
            {TOURS.map(t => <TourCard key={t.id} tour={t} onBook={onBook} />)}
          </div>
          <style>{`
            @media (max-width: 880px) {
              .booking-tours-grid { grid-template-columns: 1fr !important; }
              .tonight-banner { grid-template-columns: 1fr !important; text-align: center; }
            }
          `}</style>
        </div>
      </section>

      {/* Booking promise */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <SectionHead
            kicker="✓ Booking direct"
            title="The reasons to <em>book here, not there</em>."
          />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }} className="bp-grid">
            {[
              { i: <IconChat size={22} />, t: 'Better weather comms', d: 'You hear from us first if the night changes.' },
              { i: <IconCalendar size={22} />, t: 'Free reschedules', d: 'Up to 24 hours before. Just text us.' },
              { i: <IconShield size={22} />, t: 'No third-party confusion', d: 'Direct line to your actual guide.' },
              { i: <IconStar size={22} />, t: 'Best price guaranteed', d: 'Equal to or below every OTA listing.' },
            ].map((b, i) => (
              <div key={i} style={{ padding: 24, background: 'white', borderRadius: 'var(--r-lg)',
                                    border: '1px solid var(--c-line)' }}>
                <div style={{ color: 'var(--c-rock)', marginBottom: 14 }}>{b.i}</div>
                <div className="display" style={{ fontSize: 22, lineHeight: 1.15, marginBottom: 8 }}>{b.t}</div>
                <div style={{ fontFamily: 'var(--f-body)', fontSize: 14, color: 'var(--c-mute)', lineHeight: 1.5 }}>{b.d}</div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 1000px) { .bp-grid { grid-template-columns: 1fr 1fr !important; } }
            @media (max-width: 560px)  { .bp-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Contact strip */}
      <section className="section--tight">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="contact-strip-grid">
            <div style={{ padding: 32, borderRadius: 'var(--r-lg)', border: '1px solid var(--c-line)' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Talk to a human</div>
              <div className="display" style={{ fontSize: 30, lineHeight: 1.1 }}>
                Same-night spots? <em>Call.</em>
              </div>
              <div style={{ fontFamily: 'var(--f-body)', fontSize: 15, color: 'var(--c-mute)', marginTop: 12,
                            marginBottom: 24, lineHeight: 1.5 }}>
                Our booking line picks up 8 AM – 9 PM Arizona time. If tonight's full,
                we'll tell you the next clear night.
              </div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a className="btn btn--primary"><IconPhone size={16} /> (928) 282 – 0000</a>
                <a className="btn btn--ghost"><IconChat size={16} /> Text us</a>
              </div>
            </div>

            <div style={{
              padding: 32, borderRadius: 'var(--r-lg)',
              background: 'var(--c-ink)', color: 'var(--c-star)',
              position: 'relative', overflow: 'hidden',
            }}>
              <StarField stars={makeStars(30, 51)} opacity={0.5} />
              <div style={{ position: 'relative' }}>
                <div className="eyebrow on-night" style={{ marginBottom: 12 }}>Gift it forward</div>
                <div className="display" style={{ fontSize: 30, lineHeight: 1.1 }}>
                  Give someone a <em>night</em>.
                </div>
                <div style={{ fontFamily: 'var(--f-body)', fontSize: 15, color: 'rgba(248,244,232,0.75)',
                              marginTop: 12, marginBottom: 24, lineHeight: 1.5 }}>
                  Tour-value gift certificates, valid 12 months. Sent as a printable PDF
                  or emailed directly to the recipient on a date you choose.
                </div>
                <a className="btn btn--moon">Buy a gift card <IconArrow size={16} /></a>
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .contact-strip-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BookingPage });