// Seção "Importação com IA" (home-v3) — reescreve ai-import.jsx por inteiro
// (texto + mockup), para bater com a referência que o Daniel mandou: bloco
// roxo full-bleed com texto à esquerda ("Importe sua fatura ou extrato com
// ajuda da IA.", lista "No Econome você pode importar:") e, à direita, o
// mockup do app (moldura de celular) com o MESMO fluxo animado em loop já
// descrito em G:\Meu Drive\__econome\animacoes\econome-importar.html (idle →
// lendo → analisando com IA → preview com itens revelados um a um →
// confirmar → salvando → concluído).
// Sobrescreve window.AIImportSection inteiro (não só o mockup) — a primeira
// tentativa só trocou o mockup e manteve o texto/fundo antigos de
// ai-import.jsx, o que não batia nem perto com a referência.

// Categorias conferidas contra a lista padrão real (bootstrap-household/
// route.ts) — "Restaurante" não é categoria (vira Alimentação) e "Lazer"
// sozinho também não existe (é "Lazer e Entretenimento", como no resto do
// site, ex.: PhoneMesAtual em phone-screens.jsx).
const IMPORT_ITEMS = [
  ['Supermercado', '05/08/2026', '🛒', 'Supermercado', '180,00'],
  ['Farmácia', '08/08/2026', '❤️', 'Saúde', '60,00'],
  ['Restaurante', '12/08/2026', '🍴', 'Alimentação', '90,00'],
  ['Uber', '15/08/2026', '🚌', 'Transporte', '30,00'],
  ['Spotify', '18/08/2026', '🔖', 'Assinaturas', '20,00'],
  ['Cinema', '22/08/2026', '🎮', 'Lazer e Entretenimento', '40,00'],
];

// Textos exatos do estágio "Analisando" no app real (ImportPage.tsx), em
// ciclo — a demo antiga só tinha um texto fixo ("Analisando com IA…").
const ANALYZE_STAGES = [
  'Analisando os lançamentos…',
  'Conciliando com o que você já tem…',
  'Preparando a revisão…',
];

const IMPORT_WHAT = [
  { icon: 'Bank', label: 'Extratos bancários' },
  { icon: 'Card', label: 'Faturas de cartão' },
  { icon: 'Calculator', label: 'Planilhas de gastos' },
  { icon: 'FileText', label: 'Formatos de arquivos: .xlsx, .xls, .csv e .pdf' },
];

const IMPORT_INITIAL_STATE = {
  stage: 'idle', // idle | loading | preview | saving | done
  loadingPhase: 'reading', // reading | analyzing
  analyzeStage: 0,
  revealBanner: false, revealTipo: false, revealSummary: false, revealNovos: false,
  itemsShown: 0, revealParceladas: false, revealRecorrentes: false, revealDups: false,
  revealActions: false, confirmPressing: false,
  revealDoneIcon: false, revealDoneTxt: false, revealDoneInfo: false, revealDoneBtn: false,
};

// Fluxo real (confirmado em ImportPage.tsx/ReconcilePreview.tsx do app): a
// tela de confirmação agrupa os lançamentos em ATÉ 4 boxes — não só "Novos
// lançamentos"/"Já registrados" como a 1ª versão da demo mostrava — e o
// texto de "analisando" cicla por 3 frases, não fica fixo.
const IMPORT_SCRIPT = [
  [0,     () => ({ ...IMPORT_INITIAL_STATE })],
  [1400,  s => ({ ...s, stage: 'loading', loadingPhase: 'reading' })],
  [2600,  s => ({ ...s, loadingPhase: 'analyzing', analyzeStage: 0 })],
  [3950,  s => ({ ...s, analyzeStage: 1 })],
  [5300,  s => ({ ...s, analyzeStage: 2 })],
  [6650,  s => ({ ...s, stage: 'preview', revealBanner: true })],
  [7250,  s => ({ ...s, revealTipo: true })],
  [7850,  s => ({ ...s, revealSummary: true })],
  [8450,  s => ({ ...s, revealNovos: true, itemsShown: 1 })],
  [8750,  s => ({ ...s, itemsShown: 2 })],
  [9050,  s => ({ ...s, itemsShown: 3 })],
  [9350,  s => ({ ...s, itemsShown: 4 })],
  [9650,  s => ({ ...s, itemsShown: 5 })],
  [9950,  s => ({ ...s, itemsShown: 6 })],
  [10450, s => ({ ...s, revealParceladas: true })],
  [10950, s => ({ ...s, revealRecorrentes: true })],
  [11450, s => ({ ...s, revealDups: true })],
  [11950, s => ({ ...s, revealActions: true })],
  [12950, s => ({ ...s, confirmPressing: true })],
  [13150, s => ({ ...s, confirmPressing: false, stage: 'saving' })],
  [14350, s => ({ ...s, stage: 'done', revealDoneIcon: true })],
  [14600, s => ({ ...s, revealDoneTxt: true })],
  [14850, s => ({ ...s, revealDoneInfo: true })],
  [15100, s => ({ ...s, revealDoneBtn: true })],
];
const IMPORT_CYCLE_MS = 17000;

function useImportScript() {
  const [state, setState] = React.useState(IMPORT_INITIAL_STATE);
  React.useEffect(() => {
    const timers = [];
    function runCycle() {
      IMPORT_SCRIPT.forEach(([at, update]) => {
        timers.push(setTimeout(() => setState(update), at));
      });
      timers.push(setTimeout(runCycle, IMPORT_CYCLE_MS));
    }
    runCycle();
    return () => timers.forEach(clearTimeout);
  }, []);
  return state;
}

function ImportAnimatedMockup() {
  const state = useImportScript();
  const isIdle = state.stage === 'idle';
  const isLoading = state.stage === 'loading';
  const isPreview = state.stage === 'preview';
  const isSaving = state.stage === 'saving';
  const isDone = state.stage === 'done';

  // A lista de lançamentos não cabe inteira na tela — sem isso, os itens iam
  // só aparecendo fora da área visível. Acompanha o conteúdo revelado
  // (banner/tipo/resumo/itens/boxes/ações) rolando a tela pra baixo aos
  // poucos, como no vídeo de referência (G:\Meu Drive\__econome\animacoes\
  // econome-importar.html), e volta ao topo quando o ciclo reinicia.
  const phoneWrapRef = React.useRef(null);
  React.useEffect(() => {
    const scrollEl = phoneWrapRef.current && phoneWrapRef.current.querySelector('.scroll');
    if (!scrollEl) return;
    if (state.stage === 'idle' || state.stage === 'loading' || state.stage === 'saving' || state.stage === 'done') {
      scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
    } else if (state.stage === 'preview') {
      scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'smooth' });
    }
  }, [
    state.stage, state.revealBanner, state.revealTipo, state.revealSummary,
    state.revealNovos, state.itemsShown, state.revealParceladas,
    state.revealRecorrentes, state.revealDups, state.revealActions,
  ]);

  return (
    // Moldura própria (mockup-roxo.svg, desenhada pelo Daniel) em vez da
    // moldura de phone-screens.jsx — SVG fica por baixo (z-index 0) como
    // contorno fino + ícones de status já desenhados nele; header e corpo
    // brancos ficam por cima, "encaixados" no recorte da tela via % do
    // viewBox (415x835) do SVG. Reaproveita as classes de .aps-import
    // (imp-body, dropzone, loading, card etc.) — só a moldura mudou.
    <div className="aps aps-import ipf-root" ref={phoneWrapRef}>
      <img src="assets/mockup-roxo.svg" alt="" aria-hidden="true" className="ipf-frame" />
      <div className="ipf-appbar">
        <div className="logo"><PhoneLogo dark={true} /></div>
        <div className="right">
          <div className="greet">Boa noite, Maria!</div>
          <div className="avatar">M</div>
        </div>
      </div>
      <div className="ipf-body-wrap">
        <div className="scroll no-scrollbar">
        <div className="imp-body">
          <div className="imp-eye"><span className="ms">upload_file</span> Importar dados</div>
          <div className="imp-h1">Transforme seus arquivos em registros organizados.</div>
          <p className="imp-desc">
            Importe faturas, extratos ou planilhas para começar mais rápido, atualizar lançamentos
            pendentes ou completar meses anteriores. A IA lê o documento e o Econome confere cada
            lançamento com o que você já tem: separa <b>gastos do mês</b>, <b>parcelas</b> e{' '}
            <b>despesas recorrentes</b>, e avisa o que já está registrado — sem duplicar.
          </p>

          <div className="flow">
            {isIdle && (
              <div className="dropzone fade-in">
                <div className="dz-ic"><span className="ms">upload_file</span></div>
                <div>
                  <div className="dz-t">Arraste seu arquivo aqui</div>
                  <div className="dz-s">ou clique para selecionar</div>
                </div>
                <div className="dz-pill">.xlsx · .xls · .csv · .pdf · até 10 MB</div>
              </div>
            )}

            {isLoading && (
              <div className="loading fade-in">
                <div className="load-ic"><span className="ms">{state.loadingPhase === 'reading' ? 'folder_open' : 'psychology'}</span></div>
                <div>
                  <div className="load-t" key={state.loadingPhase === 'reading' ? 'reading' : state.analyzeStage}>
                    {state.loadingPhase === 'reading' ? 'Lendo a planilha…' : ANALYZE_STAGES[state.analyzeStage]}
                  </div>
                  {state.loadingPhase === 'analyzing' && <div className="load-s">extrato-agosto.csv</div>}
                </div>
                {state.loadingPhase === 'analyzing' && (
                  <p className="load-hint">A IA está extraindo os lançamentos e conferindo com o que você já tem. Pode levar alguns segundos.</p>
                )}
              </div>
            )}

            {isPreview && (
              <>
                {state.revealBanner && (
                  <div className="banner fade-in">
                    <span className="ms">auto_awesome</span>
                    <div><div className="k">Formato detectado</div><div className="v">Lista de transações com data (CSV com colunas Data, Descrição, Valor)</div></div>
                  </div>
                )}

                {state.revealTipo && (
                  <div className="card tipo fade-in">
                    <div className="lbl">Tipo de documento <span>(ajuste se a detecção estiver errada)</span></div>
                    <div className="segs">
                      <div className="seg off"><span className="ms">credit_card</span> Fatura de cartão</div>
                      <div className="seg on"><span className="ms">account_balance</span> Extrato / planilha</div>
                    </div>
                    <div className="hint">Os novos lançamentos entram como importados do extrato/planilha.</div>
                  </div>
                )}

                {state.revealSummary && (
                  <div className="card summary fade-in">
                    <div className="top">
                      <div className="lidos">11 lançamentos lidos</div>
                      <div><div className="total">R$ 2.370,00</div><div className="sel">9 selecionados</div></div>
                    </div>
                    <div className="rev">Revise os boxes abaixo. Cada item pode ser incluído/excluído e ter a categoria ajustada.</div>
                  </div>
                )}

                {state.revealNovos && (
                  <div className="box fade-in">
                    <div className="box-head">
                      <div className="box-chip" style={{ background: 'rgba(106,13,173,.1)' }}><span className="ms" style={{ color: 'var(--purple)' }}>shopping_bag</span></div>
                      <div style={{ flex: 1 }}><div className="box-title">Novos lançamentos</div><div className="box-sub">{state.itemsShown} de 6 selecionados · R$ 420,00</div></div>
                      <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_less</span>
                    </div>
                    <div className="box-body">
                      <div className="box-hint">Lançamentos novos — entram no mês da data informada.</div>
                      {IMPORT_ITEMS.slice(0, state.itemsShown).map(([nm, dt, emoji, cat, val]) => (
                        <div key={nm} className="irow fade-in">
                          <span className="cbox"><span className="ms">check</span></span>
                          <div className="mid">
                            <div className="nm">{nm}</div>
                            <div className="dt">{dt}</div>
                            <div className="selpill"><span>{emoji}</span><span className="cat">{cat}</span><span className="ms">expand_more</span></div>
                          </div>
                          <span className="val">R$ {val}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* As outras 2 categorias (Compras parceladas / Despesas
                    recorrentes) existem na tela real (ReconcilePreview.tsx) e
                    faltavam na 1ª versão da demo — aqui aparecem recolhidas,
                    só com contagem/total, pra não sobrecarregar a animação. */}
                {state.revealParceladas && (
                  <div className="box fade-in">
                    <div className="box-head collapsed">
                      <div className="box-chip" style={{ background: 'rgba(8,145,178,.1)' }}><span className="ms" style={{ color: 'var(--cyan)' }}>view_module</span></div>
                      <div style={{ flex: 1 }}><div className="box-title">Compras parceladas</div><div className="box-sub">1 de 1 selecionados · R$ 300,00</div></div>
                      <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_more</span>
                    </div>
                  </div>
                )}

                {state.revealRecorrentes && (
                  <div className="box fade-in">
                    <div className="box-head collapsed">
                      <div className="box-chip" style={{ background: 'rgba(245,158,11,.12)' }}><span className="ms" style={{ color: 'var(--warning)' }}>repeat</span></div>
                      <div style={{ flex: 1 }}><div className="box-title">Despesas recorrentes</div><div className="box-sub">2 de 2 selecionados · R$ 1.650,00</div></div>
                      <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_more</span>
                    </div>
                  </div>
                )}

                {state.revealDups && (
                  <div className="box fade-in">
                    <div className="box-head collapsed">
                      <div className="box-chip" style={{ background: 'rgba(156,163,175,.15)' }}><span className="ms" style={{ color: 'var(--gray)' }}>done_all</span></div>
                      <div style={{ flex: 1 }}><div className="box-title">Já registrados</div><div className="box-sub">0 de 2 selecionados</div></div>
                      <span className="ms" style={{ color: 'var(--ink-2)' }}>expand_more</span>
                    </div>
                  </div>
                )}

                {state.revealActions && (
                  <div className="actions fade-in">
                    <div className="btn-cancel">Cancelar</div>
                    <div className={`btn-confirm ${state.confirmPressing ? 'press' : ''}`}>Confirmar 9 lançamentos</div>
                  </div>
                )}
              </>
            )}

            {isSaving && (
              <div className="loading fade-in">
                <div className="load-ic"><span className="ms">cloud_upload</span></div>
                <div className="load-t">Salvando lançamentos…</div>
              </div>
            )}

            {isDone && (
              <div className="done">
                {state.revealDoneIcon && <div className="done-ic fade-in"><span className="ms">check_circle</span></div>}
                {state.revealDoneTxt && (
                  <div className="fade-in">
                    <div className="done-t">Importação concluída!</div>
                    <div className="done-s">9 lançamentos adicionados</div>
                  </div>
                )}
                {state.revealDoneInfo && (
                  <div className="done-info fade-in">
                    <span className="ms">category</span> As transações sem categoria aparecem no dashboard para você organizar.
                  </div>
                )}
                {state.revealDoneBtn && <div className="done-btn fade-in">Ver no dashboard</div>}
              </div>
            )}
          </div>
        </div>
        </div>
      </div>

      <style>{`
        /* Moldura própria (mockup-roxo.svg): fica por baixo (z-index 0) —
           é só o contorno fino + ícones de status já desenhados nela; o
           header e o corpo brancos (z-index 1, acima) é que têm fundo
           opaco, então o roxo da moldura aparece atrás do texto do header e
           o anel fino sobra visível na margem ao redor do corpo branco.
           Percentuais calculados a partir do viewBox do SVG (415x835). */
        .ipf-root { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 415 / 835; }
        .ipf-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
        /* O SVG só desenha a status bar (9:41 + ícones, até 7% de altura) —
           a linha do logo/saudação é nossa, num roxo liso continuando
           direto da status bar (mesma cor, sem raio, emenda sem costura). */
        .ipf-appbar {
          position: absolute; z-index: 1;
          top: 7%; left: 3.2%; right: 4.2%; height: 8%;
          background: var(--purple);
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 18px;
        }
        .ipf-appbar .logo { display: flex; align-items: center; }
        .ipf-appbar .right { display: flex; align-items: center; gap: 10px; }
        .ipf-appbar .greet { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
        .ipf-appbar .avatar {
          width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff;
          display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0;
        }
        .ipf-body-wrap {
          position: absolute; z-index: 1;
          top: 15%; left: 3.2%; right: 4.2%; bottom: 1.7%;
          background: var(--surface);
          border-bottom-left-radius: 14% 7%;
          border-bottom-right-radius: 14% 7%;
          overflow: hidden;
          display: flex; flex-direction: column;
        }
        .ipf-body-wrap .imp-body { padding-bottom: 28px; }

        .aps-import .fade-in { animation: fadeUp 0.4s ease-out both; }

        .aps-import .dropzone { border: 2px dashed rgba(106,13,173,.3); border-radius: 20px; padding: 34px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .aps-import .dz-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(106,13,173,.1); display: flex; align-items: center; justify-content: center; }
        .aps-import .dz-ic .ms { font-size: 30px; color: var(--purple); }
        .aps-import .dz-t { font-size: 15px; font-weight: 700; text-align: center; color: var(--ink); }
        .aps-import .dz-s { font-size: 13px; color: var(--ink-2); text-align: center; margin-top: 2px; }
        .aps-import .dz-pill { font-size: 12px; color: var(--ink-2); background: var(--surface-2); padding: 6px 12px; border-radius: 999px; }

        .aps-import .loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px 0; text-align: center; }
        .aps-import .load-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(106,13,173,.1); display: flex; align-items: center; justify-content: center; animation: impPulse 1.1s ease-in-out infinite; }
        .aps-import .load-ic .ms { font-size: 30px; color: var(--purple); }
        @keyframes impPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }
        .aps-import .load-t { font-size: 15px; font-weight: 700; color: var(--ink); }
        .aps-import .load-s { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
        .aps-import .load-hint { font-size: 12px; color: var(--ink-2); max-width: 280px; line-height: 1.5; }

        .aps-import .btn-confirm { transition: transform 0.12s, filter 0.12s; }
        .aps-import .btn-confirm.press { transform: scale(0.97); filter: brightness(0.95); }

        .aps-import .done { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 0; text-align: center; }
        .aps-import .done-ic { width: 80px; height: 80px; border-radius: 50%; background: rgba(76,175,80,.12); display: flex; align-items: center; justify-content: center; }
        .aps-import .done-ic .ms { font-size: 44px; color: var(--success); }
        .aps-import .done-t { font-size: 20px; font-weight: 800; color: var(--ink); }
        .aps-import .done-s { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
        .aps-import .done-info { background: rgba(106,13,173,.05); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--purple); display: flex; align-items: center; gap: 8px; text-align: left; }
        .aps-import .done-info .ms { font-size: 16px; color: var(--purple); flex-shrink: 0; }
        .aps-import .done-btn { width: 100%; padding: 14px; background: var(--purple); color: #fff; font-weight: 700; border-radius: 12px; font-size: 15px; text-align: center; margin-top: 4px; }
      `}</style>
    </div>
  );
}

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: 'Importe registros de meses anteriores e acompanhe como suas finanças evoluíram.' },
    { 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">
      <div className="import-hero">
        <div className="container">
          <div className="import-grid">
            <div className="import-copy">
              <div className="eyebrow"><span className="dot" />Inteligência sem invasão</div>
              <h2>
                Importe sua fatura ou extrato{' '}
                <span className="import-highlight">com ajuda da IA.</span>
              </h2>
              <p className="import-lead">
                Envie o arquivo e o Econome transforma os gastos e recebimentos em registros
                organizados. Sem pedir acesso à sua conta bancária.
              </p>

              <div className="import-what-label">No Econome você pode importar:</div>
              <div className="import-what-list">
                {IMPORT_WHAT.map((it) => {
                  const I = Icon[it.icon];
                  return (
                    <div className="import-what-row" key={it.label}>
                      <span className="import-what-ic"><I size={16} color="#fff" /></span>
                      {it.label}
                    </div>
                  );
                })}
              </div>
            </div>

            <ImportAnimatedMockup />
          </div>

          {/* Dentro do mesmo bloco roxo (não mais solto embaixo, nem só
              encostado na borda) — cards com fundo translúcido, já que o
              branco opaco original era pensado pra ficar sobre fundo claro. */}
          <div className="import-benefits-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 16,
            marginTop: 56,
          }}>
            {benefits.map(b => {
              const I = Icon[b.icon];
              return (
                <div key={b.title} className="import-benefit-card">
                  <div className="import-benefit-ic">
                    <I size={18} color="#fff" />
                  </div>
                  <h3>{b.title}</h3>
                  <p>{b.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <style>{`
        /* #importacao herdava o padding:96px 0 do <section> global, mas
           .import-hero é full-bleed (até a borda da seção) e já tem o
           próprio padding interno — isso deixava uma faixa cream vazia
           acima E abaixo do bloco roxo. Zera o padding da seção, só o
           bloco interno controla o respiro. */
        #importacao { padding: 0; }

        .import-hero {
          background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 55%, var(--purple-darker) 100%);
          padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px);
        }
        .import-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 56px;
          align-items: center;
        }
        .import-copy h2 {
          font-size: clamp(30px, 4.2vw, 44px);
          margin: 20px 0 16px;
          color: #fff;
          line-height: 1.15;
        }
        .import-highlight { color: var(--green); }
        .import-lead { font-size: 17px; color: rgba(255,255,255,0.78); line-height: 1.6; margin-bottom: 28px; }
        .import-what-label { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 14px; }
        /* width: fit-content na lista + align-items: stretch nas linhas —
           a lista encolhe até a largura da linha mais larga (o item mais
           comprido), e todas as outras esticam para IGUALAR essa largura,
           em vez de cada uma abraçar só o próprio texto (bordas desalinhadas)
           ou esticar até a coluna inteira (vazio enorme depois do texto). */
        .import-what-list { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: fit-content; max-width: 100%; }
        .import-what-row {
          display: flex; align-items: center; gap: 12px;
          background: rgba(255,255,255,0.08);
          border-radius: 14px;
          padding: 11px 18px 11px 11px;
          color: #fff; font-size: 14.5px; font-weight: 500;
          white-space: nowrap;
        }
        .import-what-ic {
          width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
          background: rgba(255,255,255,0.12);
          display: flex; align-items: center; justify-content: center;
        }

        /* Cards dos benefícios — agora dentro do bloco roxo, então usam o
           mesmo tratamento translúcido do resto da seção (não mais cards
           brancos opacos, pensados pra um fundo claro). */
        .import-benefit-card {
          background: rgba(255,255,255,0.08);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: var(--radius-xl);
          padding: 24px;
        }
        .import-benefit-ic {
          width: 40px; height: 40px; border-radius: 10px;
          background: rgba(255,255,255,0.14);
          display: flex; align-items: center; justify-content: center;
          margin-bottom: 16px;
        }
        .import-benefit-card h3 { font-size: 16.5px; margin-bottom: 6px; color: #fff; }
        .import-benefit-card p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.5; }

        @media (max-width: 880px) {
          .import-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          /* Sem espaço lateral sobrando pra "casar" com a mais larga — no
             mobile a lista ocupa a coluna toda e o texto quebra normalmente. */
          .import-what-list { width: 100%; }
          .import-what-row { white-space: normal; }
        }
        @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>
  );
}

window.AIImportSection = AIImportSection;