// pesito — Topbar (iOS glass) + Hero (editorial)

const Topbar = ({ lang, setLang, onApply, onScroll }) => {
  const navs = lang === 'es'
    ? [['calc', 'Calculadora'], ['steps', 'Cómo funciona'], ['faq', 'Preguntas'], ['trust', 'Regulación']]
    : [['calc', 'Калькулятор'], ['steps', 'Как работает'], ['faq', 'Вопросы'], ['trust', 'Регулирование']];
  return (
    <div className="glass" style={{
      position: 'sticky', top: 0, zIndex: 40,
    }}>
      <div className="wrap" style={{ height: 60, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Wordmark />
          <span style={{
            display: 'none',
            fontSize: 12, color: 'var(--ink-soft)',
            borderLeft: '1px solid var(--line)',
            paddingLeft: 14, marginLeft: 4,
          }} className="hide-mobile">{lang === 'es' ? 'préstamos honestos' : 'честные займы'}</span>
        </div>

        <nav className="hide-mobile" style={{ display: 'flex', gap: 28, fontSize: 14, fontWeight: 500 }}>
          {navs.map(([id, label]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); onScroll(id); }}
              style={{ color: 'var(--char)', textDecoration: 'none', cursor: 'pointer' }}>{label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div className="seg" style={{ padding: 2 }}>
            <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
            <button className={lang === 'ru' ? 'on' : ''} onClick={() => setLang('ru')}>RU</button>
          </div>
          <button className="btn btn-primary" onClick={onApply} style={{ padding: '10px 16px', fontSize: 14 }}>
            {lang === 'es' ? 'Pedir préstamo' : 'Получить заём'}
          </button>
        </div>
      </div>
    </div>
  );
};

const Hero = ({ lang, onApply, onScroll }) => {
  const t = lang === 'es' ? {
    eyebrow: 'préstamos honestos',
    h1: ['De pesito', 'a pesito.', <span key="x" style={{ color: 'var(--brand)' }}>Sin letra chica.</span>],
    sub: 'Préstamos personales en México de $200 a $100,000. Tasas y comisiones a la vista, antes de firmar.',
    stats: [['3 min', 'solicitud'], ['5 seg', 'depósito SPEI'], ['0', 'letra chica']],
    cta: 'Pedir préstamo',
    secondary: 'Calcular primero',
    cardLabel: 'Tu préstamo',
    cardTerm: '8 quincenas',
    cardNote: 'sin penalización por prepago',
    cardCAT: 'CAT 518% sin IVA',
  } : {
    eyebrow: 'честные займы',
    h1: ['От песо', 'к песо.', <span key="x" style={{ color: 'var(--brand)' }}>Без мелкого шрифта.</span>],
    sub: 'Личные займы в Мексике от $200 до $100,000. Все ставки и комиссии видны до подписи.',
    stats: [['3 мин', 'заявка'], ['5 сек', 'перевод SPEI'], ['0', 'скрытых сборов']],
    cta: 'Подать заявку',
    secondary: 'Сначала рассчитать',
    cardLabel: 'Ваш заём',
    cardTerm: '8 двухнедельных',
    cardNote: 'без штрафа за досрочное погашение',
    cardCAT: 'CAT 518% без НДС',
  };

  return (
    <section className="section" style={{ paddingTop: 32, paddingBottom: 0 }}>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal in" style={{ marginBottom: 22 }}>
              <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 999,
                background: 'var(--brand)', marginRight: 8, verticalAlign: 'middle',
                animation: 'pulseDot 2s ease-in-out infinite' }} />
              {t.eyebrow} · es-MX
            </div>
            <h1 className="display reveal in" style={{
              fontSize: 'clamp(54px, 9.5vw, 124px)',
              margin: '0 0 22px',
              fontWeight: 600,
            }}>
              {t.h1[0]}<br/>{t.h1[1]}<br/>{t.h1[2]}
            </h1>
            <p className="reveal in" style={{
              fontSize: 18,
              maxWidth: 480,
              color: 'var(--char-2)',
              margin: '0 0 32px',
              lineHeight: 1.5,
            }}>{t.sub}</p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
              <button className="btn btn-primary" onClick={onApply}>
                {t.cta} <I.arrow />
              </button>
              <button className="btn btn-ghost" onClick={() => onScroll('calc')}>
                {t.secondary}
              </button>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, maxWidth: 480 }}>
              {t.stats.map(([n, label], i) => (
                <div key={i} style={{
                  borderTop: '1px solid var(--line)',
                  paddingTop: 12,
                }}>
                  <div className="display tabular" style={{ fontSize: 36, fontWeight: 600, lineHeight: 1, marginBottom: 4 }}>{n}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Editorial card on right */}
          <HeroCard lang={lang} t={t} />
        </div>
      </div>
    </section>
  );
};

const HeroCard = ({ lang, t }) => {
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width - 0.5) * 4;
    const y = ((e.clientY - r.top) / r.height - 0.5) * -4;
    setTilt({ x, y });
  };
  // 8-quincena schedule: heights vary slightly so it reads as data, not decoration
  const bars = [0.78, 0.82, 0.76, 0.84, 0.80, 0.78, 0.82, 0.78];
  const dates = ['14 may','28 may','11 jun','25 jun','9 jul','23 jul','6 ago','20 ago'];
  const datesRu = ['14.05','28.05','11.06','25.06','09.07','23.07','06.08','20.08'];
  const ds = lang === 'es' ? dates : datesRu;
  return (
    <div
      onMouseMove={onMove}
      onMouseLeave={() => setTilt({ x: 0, y: 0 })}
      style={{
        position: 'relative',
        transform: `perspective(1400px) rotateY(${tilt.x}deg) rotateX(${tilt.y}deg)`,
        transition: 'transform 220ms ease-out',
        transformStyle: 'preserve-3d',
        height: '100%',
      }}>
      {/* paper sheet — taller, denser, more trust signals */}
      <div className="card" style={{
        padding: 'clamp(24px, 2.4vw, 36px)',
        background: 'var(--surface)',
        borderRadius: 20,
        position: 'relative',
        boxShadow: '0 0.5px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -20px rgba(63,38,24,0.18), 0 4px 14px rgba(63,38,24,0.06)',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
      }}>
        {/* corner perforation — paper-fold cue */}
        <div style={{
          position: 'absolute', top: -1, right: -1,
          width: 72, height: 72,
          background: 'var(--bg)',
          clipPath: 'polygon(100% 0, 100% 100%, 0 0)',
        }} />
        <div style={{
          position: 'absolute', top: 0, right: 0,
          width: 72, height: 72,
          borderLeft: '1px dashed var(--line)',
          borderBottom: '1px dashed var(--line)',
          transform: 'rotate(45deg) translate(25px, -25px)',
          transformOrigin: 'top right',
          opacity: 0.6,
        }} />

        {/* HEADER: contract id + brand mark */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>{t.cardLabel}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
              SOFOM ENR · MXN-001 · 2026
            </div>
          </div>
          <div style={{ width: 38, height: 38, borderRadius: 999, background: 'var(--brand)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
            boxShadow: '0 4px 12px rgba(127,50,24,0.22)' }}>
            <PesitoMark size={22} color="#fff" />
          </div>
        </div>

        {/* AMOUNT — bigger, more prominent */}
        <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '20px 0' }}>
          <div className="display tabular" style={{ fontSize: 'clamp(64px, 6.4vw, 92px)', lineHeight: 0.9, fontWeight: 600 }}>
            $5,000<span style={{ fontSize: '0.32em', color: 'var(--ink-soft)', marginLeft: 8, fontWeight: 500 }}>MXN</span>
          </div>
          <div style={{ fontSize: 14, color: 'var(--char)', marginTop: 8 }}>{t.cardTerm} · {t.cardNote}</div>
        </div>

        {/* PAYMENT META */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 4 }}>
              {lang === 'es' ? 'Pago quincenal' : 'Платёж раз в 2 нед.'}
            </div>
            <div className="display tabular" style={{ fontSize: 30, fontWeight: 600, lineHeight: 1 }}>$863</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 4 }}>
              {lang === 'es' ? 'Total a pagar' : 'Всего к оплате'}
            </div>
            <div className="display tabular" style={{ fontSize: 30, fontWeight: 600, lineHeight: 1 }}>$6,900</div>
          </div>
        </div>

        {/* SCHEDULE — 8 quincenas visualised. Trust comes from showing the data. */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>
              {lang === 'es' ? 'Cronograma · 8 pagos' : 'График · 8 платежей'}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)' }}>
              {lang === 'es' ? 'cada 14 días' : 'каждые 14 дней'}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 4, alignItems: 'flex-end', height: 36, padding: '0 0 4px', borderBottom: '1px solid var(--line)' }}>
            {bars.map((h, i) => (
              <div key={i} style={{
                height: `${h * 100}%`,
                background: i === 0 ? 'var(--brand)' : 'var(--brand-soft)',
                borderRadius: 2,
                transition: 'transform 180ms ease',
              }} />
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 4, marginTop: 6 }}>
            {ds.map((d, i) => (
              <div key={i} style={{
                fontSize: 10, color: i === 0 ? 'var(--brand-deep)' : 'var(--ink-soft)',
                fontFamily: 'var(--font-mono)', textAlign: 'left', whiteSpace: 'nowrap',
                fontWeight: i === 0 ? 600 : 500,
              }}>{d}</div>
            ))}
          </div>
        </div>

        {/* TRUST STRIP — regulatory badges */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
          padding: '14px 12px', background: 'var(--surface-2)', borderRadius: 12,
          border: '1px solid var(--line-soft)',
        }}>
          {[
            { k: 'CNBV', v: lang === 'es' ? 'regulado' : 'регулир.' },
            { k: 'CONDUSEF', v: lang === 'es' ? 'supervisado' : 'надзор' },
            { k: 'SPEI', v: lang === 'es' ? 'Banxico' : 'Banxico' },
          ].map((b, i) => (
            <div key={i} style={{ textAlign: 'center', borderRight: i < 2 ? '1px solid var(--line)' : 'none' }}>
              <div className="display" style={{ fontSize: 14, fontWeight: 600, letterSpacing: '0.04em', color: 'var(--ink)' }}>{b.k}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginTop: 2 }}>{b.v}</div>
            </div>
          ))}
        </div>

        {/* FOOTER — CAT + verified */}
        <div style={{
          paddingTop: 4,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: 'var(--ink-soft)',
        }}>
          <span style={{ fontFamily: 'var(--font-mono)' }}>{t.cardCAT}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--green)' }}>
            <I.check /> {lang === 'es' ? 'verificado' : 'проверено'}
          </span>
        </div>
      </div>

      {/* Stamp — kept smaller, tucked at bottom-right */}
      <div style={{
        position: 'absolute',
        bottom: -14, right: -8,
        background: 'var(--ink)',
        color: 'var(--bg)',
        padding: '7px 13px',
        borderRadius: 4,
        fontFamily: 'var(--font-display)',
        fontSize: 13,
        fontWeight: 600,
        letterSpacing: '0.05em',
        textTransform: 'uppercase',
        transform: 'rotate(-2deg)',
        boxShadow: '0 4px 12px rgba(63,38,24,0.22)',
      }}>
        SPEI · {lang === 'es' ? '5 seg' : '5 сек'}
      </div>
    </div>
  );
};

Object.assign(window, { Topbar, Hero });