// HowSection da home-v3 — troca a seção "Feito para facilitar". O card
// "Registra fácil" sai do grid de 3 e vira sua própria seção grande, em 3
// colunas (texto | widget | card de resultado), com uma reprodução FIEL do
// QuickEntryForm real do app (cores, abas, toggles, textos — checado contra
// C:\Users\conta\Projects\econome\components\dashboard\QuickEntryForm.tsx)
// e uma animação automática simulando o registro de um gasto e de uma
// entrada, incluindo a tag de cada um.
// "Entende rápido" e "Planeja melhor" continuam, agora num grid de 2.
// Carregado DEPOIS de how.jsx; sobrescreve window.HowSection.

// Cores exatas do widget real (diferentes da marca do site — var(--purple)
// aqui é #7010B0, o app usa #8914DD/#4A1D96).
const WIDGET_PURPLE = '#8914DD';
const WIDGET_PURPLE_DARK = '#4A1D96';

// Lista de pagamento própria da demo (nomeada, tipo conta real — diferente
// do "Pix" genérico de widget-demo.jsx) — maior que as 2 opções de antes.
// O ícone de Pix ficou errado em 2 tentativas; trocado por Cartão de Crédito
// Nubank, que usa o Icon.Card já existente (sem SVG customizado).
const PAGAMENTOS_DEMO = [
  { id: 'nubank', label: 'Cartão de Crédito Nubank', icon: 'Card' },
  { id: 'debito', label: 'Cartão de débito', icon: 'Card' },
  { id: 'dinheiro', label: 'Dinheiro', icon: 'Wallet' },
  { id: 'transferencia', label: 'Transferência bancária', icon: 'Bank' },
];

// Revelação em 2 tempos (pedido explícito): o box de resultado aparece
// primeiro com o valor/estado ANTERIOR ao registro, e só depois "atualiza"
// (soma do Gastei, nova linha Pontual no Recebi) — não já nasce pronto.
const DEMO_SCRIPT = [
  [0,     s => ({ ...s, tab: 'gastei', valor: '', pagamento: null, categoria: null, desc: '', tagOn: false, recorrente: false, parcelada: false, submitting: false, success: false, openPag: false, openCat: false, gasteiDone: false, recebiDone: false, gasteiStage: 'old', recebiStage: 'salaryOnly', pulseGastei: false, pulseRecebi: false })],
  [600,   s => ({ ...s, valor: '162,50' })],
  [1500,  s => ({ ...s, openPag: true })],
  [2200,  s => ({ ...s, pagamento: 'nubank' })],
  [2600,  s => ({ ...s, openPag: false })],
  [3000,  s => ({ ...s, openCat: true })],
  [3700,  s => ({ ...s, categoria: 'mercado' })],
  [4100,  s => ({ ...s, openCat: false })],
  [4500,  s => ({ ...s, desc: 'Mercado do Bairro' })],
  [5300,  s => ({ ...s, tagOn: true })],
  [6100,  s => ({ ...s, submitting: true })],
  // Aperta o botão -> box aparece já, mas ainda com o valor ANTIGO (650,00 / 3 compras).
  [6400,  s => ({ ...s, submitting: false, success: true, gasteiDone: true })],
  // ...e só então o valor atualiza (812,50 / 4 compras), com destaque.
  [7600,  s => ({ ...s, gasteiStage: 'new', pulseGastei: true })],
  [8600,  s => ({ ...s, pulseGastei: false })],
  [9000,  s => ({ ...s, success: false, valor: '', pagamento: null, categoria: null, desc: '', tagOn: false, tab: 'recebi' })],
  [9600,  s => ({ ...s, valor: '400,00' })],
  [10600, s => ({ ...s, desc: 'Trabalho freelance' })],
  [11400, s => ({ ...s, tagOn: true })],
  [12200, s => ({ ...s, submitting: true })],
  // Box aparece só com o Salário (recorrente) primeiro...
  [12500, s => ({ ...s, submitting: false, success: true, recebiDone: true })],
  // ...e a entrada pontual (freelance) entra depois, somando ao total.
  [13700, s => ({ ...s, recebiStage: 'full', pulseRecebi: true })],
  [14700, s => ({ ...s, pulseRecebi: false })],
  [15200, s => ({ ...s, success: false, valor: '', desc: '', tagOn: false })],
];
const CYCLE_MS = 16500;

const GASTEI_BASE = 650;
const GASTEI_BASE_COUNT = 3;
const GASTEI_ADD = 162.5;
const RECEBI_RECORRENTE = 6100;
const RECEBI_ADD = 400;

const INITIAL_STATE = {
  tab: 'gastei', valor: '', pagamento: null, categoria: null, desc: '', tagOn: false,
  recorrente: false, parcelada: false, openPag: false, openCat: false, submitting: false, success: false,
  pulseGastei: false, pulseRecebi: false, gasteiDone: false, recebiDone: false,
  gasteiStage: 'old', recebiStage: 'salaryOnly',
};

function formatBRLSimple(n) {
  return n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function useDemoScript() {
  const [state, setState] = React.useState(INITIAL_STATE);
  React.useEffect(() => {
    const timers = [];
    function runCycle() {
      DEMO_SCRIPT.forEach(([at, update]) => {
        timers.push(setTimeout(() => setState(update), at));
      });
      timers.push(setTimeout(runCycle, CYCLE_MS));
    }
    runCycle();
    return () => timers.forEach(clearTimeout);
  }, []);
  return state;
}

// Ícones que não existem no set compartilhado (components/icons.jsx) —
// só pra esse widget, aproximando os Material Symbols do app real.
function CalendarIcon({ size = 16, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <path d="M8 3v4M16 3v4M3 10h18" />
    </svg>
  );
}
function TuneIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
      <path d="M4 6h10M18 6h2M4 18h2M10 18h10M4 12h16" />
      <circle cx="16" cy="6" r="2" fill={color} stroke="none" />
      <circle cx="8" cy="18" r="2" fill={color} stroke="none" />
    </svg>
  );
}
function AutoEntryWidget({ state }) {
  const isGastei = state.tab === 'gastei';
  const catLabel = state.categoria === 'mercado' ? 'Supermercado' : 'Categoria...';

  return (
    <div className="auto-widget">
      <div className="auto-widget-tabs">
        <div className={`auto-widget-tab ${isGastei ? 'active' : ''}`}>Gastei</div>
        <div className={`auto-widget-tab ${!isGastei ? 'active' : ''}`}>Recebi</div>
        <div className="auto-widget-tab">Paguei fatura</div>
      </div>

      <div className="auto-widget-row">
        <div className="auto-widget-field" style={{ flex: 1 }}>
          <span className={state.valor ? '' : 'placeholder'}>
            {state.valor || (isGastei ? 'Valor Gasto...' : 'Valor Recebido')}
          </span>
          {!state.valor && <span className="auto-widget-caret" />}
        </div>
        <div className="auto-widget-today"><CalendarIcon size={15} color="#fff" /> Hoje</div>
      </div>

      {isGastei && (
        <>
          <div className="auto-widget-row">
            <div className="auto-widget-field auto-widget-select" style={{ flex: 1, position: 'relative' }}>
              <span className="auto-widget-ic"><Icon.Card size={16} color={WIDGET_PURPLE} /></span>
              <span className={state.pagamento ? '' : 'placeholder'}>{state.pagamento === 'nubank' ? 'Cartão de Crédito Nubank' : 'Pago com...'}</span>
              <Icon.ChevronDown size={14} color="var(--ink-3)" style={{ marginLeft: 'auto', flexShrink: 0, transform: state.openPag ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
              {state.openPag && (
                <div className="auto-widget-menu">
                  {PAGAMENTOS_DEMO.map(p => {
                    const picked = state.pagamento === 'nubank' && p.id === 'nubank';
                    const PagI = Icon[p.icon];
                    return (
                      <div key={p.id} className={`auto-widget-menu-item ${picked ? 'picked' : ''}`}>
                        <span className="auto-widget-ic"><PagI size={13} color={WIDGET_PURPLE} /></span>
                        {p.label}
                        {picked && <Icon.Check size={12} color={WIDGET_PURPLE} style={{ marginLeft: 'auto', flexShrink: 0 }} />}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="auto-widget-tune"><TuneIcon size={15} color="#fff" /></div>
          </div>

          <div className="auto-widget-row">
            <div className="auto-widget-field auto-widget-select" style={{ flex: 1, position: 'relative' }}>
              <span className="auto-widget-ic"><Icon.Cart size={16} color={WIDGET_PURPLE} /></span>
              <span className={state.categoria ? '' : 'placeholder'}>{catLabel}</span>
              <Icon.ChevronDown size={14} color="var(--ink-3)" style={{ marginLeft: 'auto', flexShrink: 0, transform: state.openCat ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
              {state.openCat && (
                <div className="auto-widget-menu">
                  {CATEGORIAS.map(c => {
                    const CatI = Icon[c.icon];
                    const picked = state.categoria === 'mercado' && c.id === 'mercado';
                    return (
                      <div key={c.id} className={`auto-widget-menu-item ${picked ? 'picked' : ''}`}>
                        <span className="auto-widget-ic"><CatI size={13} color={WIDGET_PURPLE} /></span>
                        {c.label}
                        {picked && <Icon.Check size={12} color={WIDGET_PURPLE} style={{ marginLeft: 'auto', flexShrink: 0 }} />}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="auto-widget-tune"><TuneIcon size={15} color="#fff" /></div>
          </div>
        </>
      )}

      <div className="auto-widget-field">
        {state.tagOn && state.desc ? (
          <span className="auto-widget-tag-pill">{state.desc} <Icon.X size={10} color={WIDGET_PURPLE} /></span>
        ) : (
          <span className={state.desc ? '' : 'placeholder'}>
            {state.desc || (isGastei ? "Descrição (ex: Almoço, McDonald's...)" : 'Descrição (ex: Salário)')}
          </span>
        )}
      </div>
      <p className="auto-widget-caption">
        Digite para lembrar o {isGastei ? 'gasto' : 'recebimento'}. Aperte <strong>Enter</strong> (ou escolha da lista)
        para salvar como <strong>tag</strong> e agrupar no gráfico.
      </p>

      {isGastei ? (
        <div className="auto-widget-toggles">
          <div className="auto-widget-toggle">
            <span className={`auto-widget-switch ${state.recorrente ? 'on' : ''}`}><span className="knob" /></span>
            Salvar como Despesa Recorrente
          </div>
          <div className="auto-widget-toggle">
            <span className={`auto-widget-switch ${state.parcelada ? 'on' : ''}`}><span className="knob" /></span>
            Salvar como compra parcelada
          </div>
        </div>
      ) : (
        <div className="auto-widget-toggles">
          <div className="auto-widget-toggle">
            <span className={`auto-widget-switch ${state.recorrente ? 'on' : ''}`}><span className="knob" /></span>
            Salvar como Entrada Recorrente
          </div>
        </div>
      )}

      <button className={`auto-widget-cta ${state.submitting ? 'pressing' : ''}`}>
        {state.success ? <><Icon.Check size={15} color="#fff" /> Registrado!</> : (isGastei ? 'Registrar Gasto' : 'Registrar Entrada')}
      </button>

      <style>{`
        /* altura natural (não fixa) — a altura da seção fica estável pelo
           .auto-widget-slot (reserva o espaço fora do roxo), não aqui dentro. */
        .auto-widget {
          background: ${WIDGET_PURPLE}; border-radius: 22px; padding: 16px; width: 100%; box-sizing: border-box;
          user-select: none;
        }
        .auto-widget-tabs { display: flex; margin-bottom: 14px; }
        .auto-widget-tab { flex: 1; text-align: center; padding: 10px 4px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.6); transition: all 0.25s; }
        .auto-widget-tab.active { background: ${WIDGET_PURPLE_DARK}; color: #fff; }
        .auto-widget-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
        .auto-widget-field {
          /* altura fixa (não padding+conteúdo) — o pill da tag é mais alto
             que o texto simples; sem isso o campo "crescia" ao virar tag. */
          background: #fff; border-radius: 12px; padding: 0 14px; font-size: 14px; font-weight: 500;
          color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
          height: 44px; box-sizing: border-box;
        }
        .auto-widget-row .auto-widget-field { margin-bottom: 0; }
        .auto-widget-field .placeholder { color: var(--ink-4); font-weight: 400; }
        .auto-widget-caret { width: 1.5px; height: 15px; background: var(--ink-3); animation: blink 1s step-end infinite; }
        @keyframes blink { 50% { opacity: 0; } }
        .auto-widget-today {
          flex-shrink: 0; background: rgba(255,255,255,0.18); border-radius: 12px; padding: 13px 14px;
          font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px;
        }
        .auto-widget-tune {
          flex-shrink: 0; width: 44px; background: rgba(255,255,255,0.15); border-radius: 12px;
          display: flex; align-items: center; justify-content: center;
        }
        .auto-widget-ic { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 18px; height: 18px; }
        .auto-widget-select { position: relative; }
        .auto-widget-menu {
          position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: 12px;
          padding: 6px; box-shadow: 0 12px 24px rgba(0,0,0,0.18); z-index: 5; animation: fadeUp 0.2s ease-out both;
          max-height: 220px; overflow-y: auto;
        }
        .auto-widget-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
        .auto-widget-menu-item.picked { background: #F5EBFA; }
        .auto-widget-tag-pill {
          display: inline-flex; align-items: center; gap: 6px; background: rgba(137,20,221,0.1); color: ${WIDGET_PURPLE};
          padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; animation: fadeUp 0.25s ease-out both;
        }
        .auto-widget-caption { font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 0 2px 10px; }
        .auto-widget-caption strong { color: rgba(255,255,255,0.85); }
        .auto-widget-toggles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
        .auto-widget-toggle { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 600; }
        .auto-widget-switch { width: 36px; height: 20px; border-radius: 999px; background: ${WIDGET_PURPLE_DARK}; position: relative; flex-shrink: 0; transition: background 0.2s; }
        .auto-widget-switch.on { background: #50D080; }
        .auto-widget-switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; }
        .auto-widget-switch.on .knob { left: 18px; }
        .auto-widget-cta {
          width: 100%; background: #50D080; color: #fff; padding: 13px; border-radius: 12px; font-size: 14.5px;
          font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px;
          box-shadow: 0 4px 12px rgba(80,208,128,0.4); transition: transform 0.15s;
        }
        .auto-widget-cta.pressing { transform: scale(0.96); }
      `}</style>
    </div>
  );
}

// A ALTURA DA SEÇÃO NÃO PODE MUDAR — é requisito travado (empurra o conteúdo
// abaixo na página, mesmo animando suave). O slot reserva a altura do Gastei
// (o estado mais alto) SEMPRE, fixa, sem JS/ResizeObserver. No Recebi (mais
// curto) o widget fica centralizado nela (.registra-facil-grid tem
// align-items:center) — a sobra existe, mas dividida em cima e embaixo do
// box roxo, em vez de um vão feio só de um lado.
function AutoEntryWidgetSlot({ state }) {
  return (
    <div className="auto-widget-slot">
      <AutoEntryWidget state={state} />
    </div>
  );
}

function ResultCard({ state }) {
  const isGastei = state.tab === 'gastei';
  // Os dois cards só aparecem depois que a operação deles termina — antes
  // disso fica vazio (altura reservada pra não "empurrar" o layout).
  const show = isGastei ? state.gasteiDone : state.recebiDone;
  // Revelação em 2 tempos: o box nasce com o valor/estado ANTERIOR ao
  // registro e só "atualiza" num segundo momento (pulseGastei/pulseRecebi
  // marcam esse instante da atualização, não só o do primeiro aparecimento).
  const gasteiIsNew = state.gasteiStage === 'new';
  const gasteiTotal = gasteiIsNew ? GASTEI_BASE + GASTEI_ADD : GASTEI_BASE;
  const gasteiCount = gasteiIsNew ? GASTEI_BASE_COUNT + 1 : GASTEI_BASE_COUNT;
  const recebiIsFull = state.recebiStage === 'full';
  const recebiTotal = recebiIsFull ? RECEBI_RECORRENTE + RECEBI_ADD : RECEBI_RECORRENTE;

  return (
    <div className={`result-card-wrap ${show ? '' : 'empty'}`}>
      {show && (isGastei ? (
        <div className={`result-card tag-result ${state.pulseGastei ? 'pulse' : ''}`}>
          <span className="tag-result-icon"><Icon.Cart size={15} color={WIDGET_PURPLE} /></span>
          <span className="tag-result-label">Supermercado ({gasteiCount})</span>
          <span key={state.gasteiStage} className={`tag-result-value ${state.pulseGastei ? 'flash' : ''}`}>R$ {formatBRLSimple(gasteiTotal)}</span>
          <Icon.ArrowRight size={14} color="var(--ink-4)" />
        </div>
      ) : (
        <div className={`result-card income-result ${state.pulseRecebi ? 'pulse' : ''}`}>
          <div className="income-result-head">RECEITAS NO MÊS</div>
          <div key={state.recebiStage} className={`income-result-total ${state.pulseRecebi ? 'flash' : ''}`}>R$ {formatBRLSimple(recebiTotal)}</div>
          <div className="income-result-sub">RECORRENTES</div>
          <div className="income-result-row">
            <span className="income-result-icon"><Icon.Trending size={14} color="var(--green)" /></span>
            <span style={{ flex: 1 }}>
              <div className="income-result-name">Salário</div>
              <div className="income-result-meta">Todo dia 5</div>
            </span>
            <span className="income-result-value">+R$ 6.100,00</span>
          </div>
          {recebiIsFull && (
            <>
              <div className="income-result-sub">PONTUAIS</div>
              <div className="income-result-row income-result-row-new">
                <span className="income-result-icon"><Icon.Wallet size={14} color="var(--green)" /></span>
                <span style={{ flex: 1 }}>
                  <div className="income-result-name">Trabalho freelance</div>
                  <div className="income-result-meta">Hoje</div>
                </span>
                <span className="income-result-value">+R$ 400,00</span>
              </div>
            </>
          )}
        </div>
      ))}

      <style>{`
        /* altura reservada = o maior dos dois cards possíveis, pra "aparecer"
           não empurrar o texto/widget ao lado (era parte do "dançar"). FIXA
           sempre, inclusive no mobile — a altura da seção não pode mudar. */
        .result-card-wrap { width: 100%; min-height: 268px; }
        .result-card {
          background: var(--bg-elevated); border-radius: 16px; box-shadow: var(--shadow-md);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          animation: fadeUp 0.35s ease-out both;
        }
        .result-card.pulse { transform: scale(1.035); box-shadow: 0 12px 28px -8px rgba(137,20,221,0.35); }
        .tag-result { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
        .tag-result-icon { width: 30px; height: 30px; border-radius: 9px; background: #F5EBFA; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .tag-result-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
        .tag-result-value { font-size: 13.5px; font-weight: 700; color: var(--ink); display: inline-block; }
        .tag-result-value.flash, .income-result-total.flash { animation: valueFlash 0.65s ease-out both; }
        @keyframes valueFlash {
          0% { color: var(--green); transform: scale(1.12); }
          100% { color: inherit; transform: scale(1); }
        }
        .income-result { padding: 18px; }
        .income-result-head { font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: 0.04em; margin-bottom: 4px; }
        .income-result-total { font-size: 20px; font-weight: 700; color: var(--green); margin-bottom: 14px; display: inline-block; }
        .income-result-sub { font-size: 10.5px; font-weight: 700; color: var(--ink-4); letter-spacing: 0.04em; margin-bottom: 8px; }
        .income-result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
        .income-result-row-new { animation: fadeUp 0.4s ease-out both; }
        .income-result-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .income-result-name { font-size: 13px; font-weight: 600; color: var(--ink); }
        .income-result-meta { font-size: 11px; color: var(--ink-4); }
        .income-result-value { font-size: 13px; font-weight: 700; color: var(--green); }
      `}</style>
    </div>
  );
}

function RegistraFacilDemo() {
  const state = useDemoScript();
  return (
    <div className="registra-facil-grid">
      <div className="registra-facil-text">
        <div className="eyebrow"><span className="dot" />Registra fácil</div>
        <h2>Você só queria anotar um gasto.<br/><em style={{ fontStyle: 'normal', color: 'var(--purple)' }}>A gente entende.</em></h2>
        <p className="lead">Gastou, recebeu ou pagou a fatura? O registro já está na tela principal.</p>
        <p>Informe sua movimentação e continue o dia. Se a compra foi parcelada ou o gasto se repete, essas opções estão ali quando precisar.</p>
      </div>
      <AutoEntryWidgetSlot state={state} />
      <ResultCard state={state} />

      <style>{`
        .registra-facil-grid {
          /* 3 colunas IGUAIS, como as outras seções de 3 (features-grid,
             how-grid) — não "auto": texto, pagamento, categoria etc. mudam
             de tamanho durante a animação, e "auto" recalculava a cada
             mudança, fazendo tudo "dançar" na tela. */
          /* align-items: center (não start) — a linha toda tem a altura da
             coluna mais alta (o widget, que varia de 310 a 444), e com
             "start" as colunas mais curtas (texto, card vazio) ficavam
             coladas no topo, jogando toda a sobra pra baixo (ficava um vão
             enorme embaixo e quase nada em cima, dentro da mesma linha). */
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center;
          /* sem margin-bottom: era espaço pro grid "Entende rápido/Planeja
             melhor" que ficava embaixo (removido) — a seção já tem padding
             simétrico (96px/72px no mobile) em cima e embaixo por padrão;
             uma margem extra aqui só desequilibrava o espaço de baixo. */
        }
        /* Altura FIXA (a do Gastei) — NÃO pode variar entre abas. O
           align-items:center do grid (acima) centraliza o widget mais curto
           (Recebi) dentro dela, em vez de deixar a sobra toda num só lado. */
        .auto-widget-slot { width: 100%; min-height: 445px; }
        .registra-facil-text h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 14px 0 18px; line-height: 1.15; }
        .registra-facil-text .lead { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
        .registra-facil-text p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 10px; }
        /* Tablet: texto ocupa a linha toda em cima, widget + card de
           resultado (o par pergunta/resposta) lado a lado embaixo. */
        @media (max-width: 1080px) {
          .registra-facil-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
          .registra-facil-text { grid-column: 1 / -1; text-align: center; max-width: 600px; margin: 0 auto; }
        }
        @media (max-width: 680px) {
          .registra-facil-grid { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
          .registra-facil-text { max-width: 480px; }
        }
      `}</style>
    </div>
  );
}

function HowSection() {
  return (
    <section id="como-funciona">
      <div className="container">
        <RegistraFacilDemo />
      </div>
    </section>
  );
}

window.HowSection = HowSection;
