// 17 · Embed Widget   ·   18 · Legal template   ·   19 · 404 / 500

// ───────────────────────────────────────────────
// 17 · Embed Widget — compact, iframe-friendly booking widget
// ───────────────────────────────────────────────
function ScreenEmbed({ onNav }) {
  const C = window.V4;
  const event = window.DESI_EVENTS[0];

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

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '50px 40px 80px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 10, fontWeight: 600 }}>For organisers · Embed on your site</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', margin: '0 0 14px' }}>
          Sell tickets <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>anywhere.</em>
        </h1>
        <p style={{ fontSize: 16, color: C.ink2, maxWidth: 640, margin: '0 0 40px', lineHeight: 1.55 }}>
          Drop a single &lt;iframe&gt; onto your event's landing page, Instagram link-in-bio, or WhatsApp broadcast.
          Desipass handles checkout, refunds, and e-ticket delivery.
        </p>

        {/* Live preview + code */}
        <div style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 40, alignItems: 'flex-start' }}>
          {/* Widget preview */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink3, marginBottom: 10, fontWeight: 600 }}>Live preview · 420×560</div>
            <div style={{
              width: 420, background: '#fff', borderRadius: 14, overflow: 'hidden',
              boxShadow: '0 20px 50px -15px rgba(0,0,0,0.2)',
              border: `1px solid ${C.line}`,
            }}>
              {/* Faux iframe chrome */}
              <div style={{ height: 28, background: C.bgAlt, borderBottom: `1px solid ${C.line}`, display: 'flex', alignItems: 'center', gap: 5, padding: '0 10px' }}>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: '#ff6058' }}/>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: '#febb2f' }}/>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: '#28c541' }}/>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: C.ink3, marginLeft: 10 }}>widget.desipass.com/e/diljit-berlin</span>
              </div>
              {/* Widget content */}
              <EmbedWidget event={event}/>
            </div>

            {/* Size presets */}
            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              {['Compact · 320×420', 'Standard · 420×560', 'Wide · 600×320', 'Button-only'].map((s, i) => (
                <button key={s} style={{
                  height: 34, padding: '0 12px', borderRadius: 99,
                  background: i === 1 ? C.ink : '#fff', color: i === 1 ? '#fff' : C.ink,
                  border: i === 1 ? 0 : `1px solid ${C.line}`,
                  fontSize: 11.5, fontWeight: 500, cursor: 'pointer',
                }}>{s}</button>
              ))}
            </div>
          </div>

          {/* Snippet */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink3, marginBottom: 10, fontWeight: 600 }}>Embed code</div>
            <div style={{
              background: C.plumDeep, color: '#e9e4d5', padding: 22, borderRadius: 12,
              fontFamily: 'var(--font-mono)', fontSize: 12.5, lineHeight: 1.7,
              whiteSpace: 'pre', overflowX: 'auto',
            }}>
{`<iframe
  src="https://widget.desipass.com/e/${event.id}"
  width="420" height="560"
  frameborder="0"
  allow="payment *"
  style="border-radius: 14px; box-shadow: 0 20px 50px -15px rgba(0,0,0,0.2);">
</iframe>`}
            </div>
            <button style={{
              marginTop: 12, height: 40, padding: '0 18px', borderRadius: 99,
              background: C.red, color: '#fff', border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer',
            }}>Copy snippet</button>

            {/* Config */}
            <div style={{ marginTop: 32 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600 }}>Customize</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Option label="Theme" value="Auto · matches site"/>
                <Option label="Accent color" value="#E54558" swatch/>
                <Option label="Language" value="EN · DE · HI"/>
                <Option label="Show price from" value="Yes"/>
                <Option label="Seating map" value="Compact"/>
                <Option label="Social proof" value="On · 14,200 attending"/>
              </div>
            </div>

            {/* Platforms */}
            <div style={{ marginTop: 32 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600 }}>Platform guides</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {['WordPress', 'Webflow', 'Framer', 'Shopify', 'Instagram Bio', 'WhatsApp'].map(p => (
                  <button key={p} style={{
                    padding: 12, background: C.paper, borderRadius: 10, border: `1px solid ${C.line}`,
                    fontSize: 12.5, fontWeight: 500, cursor: 'pointer', textAlign: 'left',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  }}>{p} <V4Icon name="arrowUR" size={12}/></button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function EmbedWidget({ event }) {
  const C = window.V4;
  return (
    <div style={{ padding: 18 }}>
      {/* Header strip */}
      <div style={{ display: 'flex', gap: 12, paddingBottom: 14, borderBottom: `1px solid ${C.line}`, alignItems: 'center' }}>
        <div style={{ width: 48, aspectRatio: '3/4', borderRadius: 4, overflow: 'hidden' }}>
          <window.DesiPoster event={event}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', color: C.red, textTransform: 'uppercase', fontWeight: 600 }}>{event.dateShort} · {event.city}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, lineHeight: 1.1, marginTop: 2 }}>{event.artist}</div>
          <div style={{ fontSize: 11, color: C.ink3, marginTop: 1 }}>{event.venue}</div>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', color: C.ink4 }}>via<br/>desipass</div>
      </div>

      {/* Tier rows */}
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { l: 'Gold Standing', p: 145, r: 84 },
          { l: 'Cat 1 Seated', p: 95, r: 38 },
          { l: 'Cat 2 Seated', p: 65, r: 140 },
        ].map(t => (
          <div key={t.l} style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 12,
            padding: '10px 12px', borderRadius: 8, border: `1px solid ${C.line}`, alignItems: 'center',
          }}>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t.l}</div>
              <div style={{ fontSize: 10, color: C.ink3 }}>{t.r} available</div>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500 }}>€{t.p}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, border: `1px solid ${C.line}`, borderRadius: 99, padding: 2 }}>
              <button style={{ width: 22, height: 22, borderRadius: 99, background: C.bgAlt, border: 0, cursor: 'pointer', fontSize: 12 }}>−</button>
              <span style={{ minWidth: 18, textAlign: 'center', fontSize: 12, fontFamily: 'var(--font-mono)' }}>0</span>
              <button style={{ width: 22, height: 22, borderRadius: 99, background: C.bgAlt, border: 0, cursor: 'pointer', fontSize: 12 }}>+</button>
            </div>
          </div>
        ))}
      </div>

      {/* CTA */}
      <button style={{
        marginTop: 14, width: '100%', height: 44, borderRadius: 99, border: 0,
        background: C.red, color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer',
      }}>Continue · €0,00</button>

      {/* Trust */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 10, fontSize: 10, color: C.ink3 }}>
        <span>🔒 Secure</span><span>·</span><span>Klarna · Pay in 3</span><span>·</span><span>Instant e-ticket</span>
      </div>
    </div>
  );
}

function Option({ label, value, swatch }) {
  const C = window.V4;
  return (
    <div style={{ padding: 12, background: C.paper, borderRadius: 10, border: `1px solid ${C.line}` }}>
      <div style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: C.ink3, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
        {swatch && <span style={{ width: 14, height: 14, borderRadius: 99, background: value, border: `1px solid ${C.line}` }}/>}
        {value}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// 18 · Legal template (privacy / terms / impressum)
// ───────────────────────────────────────────────
function ScreenLegal({ onNav }) {
  const C = window.V4;
  const [doc, setDoc] = React.useState('privacy');
  const docs = [
    { id: 'privacy',   label: 'Privacy Policy',     updated: '12 Feb 2026' },
    { id: 'terms',     label: 'Terms of Service',   updated: '08 Jan 2026' },
    { id: 'cookies',   label: 'Cookie Policy',      updated: '08 Jan 2026' },
    { id: 'impressum', label: 'Impressum',          updated: '01 Jan 2026' },
    { id: 'refunds',   label: 'Refund Policy',      updated: '08 Jan 2026' },
  ];
  const toc = [
    'Information we collect',
    'How we use your data',
    'Who we share with',
    'Your rights (GDPR)',
    'Cookies and tracking',
    'Data retention',
    'International transfers',
    'Children\'s data',
    'How to contact us',
  ];

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

      <div style={{
        background: `linear-gradient(180deg, ${C.bgAlt} 0%, ${C.bg} 100%)`,
        padding: '50px 0 30px', borderBottom: `1px solid ${C.line}`,
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.ink3, marginBottom: 12, fontWeight: 600 }}>Legal</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 500, letterSpacing: '-0.03em', margin: '0 0 10px' }}>
            {docs.find(d => d.id === doc).label}
          </h1>
          <div style={{ fontSize: 13, color: C.ink3, fontFamily: 'var(--font-mono)' }}>
            Last updated {docs.find(d => d.id === doc).updated} · <a style={{ color: C.red, cursor: 'pointer' }}>download PDF</a>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 24, flexWrap: 'wrap' }}>
            {docs.map(d => (
              <button key={d.id} onClick={() => setDoc(d.id)} style={{
                height: 36, padding: '0 14px', borderRadius: 99,
                background: doc === d.id ? C.ink : '#fff', color: doc === d.id ? '#fff' : C.ink,
                border: doc === d.id ? 0 : `1px solid ${C.line}`,
                fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
              }}>{d.label}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '50px 40px 80px', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 50 }}>
        {/* TOC */}
        <aside>
          <div style={{ position: 'sticky', top: 110 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: C.ink3, marginBottom: 12, fontWeight: 600, textTransform: 'uppercase' }}>Contents</div>
            <ol style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {toc.map((t, i) => (
                <li key={i} style={{ padding: '8px 0', fontSize: 13, color: i === 0 ? C.ink : C.ink2, fontWeight: i === 0 ? 600 : 400, borderLeft: i === 0 ? `2px solid ${C.red}` : '2px solid transparent', paddingLeft: 12, cursor: 'pointer' }}>
                  {i + 1}. {t}
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 30, padding: 16, background: C.paper, borderRadius: 12, border: `1px solid ${C.line}` }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 6 }}>Questions?</div>
              <p style={{ fontSize: 12, color: C.ink2, margin: '0 0 10px', lineHeight: 1.5 }}>
                Privacy & legal queries: legal@desipass.com. We respond within 48 hours.
              </p>
              <button style={{ height: 32, padding: '0 12px', borderRadius: 99, border: `1px solid ${C.line}`, background: '#fff', fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>Contact DPO</button>
            </div>
          </div>
        </aside>

        {/* Body */}
        <article style={{
          fontFamily: 'var(--font-ui)', fontSize: 15, color: C.ink, lineHeight: 1.7,
          maxWidth: 720,
        }}>
          <section style={{ marginBottom: 40 }}>
            <h2 style={legalH2(C)}>1. Information we collect</h2>
            <p>Desipass GmbH ("we", "us") collects information you voluntarily provide when you create an account, book a ticket, or contact our support team — this includes your name, email address, phone number, billing address and payment details.</p>
            <p>We also collect technical data automatically, such as IP address, browser type, and the pages you visit, in order to operate and secure the service. See Section 5 for cookie specifics.</p>
          </section>
          <section style={{ marginBottom: 40 }}>
            <h2 style={legalH2(C)}>2. How we use your data</h2>
            <p>Your data is used to fulfil ticket bookings, deliver event reminders, process refunds, comply with tax and anti-fraud obligations, and improve the Desipass platform. We use legitimate-interest and contract-performance legal bases under GDPR Art. 6(1)(b) and (f).</p>
            <ul style={{ margin: '12px 0 0', paddingLeft: 22, color: C.ink2 }}>
              <li style={{ marginBottom: 6 }}>Booking delivery and refund processing</li>
              <li style={{ marginBottom: 6 }}>Event reminders (WhatsApp / email / SMS) — you can opt out per channel</li>
              <li style={{ marginBottom: 6 }}>Fraud prevention, in line with PCI DSS guidelines</li>
              <li style={{ marginBottom: 6 }}>Service analytics — aggregated and pseudonymised</li>
            </ul>
          </section>
          <section style={{ marginBottom: 40 }}>
            <h2 style={legalH2(C)}>3. Who we share with</h2>
            <p>We share the minimum data required with event organisers (to deliver your ticket), payment processors (Stripe, Klarna — see their privacy policies), and German tax authorities where legally required.</p>
            <blockquote style={{ margin: '20px 0', padding: '16px 20px', background: C.bgAlt, borderLeft: `3px solid ${C.red}`, borderRadius: 6, color: C.ink2, fontStyle: 'italic' }}>
              We never sell your personal data. We never share your data with ad networks for cross-site profiling.
            </blockquote>
          </section>
          <section style={{ marginBottom: 40 }}>
            <h2 style={legalH2(C)}>4. Your rights (GDPR)</h2>
            <p>You have the right to access, rectify, erase, restrict or port your personal data at any time, and to object to processing based on legitimate interest. To exercise these rights, email <a style={{ color: C.red }}>privacy@desipass.com</a>.</p>
            <p>You also have the right to lodge a complaint with the German data protection authority (BfDI) or your local supervisory authority.</p>
          </section>
          <section>
            <h2 style={legalH2(C)}>5. Contact</h2>
            <p>Desipass GmbH · Rosenthaler Str. 40–41, 10178 Berlin · +49 30 1234 5678 · <a style={{ color: C.red }}>hello@desipass.com</a></p>
            <p>Data Protection Officer: Nadja Müller · <a style={{ color: C.red }}>dpo@desipass.com</a></p>
          </section>
        </article>
      </div>

      <V4Footer/>
    </div>
  );
}

function legalH2(C) {
  return {
    fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500,
    letterSpacing: '-0.02em', margin: '0 0 14px', color: C.ink,
  };
}

// ───────────────────────────────────────────────
// 19 · 404 / 500 error states
// ───────────────────────────────────────────────
function ScreenError({ onNav }) {
  const C = window.V4;
  const [which, setWhich] = React.useState('404');

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

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '80px 40px' }}>
        {/* Toggle between variants */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 40 }}>
          {['404', '500', 'offline'].map(w => (
            <button key={w} onClick={() => setWhich(w)} style={{
              height: 32, padding: '0 14px', borderRadius: 99,
              background: which === w ? C.ink : '#fff', color: which === w ? '#fff' : C.ink2,
              border: which === w ? 0 : `1px solid ${C.line}`,
              fontSize: 12, fontWeight: 500, cursor: 'pointer',
            }}>{w === '404' ? 'Page not found' : w === '500' ? 'Server error' : 'Offline'}</button>
          ))}
        </div>

        <div style={{ textAlign: 'center', maxWidth: 560, margin: '0 auto' }}>
          {/* Big number */}
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 240, fontWeight: 500,
            letterSpacing: '-0.06em', lineHeight: 0.85, margin: '0 0 8px',
            background: `linear-gradient(135deg, ${C.red} 0%, ${C.saffron} 100%)`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>
            {which === '404' ? '404' : which === '500' ? '500' : <V4Icon name="globe" size={180}/>}
          </div>

          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 14, fontWeight: 600 }}>
            {which === '404' ? 'Page not found' : which === '500' ? 'Something broke' : 'You\'re offline'}
          </div>

          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.028em', margin: '0 0 18px', lineHeight: 1.05 }}>
            {which === '404' && <>The page <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>left the building.</em></>}
            {which === '500' && <>Something went <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>wrong.</em></>}
            {which === 'offline' && <>You're <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>offline.</em></>}
          </h1>

          <p style={{ fontSize: 16, color: C.ink2, margin: '0 0 36px', lineHeight: 1.55 }}>
            {which === '404' && 'This show, organiser or page doesn\'t exist — or maybe it already finished and the encore\'s on. Let\'s get you back to the dance floor.'}
            {which === '500' && 'Our servers hiccupped. The team has been paged. Retry in a moment — if it keeps happening, mail us and we\'ll sort it.'}
            {which === 'offline' && 'No internet connection detected. Your saved tickets and bookings are still available offline — tap below.'}
          </p>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
            <button onClick={() => onNav('landing')} style={{
              height: 52, padding: '0 24px', borderRadius: 99, background: C.ink, color: '#fff',
              border: 0, fontSize: 14, fontWeight: 600, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>Back to home <V4Icon name="arrow" size={14}/></button>
            <button onClick={() => onNav('events-list')} style={{
              height: 52, padding: '0 24px', borderRadius: 99, background: 'transparent', color: C.ink,
              border: `1px solid ${C.line}`, fontSize: 14, fontWeight: 600, cursor: 'pointer',
            }}>Browse events</button>
            {which === '500' && (
              <button style={{
                height: 52, padding: '0 24px', borderRadius: 99, background: 'transparent', color: C.ink,
                border: `1px solid ${C.line}`, fontSize: 14, fontWeight: 600, cursor: 'pointer',
              }}>Retry</button>
            )}
          </div>

          {which === '404' && (
            <div style={{ marginTop: 60, paddingTop: 36, borderTop: `1px solid ${C.line}`, textAlign: 'left' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink3, marginBottom: 16, fontWeight: 600 }}>Popular right now</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                {window.DESI_EVENTS.slice(0, 3).map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
              </div>
            </div>
          )}

          {which === '500' && (
            <div style={{ marginTop: 40, padding: 14, background: C.bgAlt, borderRadius: 10, fontSize: 12, color: C.ink2, display: 'inline-flex', gap: 10 }}>
              <V4Icon name="info" size={14}/> Reference: <span style={{ fontFamily: 'var(--font-mono)' }}>ERR_2026_04_19_04F72A</span> · mention this when you contact support
            </div>
          )}
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

Object.assign(window, { ScreenEmbed, ScreenLegal, ScreenError });