// Tiploy Landing — compact merchant dashboard preview (static, non-interactive)

function DashboardPreview({ scale = 1 }) {
  const t = useTp();
  const W = 760, H = 500;
  return (
    <div style={{
      width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top left',
      background: `linear-gradient(180deg, ${tpTokens.bg} 0%, ${tpTokens.bgDeep} 100%)`,
      borderRadius: 14, border: `1px solid ${tpTokens.line}`,
      boxShadow: '0 40px 80px rgba(20,35,50,.12), 0 0 0 1px rgba(0,0,0,0.04)',
      overflow: 'hidden', fontFamily: 'var(--font-body)',
      position: 'relative',
    }}>
      {/* Browser chrome */}
      <div style={{ height: 32, background: '#e9ecef', borderBottom: `1px solid ${tpTokens.line}`, display: 'flex', alignItems: 'center', padding: '0 12px', gap: 6 }}>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff605c' }}/>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ffbd44' }}/>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#00ca4e' }}/>
        <div style={{ marginLeft: 16, padding: '3px 10px', background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 5, fontSize: 10, color: tpTokens.muted, fontFamily: 'var(--font-mono)' }}>app.tiploy.com/dashboard</div>
      </div>

      {/* Content */}
      <div style={{ padding: 14 }}>
        {/* Topbar */}
        <div style={{
          background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 12,
          boxShadow: '0 8px 20px rgba(34,45,60,.05)', padding: '10px 14px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10,
        }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <img src="/logo-mark.svg" width={30} height={30}/>
            <div>
              <p style={{ margin: 0, fontSize: 9, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tiploy</p>
              <p style={{ margin: '1px 0 0', fontSize: 15, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em' }}>The Crown Inn</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 5 }}>
            <span style={{ padding: '4px 8px', borderRadius: 6, background: '#f7f9fb', border: `1px solid ${tpTokens.line}`, fontSize: 10, color: tpTokens.ink }}>Devices: 2 active</span>
            <span style={{ padding: '4px 8px', borderRadius: 6, background: '#f7f9fb', border: `1px solid ${tpTokens.line}`, fontSize: 10, color: tpTokens.ink }}>Ruleset v4</span>
          </div>
        </div>

        {/* Nav tabs */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
          {[['Overview', true], ['Staff', false], ['Tip history', false], ['Loyalty', false], ['Setup', false]].map(([l, active]) => (
            <div key={l} style={{
              padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 700,
              background: active ? t.accent : '#fff',
              color: active ? '#fff' : tpTokens.ink,
              border: `1px solid ${active ? t.accent : tpTokens.line}`,
            }}>{l}</div>
          ))}
        </div>

        {/* Metric cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 10 }}>
          {[
            { l: 'Processed tips', v: '47' },
            { l: 'Tip total', v: '£482.00' },
            { l: 'Tax held back', v: '£96.40' },
            { l: 'Paid to staff', v: '£385.60' },
          ].map(m => (
            <div key={m.l} style={{ background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 8, padding: 10, boxShadow: '0 8px 20px rgba(34,45,60,.04)' }}>
              <p style={{ margin: 0, fontSize: 10, color: tpTokens.muted, fontWeight: 700 }}>{m.l}</p>
              <p style={{ margin: '4px 0 0', fontSize: 20, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.02em' }}>{m.v}</p>
            </div>
          ))}
        </div>

        {/* Two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 10 }}>
          {/* Recent tips */}
          <div style={{ background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 10, padding: 12, boxShadow: '0 8px 20px rgba(34,45,60,.04)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div>
                <p style={{ margin: 0, fontSize: 9, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tips</p>
                <p style={{ margin: '1px 0 0', fontSize: 13, fontWeight: 700, color: tpTokens.ink }}>Recent tip history</p>
              </div>
              <span style={{ padding: '3px 7px', borderRadius: 5, background: t.accentSoft, color: t.accent, border: `1px solid ${t.accentBorder}`, fontSize: 9, fontWeight: 700 }}>Last 24h</span>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 10 }}>
              <thead>
                <tr style={{ background: '#f9fafb' }}>
                  {['Time', 'Bill', 'Tip', 'Staff / pool', 'Net', 'Status'].map(h => (
                    <th key={h} style={{ padding: '6px 8px', textAlign: 'left', fontSize: 9, color: tpTokens.muted, borderBottom: `1px solid ${tpTokens.line}`, fontWeight: 700 }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  { ti: '14:23', b: '£68.00', t: '£8.00', s: 'Sarah M.', n: '£6.40', ok: true },
                  { ti: '13:05', b: '£42.50', t: '£5.00', s: 'James O.', n: '£4.00', ok: true },
                  { ti: '12:47', b: '£91.00', t: '£10.00', s: 'Pool: Eve.', n: '£8.00', ok: true },
                  { ti: '11:30', b: '£33.00', t: '£4.00', s: '—', n: '—', ok: false },
                ].map((r, i) => (
                  <tr key={i}>
                    <td style={{ padding: '7px 8px', fontSize: 10, color: tpTokens.ink, borderBottom: `1px solid ${tpTokens.line}` }}>{r.ti}</td>
                    <td style={{ padding: '7px 8px', fontSize: 10, color: tpTokens.ink, borderBottom: `1px solid ${tpTokens.line}` }}>{r.b}</td>
                    <td style={{ padding: '7px 8px', fontSize: 10, color: tpTokens.ink, borderBottom: `1px solid ${tpTokens.line}`, fontWeight: 700 }}>{r.t}</td>
                    <td style={{ padding: '7px 8px', fontSize: 10, color: tpTokens.ink, borderBottom: `1px solid ${tpTokens.line}` }}>{r.s}</td>
                    <td style={{ padding: '7px 8px', fontSize: 10, color: tpTokens.ink, borderBottom: `1px solid ${tpTokens.line}` }}>{r.n}</td>
                    <td style={{ padding: '7px 8px', borderBottom: `1px solid ${tpTokens.line}` }}>
                      <span style={{
                        padding: '2px 6px', borderRadius: 5, fontSize: 8, fontWeight: 700,
                        background: r.ok ? t.accentSoft : tpTokens.warningSoft,
                        color: r.ok ? t.accent : tpTokens.warning,
                        border: `1px solid ${r.ok ? t.accentBorder : tpTokens.warningBorder}`,
                      }}>{r.ok ? 'Settled' : 'Needs review'}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Tip Act compliance card */}
          <div style={{ background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 10, padding: 12, boxShadow: '0 8px 20px rgba(34,45,60,.04)' }}>
            <div style={{ marginBottom: 8 }}>
              <p style={{ margin: 0, fontSize: 9, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Compliance</p>
              <p style={{ margin: '1px 0 0', fontSize: 13, fontWeight: 700, color: tpTokens.ink }}>Tip Act 2023 status</p>
            </div>
            {[
              ['100% of tips passed to staff', true],
              ['Written tipping policy published', true],
              ['Tronc scheme: HMRC registered', true],
              ['Fair allocation rules in force', true],
              ['Records retained for 3 years', true],
            ].map(([l, ok]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderBottom: `1px dashed ${tpTokens.line}` }}>
                <div style={{ width: 14, height: 14, borderRadius: 3, background: t.accentSoft, color: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 800, border: `1px solid ${t.accentBorder}` }}>✓</div>
                <span style={{ fontSize: 10, color: tpTokens.ink, fontWeight: 600 }}>{l}</span>
              </div>
            ))}
            <div style={{ marginTop: 10, padding: '8px 10px', borderRadius: 6, background: t.accentSoft, border: `1px solid ${t.accentBorder}` }}>
              <p style={{ margin: 0, fontSize: 10, fontWeight: 700, color: t.accent }}>Audit-ready</p>
              <p style={{ margin: '2px 0 0', fontSize: 10, color: t.accent, lineHeight: 1.4 }}>Download a 12-month compliance report for HMRC or ACAS in one click.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPreview });