// 08 · Pick Tickets  ·  09 · Details  ·  10 · Payment
// Three-step checkout flow. Each is its own screen.

// Shared event sample for checkout screens
function useCheckoutEvent() {
  const allEvents = window.DESI_EVENTS;
  return allEvents[0]; // Diljit Berlin
}

// ───────────────────────────────────────────────
// Shared: Stepper
// ───────────────────────────────────────────────
function CheckoutStepper({ active }) {
  const C = window.V4;
  const steps = ['Tickets', 'Details', 'Payment', 'Done'];
  return (
    <div style={{
      display: 'flex', gap: 0, alignItems: 'center', padding: '20px 0',
      maxWidth: 640,
    }}>
      {steps.map((s, i) => {
        const done = i < active;
        const on = i === active;
        return (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 99,
                background: on ? C.red : done ? C.ink : C.bgAlt,
                color: on || done ? '#fff' : C.ink3,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-mono)',
              }}>{done ? '✓' : i + 1}</div>
              <span style={{
                fontSize: 13, fontWeight: on ? 600 : 500,
                color: on ? C.ink : done ? C.ink2 : C.ink3,
              }}>{s}</span>
            </div>
            {i < steps.length - 1 && (
              <div style={{ flex: 1, height: 1, background: C.line, margin: '0 14px' }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ───────────────────────────────────────────────
// Shared: Order summary sidebar
// ───────────────────────────────────────────────
function OrderSummary({ event, tickets, fees = true }) {
  const C = window.V4;
  const subtotal = tickets.reduce((sum, t) => sum + t.qty * t.price, 0);
  const feeAmount = fees ? Math.round(subtotal * 0.04 * 100) / 100 : 0;
  const total = subtotal + feeAmount;

  return (
    <aside style={{
      position: 'sticky', top: 100,
      padding: 24, background: C.paper, borderRadius: 16,
      border: `1px solid ${C.line}`,
    }}>
      <div style={{ display: 'flex', gap: 14, paddingBottom: 18, borderBottom: `1px solid ${C.line}` }}>
        <div style={{ width: 70, aspectRatio: '3/4', borderRadius: 6, overflow: 'hidden', flexShrink: 0 }}>
          <window.DesiPoster event={event}/>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.12em', color: C.red, textTransform: 'uppercase', fontWeight: 600 }}>
            {event.dateShort} · {event.day}
          </div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, margin: '4px 0 4px' }}>{event.artist}</h4>
          <div style={{ fontSize: 12, color: C.ink2 }}>{event.venue}</div>
          <div style={{ fontSize: 12, color: C.ink3 }}>{event.city} · {event.time}</div>
        </div>
      </div>

      {/* Line items */}
      <div style={{ paddingTop: 18, paddingBottom: 18, borderBottom: `1px solid ${C.line}`, fontSize: 13 }}>
        {tickets.map((t, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0' }}>
            <span>{t.qty} × {t.label}</span>
            <span style={{ fontFamily: 'var(--font-mono)' }}>{v4Eur(t.qty * t.price, true)}</span>
          </div>
        ))}
        {tickets.length === 0 && <span style={{ color: C.ink3 }}>No tickets selected yet.</span>}
      </div>

      {/* Totals */}
      <div style={{ paddingTop: 18, fontSize: 13 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: C.ink2 }}>
          <span>Subtotal</span>
          <span style={{ fontFamily: 'var(--font-mono)' }}>{v4Eur(subtotal, true)}</span>
        </div>
        {fees && (
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: C.ink2 }}>
            <span>Booking fee · 4%</span>
            <span style={{ fontFamily: 'var(--font-mono)' }}>{v4Eur(feeAmount, true)}</span>
          </div>
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0 0', fontWeight: 600, fontSize: 16, borderTop: `1px solid ${C.line}`, marginTop: 12 }}>
          <span>Total</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>{v4Eur(total, true)}</span>
        </div>
      </div>

      <div style={{ marginTop: 18, padding: '12px 14px', background: C.bgAlt, borderRadius: 10, fontSize: 12, color: C.ink2, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <V4Icon name="shield" size={14}/>
        <span>Protected by Desipass Buyer Protection. Full refund if the show is cancelled or moved.</span>
      </div>
    </aside>
  );
}

// ───────────────────────────────────────────────
// 08 · Pick Tickets
// ───────────────────────────────────────────────
function ScreenCheckoutTickets({ onNav }) {
  const C = window.V4;
  const event = useCheckoutEvent();

  const tiers = [
    { id: 'vip', label: 'VIP Front Standing', price: 285, desc: 'First 5 rows · Meet & greet · Early entry', benefits: ['Early entry 17:30', 'Dedicated bar', 'Tour poster'], remaining: 12, badge: 'LIMITED' },
    { id: 'gold', label: 'Gold Standing', price: 145, desc: 'Floor access · Close to stage', benefits: ['Floor access', 'Fast-track entry'], remaining: 84 },
    { id: 'cat1', label: 'Cat 1 Seated', price: 95, desc: 'Lower tier · Best seated views', benefits: ['Reserved seat', 'Allocated by system'], remaining: 38 },
    { id: 'cat2', label: 'Cat 2 Seated', price: 65, desc: 'Upper tier · Great value', benefits: ['Reserved seat'], remaining: 140 },
    { id: 'obst', label: 'Restricted View', price: 49, desc: 'Limited view · Same audio', benefits: ['Reserved seat'], remaining: 22, muted: true },
  ];

  const [qty, setQty] = React.useState({ vip: 0, gold: 2, cat1: 0, cat2: 0, obst: 0 });
  const tickets = tiers.filter(t => qty[t.id] > 0).map(t => ({ qty: qty[t.id], label: t.label, price: t.price }));
  const totalQty = Object.values(qty).reduce((a, b) => a + b, 0);

  return (
    <div data-screen-label="08 Pick Tickets" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '30px 40px 60px' }}>
        <button onClick={() => onNav('event', event.id)} style={{
          background: 'none', border: 0, color: C.ink2, fontSize: 13, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 12,
        }}><V4Icon name="cheL" size={14}/> Back to event</button>
        <CheckoutStepper active={0}/>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 40, marginTop: 28 }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 8px' }}>
              Choose your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>tickets.</em>
            </h1>
            <p style={{ fontSize: 14, color: C.ink2, margin: '0 0 28px' }}>
              Max 8 per booking · Prices in EUR, all taxes included.
            </p>

            {/* Seat map preview (schematic) */}
            <div style={{ padding: 22, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}`, marginBottom: 22 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.ink3, textTransform: 'uppercase', fontWeight: 600 }}>Venue map · Mercedes-Benz Arena</div>
                <button style={{ background: 'none', border: 0, color: C.red, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Open full seat map <V4Icon name="arrowUR" size={11}/></button>
              </div>
              <svg viewBox="0 0 600 280" style={{ width: '100%', height: 200 }}>
                {/* Stage */}
                <rect x="240" y="20" width="120" height="28" rx="4" fill={C.ink}/>
                <text x="300" y="39" textAnchor="middle" fill="#fff" fontSize="11" fontFamily="var(--font-mono)" letterSpacing="2">STAGE</text>
                {/* VIP front */}
                <rect x="220" y="60" width="160" height="26" rx="4" fill="#E5455866"/>
                <text x="300" y="78" textAnchor="middle" fontSize="10" fill={C.ink} fontFamily="var(--font-mono)">VIP · €285</text>
                {/* Gold */}
                <rect x="180" y="96" width="240" height="30" rx="4" fill="#D4AC4A66"/>
                <text x="300" y="116" textAnchor="middle" fontSize="10" fill={C.ink} fontFamily="var(--font-mono)">GOLD STANDING · €145</text>
                {/* Cat 1 */}
                <rect x="80" y="140" width="440" height="34" rx="4" fill="#1a9d3d44"/>
                <text x="300" y="162" textAnchor="middle" fontSize="10" fill={C.ink} fontFamily="var(--font-mono)">CAT 1 SEATED · €95</text>
                {/* Cat 2 */}
                <rect x="40" y="184" width="520" height="40" rx="4" fill="#3B2E4D33"/>
                <text x="300" y="208" textAnchor="middle" fontSize="10" fill={C.ink} fontFamily="var(--font-mono)">CAT 2 SEATED · €65</text>
                {/* Restricted */}
                <rect x="20" y="234" width="560" height="24" rx="4" fill={C.ink4 + '55'}/>
                <text x="300" y="250" textAnchor="middle" fontSize="10" fill={C.ink2} fontFamily="var(--font-mono)">RESTRICTED VIEW · €49</text>
              </svg>
            </div>

            {/* Tier rows */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {tiers.map(t => (
                <div key={t.id} style={{
                  padding: 22, background: C.paper, borderRadius: 14,
                  border: `1px solid ${qty[t.id] > 0 ? C.red : C.line}`,
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'center',
                  transition: 'border-color 200ms',
                  opacity: t.muted ? 0.75 : 1,
                }}>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>{t.label}</h3>
                      {t.badge && (
                        <span style={{
                          padding: '3px 9px', borderRadius: 99, background: C.saffron + '22', color: C.saffron,
                          fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
                        }}>{t.badge}</span>
                      )}
                    </div>
                    <div style={{ fontSize: 13, color: C.ink2, marginBottom: 8 }}>{t.desc}</div>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {t.benefits.map(b => (
                        <span key={b} style={{
                          fontSize: 11, padding: '3px 9px', borderRadius: 99,
                          background: C.bgAlt, color: C.ink2,
                        }}>✓ {b}</span>
                      ))}
                    </div>
                    <div style={{ fontSize: 11, color: t.remaining < 20 ? C.red : C.ink3, marginTop: 10, fontFamily: 'var(--font-mono)' }}>
                      {t.remaining < 20 ? `Only ${t.remaining} left at this price` : `${t.remaining} available`}
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10 }}>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, textAlign: 'right' }}>{v4Eur(t.price)}</div>
                      <div style={{ fontSize: 10, color: C.ink3, textAlign: 'right', fontFamily: 'var(--font-mono)' }}>per ticket</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, border: `1px solid ${C.line}`, borderRadius: 99, padding: 2 }}>
                      <button onClick={() => setQty({ ...qty, [t.id]: Math.max(0, qty[t.id] - 1) })} style={qtyBtn(C)}><V4Icon name="minus" size={12}/></button>
                      <span style={{ minWidth: 28, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600 }}>{qty[t.id]}</span>
                      <button onClick={() => setQty({ ...qty, [t.id]: Math.min(8, qty[t.id] + 1) })} style={qtyBtn(C)}><V4Icon name="plus" size={12}/></button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Promo */}
            <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
              <input placeholder="Promo code" style={{
                flex: 1, height: 48, padding: '0 16px', borderRadius: 10,
                border: `1px solid ${C.line}`, background: '#fff', fontSize: 13.5,
              }}/>
              <button style={{ height: 48, padding: '0 22px', borderRadius: 10, border: `1px solid ${C.line}`, background: '#fff', fontSize: 13.5, fontWeight: 500, cursor: 'pointer' }}>Apply</button>
            </div>

            {/* Continue CTA */}
            <button onClick={() => onNav('checkout-details')} disabled={totalQty === 0} style={{
              marginTop: 32, width: '100%', height: 58, borderRadius: 99, border: 0,
              background: totalQty === 0 ? C.line : C.ink, color: totalQty === 0 ? C.ink3 : '#fff',
              fontSize: 15, fontWeight: 600, cursor: totalQty === 0 ? 'not-allowed' : 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>
              {totalQty === 0 ? 'Select at least one ticket' : <>Continue to details · {totalQty} ticket{totalQty===1?'':'s'} <V4Icon name="arrow" size={15}/></>}
            </button>
          </div>

          <OrderSummary event={event} tickets={tickets}/>
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function qtyBtn(C) {
  return {
    width: 32, height: 32, borderRadius: 99, border: 0,
    background: C.bgAlt, color: C.ink, cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

// ───────────────────────────────────────────────
// 09 · Details
// ───────────────────────────────────────────────
function ScreenCheckoutDetails({ onNav }) {
  const C = window.V4;
  const event = useCheckoutEvent();
  const tickets = [{ qty: 2, label: 'Gold Standing', price: 145 }];

  return (
    <div data-screen-label="09 Details" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '30px 40px 60px' }}>
        <button onClick={() => onNav('checkout-tickets')} style={{
          background: 'none', border: 0, color: C.ink2, fontSize: 13, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 12,
        }}><V4Icon name="cheL" size={14}/> Back to tickets</button>
        <CheckoutStepper active={1}/>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 40, marginTop: 28 }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 8px' }}>
              Your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>details.</em>
            </h1>
            <p style={{ fontSize: 14, color: C.ink2, margin: '0 0 28px' }}>
              We'll send your e-tickets here. ID may be required at entry for age-restricted shows.
            </p>

            {/* Sign in prompt */}
            <div style={{
              padding: 16, borderRadius: 12, background: C.bgAlt,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 28,
            }}>
              <span style={{ fontSize: 13.5 }}>Already have a Desipass account?</span>
              <button onClick={() => onNav('sign-in')} style={{
                background: 'transparent', border: 0, color: C.red, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
              }}>Sign in for faster checkout →</button>
            </div>

            {/* Form sections */}
            <FormSection title="Contact · Primary booker">
              <FormGrid>
                <Field label="First name" value="Priya"/>
                <Field label="Last name" value="Sharma"/>
                <Field label="Email" value="priya.s@gmail.com" full/>
                <Field label="Phone" value="+49 " placeholder="170 123 4567" full/>
              </FormGrid>
            </FormSection>

            <FormSection title="Attendee details · Required per ticket">
              {[1, 2].map(i => (
                <div key={i} style={{ padding: 18, background: C.paper, borderRadius: 12, border: `1px solid ${C.line}`, marginBottom: 12 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.ink3, textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}>
                    Ticket {i} · Gold Standing
                  </div>
                  <FormGrid>
                    <Field label="Full name" value={i === 1 ? 'Priya Sharma' : ''}/>
                    <Field label="Date of birth" value="" placeholder="DD/MM/YYYY"/>
                  </FormGrid>
                  {i === 1 && (
                    <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 13, color: C.ink2, cursor: 'pointer' }}>
                      <input type="checkbox" checked readOnly style={{ accentColor: C.red }}/> Same as primary booker
                    </label>
                  )}
                </div>
              ))}
            </FormSection>

            <FormSection title="Billing address">
              <FormGrid>
                <Field label="Street" placeholder="e.g. Oranienstraße 140" full/>
                <Field label="City" placeholder="Berlin"/>
                <Field label="Postal code" placeholder="10969"/>
                <Field label="Country" value="Germany" select options={['Germany', 'Austria', 'Switzerland', 'Netherlands']} full/>
              </FormGrid>
            </FormSection>

            {/* Preferences */}
            <FormSection title="Preferences">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13.5 }}>
                <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <input type="checkbox" defaultChecked style={{ accentColor: C.red, marginTop: 3 }}/>
                  <span>Send me event reminders & door-open alerts via WhatsApp</span>
                </label>
                <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <input type="checkbox" style={{ accentColor: C.red, marginTop: 3 }}/>
                  <span>Email me about similar upcoming shows in my city</span>
                </label>
                <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <input type="checkbox" style={{ accentColor: C.red, marginTop: 3 }}/>
                  <span>I need wheelchair access or step-free entry</span>
                </label>
              </div>
            </FormSection>

            {/* Terms + continue */}
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: C.ink2, marginTop: 24 }}>
              <input type="checkbox" defaultChecked style={{ accentColor: C.red, marginTop: 3 }}/>
              <span>I agree to Desipass's <a style={{ color: C.red }}>Terms</a> and <a style={{ color: C.red }}>Privacy Policy</a>. I understand tickets are non-refundable except under our <a style={{ color: C.red }}>Buyer Protection</a>.</span>
            </label>

            <button onClick={() => onNav('checkout-pay')} style={{
              marginTop: 28, width: '100%', height: 58, borderRadius: 99, border: 0,
              background: C.ink, color: '#fff',
              fontSize: 15, fontWeight: 600, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>Continue to payment <V4Icon name="arrow" size={15}/></button>
          </div>

          <OrderSummary event={event} tickets={tickets}/>
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function FormSection({ title, children }) {
  const C = window.V4;
  return (
    <section style={{ marginBottom: 36 }}>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
        margin: '0 0 16px', letterSpacing: '-0.015em',
        paddingBottom: 10, borderBottom: `1px solid ${C.line}`,
      }}>{title}</h3>
      {children}
    </section>
  );
}
function FormGrid({ children }) {
  return <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>{children}</div>;
}
function Field({ label, value = '', placeholder, full, select, options }) {
  const C = window.V4;
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: full ? '1 / -1' : 'auto' }}>
      <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', fontWeight: 600 }}>{label}</span>
      {select ? (
        <select defaultValue={value} style={{
          height: 44, padding: '0 14px', borderRadius: 10,
          border: `1px solid ${C.line}`, fontSize: 14, background: '#fff',
        }}>{options.map(o => <option key={o}>{o}</option>)}</select>
      ) : (
        <input defaultValue={value} placeholder={placeholder} style={{
          height: 44, padding: '0 14px', borderRadius: 10,
          border: `1px solid ${C.line}`, fontSize: 14, background: '#fff',
        }}/>
      )}
    </label>
  );
}

// ───────────────────────────────────────────────
// 10 · Payment
// ───────────────────────────────────────────────
function ScreenCheckoutPayment({ onNav }) {
  const C = window.V4;
  const event = useCheckoutEvent();
  const tickets = [{ qty: 2, label: 'Gold Standing', price: 145 }];
  const [method, setMethod] = React.useState('card');

  const methods = [
    { id: 'card', label: 'Credit / debit card', sub: 'Visa · Mastercard · Amex' },
    { id: 'klarna', label: 'Klarna · Pay in 3', sub: '0% interest · No credit check' },
    { id: 'sofort', label: 'SEPA · Sofort', sub: 'Direct debit from German bank' },
    { id: 'paypal', label: 'PayPal', sub: 'Pay with your PayPal balance' },
    { id: 'gpay', label: 'Google Pay / Apple Pay', sub: 'One-tap checkout' },
  ];

  return (
    <div data-screen-label="10 Payment" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '30px 40px 60px' }}>
        <button onClick={() => onNav('checkout-details')} style={{
          background: 'none', border: 0, color: C.ink2, fontSize: 13, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 12,
        }}><V4Icon name="cheL" size={14}/> Back to details</button>
        <CheckoutStepper active={2}/>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 40, marginTop: 28 }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 8px' }}>
              Complete <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>payment.</em>
            </h1>
            <p style={{ fontSize: 14, color: C.ink2, margin: '0 0 28px', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <V4Icon name="shield" size={14}/> Secure · 256-bit SSL · Processed by Stripe
            </p>

            {/* Method list */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
              {methods.map(m => (
                <label key={m.id} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: 16,
                  background: C.paper, borderRadius: 12,
                  border: `1px solid ${method === m.id ? C.red : C.line}`,
                  cursor: 'pointer',
                }}>
                  <input type="radio" checked={method === m.id} onChange={() => setMethod(m.id)} style={{ accentColor: C.red }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{m.label}</div>
                    <div style={{ fontSize: 12, color: C.ink3 }}>{m.sub}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, opacity: 0.6 }}>
                    {m.id === 'card' && <>
                      <Chip>VISA</Chip><Chip>MC</Chip><Chip>AMEX</Chip>
                    </>}
                    {m.id === 'klarna' && <Chip bg="#ffa8cd" color="#17120f">Klarna.</Chip>}
                  </div>
                </label>
              ))}
            </div>

            {/* Card form */}
            {method === 'card' && (
              <div style={{ padding: 22, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}`, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
                <Field label="Card number" placeholder="1234 5678 9012 3456" full/>
                <Field label="Expiry" placeholder="MM / YY"/>
                <Field label="CVC" placeholder="123"/>
                <Field label="Name on card" placeholder="Priya Sharma"/>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: C.ink2, gridColumn: '1 / -1', marginTop: 4 }}>
                  <input type="checkbox" style={{ accentColor: C.red }}/> Save this card for future bookings
                </label>
              </div>
            )}

            {/* Klarna box */}
            {method === 'klarna' && (
              <div style={{ padding: 22, background: '#ffa8cd22', border: '1px solid #ffa8cd', borderRadius: 14 }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14 }}>
                  <V4Icon name="wallet" size={20}/>
                  <strong>Split €301,60 into 3 payments</strong>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
                  {['Today', 'May 16', 'June 16'].map((d, i) => (
                    <div key={d} style={{ padding: 14, background: '#fff', borderRadius: 10, border: `1px solid ${C.line}` }}>
                      <div style={{ fontSize: 11, color: C.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{d}</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginTop: 4 }}>€100,53</div>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 12, color: C.ink2 }}>No interest · No fees · Soft credit check</div>
              </div>
            )}

            {/* Pay button */}
            <button onClick={() => onNav('thank-you')} style={{
              marginTop: 28, width: '100%', height: 62, borderRadius: 99, border: 0,
              background: C.red, color: '#fff',
              fontSize: 15.5, fontWeight: 600, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: `0 10px 24px -8px ${C.red}80`,
            }}><V4Icon name="shield" size={16}/> Pay €301,60 securely</button>

            <div style={{ display: 'flex', justifyContent: 'center', gap: 28, marginTop: 22, fontSize: 11.5, color: C.ink3 }}>
              <span>🔒 256-bit SSL</span>
              <span>PCI DSS · Level 1</span>
              <span>🇩🇪 Processed in Germany</span>
            </div>
          </div>

          <OrderSummary event={event} tickets={tickets}/>
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function Chip({ children, bg, color }) {
  const C = window.V4;
  return (
    <span style={{
      fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
      padding: '4px 8px', borderRadius: 4,
      background: bg || C.bgAlt, color: color || C.ink,
    }}>{children}</span>
  );
}

Object.assign(window, { ScreenCheckoutTickets, ScreenCheckoutDetails, ScreenCheckoutPayment });