// 11 · Thank You / Success

function ScreenThankYou({ onNav }) {
  const C = window.V4;
  const event = window.DESI_EVENTS[0];
  const bookingRef = 'DSP-4KX9M2';

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

      {/* Celebration band */}
      <div style={{
        background: `linear-gradient(180deg, ${C.plumDeep} 0%, #3B1F2E 100%)`,
        padding: '80px 0 50px', textAlign: 'center', color: '#fff',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Confetti dots */}
        {Array.from({length: 30}).map((_, i) => (
          <div key={i} style={{
            position: 'absolute',
            top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`,
            width: 6, height: 6, borderRadius: 99,
            background: [C.red, C.pink, C.saffron, C.gold, '#fff'][i % 5],
            opacity: 0.7, transform: `rotate(${Math.random() * 360}deg)`,
          }}/>
        ))}
        <div style={{ position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 80, height: 80, borderRadius: 99,
            background: C.green, color: '#fff', marginBottom: 22,
            boxShadow: `0 0 0 12px ${C.green}33`,
          }}><V4Icon name="check" size={40} sw={2.5}/></div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.pink, marginBottom: 14, fontWeight: 600,
          }}>Booking confirmed · {bookingRef}</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 84, fontWeight: 400,
            letterSpacing: '-0.035em', lineHeight: 1, margin: '0 0 20px',
          }}>
            You're <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.pink }}>in.</em>
          </h1>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.78)', maxWidth: 520, margin: '0 auto', lineHeight: 1.5 }}>
            2 tickets for <strong style={{ color: '#fff' }}>Diljit Dosanjh · Dil-Luminati Berlin</strong> have been sent to <strong style={{ color: '#fff' }}>priya.s@gmail.com</strong>.
          </p>
        </div>
      </div>

      <div style={{ maxWidth: 960, margin: '-40px auto 80px', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        {/* Ticket stub */}
        <TicketStub event={event} bookingRef={bookingRef}/>

        {/* Action grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 24 }}>
          <ActionCard icon="qr" title="Open mobile ticket" sub="QR · scan at entry"/>
          <ActionCard icon="calendar" title="Add to calendar" sub="iCal · Google · Outlook"/>
          <ActionCard icon="share" title="Share with friends" sub="Split cost · WhatsApp"/>
        </div>

        {/* What happens next */}
        <section style={{ marginTop: 50 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, margin: '0 0 18px' }}>What happens next</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { n: 1, t: 'Check your inbox', d: 'Your e-tickets + receipt are already in priya.s@gmail.com. Save them offline.' },
              { n: 2, t: 'We\'ll remind you', d: 'WhatsApp reminder 24 hours before, plus a door-open alert on the day.' },
              { n: 3, t: 'Arrive 30 min early', d: 'Doors open at 18:30. Have your QR ready — no printout needed.' },
              { n: 4, t: 'Unlock your perks', d: '15% off at FoodRista restaurants + €8 FreeNow ride credit — valid 72 hrs around the show.' },
            ].map(s => (
              <div key={s.n} style={{
                display: 'grid', gridTemplateColumns: '44px 1fr', gap: 16,
                padding: 18, background: C.paper, borderRadius: 12, border: `1px solid ${C.line}`,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 99,
                  background: C.bgAlt, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: C.red,
                }}>{s.n}</div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>{s.t}</div>
                  <div style={{ fontSize: 13, color: C.ink2, marginTop: 2 }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Cross-sell */}
        <section style={{ marginTop: 56 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, margin: 0 }}>You might also like</h2>
            <button onClick={() => onNav('events-list')} style={{ background: 'none', border: 0, color: C.red, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Browse all →</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {window.DESI_EVENTS.slice(1, 5).map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
          </div>
        </section>

        {/* Receipt */}
        <section style={{ marginTop: 56, padding: 26, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, margin: 0 }}>Receipt · {bookingRef}</h3>
            <button style={{ background: 'none', border: 0, color: C.red, fontSize: 12.5, fontWeight: 600, cursor: 'pointer' }}>Download PDF</button>
          </div>
          <table style={{ width: '100%', fontSize: 13.5, borderCollapse: 'collapse' }}>
            <tbody>
              {[
                ['2 × Gold Standing', '€290,00'],
                ['Booking fee (4%)', '€11,60'],
                ['Total paid', '€301,60', true],
                ['Paid by', 'Klarna · Pay in 3'],
                ['Issued to', 'Priya Sharma · priya.s@gmail.com'],
              ].map((row, i) => (
                <tr key={i} style={{ borderTop: i === 0 ? 0 : `1px solid ${C.line}` }}>
                  <td style={{ padding: '10px 0', color: C.ink2, fontWeight: row[2] ? 600 : 400 }}>{row[0]}</td>
                  <td style={{ padding: '10px 0', textAlign: 'right', fontFamily: row[1].startsWith('€') ? 'var(--font-mono)' : 'inherit', fontWeight: row[2] ? 600 : 400 }}>{row[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <V4Footer/>
    </div>
  );
}

// ───────────────────────────────────────────────
// TicketStub primitive — reused on My Bookings and Ticket screens
// ───────────────────────────────────────────────
function TicketStub({ event, bookingRef, compact }) {
  const C = window.V4;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 240px',
      background: '#fff', borderRadius: 18, overflow: 'hidden',
      boxShadow: '0 20px 60px -20px rgba(0,0,0,0.25)',
      border: `1px solid ${C.line}`,
      position: 'relative',
    }}>
      {/* Left — event details */}
      <div style={{ padding: 32, display: 'flex', gap: 24 }}>
        <div style={{ width: 140, aspectRatio: '3/4', borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}>
          <window.DesiPoster event={event}/>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: C.red, textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>
            {event.dateShort} · {event.day} · {event.time}
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 6px', lineHeight: 1.1 }}>{event.artist}</h2>
          <div style={{ fontSize: 14, color: C.ink2, marginBottom: 14 }}>{event.title}</div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, fontSize: 12.5, color: C.ink2 }}>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', marginBottom: 3 }}>Venue</div>
              <div style={{ color: C.ink, fontWeight: 500 }}>{event.venue}</div>
              <div>{event.address}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', marginBottom: 3 }}>Holder</div>
              <div style={{ color: C.ink, fontWeight: 500 }}>Priya Sharma</div>
              <div>2 × Gold Standing</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', marginBottom: 3 }}>Doors</div>
              <div style={{ color: C.ink, fontWeight: 500 }}>{event.doors}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', marginBottom: 3 }}>Booking</div>
              <div style={{ color: C.ink, fontWeight: 500, fontFamily: 'var(--font-mono)' }}>{bookingRef}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Perforation */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 'calc(100% - 240px)',
        borderLeft: `2px dashed ${C.line}`,
      }}/>
      <div style={{
        position: 'absolute', top: -12, left: 'calc(100% - 240px)', transform: 'translateX(-50%)',
        width: 24, height: 24, borderRadius: 99, background: C.bg,
      }}/>
      <div style={{
        position: 'absolute', bottom: -12, left: 'calc(100% - 240px)', transform: 'translateX(-50%)',
        width: 24, height: 24, borderRadius: 99, background: C.bg,
      }}/>

      {/* Right — QR */}
      <div style={{
        padding: 24, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 14,
        background: C.bg + '80',
      }}>
        <QRPlaceholder/>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: C.ink3, textTransform: 'uppercase', marginBottom: 4 }}>Scan at entry</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, letterSpacing: '0.1em' }}>{bookingRef}</div>
        </div>
      </div>
    </div>
  );
}

function QRPlaceholder() {
  // Stylised QR using a grid of squares
  const C = window.V4;
  const size = 15;
  const cells = [];
  for (let r = 0; r < size; r++) {
    for (let c = 0; c < size; c++) {
      // Corner anchors
      const isAnchor = (r < 3 && c < 3) || (r < 3 && c >= size - 3) || (r >= size - 3 && c < 3);
      let fill = false;
      if (isAnchor) {
        // Draw ring
        const r2 = r < 3 ? r : r - (size - 3);
        const c2 = c < 3 ? c : c - (size - 3);
        if ((r2 === 0 || r2 === 2 || c2 === 0 || c2 === 2)) fill = true;
        if (r2 === 1 && c2 === 1) fill = true;
      } else {
        fill = ((r * 7 + c * 13) % 3) === 0;
      }
      if (fill) cells.push({ r, c });
    }
  }
  return (
    <div style={{
      width: 150, height: 150, padding: 10,
      background: '#fff', borderRadius: 10,
      border: `1px solid ${C.line}`,
    }}>
      <svg viewBox={`0 0 ${size} ${size}`} style={{ width: '100%', height: '100%' }}>
        {cells.map(({r, c}, i) => <rect key={i} x={c} y={r} width="1" height="1" fill={C.ink}/>)}
      </svg>
    </div>
  );
}

function ActionCard({ icon, title, sub }) {
  const C = window.V4;
  return (
    <button style={{
      padding: 20, background: C.paper, borderRadius: 14,
      border: `1px solid ${C.line}`, textAlign: 'left',
      cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10, background: C.bgAlt,
        color: C.red, display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><V4Icon name={icon} size={18}/></div>
      <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>{title}</div>
      <div style={{ fontSize: 12, color: C.ink3 }}>{sub}</div>
    </button>
  );
}

Object.assign(window, { TicketStub, QRPlaceholder });