// KLEO Device — mockup de teléfono compartido entre index.html y kleo.html.
// Misma pieza en los dos lugares: si se ajusta aquí, cambia en ambos.
(function () {
  const { useState, useEffect } = React;
  const NAVY = (window.BX && window.BX.navy) || '#0D1B2A';
  const H = '"Poppins", system-ui, sans-serif';
  const B = '"Inter", system-ui, sans-serif';

  const IPhone = ({ children, bg = '#F5F3FA', w = 210 }) => (
    <div style={{ width: w, borderRadius: 36, background: '#0A1018', padding: 8,
      boxShadow: '0 40px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07)' }}>
      <div style={{ borderRadius: 28, overflow: 'hidden', background: bg, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 70, height: 18, background: '#0A1018', borderRadius: 100, zIndex: 5 }} />
        {children}
      </div>
    </div>
  );

  const KleoDevice = () => {
    const P = '#6B52A8', G = '#1F8A5B', A = '#E07B39';
    const [tick, setTick] = useState(0);
    const [tab, setTab] = useState(0);
    const [, rerender] = useState(0);
    useEffect(() => {
      const t1 = setInterval(() => setTick(n => (n + 1) % 4), 3200);
      const t2 = setInterval(() => setTab(n => (n + 1) % 3), 4800);
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => { clearInterval(t1); clearInterval(t2); window.removeEventListener('langchange', h); };
    }, []);
    const mk = window.getMk ? window.getMk().kleo : null;
    const resolveC = cl => cl === 'P' ? P : cl;
    const tasks = mk ? mk.tasks.slice(0, 4).map(t => ({ ...t, c: resolveC(t.cl) })) : [];
    const habits = mk ? mk.habits.map(([t, v, pct]) => ({ t, v, pct, c: P })) : [];
    const tabs = mk ? mk.tabs.slice(0, 3) : ['Hoy', 'Hábitos', 'Pagos'];
    const statsRow = mk ? mk.stats_row.map(([v, l, c]) => ([v, resolveC(c), l])) : [];
    return (
      <IPhone bg="#F5F3FA">
        <div style={{ padding: '28px 12px 14px', minHeight: 390 }}>
          <div style={{ background: P, borderRadius: 10, padding: '8px 10px', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: H, fontWeight: 700, fontSize: 12, color: '#fff' }}>KLEO</span>
            <span style={{ fontFamily: B, fontSize: 9, color: 'rgba(255,255,255,.8)' }}>{mk ? mk.date : 'Hoy · Lunes'}</span>
          </div>
          <div style={{ display: 'flex', background: '#EDE9F5', borderRadius: 8, marginBottom: 8, overflow: 'hidden' }}>
            {tabs.map((t, i) => (
              <div key={i} style={{ flex: 1, textAlign: 'center', padding: '5px 0', fontFamily: B, fontSize: 9,
                fontWeight: i === tab ? 700 : 400, color: i === tab ? P : 'rgba(13,27,42,.4)',
                borderBottom: i === tab ? `2px solid ${P}` : 'none', transition: 'all .3s' }}>{t}</div>
            ))}
          </div>
          <div style={{ fontFamily: B, fontSize: 8, fontWeight: 700, letterSpacing: .7, textTransform: 'uppercase', color: 'rgba(13,27,42,.38)', marginBottom: 4 }}>{mk ? mk.pending : 'Pendientes'}</div>
          {tasks.map((task, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '5px 0',
              borderBottom: '1px solid rgba(13,27,42,.05)', opacity: task.done ? .5 : 1,
              background: tick === i && !task.done ? task.c + '12' : 'transparent', borderRadius: 5, transition: 'background .4s' }}>
              <div style={{ width: 20, height: 20, borderRadius: 6, background: task.c + '20', color: task.c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>{task.done ? '✓' : '○'}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: B, fontSize: 10, fontWeight: 600, color: NAVY, textDecoration: task.done ? 'line-through' : 'none' }}>{task.t}</div>
                <div style={{ fontFamily: B, fontSize: 8.5, color: 'rgba(13,27,42,.45)' }}>{task.s}</div>
              </div>
            </div>
          ))}
          <div style={{ fontFamily: B, fontSize: 8, fontWeight: 700, letterSpacing: .7, textTransform: 'uppercase', color: 'rgba(13,27,42,.38)', margin: '10px 0 6px' }}>{mk ? mk.habits_label : 'Hábitos'}</div>
          {habits.map(h => (
            <div key={h.t} style={{ marginBottom: 6 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: B, fontSize: 9, color: NAVY, marginBottom: 2 }}>
                <span>{h.t}</span><span style={{ color: h.c, fontWeight: 700 }}>{h.v}</span>
              </div>
              <div style={{ height: 4, borderRadius: 100, background: 'rgba(13,27,42,.08)' }}>
                <div style={{ height: '100%', width: `${h.pct}%`, borderRadius: 100, background: h.c, animation: 'bxProg 1.6s ease both' }} />
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', gap: 5, marginTop: 10 }}>
            {statsRow.map(([v, c, l]) => (
              <div key={l} style={{ flex: 1, background: c + '14', borderRadius: 8, padding: '6px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: H, fontWeight: 700, fontSize: 11, color: c }}>{v}</div>
                <div style={{ fontFamily: B, fontSize: 7.5, color: 'rgba(13,27,42,.5)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </IPhone>
    );
  };

  window.KleoDevice = KleoDevice;
})();