/* ============================================================
   BOOKING — Checkout + Confirmation pages (Phase D frontend)

   Two page components:
     • CheckoutPage      → /book/<trip-slug>
     • ConfirmationPage  → /booking-confirmation/<reference>

   Pay-on-arrival only. The AUTHORITATIVE total comes from
   POST /api/bookings/start (never computed in JS for charging).
   Confirm via POST /api/bookings/confirm, then navigate to the
   confirmation page. WhatsApp is always available as a fallback.

   NOTE (hooks-scope): this file is its own babel program — the
   top-level `const { useState } = React` in app.jsx is NOT visible
   here. We call React.useState / React.useEffect directly.
   ============================================================ */

(function () {
  function bkPad2(n) { return n < 10 ? '0' + n : String(n); }

  function bkTodayStr() {
    var d = new Date();
    return d.getFullYear() + '-' + bkPad2(d.getMonth() + 1) + '-' + bkPad2(d.getDate());
  }
  function bkYm(year, month) { return year + '-' + bkPad2(month); }

  var BK_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var BK_WEEKDAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

  function bkHumanDate(s) {
    if (!s || s.length < 10) return s || '';
    var y = s.slice(0, 4);
    var m = parseInt(s.slice(5, 7), 10);
    var d = parseInt(s.slice(8, 10), 10);
    return d + ' ' + window.t('cal.month.' + m) + ' ' + y;
  }

  // Build a localized guest summary like '2 adults, 1 child' using i18n labels.
  function bkGuestStr(adults, children, infants) {
    var parts = [adults + ' ' + window.t(adults !== 1 ? 'co.adults' : 'co.adult')];
    if (children) parts.push(children + ' ' + window.t(children !== 1 ? 'co.children' : 'co.child'));
    if (infants) parts.push(infants + ' ' + window.t(infants !== 1 ? 'co.infants' : 'co.infant'));
    return parts.join(', ');
  }

  // Escape any server-returned string before rendering as text content.
  // (React already escapes children, but we keep helper for explicit clarity.)
  function bkSafe(v) { return v == null ? '' : String(v); }

  // Read a query param from a search string like '?date=2026-07-15'.
  function bkQueryParam(search, key) {
    try {
      var s = (search || '').replace(/^\?/, '');
      var parts = s.split('&');
      for (var i = 0; i < parts.length; i++) {
        var kv = parts[i].split('=');
        if (decodeURIComponent(kv[0]) === key) return decodeURIComponent(kv[1] || '');
      }
    } catch (e) {}
    return '';
  }

  /* ============================================================
     Inline availability calendar (checkout-scoped).
     Self-contained so checkout owns its own date selection.
     ============================================================ */
  function CheckoutCalendar(props) {
    var tripKey = props.tripKey;
    var selected = props.selected;
    var onSelect = props.onSelect;

    var today = bkTodayStr();
    var initYear = parseInt(today.slice(0, 4), 10);
    var initMonth = parseInt(today.slice(5, 7), 10);

    var yrState = React.useState(initYear); var year = yrState[0], setYear = yrState[1];
    var moState = React.useState(initMonth); var month = moState[0], setMonth = moState[1];
    var dyState = React.useState(null); var days = dyState[0], setDays = dyState[1];
    var erState = React.useState(false); var error = erState[0], setError = erState[1];
    var ldState = React.useState(true); var loading = ldState[0], setLoading = ldState[1];

    var monthKey = bkYm(year, month);

    React.useEffect(function () {
      var cancelled = false;
      setLoading(true); setError(false);
      var url = '/api/availability?trip_key=' + encodeURIComponent(tripKey) + '&month=' + encodeURIComponent(monthKey);
      fetch(url)
        .then(function (r) { if (!r.ok) throw new Error('bad'); return r.json(); })
        .then(function (data) {
          if (cancelled) return;
          setDays(Array.isArray(data.days) ? data.days : []);
          setLoading(false);
        })
        .catch(function () {
          if (cancelled) return;
          setError(true); setLoading(false); setDays(null);
        });
      return function () { cancelled = true; };
    }, [tripKey, monthKey]);

    var curYear = parseInt(today.slice(0, 4), 10);
    var curMonth = parseInt(today.slice(5, 7), 10);
    var atCurrentMonth = (year === curYear && month === curMonth);
    var isPastMonth = (year < curYear) || (year === curYear && month < curMonth);

    function goPrev() {
      if (atCurrentMonth || isPastMonth) return;
      var m = month - 1, y = year;
      if (m < 1) { m = 12; y -= 1; }
      setMonth(m); setYear(y);
    }
    function goNext() {
      var m = month + 1, y = year;
      if (m > 12) { m = 1; y += 1; }
      setMonth(m); setYear(y);
    }

    var dayByNum = {};
    if (Array.isArray(days)) {
      days.forEach(function (d) {
        var n = parseInt(d.date.slice(8, 10), 10);
        dayByNum[n] = d;
      });
    }

    var firstDow = new Date(year, month - 1, 1).getDay();
    var lead = (firstDow + 6) % 7;
    var lastDay = new Date(year, month, 0).getDate();

    function renderCell(n) {
      var dObj = dayByNum[n] || { date: monthKey + '-' + bkPad2(n), status: 'available', selectable: true };
      var dateStr = monthKey + '-' + bkPad2(n);
      var isPast = dateStr < today;
      var isSel = (dateStr === selected);
      var disabled = isPast || !dObj.selectable;

      var cls = 'avc-day';
      if (disabled) cls += ' avc-disabled';
      if (isSel) cls += ' avc-selected';
      if (!disabled && dObj.status === 'limited') cls += ' avc-limited';

      return React.createElement('button', {
        key: n, type: 'button', className: cls, disabled: disabled,
        'aria-pressed': isSel,
        onClick: function () { if (!disabled && typeof onSelect === 'function') onSelect(dateStr); }
      },
        React.createElement('span', { className: 'avc-num' }, n),
        (!disabled && dObj.status === 'limited') ? React.createElement('span', { className: 'avc-dot', 'aria-hidden': 'true' }) : null
      );
    }

    var cells = [];
    for (var b = 0; b < lead; b++) cells.push(React.createElement('span', { key: 'b' + b, className: 'avc-blank' }));
    for (var i = 1; i <= lastDay; i++) cells.push(renderCell(i));

    return React.createElement('div', { className: 'avc co-cal' },
      React.createElement('div', { className: 'avc-head' },
        React.createElement('button', { type: 'button', className: 'avc-nav', onClick: goPrev, disabled: atCurrentMonth || isPastMonth, 'aria-label': window.t('bk.prevMonth') },
          React.createElement(Ic.arrow, { width: '17', height: '17', style: { transform: 'rotate(180deg)' } })),
        React.createElement('span', { className: 'avc-title' }, window.t('cal.month.' + month) + ' ' + year),
        React.createElement('button', { type: 'button', className: 'avc-nav', onClick: goNext, 'aria-label': window.t('bk.nextMonth') },
          React.createElement(Ic.arrow, { width: '17', height: '17' }))
      ),
      React.createElement('div', { className: 'avc-weekdays' },
        BK_WEEKDAYS.map(function (w) { return React.createElement('span', { key: w, className: 'avc-wd' }, window.t('cal.weekday.' + w)); })),
      loading
        ? React.createElement('div', { className: 'avc-msg' }, window.t('bk.loading'))
        : error
          ? React.createElement('div', { className: 'avc-msg avc-err' }, window.t('bk.loadError'))
          : React.createElement('div', { className: 'avc-grid' }, cells),
      React.createElement('div', { className: 'avc-legend' },
        React.createElement('span', { className: 'avc-lg' }, React.createElement('span', { className: 'avc-sw avc-sw-av' }), window.t('bk.legend.available')),
        React.createElement('span', { className: 'avc-lg' }, React.createElement('span', { className: 'avc-sw avc-sw-lim' }), window.t('bk.legend.limited')),
        React.createElement('span', { className: 'avc-lg' }, React.createElement('span', { className: 'avc-sw avc-sw-un' }), window.t('bk.legend.unavailable')))
    );
  }

  /* ============================================================
     Stepper — guest count control
     ============================================================ */
  function Stepper(props) {
    var value = props.value, onChange = props.onChange;
    var min = props.min == null ? 0 : props.min;
    var max = props.max == null ? 30 : props.max;
    function dec() { if (value > min) onChange(value - 1); }
    function inc() { if (value < max) onChange(value + 1); }
    return React.createElement('div', { className: 'co-stepper' },
      React.createElement('button', { type: 'button', className: 'co-step-btn', onClick: dec, disabled: value <= min, 'aria-label': 'Decrease ' + props.label }, '−'),
      React.createElement('span', { className: 'co-step-val', 'aria-live': 'polite' }, value),
      React.createElement('button', { type: 'button', className: 'co-step-btn', onClick: inc, disabled: value >= max, 'aria-label': 'Increase ' + props.label }, '+')
    );
  }

  /* ============================================================
     CHECKOUT PAGE — /book/<trip-slug>
     ============================================================ */
  function CheckoutPage(props) {
    var tripKey = props.tripKey;
    var go = props.go;
    var goPath = props.goPath;
    var trip = (tripKey && DATA.trips[tripKey]) || null;

    // Guard: unknown slug → friendly recovery.
    if (!trip) {
      return React.createElement('main', { className: 'co-wrap-page' },
        React.createElement('div', { className: 'co-shell co-narrow' },
          React.createElement('div', { className: 'co-card co-error-card' },
            React.createElement('h1', { className: 'co-h1' }, window.t('co.tripNotFound')),
            React.createElement('p', { className: 'co-muted' }, window.t('co.tripNotFoundMsg')),
            React.createElement('div', { className: 'co-recover-cta' },
              React.createElement('button', { type: 'button', className: 'btn btn-teal btn-block', onClick: function () { go('home'); } }, window.t('co.seeAllTrips')),
              React.createElement('a', { className: 'btn btn-wa btn-block', href: DATA.waLink(window.t('wa.generic')), target: '_blank', rel: 'noopener' },
                React.createElement(Ic.wa, null), ' ' + window.t('co.askWa'))
            )
          )
        )
      );
    }

    var pricing = trip.pricing || { type: 'per_person', slots: ['08:00'] };
    var isFixed = pricing.type === 'fixed';
    var slots = pricing.slots || ['08:00'];
    var pl = DATA.priceLabel(trip);

    var preDate = bkQueryParam(props.query, 'date');
    function preInt(key, def, min) {
      var raw = bkQueryParam(props.query, key);
      var n = parseInt(raw, 10);
      if (!isFinite(n) || n < min) return def;
      return Math.min(n, 40);
    }
    var preAdults = preInt('adults', 1, 1);
    var preChildren = preInt('children', 0, 0);
    var preInfants = preInt('infants', 0, 0);

    var dateS = React.useState(preDate || ''); var date = dateS[0], setDate = dateS[1];
    var slotS = React.useState(slots[0]); var slot = slotS[0], setSlot = slotS[1];
    var adS = React.useState(preAdults); var adults = adS[0], setAdults = adS[1];
    var chS = React.useState(preChildren); var children = chS[0], setChildren = chS[1];
    var inS = React.useState(preInfants); var infants = inS[0], setInfants = inS[1];

    var nameS = React.useState(''); var name = nameS[0], setName = nameS[1];
    var phoneS = React.useState(''); var phone = phoneS[0], setPhone = phoneS[1];
    var emailS = React.useState(''); var email = emailS[0], setEmail = emailS[1];
    var pickupS = React.useState(''); var pickup = pickupS[0], setPickup = pickupS[1];
    var reqS = React.useState(''); var special = reqS[0], setSpecial = reqS[1];

    var startS = React.useState(null); var start = startS[0], setStart = startS[1]; // server total payload
    var startLoadingS = React.useState(false); var startLoading = startLoadingS[0], setStartLoading = startLoadingS[1];
    var submittingS = React.useState(false); var submitting = submittingS[0], setSubmitting = submittingS[1];
    var errS = React.useState(''); var submitError = errS[0], setSubmitError = errS[1];

    // Fire the view-tracking event once on mount.
    React.useEffect(function () {
      if (typeof window.dhTrack === 'function') window.dhTrack('booking_start_view', { trip_key: tripKey });
    }, [tripKey]);

    // AUTHORITATIVE total — debounced call to /api/bookings/start on any change.
    React.useEffect(function () {
      if (!date || !slot || adults < 1) { setStart(null); return; }
      var cancelled = false;
      setStartLoading(true);
      var handle = setTimeout(function () {
        fetch('/api/bookings/start', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ trip_key: tripKey, date: date, time_slot: slot, adults: adults, children: children, infants: infants })
        })
          .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
          .then(function (res) {
            if (cancelled) return;
            setStartLoading(false);
            if (res.ok && res.body && res.body.ok) { setStart(res.body); }
            else { setStart(null); }
          })
          .catch(function () { if (!cancelled) { setStartLoading(false); setStart(null); } });
      }, 280);
      return function () { cancelled = true; clearTimeout(handle); };
    }, [tripKey, date, slot, adults, children, infants]);

    // Client-side validity (does NOT compute charge — server does that).
    var hasContact = (name.trim() && (phone.trim() || email.trim()));
    var valid = !!(date && slot && adults >= 1 && name.trim() && (phone.trim() || email.trim()));

    function waMessage() {
      return window.t('wa.greeting') + '\n' +
        window.t('wa.tripOption', { name: window.tt(trip, 'name') }) + '\n' +
        window.t('wa.date', { date: (date || '') }) + '\n' +
        window.t('wa.time', { time: slot }) + '\n' +
        window.t('wa.hotelPickup', { hotel: (pickup || '') }) + '\n' +
        window.t('wa.adults', { n: adults }) + '\n' +
        window.t('wa.children', { n: children }) + '\n' +
        window.t('wa.transferQ');
    }

    function onWaClick() {
      if (typeof window.dhTrack === 'function') window.dhTrack('booking_whatsapp_click', { trip_key: tripKey, date: date || '' });
    }

    function submit() {
      if (!valid || submitting) return;
      setSubmitError('');
      setSubmitting(true);
      if (typeof window.dhTrack === 'function') window.dhTrack('booking_submit', { trip_key: tripKey, date: date });
      fetch('/api/bookings/confirm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          trip_key: tripKey, date: date, time_slot: slot,
          adults: adults, children: children, infants: infants,
          pickup_location: pickup, name: name, customer_phone: phone,
          customer_email: email, special_request: special,
          payment_method: 'pay_on_arrival'
        })
      })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, status: r.status, body: j }; }); })
        .then(function (res) {
          setSubmitting(false);
          if (res.ok && res.body && res.body.reference) {
            if (typeof window.dhTrack === 'function') window.dhTrack('booking_confirmed', { trip_key: tripKey, reference: res.body.reference });
            goPath('/booking-confirmation/' + encodeURIComponent(res.body.reference));
          } else {
            setSubmitError((res.body && res.body.error) ? res.body.error : window.t('co.submitError'));
          }
        })
        .catch(function () {
          setSubmitting(false);
          setSubmitError(window.t('co.networkError'));
        });
    }

    // Total block: prefer server value; show loading/hint otherwise.
    var total = start ? start.total_amount : null;
    var currency = start ? start.currency : 'EUR';
    var lineItems = (start && start.line_items) || [];

    return React.createElement('main', { className: 'co-wrap-page' },
      React.createElement('div', { className: 'co-shell' },

        // ── Header ──
        React.createElement('button', { type: 'button', className: 'co-back', onClick: function () { go(tripKey); } },
          React.createElement(Ic.arrow, { width: '15', height: '15', style: { transform: 'rotate(180deg)' } }), ' ' + window.t('co.backTo', { name: window.tt(trip, 'name') })),

        React.createElement('div', { className: 'co-head' },
          React.createElement('span', { className: 'co-kicker' }, window.t('co.reserveSpot')),
          React.createElement('h1', { className: 'co-h1' }, window.tt(trip, 'name')),
          React.createElement('p', { className: 'co-sub' }, window.tt(trip, 'tagline') + ' · ' + window.tt(trip, 'duration')),
          React.createElement('div', { className: 'co-price-tag' },
            React.createElement('span', { className: 'co-price-amt' }, pl.main),
            React.createElement('span', { className: 'co-price-note' }, pl.note))
        ),

        React.createElement('div', { className: 'co-grid' },

          // ─────────── LEFT: form ───────────
          React.createElement('div', { className: 'co-main' },

            // Date
            React.createElement('section', { className: 'co-card' },
              React.createElement('h2', { className: 'co-h2' }, window.t('co.step1Date')),
              React.createElement(CheckoutCalendar, { tripKey: tripKey, selected: date, onSelect: function (d) { setDate(d); } }),
              date
                ? React.createElement('p', { className: 'co-selected' }, window.t('co.selected'), React.createElement('strong', null, bkHumanDate(date)))
                : React.createElement('p', { className: 'co-hint' }, window.t('co.pickDateHint'))
            ),

            // Time slot
            React.createElement('section', { className: 'co-card' },
              React.createElement('h2', { className: 'co-h2' }, window.t('co.step2Time')),
              slots.length > 1
                ? React.createElement('select', { className: 'co-input', value: slot, onChange: function (e) { setSlot(e.target.value); }, 'aria-label': window.t('co.departsLabel') },
                    slots.map(function (s) { return React.createElement('option', { key: s, value: s }, window.t('co.departs', { time: s })); }))
                : React.createElement('div', { className: 'co-fixed-slot' },
                    React.createElement(Ic.clock, { width: '18', height: '18' }), ' ' + window.t('co.departs', { time: '' }), React.createElement('strong', null, slots[0]))
            ),

            // Guests
            React.createElement('section', { className: 'co-card' },
              React.createElement('h2', { className: 'co-h2' }, window.t('co.step3Guests')),
              isFixed
                ? React.createElement('p', { className: 'co-note-fixed' }, window.t('co.fixedNote'))
                : null,
              React.createElement('div', { className: 'co-guests' },
                React.createElement('div', { className: 'co-guest-row' },
                  React.createElement('span', null, React.createElement('strong', null, window.t('bk.adults')), React.createElement('span', { className: 'co-guest-sub' }, window.t('bk.adultsAge'))),
                  React.createElement(Stepper, { label: window.t('bk.adults'), value: adults, onChange: setAdults, min: 1, max: 40 })),
                React.createElement('div', { className: 'co-guest-row' },
                  React.createElement('span', null, React.createElement('strong', null, window.t('bk.children')), React.createElement('span', { className: 'co-guest-sub' }, window.t('bk.childrenAge'))),
                  React.createElement(Stepper, { label: window.t('bk.children'), value: children, onChange: setChildren, min: 0, max: 40 })),
                React.createElement('div', { className: 'co-guest-row' },
                  React.createElement('span', null, React.createElement('strong', null, window.t('bk.infants')), React.createElement('span', { className: 'co-guest-sub' }, window.t('bk.infantsAge'))),
                  React.createElement(Stepper, { label: window.t('bk.infants'), value: infants, onChange: setInfants, min: 0, max: 20 }))
              )
            ),

            // Contact + logistics
            React.createElement('section', { className: 'co-card' },
              React.createElement('h2', { className: 'co-h2' }, window.t('co.step4Details')),
              React.createElement('div', { className: 'co-fields' },
                React.createElement('label', { className: 'co-field' },
                  React.createElement('span', { className: 'co-label' }, window.t('co.fullName')),
                  React.createElement('input', { className: 'co-input', type: 'text', value: name, onChange: function (e) { setName(e.target.value); }, placeholder: window.t('co.namePlaceholder') })),
                React.createElement('label', { className: 'co-field' },
                  React.createElement('span', { className: 'co-label' }, window.t('co.phone')),
                  React.createElement('input', { className: 'co-input', type: 'tel', value: phone, onChange: function (e) { setPhone(e.target.value); }, placeholder: '+20 100 000 0000' })),
                React.createElement('label', { className: 'co-field' },
                  React.createElement('span', { className: 'co-label' }, window.t('co.email')),
                  React.createElement('input', { className: 'co-input', type: 'email', value: email, onChange: function (e) { setEmail(e.target.value); }, placeholder: window.t('co.emailPlaceholder') })),
                React.createElement('label', { className: 'co-field' },
                  React.createElement('span', { className: 'co-label' }, window.t('co.hotelPickup')),
                  React.createElement('input', { className: 'co-input', type: 'text', value: pickup, onChange: function (e) { setPickup(e.target.value); }, placeholder: window.t('co.hotelPlaceholder') })),
                React.createElement('label', { className: 'co-field co-field-full' },
                  React.createElement('span', { className: 'co-label' }, window.t('co.specialRequest')),
                  React.createElement('textarea', { className: 'co-input co-textarea', value: special, onChange: function (e) { setSpecial(e.target.value); }, rows: 3, placeholder: window.t('co.specialPlaceholder') }))
              ),
              React.createElement('p', { className: 'co-hint' }, window.t('co.detailsHint'))
            ),

            // Bottom CTA — confirm right after filling details (no scroll back up).
            // Same `submit` handler + shared `submitting`/`valid` state as the
            // summary button ⇒ both disable together, so no duplicate booking.
            React.createElement('div', { className: 'co-bottom-cta', style: { marginTop: 18 } },
              submitError
                ? React.createElement('div', { className: 'co-submit-err', role: 'alert' }, bkSafe(submitError))
                : null,
              React.createElement('button', {
                type: 'button',
                className: 'btn btn-coral btn-lg btn-block co-reserve',
                disabled: !valid || submitting,
                'aria-disabled': (!valid || submitting) ? 'true' : 'false',
                onClick: submit
              }, submitting ? window.t('co.reserving') : window.t('co.reserve')),
              !valid
                ? React.createElement('p', { className: 'co-hint co-center' }, window.t('co.reserveHint'))
                : null
            )
          ),

          // ─────────── RIGHT: summary / total / CTA ───────────
          React.createElement('aside', { className: 'co-aside' },
            React.createElement('div', { className: 'co-summary co-card' },
              React.createElement('h2', { className: 'co-h2' }, window.t('co.yourBooking')),

              React.createElement('div', { className: 'co-sum-rows' },
                React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('bk.trip')), React.createElement('span', { className: 'co-sum-v' }, window.tt(trip, 'name'))),
                React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('co.date')), React.createElement('span', { className: 'co-sum-v' }, date ? bkHumanDate(date) : '—')),
                React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.departs')), React.createElement('span', { className: 'co-sum-v' }, slot)),
                React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('co.guests')), React.createElement('span', { className: 'co-sum-v' }, bkGuestStr(adults, children, infants)))
              ),

              // Line items + total (server truth)
              React.createElement('div', { className: 'co-total-block' },
                lineItems.length
                  ? React.createElement('div', { className: 'co-lines' },
                      lineItems.map(function (li, i) {
                        return React.createElement('div', { className: 'co-line', key: i },
                          React.createElement('span', null, bkSafe(li.label) + (li.qty > 1 ? ' × ' + li.qty : '')),
                          React.createElement('span', null, '€' + li.amount));
                      }))
                  : null,
                React.createElement('div', { className: 'co-total' },
                  React.createElement('span', null, window.t('co.total')),
                  React.createElement('span', { className: 'co-total-amt' },
                    total != null ? (currency === 'EUR' ? '€' : currency + ' ') + total : (startLoading ? '…' : '—'))),
                isFixed
                  ? React.createElement('p', { className: 'co-total-fine' }, window.t('co.fixedFine'))
                  : React.createElement('p', { className: 'co-total-fine' }, window.t('co.infantsFree')),
                (!date && !startLoading) ? React.createElement('p', { className: 'co-hint' }, window.t('co.liveTotalHint')) : null
              ),

              // Payment — pay on arrival only
              React.createElement('div', { className: 'co-pay' },
                React.createElement('div', { className: 'co-pay-opt co-pay-active' },
                  React.createElement('span', { className: 'co-pay-radio', 'aria-hidden': 'true' }),
                  React.createElement('span', null,
                    React.createElement('strong', null, window.t('co.payOnArrival')),
                    React.createElement('span', { className: 'co-pay-sub' }, window.t('co.payOnArrivalSub'))))
              ),

              // CTA
              submitError
                ? React.createElement('div', { className: 'co-submit-err', role: 'alert' }, bkSafe(submitError))
                : null,
              React.createElement('button', {
                type: 'button',
                className: 'btn btn-coral btn-lg btn-block co-reserve',
                disabled: !valid || submitting,
                'aria-disabled': (!valid || submitting) ? 'true' : 'false',
                onClick: submit
              }, submitting ? window.t('co.reserving') : window.t('co.reserve')),

              !valid
                ? React.createElement('p', { className: 'co-hint co-center' }, window.t('co.reserveHint'))
                : null,

              React.createElement('a', {
                className: 'btn btn-wa btn-block co-wa-fallback',
                href: DATA.waLink(waMessage()),
                target: '_blank', rel: 'noopener', onClick: onWaClick
              }, React.createElement(Ic.wa, null), ' ' + window.t('co.askWa')),

              // Trust lines
              React.createElement('ul', { className: 'co-trust' },
                [window.t('co.trust.freeCancel'), window.t('co.trust.noPay'), window.t('co.trust.fastWa')].map(function (tline, i) {
                  return React.createElement('li', { key: i },
                    React.createElement('span', { className: 'co-trust-ic' }, React.createElement(Ic.check, { width: '13', height: '13' })), tline);
                }))
            )
          )
        )
      )
    );
  }

  /* ============================================================
     CONFIRMATION PAGE — /booking-confirmation/<reference>
     ============================================================ */
  function ConfirmationPage(props) {
    var reference = props.reference;
    var go = props.go;

    var dataS = React.useState(null); var booking = dataS[0], setBooking = dataS[1];
    var loadS = React.useState(true); var loading = loadS[0], setLoading = loadS[1];
    var errS = React.useState(false); var notFound = errS[0], setNotFound = errS[1];

    React.useEffect(function () {
      if (typeof window.dhTrack === 'function') window.dhTrack('booking_confirmation_view', { reference: reference || '' });
    }, [reference]);

    React.useEffect(function () {
      if (!reference) { setLoading(false); setNotFound(true); return; }
      var cancelled = false;
      setLoading(true); setNotFound(false);
      fetch('/api/bookings/' + encodeURIComponent(reference))
        .then(function (r) {
          if (r.status === 404) { throw new Error('notfound'); }
          if (!r.ok) throw new Error('err');
          return r.json();
        })
        .then(function (j) { if (!cancelled) { setBooking(j); setLoading(false); } })
        .catch(function () { if (!cancelled) { setNotFound(true); setLoading(false); } });
      return function () { cancelled = true; };
    }, [reference]);

    function waMessage() {
      var ref = reference || '';
      var tripName = booking ? booking.trip_name : 'Dolphin House trip';
      var date = booking && booking.date ? booking.date : '';
      return window.t('wa.bookedOnline') + '\n' +
        window.t('wa.refLine', { ref: ref }) + '\n' +
        window.t('wa.tripLine', { name: tripName }) + '\n' +
        (date ? window.t('wa.date', { date: date }) + '\n' : '') +
        window.t('wa.confirmPickup');
    }

    if (loading) {
      return React.createElement('main', { className: 'co-wrap-page' },
        React.createElement('div', { className: 'co-shell co-narrow' },
          React.createElement('div', { className: 'co-card co-center-card' },
            React.createElement('p', { className: 'co-muted' }, window.t('cf.loading')))));
    }

    if (notFound || !booking) {
      return React.createElement('main', { className: 'co-wrap-page' },
        React.createElement('div', { className: 'co-shell co-narrow' },
          React.createElement('div', { className: 'co-card co-error-card' },
            React.createElement('h1', { className: 'co-h1' }, window.t('cf.notFound')),
            React.createElement('p', { className: 'co-muted' }, window.t('cf.notFoundMsg')),
            React.createElement('div', { className: 'co-recover-cta' },
              React.createElement('a', { className: 'btn btn-wa btn-block', href: DATA.waLink(window.t('wa.needHelp', { ref: (reference ? ' (ref ' + reference + ')' : '') })), target: '_blank', rel: 'noopener' },
                React.createElement(Ic.wa, null), ' ' + window.t('co.askWa')),
              React.createElement('button', { type: 'button', className: 'btn btn-teal btn-block', onClick: function () { go('home'); } }, window.t('cf.backHome')))
          )));
    }

    var b = booking;
    var adults = parseInt(b.adults, 10) || 0;
    var children = parseInt(b.children, 10) || 0;
    var infants = parseInt(b.infants, 10) || 0;
    var guestStr = bkGuestStr(adults, children, infants);
    var totalStr = b.total_amount != null ? ((b.currency === 'EUR' ? '€' : (b.currency || '') + ' ') + b.total_amount) : '—';

    return React.createElement('main', { className: 'co-wrap-page' },
      React.createElement('div', { className: 'co-shell co-narrow' },
        React.createElement('div', { className: 'co-card co-confirm' },
          React.createElement('div', { className: 'co-success-ic', 'aria-hidden': 'true' }, React.createElement(Ic.check, { width: '34', height: '34' })),
          React.createElement('h1', { className: 'co-h1 co-center' }, b.first_name ? window.t('cf.confirmedName', { name: bkSafe(b.first_name) }) : window.t('cf.confirmed') + '!'),
          React.createElement('p', { className: 'co-muted co-center' }, window.t('cf.thankYou')),

          React.createElement('div', { className: 'co-ref' },
            React.createElement('span', { className: 'co-ref-label' }, window.t('cf.yourReference')),
            React.createElement('span', { className: 'co-ref-val' }, bkSafe(b.reference))),

          React.createElement('div', { className: 'co-sum-rows co-confirm-rows' },
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.trip')), React.createElement('span', { className: 'co-sum-v' }, bkSafe(b.trip_name))),
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.date')), React.createElement('span', { className: 'co-sum-v' }, b.date ? bkHumanDate(b.date) : '—')),
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.departs')), React.createElement('span', { className: 'co-sum-v' }, bkSafe(b.time_slot))),
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.guests')), React.createElement('span', { className: 'co-sum-v' }, guestStr)),
            b.pickup_location ? React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.pickup')), React.createElement('span', { className: 'co-sum-v' }, bkSafe(b.pickup_location))) : null,
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.total')), React.createElement('span', { className: 'co-sum-v co-total-amt' }, totalStr)),
            React.createElement('div', { className: 'co-sum-row' }, React.createElement('span', null, window.t('cf.payment')), React.createElement('span', { className: 'co-sum-v' }, window.t('co.payOnArrival')))
          ),

          React.createElement('p', { className: 'co-reassure' }, window.t('cf.reassure')),

          React.createElement('a', {
            className: 'btn btn-wa btn-lg btn-block',
            href: DATA.waLink(waMessage()), target: '_blank', rel: 'noopener',
            onClick: function () { if (typeof window.dhTrack === 'function') window.dhTrack('booking_whatsapp_click', { reference: reference }); }
          }, React.createElement(Ic.wa, null), ' ' + window.t('cf.confirmWa')),

          React.createElement('div', { className: 'co-confirm-links' },
            React.createElement('button', { type: 'button', className: 'btn btn-ghost btn-block', onClick: function () { go('home'); } }, window.t('cf.backHome')),
            React.createElement('button', { type: 'button', className: 'btn btn-ghost btn-block', onClick: function () { go('home'); } }, window.t('cf.seeAllTrips')))
        )
      )
    );
  }

  window.CheckoutPage = CheckoutPage;
  window.ConfirmationPage = ConfirmationPage;
})();