// Tiploy Landing — product mockups: PAX A920 terminal, Staff wallet phone,
// Tip notification phone, Dashboard preview.

// ─── PAX A920 TERMINAL ────────────────────────────────────────────────
function PaxTerminal({ scale = 1, accent }) {
  const t = accent || useTp();
  // PAX A920: ~185mm x 82mm x 54mm. Stylized portrait device, ~220×410.
  const W = 240, H = 440;
  return (
    <div style={{
      width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top center',
      position: 'relative', borderRadius: 22,
      background: 'linear-gradient(180deg, #2c3138 0%, #1a1d22 100%)',
      boxShadow: '0 40px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.18)',
      padding: 14, boxSizing: 'border-box', fontFamily: 'var(--font-body)',
    }}>
      {/* camera/speaker dot */}
      <div style={{
        position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 8, alignItems: 'center',
      }}>
        <div style={{ width: 34, height: 3, borderRadius: 3, background: '#0f1114' }}/>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0f1114' }}/>
      </div>

      {/* screen */}
      <div style={{
        marginTop: 10, width: '100%', height: 310, borderRadius: 8,
        background: '#f4f5f7', overflow: 'hidden', position: 'relative',
        border: '1px solid #0a0c0f',
      }}>
        {/* screen content: tip prompt */}
        <div style={{ padding: '14px 14px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${tpTokens.line}`, background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <img src="/logo-mark.svg" width={20} height={20}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: tpTokens.ink }}>Tiploy</span>
          </div>
          <span style={{ fontSize: 10, color: tpTokens.muted, fontWeight: 600 }}>The Crown Inn</span>
        </div>
        <div style={{ padding: '14px 14px 8px' }}>
          <p style={{ margin: 0, fontSize: 10, color: tpTokens.muted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em' }}>Bill total</p>
          <p style={{ margin: '2px 0 0', fontSize: 22, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.02em' }}>£68.00</p>
        </div>
        <div style={{ padding: '6px 14px' }}>
          <p style={{ margin: '0 0 8px', fontSize: 11, color: tpTokens.ink, fontWeight: 700 }}>Add a tip for the team?</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 6 }}>
            {['10%', '12.5%', '15%'].map((p, i) => (
              <button key={p} style={{
                padding: '9px 0', borderRadius: 6, fontSize: 11, fontWeight: 700,
                background: i === 1 ? t.accent : '#fff',
                color: i === 1 ? '#fff' : tpTokens.ink,
                border: `1px solid ${i === 1 ? t.accent : tpTokens.line}`,
                fontFamily: 'inherit',
              }}>{p}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            <button style={{ padding: '8px 0', borderRadius: 6, fontSize: 10, background: '#fff', color: tpTokens.ink, border: `1px solid ${tpTokens.line}`, fontFamily: 'inherit', fontWeight: 600 }}>Custom</button>
            <button style={{ padding: '8px 0', borderRadius: 6, fontSize: 10, background: '#fff', color: tpTokens.muted, border: `1px solid ${tpTokens.line}`, fontFamily: 'inherit', fontWeight: 600 }}>No tip</button>
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '8px 14px', borderTop: `1px solid ${tpTokens.line}`, background: '#f9fafb', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 10, color: tpTokens.muted, fontWeight: 600 }}>Tip £8.50</span>
          <span style={{ fontSize: 10, color: tpTokens.ink, fontWeight: 700 }}>Total £76.50</span>
        </div>
      </div>

      {/* card reader slot */}
      <div style={{ marginTop: 12, height: 22, borderRadius: 4, background: '#0a0c0f', border: '1px solid #000', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: '4px 8px', background: '#141619', borderRadius: 2 }}/>
      </div>
      {/* keypad strip */}
      <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
        {['1','2','3','4','5','6','7','8','9','*','0','#'].map(k => (
          <div key={k} style={{
            padding: '4px 0', textAlign: 'center', borderRadius: 4,
            background: '#2a2f36', color: '#d1d5db', fontSize: 11, fontWeight: 600,
            border: '1px solid #0f1114',
          }}>{k}</div>
        ))}
      </div>
      {/* brand strip */}
      <div style={{ position: 'absolute', bottom: 10, left: 0, right: 0, textAlign: 'center', color: '#4a5057', fontSize: 9, fontWeight: 700, letterSpacing: '.3em' }}>
        PAX A920
      </div>
    </div>
  );
}

// ─── STAFF WALLET PHONE ───────────────────────────────────────────────
function WalletPhone({ scale = 1 }) {
  const t = useTp();
  const W = 280, H = 580;
  return (
    <div style={{
      width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top center',
      borderRadius: 38, background: '#0c0f13',
      boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
      padding: 8, boxSizing: 'border-box', position: 'relative',
      fontFamily: 'var(--font-body)',
    }}>
      <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', width: 88, height: 22, borderRadius: 16, background: '#000', zIndex: 5 }}/>
      <div style={{
        width: '100%', height: '100%', borderRadius: 32, overflow: 'hidden',
        background: `linear-gradient(180deg, ${tpTokens.bg} 0%, ${tpTokens.bgDeep} 100%)`,
        position: 'relative',
      }}>
        {/* status bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 22px 0', fontSize: 11, fontWeight: 700, color: tpTokens.ink }}>
          <span>9:41</span>
          <span>●●● ◉</span>
        </div>
        {/* header */}
        <div style={{ padding: '36px 18px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <p style={{ margin: 0, fontSize: 11, color: tpTokens.muted, fontWeight: 600 }}>Good evening</p>
            <p style={{ margin: '2px 0 0', fontSize: 17, fontWeight: 800, color: tpTokens.ink }}>Sarah</p>
          </div>
          <div style={{ width: 34, height: 34, borderRadius: 999, background: t.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800 }}>SM</div>
        </div>

        {/* virtual card */}
        <div style={{ margin: '0 16px', height: 160, borderRadius: 14, padding: 16, position: 'relative',
          background: `linear-gradient(135deg, ${tpTokens.navy} 0%, #0f2238 100%)`,
          color: '#fff', overflow: 'hidden',
          boxShadow: '0 12px 30px rgba(20,35,50,.25)',
        }}>
          {/* subtle guilloche */}
          <div style={{ position: 'absolute', right: -20, top: -20, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle, rgba(232,160,32,0.25), transparent 70%)'}}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <img src="/logo-white.svg" style={{ height: 20, opacity: .95 }}/>
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', opacity: .7 }}>WALLET</span>
          </div>
          <p style={{ margin: '18px 0 0', fontSize: 10, color: 'rgba(255,255,255,.6)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em' }}>Balance</p>
          <p style={{ margin: '2px 0 0', fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em' }}>£248.40</p>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginTop: 10 }}>
            <span style={{ fontSize: 11, letterSpacing: '.14em', fontFamily: 'var(--font-mono)', opacity: .85 }}>•••• •••• •••• 4281</span>
            <span style={{ fontSize: 10, opacity: .6 }}>Visa</span>
          </div>
        </div>

        {/* actions */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, padding: '14px 16px 0' }}>
          {[{l:'Cash out', i:'↓'}, {l:'Apple Pay', i:''}, {l:'Details', i:'i'}].map(a => (
            <div key={a.l} style={{ background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 10, padding: '10px 6px', textAlign: 'center' }}>
              <div style={{ width: 24, height: 24, borderRadius: 6, background: t.accentSoft, color: t.accent, margin: '0 auto 4px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700 }}>{a.i || '◎'}</div>
              <p style={{ margin: 0, fontSize: 10, fontWeight: 700, color: tpTokens.ink }}>{a.l}</p>
            </div>
          ))}
        </div>

        {/* recent */}
        <div style={{ padding: '16px 16px 0' }}>
          <p style={{ margin: '0 0 8px', fontSize: 11, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tonight's shift</p>
          <div style={{ background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 10, overflow: 'hidden' }}>
            {[
              { t: '9:14 pm', l: 'Table 12', v: '+£6.40', n: '£8.00 tip, tax £1.60' },
              { t: '8:42 pm', l: 'Bar round', v: '+£3.20', n: 'Pool share' },
              { t: '7:58 pm', l: 'Table 8',  v: '+£4.80', n: '£6.00 tip, tax £1.20' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 12px', borderTop: i > 0 ? `1px solid ${tpTokens.line}` : 'none' }}>
                <div>
                  <p style={{ margin: 0, fontSize: 12, fontWeight: 700, color: tpTokens.ink }}>{r.l}</p>
                  <p style={{ margin: '1px 0 0', fontSize: 10, color: tpTokens.muted }}>{r.t} · {r.n}</p>
                </div>
                <span style={{ fontSize: 13, fontWeight: 800, color: t.accent }}>{r.v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* home indicator */}
        <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 110, height: 4, borderRadius: 2, background: 'rgba(0,0,0,.25)' }}/>
        </div>
      </div>
    </div>
  );
}

// ─── TIP NOTIFICATION PHONE ───────────────────────────────────────────
function TipNotifPhone({ scale = 1 }) {
  const t = useTp();
  const W = 280, H = 580;
  return (
    <div style={{
      width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top center',
      borderRadius: 38, background: '#0c0f13',
      boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
      padding: 8, boxSizing: 'border-box', position: 'relative',
      fontFamily: 'var(--font-body)',
    }}>
      <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', width: 88, height: 22, borderRadius: 16, background: '#000', zIndex: 5 }}/>
      <div style={{
        width: '100%', height: '100%', borderRadius: 32, overflow: 'hidden', position: 'relative',
        background: `linear-gradient(180deg, #243c55 0%, #111c28 90%)`,
      }}>
        {/* faux wallpaper blobs */}
        <div style={{ position: 'absolute', top: 60, left: -40, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(232,160,32,.2), transparent 70%)'}}/>
        <div style={{ position: 'absolute', bottom: 60, right: -60, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(224,92,75,.18), transparent 70%)'}}/>

        {/* status bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 22px 0', fontSize: 11, fontWeight: 700, color: '#fff' }}>
          <span>9:14</span>
          <span>●●● ◉</span>
        </div>

        {/* lock-screen time */}
        <div style={{ textAlign: 'center', color: '#fff', paddingTop: 46 }}>
          <p style={{ margin: 0, fontSize: 13, opacity: .75, fontWeight: 600 }}>Friday, 18 Apr</p>
          <p style={{ margin: '2px 0 0', fontSize: 68, fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 1 }}>9:14</p>
        </div>

        {/* notification */}
        <div style={{ position: 'absolute', bottom: 48, left: 10, right: 10 }}>
          <div style={{
            background: 'rgba(255,255,255,0.88)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
            borderRadius: 16, padding: '12px 14px',
            border: '1px solid rgba(255,255,255,.4)',
            boxShadow: '0 20px 40px rgba(0,0,0,.25)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 18, height: 18, borderRadius: 4, background: tpTokens.navy, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <img src="/logo-mark.svg" width={14} height={14}/>
                </div>
                <span style={{ fontSize: 11, fontWeight: 700, color: tpTokens.ink, textTransform: 'uppercase', letterSpacing: '.05em' }}>Tiploy</span>
              </div>
              <span style={{ fontSize: 10, color: tpTokens.muted }}>now</span>
            </div>
            <p style={{ margin: 0, fontSize: 14, fontWeight: 700, color: tpTokens.ink, lineHeight: 1.3 }}>You received £6.40</p>
            <p style={{ margin: '2px 0 0', fontSize: 12, color: tpTokens.muted, lineHeight: 1.35 }}>
              Table 12 at The Crown Inn · £8.00 tip, £1.60 tax · paid to your wallet
            </p>
          </div>
        </div>

        {/* home indicator */}
        <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 110, height: 4, borderRadius: 2, background: 'rgba(255,255,255,.6)' }}/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PaxTerminal, WalletPhone, TipNotifPhone });
