// Booking & Memberships page for Little Bloom Photo Studio

function BookingPage({ setPage }) {
  return (
    <main data-screen-label="03 Booking">
      <BookingHero />
      <AcuityEmbed />
      <BookingPolicies setPage={setPage} />
      <BookingContact />
    </main>
  );
}

/* ========== Hero ========== */
function BookingHero() {
  return (
    <section style={{
      paddingTop: 'calc(var(--lb-section) * 1.4)',
      paddingBottom: 'calc(var(--lb-section) * 0.15)',
      background: 'linear-gradient(rgba(30,22,14,0.58), rgba(30,22,14,0.58)), url("assets/NG5A0133.jpg") center/cover no-repeat',
    }}>
      <div className="lb-container" style={{ textAlign: 'center' }}>
        <div className="lb-eyebrow" style={{ color: 'rgba(206,190,163,0.9)' }}>Booking &amp; Memberships</div>
        <h1 className="lb-display" style={{ fontSize: 'clamp(44px, 7vw, 110px)', marginTop: 22, color: 'var(--lb-cream-2)' }}>
          <span className="rom">Reserve a </span>
          <span className="scr" style={{ color: 'var(--lb-tan)' }}>spot</span>
          <span className="rom"> at the studio.</span>
        </h1>
        <p className="lb-lead" style={{ marginTop: 28, maxWidth: 640, marginInline: 'auto', color: 'rgba(245,238,224,0.82)' }}>
          Choose a single session, or a year of them. A date, a quiet morning, and memories waiting to be captured.
        </p>
      </div>
    </section>
  );
}

/* ========== Acuity Scheduling Embed ========== */
function AcuityEmbed() {
  return (
    <section className="lb-section" style={{ paddingTop: 'calc(var(--lb-section) * 0.35)', paddingBottom: 'var(--lb-section)' }}>
      <div className="lb-container">
        <iframe
          src="https://app.acuityscheduling.com/schedule.php?owner=37073613&ref=embedded_csp"
          title="Schedule Appointment"
          width="100%"
          height="800"
          frameBorder="0"
          allow="payment"
        />
        <script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript" />
      </div>
    </section>
  );
}

/* ========== Policies ========== */
function BookingPolicies({ setPage }) {
  return (
    <section style={{ background: 'var(--lb-cream)', paddingBlock: 'var(--lb-section)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 7vw, 100px)', alignItems: 'start' }}>
        <Reveal>
          <h2 className="lb-h2">Studio policies</h2>
        </Reveal>
        <Reveal delay={120} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 36 }}>
          {[
            ['Rescheduling', 'You may reschedule up to 48 hours before your appointment. No refunds for cancellations.'],
            ['Overtime', 'Going over your scheduled time results in an automatic $100 charge. Please plan reset time into your booking.'],
            ['Photographer', 'Photographer is not included in your studio rental. This is a self-serve creative space.'],
            ['Weekends', 'Weekend availability is extremely limited. Book during the week when possible; reach out for weekend inquiries.'],
            ['No pets', 'No pets without written owner consent. Unauthorized pets result in a $250 fine.'],
            ['No glitter', 'Glitter is not allowed in the studio. No food on the rug or couch. Please be mindful of oils, lotions, and tanner.'],
          ].map(([t, d]) => (
            <div key={t}>
              <h4 className="lb-caps-title">{t}</h4>
              <p className="lb-body" style={{ marginTop: 12, fontSize: 14.5 }}>{d}</p>
            </div>
          ))}
        </Reveal>
      </div>
      <Reveal className="lb-container" style={{ marginTop: 56, paddingTop: 40, borderTop: '1px solid var(--lb-rule)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <p className="lb-body" style={{ maxWidth: 560 }}>
          These are the highlights — our full Terms &amp; Conditions cover everything in detail, including fees, studio reset requirements, and more.
        </p>
        <button className="lb-btn ghost" onClick={() => { setPage('terms'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>
          Read all policies <span className="arrow"></span>
        </button>
      </Reveal>
      <style>{`@media (max-width: 880px) { section > .lb-container[style*="2fr"] { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* ========== Contact ========== */
function BookingContact() {
  return (
    <section style={{ paddingTop: 'calc(var(--lb-section) * 0.35)', paddingBottom: 'var(--lb-section)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center' }}>
        <Reveal>
          <h2 className="lb-h2">
            Not ready to book? <span className="scr">Write us</span>.
          </h2>
          <p className="lb-body lg" style={{ marginTop: 24, maxWidth: 480 }}>
            Questions about memberships, punch passes, weekend availability, or anything
            else — we'd love to hear from you.
          </p>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14, fontFamily: 'var(--lb-body)', fontSize: 15.5 }}>
            <div><span className="lb-eyebrow" style={{ marginRight: 14 }}>Instagram</span> <a href="https://www.instagram.com/littlebloomphotostudio/" target="_blank" rel="noreferrer" style={{ color: 'inherit' }}>@littlebloomphotostudio</a></div>
            <div><span className="lb-eyebrow" style={{ marginRight: 14 }}>Location</span> 43 S 1300 W St Suite 43A, Pleasant Grove, UT 84062</div>
          </div>
        </Reveal>
        <Reveal delay={120} className="lb-img-wrap r-4x5" style={{ maxWidth: 520, marginLeft: 'auto' }}>
          <img src={PHOTOS.newborn1} alt="Inside the studio — bassinet by windows" />
        </Reveal>
      </div>
      <style>{`@media (max-width: 880px) { section > .lb-container[style*="1fr 1fr"] { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

window.BookingPage = BookingPage;