function AIImportSection() {
  const benefits = [
    {
      icon: 'Bolt',
      title: 'Ponto de partida mais rápido',
      text: 'Transforme arquivos que você já tem em registros organizados.',
    },
    {
      icon: 'History',
      title: 'Histórico retroativo',
      text: 'Alimente meses anteriores sem precisar digitar tudo manualmente.',
    },
    {
      icon: 'Shield',
      title: 'Dupla checagem',
      text: 'Compare dados importados com seus registros e encontre o que ficou de fora.',
    },
    {
      icon: 'Eye',
      title: 'Menos esforço inicial',
      text: 'Ideal para quem quer começar sem organizar tudo do zero.',
    },
  ];

  return (
    <section id="importacao" style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 500,
        background: 'radial-gradient(ellipse, rgba(112, 16, 176, 0.07) 0%, transparent 65%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="import-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 56,
          alignItems: 'center',
          marginBottom: 56,
        }}>
          <div>
            <div className="eyebrow"><span className="dot" />Importação com IA</div>
            <h2 style={{ fontSize: 'clamp(30px, 4.5vw, 44px)', marginTop: 20, marginBottom: 16, textAlign: 'left' }}>
              Comece pelo que você já tem.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-3)', lineHeight: 1.6, marginBottom: 24 }}>
              Importe faturas de cartão, extratos bancários ou planilhas de gastos.
              O Econome lê, entende e organiza tudo para você revisar.
            </p>

            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
              padding: '10px 16px',
              background: 'var(--purple-tint)',
              border: '1px solid var(--purple-soft)',
              borderRadius: 999,
              marginBottom: 28,
            }}>
              <Icon.Shield size={16} color="var(--purple)" />
              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--purple-deep)' }}>
                A IA ajuda a organizar. Você revisa e confirma.
              </span>
            </div>

            <div>
              <a href="https://app.econome.com.br/register" className="btn btn-purple btn-lg">
                Começar grátis
                <Icon.ArrowRight size={16} />
              </a>
            </div>
          </div>

          <ImportMockup />
        </div>

        {/* Benefícios */}
        <div className="import-benefits-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          {benefits.map(b => {
            const I = Icon[b.icon];
            return (
              <div key={b.title} className="card" style={{ padding: 24 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: 'var(--purple-tint)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 16,
                }}>
                  <I size={18} color="var(--purple)" />
                </div>
                <h3 style={{ fontSize: 16.5, marginBottom: 6 }}>{b.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>{b.text}</p>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .import-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .import-grid h2, .import-grid > div p { text-align: left; }
        }
        @media (max-width: 720px) {
          .import-benefits-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .import-benefits-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ImportMockup() {
  const [tab, setTab] = React.useState('fatura');
  const isFatura = tab === 'fatura';

  return (
    <div style={{
      borderRadius: 20,
      overflow: 'hidden',
      border: '1px solid var(--line)',
      boxShadow: '0 32px 64px -20px rgba(76, 29, 149, 0.22), 0 12px 24px -8px rgba(26, 22, 20, 0.08)',
      background: 'var(--bg-elevated)',
    }}>
      <div className="import-mockup-grid" style={{ display: 'grid', gridTemplateColumns: '140px 1fr', minHeight: 420 }}>
        {/* Mini sidebar */}
        <div style={{ background: 'var(--bg)', borderRight: '1px solid var(--line)', padding: '16px 12px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Logo size={13} />
          <div>
            <div style={{ fontSize: 8.5, color: 'var(--ink-4)' }}>Boa noite,</div>
            <div style={{ fontSize: 10.5, fontWeight: 600 }}>Daniel</div>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              { i: 'Home', l: 'Mês Atual' },
              { i: 'History', l: 'Histórico' },
              { i: 'Chart', l: 'Análises' },
              { i: 'Upload', l: 'Importar Dados', active: true },
              { i: 'PiggyBank', l: 'Economias' },
            ].map(item => {
              const I = Icon[item.i];
              return (
                <div key={item.l} style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '6px 8px', borderRadius: 8,
                  background: item.active ? 'var(--purple-tint)' : 'transparent',
                  color: item.active ? 'var(--purple)' : 'var(--ink-2)',
                  fontWeight: item.active ? 600 : 500,
                  fontSize: 9.5,
                }}>
                  <I size={11} />
                  {item.l}
                </div>
              );
            })}
          </nav>
        </div>

        {/* Conteúdo */}
        <div style={{ padding: 20 }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
            <button onClick={() => setTab('fatura')} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600,
              background: isFatura ? 'var(--purple)' : 'var(--bg-soft)',
              color: isFatura ? 'white' : 'var(--ink-3)',
            }}>Fatura de cartão</button>
            <button onClick={() => setTab('extrato')} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600,
              background: !isFatura ? 'var(--purple)' : 'var(--bg-soft)',
              color: !isFatura ? 'white' : 'var(--ink-3)',
            }}>Extrato / Planilha</button>
          </div>

          <div style={{
            border: '1.5px dashed var(--purple-soft)', borderRadius: 14,
            padding: '26px 16px', textAlign: 'center', marginBottom: 14,
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: 'var(--purple-tint)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 10px',
            }}>
              {isFatura ? <Icon.FileText size={17} color="var(--purple)" /> : <Icon.Upload size={17} color="var(--purple)" />}
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 3 }}>
              {isFatura ? 'Arraste a fatura aqui' : 'Arraste seu arquivo aqui'}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>
              ou clique para selecionar{isFatura ? ' · processado com IA' : ''}
            </div>
            <div style={{
              display: 'inline-block', marginTop: 8, fontSize: 9.5, color: 'var(--ink-4)',
              background: 'var(--bg-soft)', borderRadius: 999, padding: '3px 10px',
            }}>
              {isFatura ? '.pdf · .csv · .xlsx · .xls · até 10 MB' : '.xlsx · .xls · .csv · .pdf · até 10 MB'}
            </div>
          </div>

          <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 12, padding: 14 }}>
            {isFatura ? (
              <>
                <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--ink-4)', letterSpacing: '0.04em', marginBottom: 6 }}>
                  COMO FUNCIONA
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                  A IA lê a fatura e o Econome confere cada lançamento com o que você já tem: separa{' '}
                  <strong>gastos do mês</strong>, <strong>parcelas</strong> e <strong>despesas recorrentes</strong>,
                  e avisa o que já está registrado, sem duplicar.
                </div>
              </>
            ) : (
              <>
                <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--ink-4)', letterSpacing: '0.04em', marginBottom: 10 }}>
                  O QUE VOCÊ PODE IMPORTAR
                </div>
                {[
                  { t: 'Extrato bancário (PDF)', s: 'Confere com seus lançamentos e evita duplicar' },
                  { t: 'Orçamento mensal', s: 'Microsoft, FEBRABAN, FUNPRESP, Mobills' },
                  { t: 'Lista de transações', s: 'Planilhas com data, descrição e valor' },
                ].map((r, i, arr) => (
                  <div key={r.t} style={{ marginBottom: i < arr.length - 1 ? 10 : 0 }}>
                    <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink)' }}>{r.t}</div>
                    <div style={{ fontSize: 10, color: 'var(--ink-4)' }}>{r.s}</div>
                  </div>
                ))}
              </>
            )}
          </div>

          <p style={{ fontSize: 9.5, color: 'var(--ink-4)', textAlign: 'center', marginTop: 12 }}>
            Seus dados são processados com segurança e nunca armazenados fora do Econome.
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 420px) {
          .import-mockup-grid { grid-template-columns: 1fr !important; }
          .import-mockup-grid > div:first-child { display: none !important; }
        }
      `}</style>
    </div>
  );
}

window.AIImportSection = AIImportSection;