// UniPix SMS — interactive demo, rebuilt to match the real Unipix SMS app
// (design system "Antigo": Poppins, dusty-navy text, green→teal CTA, cyan accents,
//  pale #F5FBFF wash). Two screens: "Meus envios" + "Novo envio" wizard.

const UPX = {
  cyan: '#0098BE', cyan300: '#28BEE5', cyan100: '#E6EFF8', wash: '#F5FBFF',
  green: '#45BD6E', teal: '#00A4A9', greenLight: '#90D82E', success: '#42C85C',
  grad: 'linear-gradient(180deg,#45BD6E 0%,#00A4A9 100%)',
  strong: '#24373D', text: '#294B6A', t2: '#546367', t3: '#9FAEBC',
  border: '#CDDAE5', borderSoft: '#E6EFF8', divider: '#E4EDF4', chip: '#E6EFF8',
  warning: '#F5A623', danger: '#E94B4B', neutral: '#CDDAE5',
  shadow: '0 2px 16px rgba(203,216,227,0.5), 0 0 3px rgba(41,75,106,0.15)',
  shadowCta: '0 1px 20px rgba(66,200,92,0.35)',
  font: "'Poppins','Inter',system-ui,sans-serif"
};

function UPXIco(name, size, color) {
  const p = { width: size || 18, height: size || 18, viewBox: '0 0 24 24', fill: 'none', stroke: color || 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'send': return <svg {...p}><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>;
    case 'chart': return <svg {...p}><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></svg>;
    case 'gear': return <svg {...p}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>;
    case 'bell': return <svg {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>;
    case 'filter': return <svg {...p}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>;
    case 'search': return <svg {...p}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>;
    case 'chevL': return <svg {...p}><polyline points="15 18 9 12 15 6" /></svg>;
    case 'chevR': return <svg {...p}><polyline points="9 18 15 12 9 6" /></svg>;
    case 'chevsL': return <svg {...p}><polyline points="11 17 6 12 11 7" /><polyline points="18 17 13 12 18 7" /></svg>;
    case 'chevsR': return <svg {...p}><polyline points="13 17 18 12 13 7" /><polyline points="6 17 11 12 6 7" /></svg>;
    case 'chevDown': return <svg {...p}><polyline points="6 9 12 15 18 9" /></svg>;
    case 'eye': return <svg {...p}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></svg>;
    case 'edit': return <svg {...p}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="m18.5 2.5 3 3L12 15l-4 1 1-4z" /></svg>;
    case 'trash': return <svg {...p}><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>;
    case 'upload': return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>;
    case 'users': return <svg {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
    case 'calendar': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg>;
    case 'plus': return <svg {...p}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>;
    default: return null;
  }
}

const UPX_CAMPAIGNS = [
  { name: 'Campanha de SMS Marketing de Goiás', created: '12/02/2022 às 15:51', author: 'Rafael Lopes', cc: 'Marketing do José Goiás', product: 'Baratão Tim-SP short', via: 'API', contacts: '999.999.999', replies: '999.999',
    segments: [
      { label: 'Entregue no aparelho', value: 66000, color: '#42C85C' },
      { label: 'Enviado para operadora', value: 66000, color: '#90D82E' },
      { label: 'Agendado', value: 10000, color: '#F5A623' },
      { label: 'Cancelado', value: 2000, color: '#E94B4B' },
      { label: 'Outros', value: 16000, color: '#CDDAE5' }
    ] },
  { name: 'Disparo Black Friday — Banco Safra', created: '02/11/2022 às 09:14', author: 'Ana Souza', cc: 'Call Safra', product: 'Vivo MT short', via: 'Plataforma', contacts: '1.230.000', replies: '12.840',
    segments: [
      { label: 'Entregue no aparelho', value: 82, color: '#42C85C' },
      { label: 'Enviado para operadora', value: 10, color: '#90D82E' },
      { label: 'Não entregue', value: 3, color: '#E94B4B' },
      { label: 'Outros', value: 5, color: '#CDDAE5' }
    ] },
  { name: 'NOC — Aviso de manutenção 02h', created: '08/12/2022 às 17:31', author: 'Emanuel Pires', cc: 'NOC', product: 'Vivo SP short', via: 'API', contacts: '4.320', replies: '0',
    segments: [
      { label: 'Entregue no aparelho', value: 96, color: '#42C85C' },
      { label: 'Enviado para operadora', value: 2, color: '#90D82E' },
      { label: 'Não entregue', value: 2, color: '#E94B4B' }
    ] }
];

function UPXSelect({ label, help, placeholder, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {label && <span style={{ font: '600 14px ' + UPX.font, color: UPX.text, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        {label}
        {help && <span title={help} style={{ width: 18, height: 18, borderRadius: '50%', border: '1px solid ' + UPX.cyan300, color: UPX.cyan300, font: '700 11px ' + UPX.font, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'help' }}>?</span>}
      </span>}
      <div style={{ height: 46, padding: '0 16px', border: '1px solid ' + UPX.border, background: '#fff', borderRadius: 15, font: '500 14px ' + UPX.font, color: value ? UPX.text : UPX.t3, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value || placeholder || 'Selecione'}</span>
        <span style={{ color: UPX.t2, flexShrink: 0, marginLeft: 8 }}>{UPXIco('chevDown', 16)}</span>
      </div>
    </div>
  );
}

function UPXChip({ icon, label, active, onClick }) {
  return (
    <div onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '13px 20px', background: active ? UPX.chip : '#fff', border: '1.5px solid ' + (active ? UPX.cyan300 : UPX.border), borderRadius: 15, font: '600 14px ' + UPX.font, color: active ? UPX.text : UPX.t2, cursor: 'pointer' }}>
      <span style={{ color: active ? UPX.cyan : UPX.t3 }}>{UPXIco(icon, 18)}</span>{label}
    </div>
  );
}

function UPXStepper({ step }) {
  const steps = ['Informações', 'Contatos', 'Mensagem', 'Envio'];
  return (
    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 28, flexWrap: 'wrap', gap: 6 }}>
      {steps.map((label, i) => {
        const n = i + 1, active = n === step, done = n < step;
        return (
          <div key={n} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 20px', borderRadius: 22, border: '1.5px solid ' + (active ? UPX.cyan300 : 'transparent'), background: active ? '#fff' : 'transparent', color: active ? UPX.cyan : done ? UPX.text : UPX.t3, font: '700 13px ' + UPX.font }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: done ? UPX.success : active ? UPX.cyan300 : UPX.border, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px ' + UPX.font }}>{done ? '✓' : n}</span>
            {label}
          </div>
        );
      })}
    </div>
  );
}

function UPXPhone({ name, cc, product, contacts, sms, spend, message, schedule }) {
  return (
    <div style={{ width: 300, minHeight: 540, border: '4px solid ' + UPX.strong, borderRadius: 42, padding: '30px 22px 26px', position: 'relative', background: '#fff', boxShadow: UPX.shadow, marginLeft: 'auto', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 130, height: 20, background: UPX.strong, borderRadius: '0 0 16px 16px' }} />
      <div style={{ font: '700 16px ' + UPX.font, color: UPX.text, marginBottom: 4 }}>{name || 'Nome da campanha'}</div>
      <div style={{ font: '400 12.5px ' + UPX.font, color: UPX.t3 }}>{cc} · {product}</div>
      {[['Contatos', contacts], ['SMSs', sms], ['Custo estimado', spend]].map(([k, v]) => (
        <div key={k}>
          <div style={{ font: '600 12px ' + UPX.font, color: UPX.t2, marginTop: 16 }}>{k}</div>
          <div style={{ font: '700 22px ' + UPX.font, color: UPX.text, marginTop: 2 }}>{v}</div>
        </div>
      ))}
      {message ? (
        <div style={{ marginTop: 16, padding: '13px 15px', background: UPX.chip, borderRadius: 14, font: '500 13px ' + UPX.font, color: UPX.text, lineHeight: 1.5 }}>{message}</div>
      ) : (
        <div style={{ marginTop: 16, padding: '13px 15px', background: '#F8F9FA', borderRadius: 14, font: 'italic 500 12.5px ' + UPX.font, color: UPX.t3, textAlign: 'center' }}>A mensagem aparece aqui</div>
      )}
      {schedule && <div style={{ marginTop: 12, font: '500 12px ' + UPX.font, color: UPX.cyan }}>Agendado: {schedule}</div>}
      <div style={{ marginTop: 'auto', paddingTop: 22, display: 'flex', justifyContent: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 26px', background: UPX.grad, border: '1px solid ' + UPX.greenLight, borderRadius: 22, color: '#fff', font: '700 14px ' + UPX.font, boxShadow: UPX.shadowCta }}>
          {UPXIco('send', 16, '#fff')} Enviar
        </div>
      </div>
    </div>
  );
}

const UnipixDemo = () => {
  const [screen, setScreen] = React.useState('envios');
  const [hideUnits, setHideUnits] = React.useState(true);
  const [step, setStep] = React.useState(1);
  const [name, setName] = React.useState('Campanha de teste 1');
  const [cc, setCc] = React.useState('');
  const [product, setProduct] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [schedule, setSchedule] = React.useState('');

  const contacts = step >= 2 ? '1.230' : '0';
  const sms = step >= 3 ? '1.230' : '0';
  const spend = step >= 3 ? 'R$ 98,40' : 'R$ 0,00';

  const goNovo = () => { setScreen('novo'); setStep(1); };

  const navItem = (icon, active, onClick) => (
    <div onClick={onClick} style={{ width: 56, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 14, cursor: 'pointer', color: active ? '#fff' : UPX.t2, background: active ? UPX.greenLight : 'transparent', boxShadow: active ? '0 6px 18px rgba(144,216,46,0.35)' : 'none' }}>
      {UPXIco(icon, 22)}
    </div>
  );

  const ghostBtn = (children, onClick) => (
    <button onClick={onClick} style={{ padding: '9px 16px', background: 'transparent', border: '1px solid ' + UPX.border, borderRadius: 14, color: UPX.t2, font: '600 13px ' + UPX.font, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8 }}>{children}</button>
  );

  return (
    <div style={{ width: '100%', height: '100%', fontFamily: UPX.font, background: UPX.wash, overflow: 'hidden', display: 'flex', flexDirection: 'column', color: UPX.text }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '14px 28px', background: 'rgba(255,255,255,0.85)', borderBottom: '1px solid ' + UPX.borderSoft, flexShrink: 0 }}>
        <div onClick={() => setScreen('envios')} style={{ font: '800 22px ' + UPX.font, color: UPX.cyan, letterSpacing: '-0.02em', cursor: 'pointer' }}>unipix</div>
        <div style={{ flex: 1 }} />
        <span style={{ font: '600 11px ' + UPX.font, color: UPX.t2, letterSpacing: '0.18em', cursor: 'pointer' }}>TOUR VIRTUAL</span>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 16px 6px 6px', background: UPX.chip, borderRadius: 18, font: '600 13px ' + UPX.font, color: UPX.text }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: UPX.cyan300, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 13px ' + UPX.font }}>$</span>
          R$ 1.000.000,00
        </div>
        <button onClick={goNovo} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', background: UPX.grad, border: '1px solid ' + UPX.greenLight, borderRadius: 22, color: '#fff', font: '700 13px ' + UPX.font, cursor: 'pointer', boxShadow: UPX.shadowCta }}>
          {UPXIco('plus', 16, '#fff')} Novo envio
        </button>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(135deg,#28BEE5,#0098BE)', flexShrink: 0 }} />
      </div>

      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {/* Sidebar */}
        <div style={{ width: 78, flexShrink: 0, padding: '20px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          {navItem('send', screen === 'envios', () => setScreen('envios'))}
          {navItem('chart', false)}
          {navItem('gear', false)}
          <div style={{ marginTop: 'auto', position: 'relative', color: UPX.t2 }}>
            {UPXIco('bell', 24)}
            <span style={{ position: 'absolute', top: -4, right: -4, background: UPX.success, color: '#fff', font: '700 10px ' + UPX.font, width: 17, height: 17, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>3</span>
          </div>
        </div>

        {/* Main */}
        <div style={{ flex: 1, minWidth: 0, overflowY: 'auto', padding: '24px 32px 48px' }}>
          {screen === 'envios' ? (
            <React.Fragment>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 20, flexWrap: 'wrap' }}>
                <h1 style={{ margin: 0, font: '700 22px ' + UPX.font, color: UPX.strong }}>Meus envios</h1>
                <div style={{ flex: 1 }} />
                <div onClick={() => setHideUnits(v => !v)} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, font: '500 13px ' + UPX.font, color: UPX.text, cursor: 'pointer' }}>
                  <span style={{ position: 'relative', width: 44, height: 22, background: hideUnits ? UPX.grad : UPX.border, borderRadius: 11, boxShadow: hideUnits ? '0 1px 6px rgba(66,200,92,0.35)' : 'none' }}>
                    <span style={{ position: 'absolute', top: 3, left: hideUnits ? 25 : 3, width: 16, height: 16, background: '#fff', borderRadius: '50%', transition: 'left .15s' }} />
                  </span>
                  Esconder envios unitários
                </div>
                {ghostBtn(<React.Fragment>{UPXIco('filter', 16)} Filtrar</React.Fragment>)}
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0,1fr)) auto', gap: 12, marginBottom: 22 }}>
                {['Defina o período', 'Pesquisar', 'Situação', 'Centro de custo', 'Tipo de envio'].map(ph => <UPXSelect key={ph} placeholder={ph} />)}
                <button style={{ width: 46, border: '1px solid ' + UPX.border, background: '#fff', borderRadius: 15, color: UPX.cyan, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{UPXIco('chevR', 18)}</button>
              </div>

              {UPX_CAMPAIGNS.map((c, i) => {
                const total = c.segments.reduce((a, s) => a + s.value, 0);
                const meta = [['Criado em', c.created], ['Criado por', c.author], ['Centro de custo', c.cc], ['Produto', c.product], ['Contatos', c.contacts], ['Respostas', c.replies], ['Via', c.via]];
                return (
                  <div key={i} style={{ border: '1.5px solid ' + UPX.border, borderRadius: 18, padding: '18px 22px', background: '#fff', marginBottom: 16, boxShadow: UPX.shadow }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                      <div style={{ font: '700 16px ' + UPX.font, color: UPX.text }}>{c.name}</div>
                      <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, color: UPX.t2 }}>
                        <span style={{ cursor: 'pointer', padding: 6, display: 'inline-flex' }}>{UPXIco('eye', 18)}</span>
                        <span style={{ cursor: 'pointer', padding: 6, display: 'inline-flex' }}>{UPXIco('edit', 18)}</span>
                        <span style={{ cursor: 'pointer', padding: 6, display: 'inline-flex' }}>{UPXIco('trash', 18)}</span>
                      </div>
                    </div>
                    <div style={{ display: 'flex', height: 12, borderRadius: 6, overflow: 'hidden', marginBottom: 14 }}>
                      {c.segments.map((s, si) => <div key={si} title={s.label} style={{ width: (s.value / total * 100) + '%', background: s.color }} />)}
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: '8px 18px', font: '500 12px ' + UPX.font, color: UPX.text, marginBottom: 14 }}>
                      {c.segments.map((s, si) => (
                        <div key={si}><span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: s.color, marginRight: 8, verticalAlign: 'middle' }} />{s.label} · {Math.round(s.value / total * 100)}%</div>
                      ))}
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(110px,1fr))', gap: 16, borderTop: '1px solid ' + UPX.divider, paddingTop: 12, font: '500 11px ' + UPX.font, color: UPX.t3 }}>
                      {meta.map(([k, v]) => <div key={k}>{k}<div style={{ font: '600 12px ' + UPX.font, color: UPX.text, marginTop: 2 }}>{v}</div></div>)}
                    </div>
                  </div>
                );
              })}

              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8, flexWrap: 'wrap', gap: 14, font: '500 13px ' + UPX.font, color: UPX.t2 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
                  Itens por página
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', border: '1px solid ' + UPX.border, borderRadius: 15, color: UPX.text }}>10 {UPXIco('chevDown', 14)}</span>
                  <span>1 – 3 de 3</span>
                  <span style={{ color: UPX.t3 }}>{UPXIco('chevsL', 18)}</span>
                  <span style={{ color: UPX.t3 }}>{UPXIco('chevL', 18)}</span>
                  <span style={{ color: UPX.text }}>{UPXIco('chevR', 18)}</span>
                  <span style={{ color: UPX.text }}>{UPXIco('chevsR', 18)}</span>
                </div>
                <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
                  <span><span style={{ color: UPX.t3 }}>Total de SMSs enviadas: </span><b style={{ color: UPX.text }}>1.000.000.000</b></span>
                  <span><span style={{ color: UPX.t3 }}>Total de gastos: </span><b style={{ color: UPX.text }}>R$ 999.999.999,99</b></span>
                </div>
              </div>
            </React.Fragment>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 340px', gap: 36, alignItems: 'flex-start' }}>
              <div>
                <UPXStepper step={step} />
                {step === 1 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 560 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                      <label style={{ font: '600 14px ' + UPX.font, color: UPX.text }}>Nome do envio ou campanha</label>
                      <input value={name} onChange={e => setName(e.target.value)} placeholder="Ex: Campanha Black Friday 2024"
                        style={{ height: 46, padding: '0 16px', border: '1px solid ' + UPX.border, borderRadius: 15, font: '500 15px ' + UPX.font, color: UPX.text, outline: 'none', background: '#fff' }} />
                    </div>
                    <UPXSelect label="Qual o centro de custo?" help="Onde os custos deste envio serão registrados." value={cc} placeholder="Selecione um centro de custo" />
                    <UPXSelect label="Qual o produto?" help="A rota / operadora pela qual os SMS serão enviados." value={product} placeholder="Selecione um produto" />
                  </div>
                )}
                {step === 2 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 560 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <label style={{ font: '600 14px ' + UPX.font, color: UPX.text }}>Como vai enviar os contatos?</label>
                      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                        <UPXChip icon="upload" label="Enviar planilha" active />
                        <UPXChip icon="edit" label="Digitar contatos" />
                        <UPXChip icon="users" label="Lista de contatos" />
                      </div>
                    </div>
                    <div style={{ padding: 24, background: UPX.wash, border: '1.5px dashed ' + UPX.cyan300, borderRadius: 18, textAlign: 'center' }}>
                      <div style={{ color: UPX.cyan, display: 'flex', justifyContent: 'center' }}>{UPXIco('upload', 34, UPX.cyan)}</div>
                      <div style={{ font: '600 14px ' + UPX.font, color: UPX.text, marginTop: 8 }}>Arraste seu arquivo aqui ou clique para enviar</div>
                      <div style={{ font: '500 12px ' + UPX.font, color: UPX.t3, marginTop: 4 }}>Mailing123.xlsx · Mailing123.csv</div>
                    </div>
                  </div>
                )}
                {step === 3 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 560 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                      <label style={{ font: '600 14px ' + UPX.font, color: UPX.text }}>Mensagem</label>
                      <textarea value={message} onChange={e => setMessage(e.target.value)} placeholder="Olá {nome}, sua fatura vence em 3 dias. Acesse o link para regularizar: …"
                        style={{ height: 130, padding: 16, border: '1px solid ' + UPX.border, borderRadius: 15, font: '500 14px ' + UPX.font, color: UPX.text, outline: 'none', resize: 'vertical', lineHeight: 1.5, background: '#fff' }} />
                      <div style={{ font: '500 12px ' + UPX.font, color: UPX.t3 }}>{message.length} / 160 caracteres · 1 SMS</div>
                    </div>
                    <UPXSelect label="Modelo de mensagem (opcional)" placeholder="Selecione um modelo" />
                  </div>
                )}
                {step === 4 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 560 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <label style={{ font: '600 14px ' + UPX.font, color: UPX.text }}>Quando enviar?</label>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <UPXChip icon="send" label="Enviar agora" active={!schedule} onClick={() => setSchedule('')} />
                        <UPXChip icon="calendar" label="Agendar" active={!!schedule} onClick={() => setSchedule('12/03/2026 às 09:00')} />
                      </div>
                    </div>
                    <div style={{ padding: 20, background: UPX.chip, borderRadius: 14, color: UPX.text, font: '500 13px ' + UPX.font, lineHeight: 1.5 }}>
                      Pronto. Revise o preview ao lado e clique em <b>Enviar</b> para disparar 1.230 SMSs para o centro de custo <b>{cc || '—'}</b>.
                    </div>
                  </div>
                )}

                <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
                  <button onClick={() => (step === 1 ? setScreen('envios') : setStep(s => s - 1))}
                    style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 22px', background: 'transparent', border: '1px solid ' + UPX.border, borderRadius: 18, color: UPX.t2, font: '600 14px ' + UPX.font, cursor: 'pointer' }}>
                    {UPXIco('chevL', 16)} {step === 1 ? 'Cancelar' : 'Anterior'}
                  </button>
                  {step < 4 ? (
                    <button onClick={() => setStep(s => Math.min(4, s + 1))}
                      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 26px', background: UPX.cyan300, border: 'none', borderRadius: 18, color: '#fff', font: '700 14px ' + UPX.font, cursor: 'pointer' }}>
                      Próximo {UPXIco('chevR', 16, '#fff')}
                    </button>
                  ) : (
                    <button onClick={() => { setScreen('envios'); setStep(1); }}
                      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 28px', background: UPX.grad, border: '1px solid ' + UPX.greenLight, borderRadius: 22, color: '#fff', font: '700 14px ' + UPX.font, cursor: 'pointer', boxShadow: UPX.shadowCta }}>
                      {UPXIco('send', 16, '#fff')} Enviar
                    </button>
                  )}
                </div>
              </div>

              <UPXPhone name={name} cc={cc || 'Centro de custo'} product={product || 'Produto'} contacts={contacts} sms={sms} spend={spend} message={message} schedule={schedule} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { UnipixDemo });