// pesito — Three steps + SPEI deposit animation + Trust strip + Schedule + Testimonials + FAQ + final CTA + footer

const ThreeSteps = ({ lang, onSimulate }) => {
  const t = lang === 'es' ? {
    eyebrow: 'Tres pasos. Cero sorpresas.',
    title: 'Pides. Vemos. Llega.',
    sub: 'No te vamos a hacer subir 14 documentos ni hablar con un asesor. La burocracia se queda en el banco de tus papás.',
    steps: [
      { n: '01', title: 'Solicitas', body: 'Cuéntanos quién eres, cuánto y por cuánto. Tres minutos. Tu dedo, tu teléfono, tu silencio.', time: '3 min', icon: 'user' },
      { n: '02', title: 'Revisamos', body: 'Nuestros modelos miran tu historial — y un humano, si hace falta. Te decimos que sí o que no, y por qué.', time: '< 2 min', icon: 'shield' },
      { n: '03', title: 'Recibes', body: 'Si sí, los pesos llegan a tu cuenta por SPEI antes de que apagues la pantalla.', time: '5 seg', icon: 'spei' },
    ],
    cta: 'Ver cómo se ve el depósito',
  } : {
    eyebrow: 'Три шага. Ноль сюрпризов.',
    title: 'Просите. Видим. Приходит.',
    sub: 'Никаких 14 документов и звонков консультанту. Бюрократия — в банке ваших родителей.',
    steps: [
      { n: '01', title: 'Заявка', body: 'Расскажите кто вы, сколько и насколько. Три минуты. Ваш палец, ваш телефон, ваша тишина.', time: '3 мин', icon: 'user' },
      { n: '02', title: 'Проверка', body: 'Наши модели смотрят историю — и человек, если надо. Говорим да или нет, и почему.', time: '< 2 мин', icon: 'shield' },
      { n: '03', title: 'Получаете', body: 'Если да, песо приходят на счёт через SPEI до того, как вы погасите экран.', time: '5 сек', icon: 'spei' },
    ],
    cta: 'Посмотреть как приходит',
  };

  return (
    <section id="steps" className="section" style={{ background: 'var(--surface-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', margin: 0, fontWeight: 600 }}>{t.title}</h2>
            <p style={{ fontSize: 17, color: 'var(--char-2)', marginTop: 16, maxWidth: 540 }}>{t.sub}</p>
          </div>
          <button className="btn btn-ink" onClick={onSimulate}>
            {t.cta} <I.arrow />
          </button>
        </div>

        <div className="steps-grid">
          {t.steps.map((s, i) => (
            <div key={i} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div className="display" style={{ fontSize: 56, fontWeight: 600, color: 'var(--brand)', lineHeight: 1 }}>{s.n}</div>
                <span className="chip chip-brand"><I.clock /> {s.time}</span>
              </div>
              <div className="display" style={{ fontSize: 32, fontWeight: 600, marginTop: 8 }}>{s.title}</div>
              <div style={{ fontSize: 15, color: 'var(--char-2)', lineHeight: 1.55 }}>{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SPEI deposit modal sheet — 5-second animation
const SPEISheet = ({ lang, open, onClose, principal }) => {
  const [phase, setPhase] = React.useState(0); // 0:requesting,1:approved,2:routing,3:deposited
  React.useEffect(() => {
    if (!open) { setPhase(0); return; }
    const timers = [
      setTimeout(() => setPhase(1), 1100),
      setTimeout(() => setPhase(2), 2300),
      setTimeout(() => setPhase(3), 3700),
    ];
    return () => timers.forEach(clearTimeout);
  }, [open]);
  if (!open) return null;
  const t = lang === 'es' ? {
    title: 'Depósito en vivo',
    sub: 'Así se ve cuando tu préstamo llega. En serio.',
    states: [
      'Solicitud enviada a CNBV/UIF',
      '✓ Aprobado por modelo de riesgo',
      'Ruteando por SPEI · Banxico',
      '✓ Depositado en tu cuenta',
    ],
    label: 'Importe',
    bank: 'BBVA México · ****7841',
    ref: 'REF SPEI 2604RDM',
    close: 'Cerrar',
  } : {
    title: 'Перевод в реальном времени',
    sub: 'Вот как выглядит, когда заём приходит. Серьёзно.',
    states: [
      'Запрос отправлен в CNBV/UIF',
      '✓ Одобрено моделью риска',
      'Маршрут SPEI · Banxico',
      '✓ Зачислено на счёт',
    ],
    label: 'Сумма',
    bank: 'BBVA México · ****7841',
    ref: 'REF SPEI 2604RDM',
    close: 'Закрыть',
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(40, 25, 15, 0.55)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      animation: 'fadeIn 200ms ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--surface)', borderRadius: '24px 24px 0 0',
        width: '100%', maxWidth: 520, padding: 28, paddingBottom: 36,
        animation: 'sheetIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        boxShadow: '0 -10px 40px rgba(63,38,24,0.2)',
      }}>
        <div style={{
          width: 36, height: 5, borderRadius: 999, background: 'var(--line)',
          margin: '0 auto 20px',
        }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>{t.title}</div>
            <div style={{ fontSize: 14, color: 'var(--char-2)' }}>{t.sub}</div>
          </div>
          <button onClick={onClose} style={{ background: 'var(--surface-2)', border: 'none', width: 32, height: 32, borderRadius: 999, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <I.close />
          </button>
        </div>

        {/* Big amount card */}
        <div style={{
          background: 'var(--ink)', color: '#fff',
          borderRadius: 16, padding: 22, marginBottom: 18, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, fontSize: 12, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
            <span>{t.label}</span>
            <span style={{ fontFamily: 'var(--font-mono)' }}>{t.ref}</span>
          </div>
          <div className="display tabular" style={{ fontSize: 64, fontWeight: 600, lineHeight: 1, color: phase >= 3 ? 'var(--sun)' : '#fff', transition: 'color 600ms ease' }}>
            $ {principal.toLocaleString('en-US')}
            <span style={{ fontSize: 18, color: 'rgba(255,255,255,0.55)', marginLeft: 8 }}>MXN</span>
          </div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 8 }}>{t.bank}</div>
        </div>

        {/* States */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {t.states.map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 0',
              borderBottom: i < t.states.length - 1 ? '1px solid var(--line)' : 'none',
              opacity: phase >= i ? 1 : 0.3,
              transition: 'opacity 320ms ease',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999,
                background: phase > i ? 'var(--green)' : (phase === i ? 'var(--brand)' : 'var(--surface-3)'),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', flexShrink: 0,
                transition: 'background 220ms ease',
              }}>
                {phase > i
                  ? <I.check />
                  : (phase === i
                    ? <div style={{ width: 12, height: 12, borderRadius: 999, border: '2px solid #fff', borderTopColor: 'transparent', animation: 'spin360 0.8s linear infinite' }} />
                    : <div style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--ink-soft)' }} />)}
              </div>
              <div style={{ fontSize: 15, fontWeight: phase === i ? 600 : 500, color: phase >= i ? 'var(--ink)' : 'var(--ink-soft)' }}>
                {s}
              </div>
              {phase === i && i < 3 && <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)' }}>...</div>}
            </div>
          ))}
        </div>

        {phase === 3 && (
          <div style={{ marginTop: 20, padding: 14, background: 'oklch(0.95 0.04 155)', borderRadius: 12, fontSize: 14, color: 'oklch(0.30 0.13 155)', display: 'flex', gap: 10, alignItems: 'center', animation: 'scaleIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1)' }}>
            <I.check /> {lang === 'es' ? 'Los pesos están en tu cuenta. De verdad.' : 'Песо у вас на счёте. Серьёзно.'}
          </div>
        )}
      </div>
    </div>
  );
};

// Trust strip
const TrustStrip = ({ lang }) => {
  const t = lang === 'es' ? {
    eyebrow: 'Regulado, supervisado, vigilado.',
    title: 'No somos los primos del banco. Estamos en la lista.',
    chips: [
      ['CNBV', 'Comisión Nacional Bancaria y de Valores nos audita.'],
      ['CONDUSEF', 'Si te queda duda, ahí pueden quejarse de nosotros.'],
      ['SPEI', 'Banxico mueve los pesos. Nosotros solo decimos cuántos.'],
      ['UIF', 'Sí, reportamos a la Unidad de Inteligencia Financiera.'],
      ['LFPDPPP', 'Tus datos son tuyos. Aviso de privacidad legible.'],
    ],
    note: 'SOFOM ENR Bonum, S.A. de C.V., entidad regulada por CNBV y supervisada por CONDUSEF, registro CONDUSEF #pendiente. Consulta tu historial en Buró de Crédito.',
  } : {
    eyebrow: 'Регулируется, проверяется, наблюдается.',
    title: 'Мы не кузены банка. Мы в реестре.',
    chips: [
      ['CNBV', 'Национальная банковская комиссия аудирует нас.'],
      ['CONDUSEF', 'Если что — туда жалуются на нас.'],
      ['SPEI', 'Banxico двигает песо. Мы лишь говорим сколько.'],
      ['UIF', 'Да, отчитываемся в финразведку.'],
      ['LFPDPPP', 'Ваши данные — ваши. Уведомление по-человечески.'],
    ],
    note: 'SOFOM ENR Bonum, S.A. de C.V., регулируется CNBV и под надзором CONDUSEF, регистрация #ожидание. Запрос в Бюро Кредитов.',
  };
  return (
    <section id="trust" className="section">
      <div className="wrap">
        <div style={{ marginBottom: 36, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', margin: 0, fontWeight: 600 }}>{t.title}</h2>
        </div>
        <div className="trust-grid">
          {t.chips.map(([k, v], i) => (
            <div key={i} style={{ borderTop: '1px solid var(--line)', paddingTop: 18 }}>
              <div className="display" style={{ fontSize: 28, fontWeight: 600, color: 'var(--ink)', letterSpacing: '0.02em' }}>{k}</div>
              <div style={{ fontSize: 14, color: 'var(--char-2)', marginTop: 6, lineHeight: 1.5 }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, padding: 18, background: 'var(--surface-2)', borderRadius: 12, fontSize: 13, color: 'var(--char-2)', lineHeight: 1.6, fontFamily: 'var(--font-mono)' }}>
          {t.note}
        </div>
      </div>
    </section>
  );
};

// Payment schedule visual
const Schedule = ({ lang, term, quincenal }) => {
  const t = lang === 'es' ? {
    eyebrow: 'Cronograma. Sin sorpresas.',
    title: ['Mira los pagos', 'antes de firmar.'],
    sub: 'Cada barrita es una quincena. La altura es lo que pagas. La línea de abajo es lo que ya pagaste.',
    paid: 'pagado',
    pending: 'por pagar',
    payment: 'pago',
  } : {
    eyebrow: 'График. Без сюрпризов.',
    title: ['Смотрите платежи', 'до подписи.'],
    sub: 'Каждый столбик — двухнедельный период. Высота — сколько платите. Линия снизу — сколько уже заплачено.',
    paid: 'оплачено',
    pending: 'к оплате',
    payment: 'платёж',
  };

  // Generate fake schedule with first 2 paid, rest pending
  const today = new Date();
  const items = Array.from({ length: term }, (_, i) => ({
    idx: i + 1,
    paid: i < 2,
    date: new Date(today.getTime() + i * 14 * 24 * 3600 * 1000),
    amount: quincenal,
  }));
  const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
  const monthsRu = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];

  return (
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 40 }}>
          <div className="eyebrow" style={{ color: 'var(--sun)', marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', margin: 0, fontWeight: 600, color: '#fff' }}>
            {t.title[0]}<br/>
            <span style={{ color: 'var(--sun)' }}>{t.title[1]}</span>
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', marginTop: 16, maxWidth: 540 }}>{t.sub}</p>
        </div>

        <div style={{
          display: 'flex', gap: 6, alignItems: 'flex-end',
          padding: '20px 0',
          borderBottom: '1px solid rgba(255,255,255,0.15)',
          overflowX: 'auto', overflowY: 'visible',
          scrollbarWidth: 'thin',
        }}>
          {items.map((it) => (
            <div key={it.idx} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              minWidth: 36,
              flex: term <= 12 ? 1 : '0 0 auto',
            }}>
              <div style={{
                fontSize: 9, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)',
                marginBottom: 6,
              }}>${(it.amount).toLocaleString('en-US')}</div>
              <div style={{
                width: '100%', height: 80,
                background: it.paid ? 'var(--green)' : 'var(--brand)',
                opacity: it.paid ? 0.6 : 1,
                borderRadius: 4,
                position: 'relative',
                animation: `scaleIn 400ms cubic-bezier(0.2,0.8,0.2,1) ${it.idx * 30}ms backwards`,
              }}>
                {it.paid && <div style={{ position: 'absolute', top: 4, left: '50%', transform: 'translateX(-50%)', color: '#fff' }}><I.check /></div>}
              </div>
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.7)', marginTop: 8, fontFamily: 'var(--font-mono)' }}>
                {(lang === 'es' ? months : monthsRu)[it.date.getMonth()]} {it.date.getDate()}
              </div>
              <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', marginTop: 2 }}>#{String(it.idx).padStart(2, '0')}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18, display: 'flex', gap: 18, fontSize: 13, color: 'rgba(255,255,255,0.7)', flexWrap: 'wrap' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 12, height: 12, background: 'var(--green)', borderRadius: 3, opacity: 0.6 }} />
            {t.paid}
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 12, height: 12, background: 'var(--brand)', borderRadius: 3 }} />
            {t.pending}
          </span>
          <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
            2/{term} {t.paid}
          </span>
        </div>
      </div>
    </section>
  );
};

const Testimonials = ({ lang }) => {
  const t = lang === 'es' ? {
    eyebrow: 'Nos lo dicen ellos.',
    title: 'Verdaderos pesos, verdaderas personas.',
    items: [
      { who: 'Daniela R., 34', city: 'CDMX', stars: 5, text: '"Pagué la inscripción del Felipe sin pedírselo a mi mamá. Y sin tener que mentirle a nadie sobre el CAT."' },
      { who: 'Mauricio T., 41', city: 'Guadalajara', stars: 5, text: '"Lo pedí a las 11:47 de la noche desde el camión. A las 11:48 ya tenía el dinero. Pensé que era estafa hasta que fui a la cajera."' },
      { who: 'Karla V., 28', city: 'Monterrey', stars: 5, text: '"Lo pagué tres semanas antes y me cobraron menos. La primera vez que un préstamo me sale más barato por portarme bien."' },
      { who: 'Iván P., 52', city: 'Puebla', stars: 4, text: '"Llamé al teléfono. Contestó una persona. Me explicó las cuentas. No volvió a llamar para venderme nada. Increíble."' },
    ],
  } : {
    eyebrow: 'Они нам говорят.',
    title: 'Реальные песо, реальные люди.',
    items: [
      { who: 'Daniela R., 34', city: 'CDMX', stars: 5, text: '"Заплатила за школу Фелипе, не прося маму. И не пришлось никому врать про CAT."' },
      { who: 'Mauricio T., 41', city: 'Guadalajara', stars: 5, text: '"Попросил в 23:47 из автобуса. В 23:48 деньги были на счёте. Думал — мошенники, пока не дошёл до банкомата."' },
      { who: 'Karla V., 28', city: 'Monterrey', stars: 5, text: '"Заплатила на 3 недели раньше — стало дешевле. Впервые заём дешевле за хорошее поведение."' },
      { who: 'Iván P., 52', city: 'Puebla', stars: 4, text: '"Позвонил. Ответил человек. Объяснил цифры. Не перезванивал что-то впаривать. Невероятно."' },
    ],
  };
  return (
    <section className="section" style={{ background: 'var(--surface-2)', borderTop: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 40, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', margin: 0, fontWeight: 600 }}>{t.title}</h2>
        </div>
        <div className="testimonial-grid">
          {t.items.map((item, i) => (
            <div key={i} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', gap: 2 }}>
                {Array.from({ length: 5 }, (_, k) => (
                  <span key={k} style={{ color: k < item.stars ? 'var(--brand)' : 'var(--surface-3)', fontSize: 16 }}>★</span>
                ))}
              </div>
              <div style={{ fontSize: 17, lineHeight: 1.45, color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 500, letterSpacing: '-0.005em' }}>
                {item.text}
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-soft)' }}>
                <span style={{ fontWeight: 600, color: 'var(--char)' }}>{item.who}</span>
                <span>{item.city}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQ = ({ lang }) => {
  const t = lang === 'es' ? {
    eyebrow: 'Las preguntas que de verdad nos hacen.',
    title: 'Sin asterisco. Sin "consulte términos".',
    items: [
      ['¿Cuánto puedo pedir la primera vez?', 'Empiezas chiquito. Hasta $5,000 MXN si es tu primera vez con nosotros. Si pagas a tiempo, en la siguiente subimos hasta $100,000. Sin trámite, sin pedir nada extra.'],
      ['¿En cuánto tiempo me llega el dinero?', 'Si tu solicitud se aprueba antes de las 6 pm, llega ese mismo día por SPEI. Después de las 6 pm, cae al siguiente día hábil. Banxico es quien decide la velocidad final, no nosotros.'],
      ['¿Qué documentos necesito?', 'Tu INE, un comprobante de domicilio (no más viejo de 3 meses), tu CLABE bancaria. Y un selfie con la INE. Eso es todo. Si te pedimos otra cosa, dudaríamos hasta de nosotros mismos.'],
      ['¿Y si pago antes? ¿Me cobran de más?', 'No. Pagas el principal, los intereses devengados hasta el día que pagaste, y ya. Cero penalización por prepago — está en el contrato, en letra grande, en la cláusula 7.'],
      ['¿Qué pasa si me atraso?', 'Te llamamos. No te gritamos, no te ponemos a tu vecino. Tienes 5 días de gracia, después se devenga moratorio del 0.15% diario sobre el saldo vencido. Y sí, lo reportamos al Buró.'],
      ['¿Consultan mi Buró de Crédito?', 'Sí. Es obligatorio por ley para evaluar tu capacidad de pago. Si no quieres que lo consultemos, no podemos prestarte. Es así de claro.'],
    ],
  } : {
    eyebrow: 'Вопросы, которые нам реально задают.',
    title: 'Без звёздочек. Без "см. условия".',
    items: [
      ['Сколько можно взять в первый раз?', 'Начинаете с малого. До $5,000 MXN при первой заявке. Заплатите вовремя — в следующий раз до $100,000. Без бумажек.'],
      ['Когда придут деньги?', 'Если одобрено до 18:00 — в тот же день через SPEI. После 18:00 — на следующий рабочий день. Скорость определяет Banxico, не мы.'],
      ['Какие документы нужны?', 'INE, справка адреса (не старше 3 мес), CLABE банка. И селфи с INE. Всё. Если просим больше — сомневаемся в себе.'],
      ['А если заплачу раньше?', 'Платите основной долг, проценты до даты оплаты, и всё. Ноль штрафов за досрочное погашение — крупным шрифтом в пункте 7 договора.'],
      ['Что если просрочу?', 'Звоним. Не кричим, не обзваниваем соседей. 5 дней льготных, потом 0.15% в день на просроченный остаток. И да, передаём в Бюро.'],
      ['Запрашиваете Бюро?', 'Да. Закон обязывает оценить платёжеспособность. Не хотите — не сможем выдать. Прямо говорим.'],
    ],
  };
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <div style={{ marginBottom: 40, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', margin: 0, fontWeight: 600 }}>{t.title}</h2>
        </div>
        <div className="card" style={{ overflow: 'hidden' }}>
          {t.items.map(([q, a], i) => (
            <div key={i} style={{ borderBottom: i < t.items.length - 1 ? '1px solid var(--line)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                background: 'transparent', border: 'none', cursor: 'pointer',
                padding: '20px 24px',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                fontFamily: 'var(--font-body)', fontSize: 17, fontWeight: 600, color: 'var(--ink)',
              }}>
                <span style={{ flex: 1 }}>{q}</span>
                <span style={{
                  width: 28, height: 28, borderRadius: 999, background: open === i ? 'var(--brand)' : 'var(--surface-2)',
                  color: open === i ? '#fff' : 'var(--ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  transition: 'all 200ms ease',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                }}>
                  <I.plus />
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 240 : 0,
                overflow: 'hidden',
                transition: 'max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1)',
              }}>
                <div style={{ padding: '0 24px 22px', fontSize: 16, color: 'var(--char-2)', lineHeight: 1.6, maxWidth: 760 }}>
                  {a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ lang, onApply }) => {
  const t = lang === 'es' ? {
    title: ['Listo.', 'Pide tu préstamo.'],
    sub: 'Sin asteriscos. Sin letra chica. Sin que te llamemos cinco veces para venderte un seguro.',
    cta: 'Empezar solicitud',
    note: 'Tres minutos. Una sola pantalla. Tu silencio respetado.',
  } : {
    title: ['Готово.', 'Берите заём.'],
    sub: 'Без звёздочек. Без мелкого шрифта. Без пяти звонков с предложением страховки.',
    cta: 'Начать заявку',
    note: 'Три минуты. Один экран. Ваша тишина — ваша.',
  };
  return (
    <section className="section" style={{ background: 'var(--brand-wash)', borderTop: '1px solid oklch(0.85 0.06 28)' }}>
      <div className="wrap" style={{ textAlign: 'center', maxWidth: 880 }}>
        <h2 className="display" style={{ fontSize: 'clamp(48px, 8vw, 112px)', margin: 0, fontWeight: 600, lineHeight: 0.95 }}>
          {t.title[0]}<br/>
          <span style={{ color: 'var(--brand)' }}>{t.title[1]}</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--char)', marginTop: 24, maxWidth: 560, marginInline: 'auto' }}>{t.sub}</p>
        <button className="btn btn-primary" onClick={onApply} style={{ marginTop: 32, padding: '18px 30px', fontSize: 17 }}>
          {t.cta} <I.arrow />
        </button>
        <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 16, fontFamily: 'var(--font-mono)' }}>{t.note}</div>
      </div>
    </section>
  );
};

const Footer = ({ lang }) => {
  const t = lang === 'es' ? {
    legal: 'SOFOM ENR Bonum, S.A. de C.V., entidad regulada por la CNBV y supervisada por la CONDUSEF, registro CONDUSEF #pendiente. Operamos bajo la Ley General de Organizaciones y Actividades Auxiliares del Crédito.',
    cat: 'CAT informativo 518% sin IVA · cálculo sobre $5,000 MXN a 8 quincenas · vigente al 01/05/2026',
    cols: [
      ['Producto', ['Calculadora', 'Cómo funciona', 'Tarifas', 'Solicitar']],
      ['Legal', ['Aviso de privacidad', 'Términos del contrato', 'CAT y comisiones', 'Buró de Crédito']],
      ['Empresa', ['Quiénes somos', 'Atención a clientes', 'Reporta una queja', 'Trabaja en pesito']],
    ],
    rights: '© 2026 pesito · Hecho con respeto en Ciudad de México.',
  } : {
    legal: 'SOFOM ENR Bonum, S.A. de C.V., регулируется CNBV и под надзором CONDUSEF, рег. #ожидание. Работаем по Общему закону об организациях кредита.',
    cat: 'CAT информативный 518% без НДС · расчёт на $5,000 MXN, 8 двухнед. · действует с 01/05/2026',
    cols: [
      ['Продукт', ['Калькулятор', 'Как работает', 'Тарифы', 'Заявка']],
      ['Юридическое', ['Уведомление о приватности', 'Условия договора', 'CAT и комиссии', 'Бюро кредитов']],
      ['Компания', ['О нас', 'Поддержка', 'Жалоба', 'Работа в pesito']],
    ],
    rights: '© 2026 pesito · Сделано с уважением в Мехико.',
  };
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--bg)', padding: '64px 0 32px', position: 'relative', zIndex: 1 }}>
      <div className="wrap">
        <div className="footer-top">
          <div style={{ maxWidth: 360 }}>
            <Wordmark color="var(--bg)" />
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 14, lineHeight: 1.55 }}>
              {t.legal}
            </p>
          </div>
          <div className="footer-cols">
            {t.cols.map(([col, links]) => (
              <div key={col}>
                <div className="eyebrow" style={{ color: 'var(--sun)', marginBottom: 14 }}>{col}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {links.map((l) => (
                    <li key={l}><a href="#" style={{ color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14 }}>{l}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          marginTop: 48, paddingTop: 22,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14,
          fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)',
        }}>
          <span>{t.cat}</span>
          <span>{t.rights}</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { ThreeSteps, SPEISheet, TrustStrip, Schedule, Testimonials, FAQ, FinalCTA, Footer });