// ============================================
// Publieke dansshow-pagina — overzicht + interactieve stoelkiezer
// Route: #/shows  ·  #/shows/<showId>  ·  #/shows/return?id=<orderId>
// Gated achter feature-slug 'dansshow' (window.WNM).
// ============================================

function ShowsPage({ navigate }) {
  // Licentie-gate: verberg de hele module als het pakket 'dansshow' niet bevat.
  if (window.WNM && !window.WNM.hasFeature('dansshow')) {
    return (
      <section className="section"><div className="container" style={{ textAlign: 'center', padding: '80px 0' }}>
        <h1 className="display" style={{ fontSize: 32, textTransform: 'none' }}>Dansshows</h1>
        <p style={{ color: 'var(--ink-500)' }}>Deze functie is niet beschikbaar.</p>
      </div></section>
    );
  }

  const [hash, setHash] = React.useState(window.location.hash);
  React.useEffect(() => {
    const f = () => setHash(window.location.hash);
    window.addEventListener('hashchange', f);
    return () => window.removeEventListener('hashchange', f);
  }, []);

  const raw = hash.replace(/^#\/?/, '');
  const path = raw.split('?')[0];
  const query = new URLSearchParams(raw.split('?')[1] || '');
  const parts = path.split('/'); // ['shows'] | ['shows', id] | ['shows','return']

  if (parts[1] === 'return') return <ShowsReturn navigate={navigate} orderId={query.get('id')} />;
  if (parts[1]) return <ShowsDetail navigate={navigate} showId={parts[1]} />;
  return <ShowsList navigate={navigate} />;
}

function showsDateLabel(v) {
  if (!v) return '';
  try { return new Date(v).toLocaleString('nl-BE', { dateStyle: 'full', timeStyle: 'short' }); }
  catch { return v; }
}

// ---- Overzicht ----
function ShowsList({ navigate }) {
  const [shows, setShows] = React.useState(null);
  React.useEffect(() => { fetch('/api/shows').then(r => r.json()).then(d => setShows(d.shows || [])).catch(() => setShows([])); }, []);

  return (
    <section className="section">
      <div className="container">
        <window.LM_UI.SectionHeader eyebrow="Voorstellingen" title="Onze dansshows" subtitle="Reserveer je plaats voor onze dansvoorstellingen. Kies zelf je stoel op de plattegrond." align="center" />
        {shows === null ? (
          <p style={{ textAlign: 'center', color: 'var(--ink-500)' }}>Laden…</p>
        ) : shows.length === 0 ? (
          <p style={{ textAlign: 'center', color: 'var(--ink-500)', padding: '40px 0' }}>Er zijn momenteel geen geplande dansshows. Kom binnenkort terug!</p>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 24 }}>
            {shows.map(s => (
              <window.LM_UI.Reveal key={s.id} className="card" as="article">
                <div style={{ padding: 26 }}>
                  <h3 style={{ fontSize: 22, margin: '0 0 10px' }}>{s.title}</h3>
                  {s.startsAt && <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-500)', fontSize: 14, marginBottom: 6 }}>{window.LM_UI.Icon.Calendar({})} {showsDateLabel(s.startsAt)}</div>}
                  {s.location && <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-500)', fontSize: 14, marginBottom: 14 }}>{window.LM_UI.Icon.Pin({})} {s.location}</div>}
                  {s.description && <p style={{ color: 'var(--ink-600)', fontSize: 15, lineHeight: 1.6, margin: '0 0 18px' }}>{s.description}</p>}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    {s.priceFrom > 0 && <span style={{ fontSize: 14, color: 'var(--ink-500)' }}>vanaf <strong style={{ color: 'var(--ink-900)' }}>€{s.priceFrom.toFixed(2)}</strong></span>}
                    <button className="btn btn-primary" onClick={() => { window.location.hash = '#/shows/' + s.id; }}>Kies je plaats →</button>
                  </div>
                </div>
              </window.LM_UI.Reveal>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ---- Stoelkiezer voor één show ----
function ShowsDetail({ navigate, showId }) {
  const [show, setShow] = React.useState(null);
  const [seatmap, setSeatmap] = React.useState({});
  const [standingAvail, setStandingAvail] = React.useState({});  // zoneId -> {capacity, taken, free}
  const [standingSel, setStandingSel] = React.useState({});       // zoneId -> aantal gekozen
  const [selected, setSelected] = React.useState(() => new Set());
  const [me, setMe] = React.useState(null);
  const [panel, setPanel] = React.useState({ open: false, busy: false, err: '' });
  const [notFound, setNotFound] = React.useState(false);
  const SM = window.LM_SEATMAP;

  const loadMap = React.useCallback(() => {
    fetch('/api/shows/' + showId + '/seatmap').then(r => r.json()).then(d => { setSeatmap(d.seatmap || {}); setStandingAvail(d.standing || {}); }).catch(() => {});
  }, [showId]);

  React.useEffect(() => {
    fetch('/api/shows/' + showId).then(r => { if (!r.ok) throw new Error('nf'); return r.json(); })
      .then(d => setShow(d.show)).catch(() => setNotFound(true));
    loadMap();
    fetch('/api/shop/account/me').then(r => r.json()).then(setMe).catch(() => setMe({ authed: false }));
  }, [showId, loadMap]);

  // Live polling van de beschikbaarheid (zodat stoelen die anderen kopen grijs worden)
  React.useEffect(() => {
    const iv = setInterval(loadMap, 10000);
    const onVis = () => { if (!document.hidden) loadMap(); };
    document.addEventListener('visibilitychange', onVis);
    return () => { clearInterval(iv); document.removeEventListener('visibilitychange', onVis); };
  }, [loadMap]);

  // Prijs per stoel uit de rangen
  const priceOf = React.useMemo(() => {
    const ranks = {}; (show?.ranks || []).forEach(r => ranks[r.id] = Number(r.price) || 0);
    const map = {};
    for (const sec of (show?.layout?.sections || [])) for (const row of sec.rows) for (const seat of row.seats) if (!seat.aisle) map[seat.id] = ranks[seat.rankId] || 0;
    return map;
  }, [show]);

  // C1: aantal voor "beste plaatsen samen". C2: aantal losse stoelen door de keuze.
  const [bestN, setBestN] = React.useState(2);
  const orphanCount = React.useMemo(() => {
    const occupied = (seat) => !!seatmap[seat.id] || selected.has(seat.id);
    let orphans = 0;
    for (const sec of (show?.layout?.sections || [])) {
      for (const row of (sec.rows || [])) {
        const seats = (row.seats || []).filter(s => !s.aisle);
        for (let i = 0; i < seats.length; i++) {
          const s = seats[i];
          if (seatmap[s.id] || selected.has(s.id)) continue;
          const leftOcc = i === 0 ? true : occupied(seats[i - 1]);
          const rightOcc = i === seats.length - 1 ? true : occupied(seats[i + 1]);
          const nearSel = (i > 0 && selected.has(seats[i - 1].id)) || (i < seats.length - 1 && selected.has(seats[i + 1].id));
          if (leftOcc && rightOcc && nearSel) orphans++;
        }
      }
    }
    return orphans;
  }, [selected, seatmap, show]);

  if (notFound) return (
    <section className="section"><div className="container" style={{ textAlign: 'center', padding: '60px 0' }}>
      <p style={{ color: 'var(--ink-500)' }}>Deze dansshow bestaat niet of is niet langer beschikbaar.</p>
      <button className="btn btn-primary" onClick={() => { window.location.hash = '#/shows'; }}>← Alle dansshows</button>
    </div></section>
  );
  if (!show) return <section className="section"><div className="container"><p style={{ textAlign: 'center', color: 'var(--ink-500)' }}>Laden…</p></div></section>;

  const selectedArr = [...selected];
  const maxPer = show.maxPerOrder || 10;
  // Staanplaatszones + prijs per zone
  const zones = show.layout?.standing || [];
  const rankPrice = {}; (show.ranks || []).forEach(r => rankPrice[r.id] = Number(r.price) || 0);
  const zonePrice = (zoneId) => { const z = zones.find(x => x.id === zoneId); return z ? (rankPrice[z.rankId] || 0) : 0; };
  const zoneName = (zoneId) => { const z = zones.find(x => x.id === zoneId); return z ? (z.name || 'Staanplaatsen') : zoneId; };
  const standingCount = Object.values(standingSel).reduce((a, n) => a + n, 0);
  const totalCount = selectedArr.length + standingCount;
  const total = selectedArr.reduce((a, id) => a + (priceOf[id] || 0), 0)
    + Object.entries(standingSel).reduce((a, [zid, n]) => a + n * zonePrice(zid), 0);

  const addStanding = (zoneId) => {
    const a = standingAvail[zoneId];
    setStandingSel(prev => {
      const cur = prev[zoneId] || 0;
      if (totalCount >= maxPer) { alert(`Je kan maximaal ${maxPer} plaatsen per bestelling kiezen.`); return prev; }
      if (a && cur >= a.free) { alert('Er zijn niet meer vrije staanplaatsen in deze zone.'); return prev; }
      return { ...prev, [zoneId]: cur + 1 };
    });
  };
  const setStandingQty = (zoneId, n) => setStandingSel(prev => {
    const a = standingAvail[zoneId];
    let q = Math.max(0, n);
    if (a) q = Math.min(q, a.free);
    const others = totalCount - (prev[zoneId] || 0);
    q = Math.min(q, Math.max(0, maxPer - others));
    const next = { ...prev }; if (q <= 0) delete next[zoneId]; else next[zoneId] = q; return next;
  });

  const toggleSeat = (seat) => {
    const st = seatmap[seat.id];
    if (st === 'sold' || st === 'held' || st === 'blocked') return;
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(seat.id)) next.delete(seat.id);
      else {
        if (totalCount >= maxPer) { alert(`Je kan maximaal ${maxPer} plaatsen per bestelling kiezen.`); return next; }
        next.add(seat.id);
      }
      return next;
    });
  };

  // ---- C1: beste aaneengesloten plaatsen samen ----
  const seatFree = (seat) => !seat.aisle && !seatmap[seat.id];
  const pickBest = (count) => {
    const n = Math.min(Math.max(1, count), maxPer);
    for (const sec of (show.layout?.sections || [])) {
      for (const row of (sec.rows || [])) {
        const runs = []; let run = [];
        for (const seat of (row.seats || [])) {
          if (seat.aisle || !seatFree(seat)) { if (run.length) runs.push(run); run = []; }
          else run.push(seat);
        }
        if (run.length) runs.push(run);
        for (const r of runs) if (r.length >= n) { const start = Math.floor((r.length - n) / 2); return r.slice(start, start + n).map(s => s.id); }
      }
    }
    return null;
  };
  const chooseBest = () => {
    const ids = pickBest(bestN);
    if (!ids) { alert(`Geen ${bestN} aaneengesloten vrije plaatsen gevonden. Probeer een kleiner aantal of kies zelf op de plattegrond.`); return; }
    setSelected(new Set(ids));
  };

  const placeOrder = async () => {
    setPanel(p => ({ ...p, busy: true, err: '' }));
    try {
      const standingPayload = Object.entries(standingSel).filter(([, n]) => n > 0).map(([zoneId, qty]) => ({ zoneId, qty }));
      const r = await fetch('/api/shows/' + showId + '/order', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
        body: JSON.stringify({ seatIds: selectedArr, standing: standingPayload }),
      });
      const b = await r.json().catch(() => ({}));
      if (r.status === 401) { setMe({ authed: false }); setPanel(p => ({ ...p, busy: false, open: true, err: 'Meld je aan om je plaatsen te reserveren.' })); return; }
      if (r.status === 409 && b.error === 'seats_taken') {
        await loadMap();
        setSelected(prev => { const n = new Set(prev); (b.seats || []).forEach(id => n.delete(id)); return n; });
        setPanel(p => ({ ...p, busy: false, err: 'Eén of meer van je stoelen werden net door iemand anders genomen. Ze zijn uit je selectie verwijderd — kies eventueel andere plaatsen.' }));
        return;
      }
      if (r.status === 409 && b.error === 'standing_soldout') {
        await loadMap();
        setPanel(p => ({ ...p, busy: false, err: b.message || 'Er zijn niet genoeg vrije staanplaatsen meer. Pas je aantal aan.' }));
        return;
      }
      if (!r.ok) throw new Error(b.message || b.error || 'Reserveren mislukt');
      if (b.checkoutUrl) { window.location.href = b.checkoutUrl; return; }
      setPanel(p => ({ ...p, busy: false, err: 'Online betalen is op deze site nog niet geconfigureerd. Neem contact op met de dansschool.' }));
    } catch (e) { setPanel(p => ({ ...p, busy: false, err: e.message })); }
  };

  const onReserve = () => {
    if (totalCount === 0) return;
    if (me && !me.authed) { setPanel({ open: true, busy: false, err: '' }); return; }
    placeOrder();
  };

  return (
    <section className="section">
      <div className="container">
        <button className="btn btn-ghost" style={{ marginBottom: 16 }} onClick={() => { window.location.hash = '#/shows'; }}>← Alle dansshows</button>
        <h1 className="display" style={{ fontSize: 'clamp(28px,4vw,44px)', margin: '0 0 8px', textTransform: 'none' }}>{show.title}</h1>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18, color: 'var(--ink-500)', fontSize: 15, marginBottom: 24 }}>
          {show.startsAt && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>{window.LM_UI.Icon.Calendar({})} {showsDateLabel(show.startsAt)}</span>}
          {show.location && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>{window.LM_UI.Icon.Pin({})} {show.location}</span>}
        </div>
        {show.description && <p style={{ color: 'var(--ink-600)', maxWidth: 700, lineHeight: 1.6, marginBottom: 28 }}>{show.description}</p>}

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 28, alignItems: 'start' }} className="shows-layout">
          {/* Plattegrond */}
          <div className="card" style={{ padding: 20 }}>
            {SM ? (
              <>
                <SM.FloorPlan layout={show.layout} ranks={show.ranks} mode="select"
                  selected={selected}
                  statusOf={(seat) => seatmap[seat.id] || 'free'}
                  onSeatClick={toggleSeat}
                  standingAvail={standingAvail} standingQty={standingSel} onStandingClick={addStanding} />
                <SM.SeatMapLegend ranks={show.ranks} />
              </>
            ) : <p style={{ color: '#b91c1c' }}>Plattegrond kon niet geladen worden.</p>}
          </div>

          {/* Selectie + checkout */}
          <div className="card" style={{ padding: 22, position: 'sticky', top: 90 }}>
            <h3 style={{ margin: '0 0 14px', fontSize: 20 }}>Jouw selectie</h3>
            {/* C1: beste plaatsen samen */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface-2,rgba(0,0,0,.03))', padding: '8px 10px', borderRadius: 8, marginBottom: 14, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 13, color: 'var(--ink-600)' }}>Snel kiezen:</span>
              <input type="number" min="1" max={maxPer} value={bestN} onChange={e => setBestN(Math.max(1, Math.min(maxPer, Number(e.target.value) || 1)))}
                style={{ width: 52, padding: '4px 6px', border: '1px solid var(--border)', borderRadius: 6, textAlign: 'center' }} />
              <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 13 }} onClick={chooseBest}>Beste plaatsen samen</button>
            </div>
            {totalCount === 0 ? (
              <p style={{ color: 'var(--ink-500)', fontSize: 14 }}>Klik op een vrije stoel op de plattegrond om te beginnen, of laat ons de beste plaatsen samen kiezen.</p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
                {selectedArr.map(id => (
                  <div key={id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14 }}>
                    <span>Stoel <strong>{seatLabelFor(show, id)}</strong></span>
                    <span style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
                      €{(priceOf[id] || 0).toFixed(2)}
                      <button onClick={() => setSelected(prev => { const n = new Set(prev); n.delete(id); return n; })}
                        style={{ border: 'none', background: 'none', color: '#b91c1c', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}>×</button>
                    </span>
                  </div>
                ))}
                {Object.entries(standingSel).filter(([, n]) => n > 0).map(([zid, n]) => (
                  <div key={zid} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14 }}>
                    <span>🧍 <strong>{zoneName(zid)}</strong>
                      <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center', marginLeft: 8 }}>
                        <button onClick={() => setStandingQty(zid, n - 1)} style={{ border: '1px solid var(--border)', background: 'none', borderRadius: 4, width: 22, height: 22, cursor: 'pointer' }}>−</button>
                        <span style={{ minWidth: 18, textAlign: 'center' }}>{n}</span>
                        <button onClick={() => addStanding(zid)} style={{ border: '1px solid var(--border)', background: 'none', borderRadius: 4, width: 22, height: 22, cursor: 'pointer' }}>+</button>
                      </span>
                    </span>
                    <span style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
                      €{(n * zonePrice(zid)).toFixed(2)}
                      <button onClick={() => setStandingQty(zid, 0)} style={{ border: 'none', background: 'none', color: '#b91c1c', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}>×</button>
                    </span>
                  </div>
                ))}
              </div>
            )}
            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 17, marginBottom: 16 }}>
              <span>Totaal</span><span>€{total.toFixed(2)}</span>
            </div>

            {orphanCount > 0 && (
              <div style={{ background: 'rgba(245,158,11,.12)', color: '#92400e', padding: '8px 10px', borderRadius: 8, fontSize: 12.5, marginBottom: 12 }}>
                💡 Je laat {orphanCount === 1 ? 'één losse stoel' : `${orphanCount} losse stoelen`} over naast je keuze. Overweeg een plaats op te schuiven zodat er geen enkele plek alleen overblijft.
              </div>
            )}
            {panel.err && <div style={{ background: 'rgba(220,38,38,.08)', color: '#b91c1c', padding: '8px 10px', borderRadius: 8, fontSize: 13, marginBottom: 12 }}>{panel.err}</div>}

            {panel.open && me && !me.authed ? (
              <ShowsLogin onSuccess={() => { fetch('/api/shop/account/me').then(r => r.json()).then(m => { setMe(m); setPanel({ open: false, busy: false, err: '' }); placeOrder(); }); }} navigate={navigate} />
            ) : (
              <button className="btn btn-primary" style={{ width: '100%' }} disabled={totalCount === 0 || panel.busy} onClick={onReserve}>
                {panel.busy ? 'Bezig…' : `Reserveer & betaal (${totalCount})`}
              </button>
            )}
            <p style={{ fontSize: 12, color: 'var(--ink-400)', marginTop: 10, marginBottom: 0 }}>Je stoelen worden {show.holdMinutes || 10} min voor je gereserveerd tijdens het betalen.</p>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .shows-layout{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function seatLabelFor(show, seatId) {
  for (const sec of (show.layout?.sections || [])) for (const row of sec.rows) {
    const s = row.seats.find(x => x.id === seatId);
    if (s) return `${row.label}${s.label}`;
  }
  return seatId;
}

// Inline aanmeldformulier (hergebruikt /api/shop/account/login)
function ShowsLogin({ onSuccess, navigate }) {
  const [form, setForm] = React.useState({ email: '', password: '' });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const submit = async (e) => {
    e.preventDefault(); setErr(''); setBusy(true);
    try {
      const r = await fetch('/api/shop/account/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(form) });
      const b = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error({ invalid_credentials: 'E-mail of wachtwoord onjuist.', rate_limited: 'Te veel pogingen, wacht even.' }[b.error] || 'Aanmelden mislukt.');
      onSuccess && onSuccess();
    } catch (ex) { setErr(ex.message); } finally { setBusy(false); }
  };
  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <p style={{ fontSize: 13, color: 'var(--ink-500)', margin: 0 }}>Meld je aan om je stoelen te reserveren.</p>
      <input className="input" type="email" required placeholder="E-mail" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
      <input className="input" type="password" required placeholder="Wachtwoord" value={form.password} onChange={e => setForm({ ...form, password: e.target.value })} />
      {err && <div style={{ color: '#b91c1c', fontSize: 13 }}>{err}</div>}
      <button className="btn btn-primary" style={{ width: '100%' }} disabled={busy}>{busy ? 'Aanmelden…' : 'Aanmelden & reserveren'}</button>
      <button type="button" className="btn btn-ghost" style={{ width: '100%' }} onClick={() => navigate('webshop')}>Nog geen account? Registreer in de webshop</button>
    </form>
  );
}

// ---- Terugkeer na Mollie-betaling ----
function ShowsReturn({ navigate, orderId }) {
  const [status, setStatus] = React.useState(null);
  React.useEffect(() => {
    if (!orderId) return;
    let stop = false;
    const poll = () => fetch('/api/shop/order/' + orderId + '/status').then(r => r.json()).then(d => {
      if (stop) return;
      setStatus(d);
      if (d.paymentStatus !== 'paid' && d.status !== 'failed') setTimeout(poll, 3000);
    }).catch(() => { if (!stop) setTimeout(poll, 4000); });
    poll();
    return () => { stop = true; };
  }, [orderId]);

  const paid = status && status.paymentStatus === 'paid';
  const failed = status && status.status === 'failed';
  return (
    <section className="section"><div className="container" style={{ maxWidth: 560, textAlign: 'center', padding: '50px 0' }}>
      {!status && <p style={{ color: 'var(--ink-500)' }}>Betaling controleren…</p>}
      {paid && (
        <>
          <div style={{ fontSize: 52 }}>🎟️</div>
          <h1 className="display" style={{ fontSize: 30, textTransform: 'none', margin: '10px 0' }}>Bedankt — je plaatsen zijn gereserveerd!</h1>
          <p style={{ color: 'var(--ink-600)' }}>Je tickets met QR-code zijn naar je e-mailadres verzonden. Toon ze aan de ingang.</p>
          <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => { window.location.hash = '#/shows'; }}>Terug naar dansshows</button>
        </>
      )}
      {failed && (
        <>
          <div style={{ fontSize: 52 }}>⚠️</div>
          <h1 className="display" style={{ fontSize: 28, textTransform: 'none', margin: '10px 0' }}>Betaling niet voltooid</h1>
          <p style={{ color: 'var(--ink-600)' }}>Je betaling is niet afgerond, dus de stoelen zijn weer vrijgegeven. Je kan het opnieuw proberen.</p>
          <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => { window.location.hash = '#/shows'; }}>Opnieuw proberen</button>
        </>
      )}
      {status && !paid && !failed && <p style={{ color: 'var(--ink-500)' }}>We wachten op de bevestiging van je betaling…</p>}
    </div></section>
  );
}

window.LM_PAGES = window.LM_PAGES || {};
window.LM_PAGES.Shows = ShowsPage;