// Mockup detalhado do dashboard desktop (recriação fiel do screenshot)
function DesktopDashboard() {
  return (
    <div style={{
      background: 'var(--bg)',
      padding: 16,
      display: 'grid',
      gridTemplateColumns: '180px 260px 1fr 1fr',
      gap: 12,
      minHeight: 480,
      fontSize: 11,
    }}>
      {/* Sidebar */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Logo size={16} />
        <div>
          <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>Boa noite,</div>
          <div style={{ fontSize: 12, fontWeight: 600 }}>Daniel</div>
          <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>Domingo, 26 de abril</div>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[
            { i: 'Home', l: 'Mês Atual', active: true },
            { i: 'History', l: 'Histórico' },
            { i: 'Chart', l: 'Análises' },
            { i: 'Card', l: 'Faturas' },
            { i: 'User', l: 'Conta' },
          ].map(item => {
            const I = Icon[item.i];
            return (
              <div key={item.l} style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '7px 10px',
                borderRadius: 8,
                background: item.active ? 'var(--purple-tint)' : 'transparent',
                color: item.active ? 'var(--purple)' : 'var(--ink-2)',
                fontWeight: item.active ? 600 : 500,
                fontSize: 11,
              }}>
                <I size={13} />
                {item.l}
                {item.active && <span style={{ marginLeft: 'auto', width: 5, height: 5, borderRadius: '50%', background: 'var(--purple)' }} />}
              </div>
            );
          })}
        </nav>
      </div>

      {/* Coluna 1 — Widget + Resumo */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <MiniWidget />
        <MiniCard>
          <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 8, fontWeight: 600 }}>Resumo do mês</div>
          <Row label={<><span style={{ color: 'var(--green)' }}>●</span> Receitas</>} value="R$ 35.241,24" valueColor="var(--green)" />
          <Row label={<><span style={{ color: 'var(--red)' }}>●</span> Despesas</>} value="R$ 23.025,24" valueColor="var(--red)" />
          <div style={{ borderTop: '1px solid var(--line)', marginTop: 6, paddingTop: 6 }}>
            <Row label={<strong>Saldo</strong>} value="R$ 12.216,00" bold />
          </div>
        </MiniCard>
        <MiniCard>
          <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Receitas no mês</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--green)', marginTop: 2, marginBottom: 8 }} className="mono">R$ 35.241,24</div>
          {[
            { l: 'Salário 2', v: '+R$ 16.549,26' },
            { l: 'Salário 1', v: '+R$ 18.643,16' },
          ].map(r => (
            <Row key={r.l} label={<><span style={{ display: 'inline-block', width: 14, height: 14, borderRadius: 4, background: 'var(--green-tint)', marginRight: 6, verticalAlign: 'middle' }} />{r.l}</>} value={r.v} valueColor="var(--green)" />
          ))}
        </MiniCard>
      </div>

      {/* Coluna 2 — Gastos no mês */}
      <MiniCard>
        <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Gastos no mês</div>
        <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }} className="mono">R$ 10.504,00</div>
        <div style={{ fontSize: 9, color: 'var(--ink-3)', marginBottom: 8 }}>70% da meta de R$ 15.000,00</div>
        <div style={{ height: 4, borderRadius: 2, background: 'var(--bg-soft)', marginBottom: 12, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '70%', background: 'linear-gradient(90deg, var(--green) 0%, var(--orange) 100%)' }} />
        </div>
        {[
          { l: 'Despesas de Trabalho', v: 'R$ 4.694,05', i: 'Bag' },
          { l: 'Supermercado', v: 'R$ 1.686,47', i: 'Cart' },
          { l: 'Alimentação', v: 'R$ 1.412,59', i: 'Coffee' },
          { l: 'Vestuário', v: 'R$ 916,35', i: 'Bag' },
          { l: 'Compras variadas', v: 'R$ 719,65', i: 'Receipt' },
          { l: 'Saúde', v: 'R$ 393,86', i: 'Heart' },
          { l: 'Despesas Domésticas', v: 'R$ 201,00', i: 'Home' },
          { l: 'Moradia', v: 'R$ 193,59', i: 'Home' },
        ].map(r => {
          const I = Icon[r.i];
          return (
            <Row key={r.l} label={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><I size={11} color="var(--ink-3)" />{r.l}</span>} value={r.v} />
          );
        })}
      </MiniCard>

      {/* Coluna 3 — Despesas Recorrentes */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <MiniCard>
          <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Despesas Recorrentes</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--red)', marginTop: 2, marginBottom: 8 }} className="mono">R$ 12.521,24</div>
          <div style={{
            background: 'var(--green)',
            color: 'white',
            padding: '6px 10px',
            borderRadius: 6,
            fontSize: 10,
            fontWeight: 600,
            textAlign: 'center',
            marginBottom: 8,
          }}>+ Adicionar Despesa Recorrente</div>
          {[
            { l: 'Moradia', v: 'R$ 3.916,29' },
            { l: 'Saúde', v: 'R$ 3.700,41' },
            { l: 'Educação', v: 'R$ 2.090,18' },
            { l: 'Energia Elétrica', v: 'R$ 750,74' },
            { l: 'Assinaturas', v: 'R$ 450,29' },
          ].map(r => (
            <Row key={r.l} label={r.l} value={r.v} />
          ))}
        </MiniCard>
        <MiniCard>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--ink-3)', marginBottom: 4 }}>
            <span>Gastos no Mês</span>
            <span>Despesas Recorrentes</span>
          </div>
          <div style={{ display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', marginBottom: 6 }}>
            <div style={{ width: '46%', background: 'var(--green)' }} />
            <div style={{ width: '54%', background: 'var(--purple)' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, fontWeight: 600 }}>
            <span style={{ color: 'var(--green)' }}>R$ 10.504,00</span>
            <span style={{ color: 'var(--purple)' }}>R$ 12.521,24</span>
          </div>
          {/* Tiny chart */}
          <div style={{ marginTop: 14, fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', fontWeight: 600 }}>Gastos por dia</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 40, marginTop: 4 }}>
            {[4, 8, 6, 12, 10, 16, 8, 14, 18, 22, 14, 10, 28, 16, 24, 30, 20, 14, 18, 12].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h * 1.4}%`, background: i === 12 ? 'var(--purple)' : 'var(--purple-soft)', borderRadius: 1 }} />
            ))}
          </div>
        </MiniCard>
      </div>
    </div>
  );
}

function MiniCard({ children }) {
  return (
    <div style={{
      background: 'var(--bg-elevated)',
      border: '1px solid var(--line)',
      borderRadius: 10,
      padding: 10,
    }}>{children}</div>
  );
}

function Row({ label, value, valueColor, bold }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '4px 0',
      fontSize: 10.5,
      color: 'var(--ink-2)',
      fontWeight: bold ? 600 : 500,
    }}>
      <span>{label}</span>
      <span className="mono" style={{ color: valueColor || 'var(--ink)', fontWeight: bold ? 600 : 500 }}>{value}</span>
    </div>
  );
}

function MiniWidget() {
  return (
    <div style={{
      background: 'var(--purple)',
      borderRadius: 10,
      padding: 10,
      display: 'flex',
      flexDirection: 'column',
      gap: 6,
    }}>
      <div style={{ display: 'flex', background: 'rgba(0,0,0,0.18)', borderRadius: 999, padding: 2 }}>
        <div style={{ flex: 1, padding: '5px', borderRadius: 999, background: 'rgba(255,255,255,0.2)', fontSize: 10, fontWeight: 600, color: 'white', textAlign: 'center' }}>Gastei</div>
        <div style={{ flex: 1, padding: '5px', fontSize: 10, color: 'rgba(255,255,255,0.7)', textAlign: 'center' }}>Recebi</div>
      </div>
      <div style={{ background: 'white', borderRadius: 6, padding: '7px 10px', fontSize: 10, color: 'var(--ink-4)' }}>Valor Gasto...</div>
      <div style={{ background: 'white', borderRadius: 6, padding: '7px 10px', fontSize: 10, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon.Card size={11} color="var(--purple)" />
        Pago com Cartão
      </div>
      <div style={{ background: 'white', borderRadius: 6, padding: '7px 10px', fontSize: 10, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon.Cart size={11} color="var(--purple)" />
        Supermercado
      </div>
      <div style={{ background: 'white', borderRadius: 6, padding: '7px 10px', fontSize: 10, color: 'var(--ink-4)' }}>Descrição (opcional)</div>
      <div style={{ background: '#50D080', borderRadius: 6, padding: 7, fontSize: 11, fontWeight: 600, color: 'white', textAlign: 'center' }}>Registrar Gasto</div>
    </div>
  );
}

// Phone frame + content
function PhoneFrame({ children }) {
  return (
    <div style={{
      background: '#1A1614',
      borderRadius: 36,
      padding: 8,
      boxShadow: '0 32px 64px -16px rgba(76, 29, 149, 0.35), 0 12px 24px -8px rgba(26, 22, 20, 0.2)',
    }}>
      <div style={{
        background: 'var(--purple)',
        borderRadius: 28,
        overflow: 'hidden',
        height: 540,
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute',
          top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 22, background: '#1A1614', borderRadius: 999, zIndex: 5,
        }} />
        {children}
      </div>
    </div>
  );
}

function PhoneAppContent() {
  return (
    <div style={{ padding: '40px 14px 14px', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <Logo size={14} dark />
        <span style={{ color: 'white', fontSize: 11, fontWeight: 500 }}>Olá, Daniel</span>
      </div>

      {/* Mini stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 12 }}>
        {[
          { l: 'Receitas', v: '35.241', c: 'white' },
          { l: 'Despesas', v: '23.025', c: 'white' },
          { l: 'Saldo', v: '12.216', c: '#50D080' },
        ].map(s => (
          <div key={s.l} style={{ background: 'rgba(0,0,0,0.18)', borderRadius: 8, padding: '6px 8px' }}>
            <div style={{ fontSize: 8, color: 'rgba(255,255,255,0.7)' }}>{s.l}</div>
            <div className="mono" style={{ fontSize: 10, fontWeight: 700, color: s.c }}>R$ {s.v}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', background: 'rgba(0,0,0,0.18)', borderRadius: 999, padding: 3, marginBottom: 8 }}>
        <div style={{ flex: 1, padding: 6, borderRadius: 999, background: 'rgba(255,255,255,0.2)', fontSize: 11, fontWeight: 600, color: 'white', textAlign: 'center' }}>Gastei</div>
        <div style={{ flex: 1, padding: 6, fontSize: 11, color: 'rgba(255,255,255,0.7)', textAlign: 'center' }}>Recebi</div>
      </div>

      <div style={{ background: 'white', borderRadius: 8, padding: '9px 12px', marginBottom: 6, fontSize: 11, color: 'var(--ink-4)' }}>Valor Gasto...</div>
      <div style={{ background: 'white', borderRadius: 8, padding: '9px 12px', marginBottom: 6, fontSize: 11, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon.Card size={12} color="var(--purple)" /> Pago com Cartão
      </div>
      <div style={{ background: 'white', borderRadius: 8, padding: '9px 12px', marginBottom: 6, fontSize: 11, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon.Receipt size={12} color="var(--purple)" /> Categoria
      </div>
      <div style={{ background: 'white', borderRadius: 8, padding: '9px 12px', marginBottom: 8, fontSize: 11, color: 'var(--ink-4)' }}>Descrição (opcional)</div>

      <div style={{ marginTop: 'auto', background: '#50D080', borderRadius: 10, padding: 10, textAlign: 'center', color: 'white', fontWeight: 600, fontSize: 12, boxShadow: '0 4px 8px rgba(0,0,0,0.15)' }}>
        Registrar Gasto
      </div>
    </div>
  );
}

window.DesktopDashboard = DesktopDashboard;
window.PhoneFrame = PhoneFrame;
window.PhoneAppContent = PhoneAppContent;