// Mockups localizados — KLEO · INGRID · BoXtore · ZUBEHÖRE
// Todos los textos visibles cambian con el selector de idioma.
(function () {
  const head = '"Poppins", system-ui, sans-serif';
  const body = '"Inter", system-ui, sans-serif';
  const mono = '"JetBrains Mono", ui-monospace, monospace';
  const NAVY = '#0D1B2A';
  const G = '#1F8A5B';
  const A = '#E07B39';

  // ── useLang helper ────────────────────────────────────────────
  function useLang() {
    const [, rerender] = React.useState(0);
    React.useEffect(() => {
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => window.removeEventListener('langchange', h);
    }, []);
  }

  // Mock text data is loaded from mock-data.js → window.BX_MOCK / window.getMk()


  // ── Phone frame ───────────────────────────────────────────────
  const Phone = ({ accent, children, screen = '#fff' }) => (
    <div style={{ width: 300, borderRadius: 38, background: '#0B1622', padding: 11,
      boxShadow: '0 40px 80px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(248,244,238,0.08)' }}>
      <div style={{ borderRadius: 28, overflow: 'hidden', background: screen, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 92, height: 22, background: '#0B1622', borderRadius: 100, zIndex: 5 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '11px 22px 0',
          fontFamily: body, fontSize: 11, fontWeight: 600, color: NAVY, position: 'relative', zIndex: 6 }}>
          <span>9:41</span><span>BRITXIA</span>
        </div>
        {children}
      </div>
    </div>
  );

  // ── KLEO ─────────────────────────────────────────────────────
  function KLEO({ accent }) {
    useLang();
    const P = accent;
    const { useState, useEffect } = React;
    const [activeTab, setActiveTab] = useState(0);
    const [scrollIdx, setScrollIdx] = useState(0);
    const mk = window.getMk().kleo;

    useEffect(() => {
      const t = setInterval(() => setActiveTab(n => (n + 1) % 4), 3600);
      return () => clearInterval(t);
    }, []);
    useEffect(() => {
      const t = setInterval(() => setScrollIdx(n => n + 1), 2200);
      return () => clearInterval(t);
    }, []);

    const resolveColor = (cl) => cl === 'P' ? P : cl;
    const visibleTasks = [0,1,2,3].map(i => mk.tasks[(scrollIdx + i) % mk.tasks.length]);

    return (
      <Phone accent={P} screen="#F5F3FA">
        <div style={{ background: P, padding: '28px 13px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: head, fontWeight: 700, fontSize: 13, color: '#fff' }}>KLEO</div>
            <div style={{ fontFamily: body, fontSize: 9, color: 'rgba(255,255,255,0.8)' }}>{mk.date}</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {mk.stat_labels.map(([v, l, c]) => (
              <div key={l} style={{ background: 'rgba(255,255,255,0.18)', borderRadius: 8, padding: '5px 9px', textAlign: 'center' }}>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 13, color: '#fff' }}>{v}</div>
                <div style={{ fontFamily: body, fontSize: 7.5, color: 'rgba(255,255,255,0.8)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', background: '#EDE9F5' }}>
          {mk.tabs.map((t, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center', padding: '6px 0',
              fontFamily: body, fontSize: 8, fontWeight: i===activeTab ? 700 : 500,
              color: i===activeTab ? P : 'rgba(13,27,42,0.4)',
              borderBottom: i===activeTab ? `2px solid ${P}` : 'none',
              transition: 'color 0.3s', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{t}</div>
          ))}
        </div>
        <div style={{ padding: '10px 11px 14px' }}>
          <div style={{ fontFamily: body, fontSize: 8, fontWeight: 700, letterSpacing: 0.8,
            textTransform: 'uppercase', color: 'rgba(13,27,42,0.38)', marginBottom: 4 }}>{mk.pending}</div>
          <div style={{ overflow: 'hidden', height: 124 }}>
            {visibleTasks.map((task, i) => (
              <div key={task.t + scrollIdx + i}
                style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0',
                  borderBottom: '1px solid rgba(13,27,42,0.05)',
                  animation: i === 3 ? 'bxPendSlideIn 0.4s ease both' : 'none',
                  opacity: task.done ? 0.55 : 1 }}>
                <style>{`@keyframes bxPendSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}`}</style>
                <div style={{ width: 24, height: 24, borderRadius: 7, background: resolveColor(task.cl)+'22',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  fontFamily: body, fontSize: 11, fontWeight: 700, color: resolveColor(task.cl) }}>{task.ic}</div>
                <div style={{ flex: 1, lineHeight: 1.2 }}>
                  <div style={{ fontFamily: body, fontSize: 11, fontWeight: 600, color: NAVY }}>{task.t}</div>
                  <div style={{ fontFamily: body, fontSize: 9, color: 'rgba(13,27,42,0.45)' }}>{task.s}</div>
                </div>
                {task.tag && <span style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: resolveColor(task.cl),
                  background: resolveColor(task.cl)+'18', borderRadius: 100, padding: '2px 7px' }}>{task.tag}</span>}
              </div>
            ))}
          </div>
          <div style={{ fontFamily: body, fontSize: 8, fontWeight: 700, letterSpacing: 0.8,
            textTransform: 'uppercase', color: 'rgba(13,27,42,0.38)', margin: '9px 0 4px' }}>{mk.habits_label}</div>
          {mk.habits.map(([t, v, pct]) => (
            <div key={t} style={{ marginBottom: 7 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: body, fontSize: 9.5, color: NAVY, marginBottom: 2 }}>
                <span>{t}</span><span style={{ color: P, fontWeight: 700 }}>{v}</span>
              </div>
              <div style={{ height: 4, borderRadius: 100, background: 'rgba(13,27,42,0.08)' }}>
                <div style={{ height: '100%', width: pct+'%', borderRadius: 100, background: P }} />
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', gap: 5, marginTop: 10 }}>
            {mk.stats_row.map(([v, l, c]) => (
              <div key={l} style={{ flex: 1, background: resolveColor(c)+'14', borderRadius: 8, padding: '6px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 11, color: resolveColor(c) }}>{v}</div>
                <div style={{ fontFamily: body, fontSize: 7.5, color: 'rgba(13,27,42,0.5)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </Phone>
    );
  }

  // ── INGRID ───────────────────────────────────────────────────
  function INGRID({ accent }) {
    useLang();
    const { useState, useEffect } = React;
    const [visible, setVisible] = useState(2);
    const [typing, setTyping] = useState(false);
    const mk = window.getMk().ingrid;

    useEffect(() => {
      const cycle = () => {
        setTyping(true);
        setTimeout(() => { setTyping(false); setVisible(v => v < mk.messages.length ? v + 1 : 2); }, 1400);
      };
      const t = setInterval(cycle, 3200);
      return () => clearInterval(t);
    }, [mk.messages.length]);

    const In = ({ children }) => (
      <div style={{ alignSelf: 'flex-start', maxWidth: '82%', background: '#fff',
        borderRadius: '4px 14px 14px 14px', padding: '9px 13px', fontFamily: body, fontSize: 13,
        lineHeight: 1.4, color: NAVY, boxShadow: '0 1px 2px rgba(0,0,0,0.08)' }}>{children}</div>
    );
    const Out = ({ children }) => (
      <div style={{ alignSelf: 'flex-end', maxWidth: '82%', background: '#DCF8C6',
        borderRadius: '14px 4px 14px 14px', padding: '9px 13px', fontFamily: body, fontSize: 13,
        lineHeight: 1.4, color: NAVY }}>{children}</div>
    );

    return (
      <Phone accent={accent} screen="#ECE5DD">
        <div style={{ background: accent, padding: '30px 16px 14px', display: 'flex', alignItems: 'center', gap: 11 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.24)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: head, fontWeight: 700, fontSize: 17, color: '#fff' }}>I</div>
          <div>
            <div style={{ fontFamily: head, fontWeight: 600, fontSize: 15, color: '#fff' }}>INGRID</div>
            <div style={{ fontFamily: body, fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>{mk.status}</div>
          </div>
        </div>
        <div style={{ padding: '16px 13px 22px', display: 'flex', flexDirection: 'column', gap: 9,
          height: 300, overflow: 'hidden', justifyContent: 'flex-end' }}>
          {mk.messages.slice(0, visible).map(([isOut, text], i) =>
            isOut ? <Out key={i}>{text}</Out> : <In key={i}>{text}</In>
          )}
          {typing && (
            <div style={{ alignSelf: 'flex-start', background: '#fff', borderRadius: '4px 14px 14px 14px',
              padding: '10px 14px', display: 'flex', gap: 5, boxShadow: '0 1px 2px rgba(0,0,0,0.08)' }}>
              {[0,1,2].map(i => <span key={i} style={{ width: 7, height: 7, borderRadius: '50%',
                background: 'rgba(13,27,42,0.35)', display: 'inline-block',
                animation: `bxDot 1.2s ease-in-out ${i*0.2}s infinite` }} />)}
              <style>{`@keyframes bxDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}`}</style>
            </div>
          )}
        </div>
      </Phone>
    );
  }

  // ── BoXtore ──────────────────────────────────────────────────
  function BoXtore({ accent }) {
    useLang();
    const { useState, useEffect } = React;
    const B = '#0F1C2B', PAN = '#162436', S = '#1E3048';
    const T = '#E8EFF8', DIM = 'rgba(232,239,248,0.5)';
    const GG = '#1F8A5B', AA = '#E07B39';
    const [activeNav, setActiveNav] = useState(0);
    const [activeBar, setActiveBar] = useState(4);
    const mk = window.getMk().bx;

    // Status color map
    const statusColor = { 'Completado': GG, 'Concluído': GG, 'Completed': GG, 'Complété': GG,
      'En camino': accent, 'On the way': accent, 'En route': accent, 'A caminho': accent,
      'Pendiente': AA, 'Pending': AA, 'En attente': AA, 'Pendente': AA };
    function sc(s) { return statusColor[s] || accent; }

    useEffect(() => {
      const t1 = setInterval(() => setActiveBar(b => (b + 1) % 7), 700);
      const t2 = setInterval(() => setActiveNav(n => (n + 1) % mk.nav.length), 3000);
      return () => { clearInterval(t1); clearInterval(t2); };
    }, [mk.nav.length]);

    const bars = [38, 55, 42, 68, 85, 52, 76];

    const views = {
      0: () => (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
            {mk.stats.map(([l,v,d]) => (
              <div key={l} style={{ background: S, borderRadius: 9, padding: '10px 11px' }}>
                <div style={{ fontFamily: body, fontSize: 8.5, color: DIM, marginBottom: 3 }}>{l}</div>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 16, color: T }}>{v}</div>
                {d && <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: GG }}>{d}</div>}
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1, minHeight: 0 }}>
            <div style={{ background: S, borderRadius: 9, padding: '12px' }}>
              <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.sales7}</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 58 }}>
                {bars.map((h,i) => <div key={i} style={{ flex: 1, borderRadius: 3, height: h+'%', background: i===activeBar ? accent : accent+'44', transition: 'background 0.25s' }} />)}
              </div>
              <div style={{ display: 'flex', marginTop: 5 }}>
                {['L','M','X','J','V','S','D'].map(d => <div key={d} style={{ flex:1, textAlign:'center', fontFamily:body, fontSize:7.5, color:DIM }}>{d}</div>)}
              </div>
            </div>
            <div style={{ background: S, borderRadius: 9, padding: '12px' }}>
              <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.recent}</div>
              {mk.orders.slice(0,3).map(([id,n,s,a]) => (
                <div key={id} style={{ display: 'flex', alignItems: 'center', padding: '5px 0', borderBottom: '1px solid rgba(232,239,248,0.06)', gap: 6 }}>
                  <span style={{ fontFamily: mono, fontSize: 8.5, color: DIM, flexShrink: 0 }}>{id}</span>
                  <span style={{ flex: 1, fontFamily: body, fontSize: 9.5, color: T }}>{n}</span>
                  <span style={{ fontFamily: body, fontSize: 8.5, fontWeight: 600, color: sc(s), background: sc(s)+'22', borderRadius: 100, padding: '2px 7px' }}>{s}</span>
                  <span style={{ fontFamily: head, fontSize: 9.5, fontWeight: 700, color: T, marginLeft: 4 }}>{a}</span>
                </div>
              ))}
            </div>
          </div>
        </>
      ),
      1: () => (
        <div style={{ background: S, borderRadius: 9, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.all_orders}</div>
          {mk.orders.map(([id,n,s,a,d]) => (
            <div key={id} style={{ display: 'flex', alignItems: 'center', padding: '6px 0', borderBottom: '1px solid rgba(232,239,248,0.06)', gap: 8 }}>
              <span style={{ fontFamily: mono, fontSize: 8.5, color: DIM, flexShrink: 0, width: 36 }}>{id}</span>
              <span style={{ flex: 1, fontFamily: body, fontSize: 10, color: T, fontWeight: 600 }}>{n}</span>
              <span style={{ fontFamily: body, fontSize: 8.5, fontWeight: 600, color: sc(s), background: sc(s)+'22', borderRadius: 100, padding: '2px 8px' }}>{s}</span>
              <span style={{ fontFamily: body, fontSize: 8.5, color: DIM }}>{d}</span>
              <span style={{ fontFamily: head, fontSize: 10, fontWeight: 700, color: T }}>{a}</span>
            </div>
          ))}
        </div>
      ),
      2: () => (
        <div style={{ background: S, borderRadius: 9, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.clients_title}</div>
          {mk.clients.map(([ini,n,tel,p]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: '1px solid rgba(232,239,248,0.06)' }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: accent+'33', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: head, fontWeight: 700, fontSize: 10, flexShrink: 0 }}>{ini}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: body, fontSize: 10, fontWeight: 600, color: T }}>{n}</div>
                <div style={{ fontFamily: body, fontSize: 8.5, color: DIM }}>{tel}</div>
              </div>
              <span style={{ fontFamily: body, fontSize: 8.5, color: accent }}>{p}</span>
            </div>
          ))}
        </div>
      ),
      3: () => (
        <div style={{ flex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {mk.catalog.map(([n,p,s]) => (
              <div key={n} style={{ background: S, borderRadius: 9, padding: '10px 10px' }}>
                <div style={{ height: 38, borderRadius: 6, background: accent+'18', marginBottom: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>
                </div>
                <div style={{ fontFamily: body, fontSize: 9.5, fontWeight: 600, color: T }}>{n}</div>
                <div style={{ fontFamily: head, fontSize: 10, fontWeight: 700, color: accent }}>{p}</div>
                <div style={{ fontFamily: body, fontSize: 8, color: DIM }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      ),
      4: () => (
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 10, flex: 1 }}>
          <div style={{ background: S, borderRadius: 9, padding: '10px 12px' }}>
            <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.pos_ticket}</div>
            {mk.pos_items.map(([n,q,p]) => (
              <div key={n} style={{ display: 'flex', gap: 6, padding: '6px 0', borderBottom: '1px solid rgba(232,239,248,0.06)' }}>
                <span style={{ flex: 1, fontFamily: body, fontSize: 9.5, color: T }}>{n}</span>
                <span style={{ fontFamily: body, fontSize: 9, color: DIM }}>{q}</span>
                <span style={{ fontFamily: head, fontSize: 10, fontWeight: 700, color: T }}>{p}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingTop: 8, borderTop: '1px solid rgba(232,239,248,0.12)' }}>
              <span style={{ fontFamily: body, fontSize: 10, fontWeight: 700, color: T }}>{mk.pos_total}</span>
              <span style={{ fontFamily: head, fontSize: 14, fontWeight: 700, color: accent }}>$1,500</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ background: accent, borderRadius: 9, padding: '14px', textAlign: 'center', flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="2"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg>
              <span style={{ fontFamily: head, fontSize: 11, fontWeight: 700, color: '#fff' }}>{mk.pos_charge}</span>
            </div>
            <div style={{ background: S, borderRadius: 9, padding: '10px', textAlign: 'center' }}>
              <div style={{ fontFamily: body, fontSize: 8.5, color: DIM }}>{mk.pos_cash}</div>
              <div style={{ fontFamily: body, fontSize: 8.5, color: DIM, marginTop: 4 }}>{mk.pos_card}</div>
              <div style={{ fontFamily: body, fontSize: 8.5, color: DIM, marginTop: 4 }}>{mk.pos_transfer}</div>
            </div>
          </div>
        </div>
      ),
      5: () => (
        <div style={{ background: S, borderRadius: 9, padding: '14px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.monthly}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
            {mk.monthly_stats.map(([l,v]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 18, color: accent }}>{v}</div>
                <div style={{ fontFamily: body, fontSize: 8, color: DIM }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 70 }}>
            {[42,58,35,70,85,62,78,55,90,72,68,80].map((h,i) => (
              <div key={i} style={{ flex: 1, borderRadius: 3, height: h+'%', background: i===11 ? accent : accent+'44' }} />
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 5 }}>
            {mk.months.map(m => (
              <div key={m} style={{ flex:1, textAlign:'center', fontFamily:body, fontSize:6.5, color:DIM }}>{m}</div>
            ))}
          </div>
        </div>
      ),
      6: () => (
        <div style={{ background: S, borderRadius: 9, padding: '14px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 0.5 }}>{mk.config_title}</div>
          {mk.config_fields.map(([l,v]) => (
            <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid rgba(232,239,248,0.06)' }}>
              <span style={{ fontFamily: body, fontSize: 9.5, color: DIM }}>{l}</span>
              <span style={{ fontFamily: body, fontSize: 9.5, color: T, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>
      ),
    };

    const ViewComponent = views[activeNav] || views[0];
    return (
      <div style={{ position: 'relative', width: 680 }}>
        <div style={{ background: '#0A1520', borderRadius: 16, padding: 10, boxShadow: '0 40px 80px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(248,244,238,0.06)' }}>
          <div style={{ background: '#0D1C2E', borderRadius: '8px 8px 0 0', padding: '7px 14px', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 1 }}>
            <div style={{ display: 'flex', gap: 5 }}>
              {['#FF5F57','#FEBC2E','#28C840'].map(c => <div key={c} style={{ width: 9, height: 9, borderRadius: '50%', background: c }} />)}
            </div>
            <div style={{ flex: 1, background: '#0A1520', borderRadius: 6, padding: '3px 12px', textAlign: 'center', fontFamily: body, fontSize: 10, color: DIM }}>boxtore.britxia.tech</div>
          </div>
          <div style={{ display: 'flex', borderRadius: '0 0 8px 8px', overflow: 'hidden', height: 390 }}>
            <div style={{ width: 150, background: B, padding: '16px 0', display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}>
              <div style={{ padding: '0 14px 14px', fontFamily: head, fontWeight: 700, fontSize: 13, color: accent }}>BoXtore</div>
              {mk.nav.map(([ic,label], i) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 14px',
                  background: i===activeNav ? accent+'22' : 'transparent',
                  borderLeft: i===activeNav ? '2px solid '+accent : '2px solid transparent',
                  transition: 'background 0.3s, border-color 0.3s' }}>
                  <span style={{ fontSize: 11, color: i===activeNav ? accent : DIM }}>{ic}</span>
                  <span style={{ fontFamily: body, fontSize: 10.5, fontWeight: i===activeNav ? 600 : 400, color: i===activeNav ? T : DIM }}>{label}</span>
                </div>
              ))}
            </div>
            <div style={{ flex: 1, background: PAN, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'hidden' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontFamily: head, fontWeight: 600, fontSize: 14, color: T }}>{mk.nav[activeNav][1]}</div>
                  <div style={{ fontFamily: body, fontSize: 9.5, color: DIM }}>{mk.date}</div>
                </div>
                <div style={{ fontFamily: body, fontSize: 10, fontWeight: 600, color: B, background: accent, borderRadius: 6, padding: '5px 12px' }}>{mk.new_btn}</div>
              </div>
              <ViewComponent />
            </div>
          </div>
        </div>
        <div style={{ width: 120, height: 10, background: '#0A1520', margin: '0 auto', borderRadius: '0 0 4px 4px' }} />
        <div style={{ width: 200, height: 8, background: '#0D1C2E', margin: '0 auto', borderRadius: '0 0 8px 8px' }} />
      </div>
    );
  }

  // ── ZUBEHÖRE ─────────────────────────────────────────────────
  function ZUBEHORE({ accent }) {
    useLang();
    const { useState, useEffect } = React;
    const E = accent, EL = '#C7A06A', B = '#0F1A24', PAN = '#152030', S = '#1C2E3D';
    const T = '#EDE8E0', DIM = 'rgba(237,232,224,0.5)';
    const GG = '#1F8A5B', AA = '#E07B39';
    const [activeNav, setActiveNav] = useState(0);
    const [progPct, setProgPct] = useState([0,0,0]);
    const mk = window.getMk().zu;

    const statusColor = { 'En proceso': GG, 'En cours': GG, 'In progress': GG, 'Em andamento': GG,
      'Agendado': EL, 'Scheduled': EL, 'Planifié': EL,
      'Pendiente': AA, 'Pending': AA, 'En attente': AA, 'Pendente': AA };
    function sc(s) { return statusColor[s] || E; }

    useEffect(() => {
      setTimeout(() => setProgPct([72,35,15]), 400);
      const t = setInterval(() => setActiveNav(n => (n+1) % mk.nav.length), 3000);
      return () => clearInterval(t);
    }, [mk.nav.length]);

    const views = {
      0: () => (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 7 }}>
            {mk.stats.map(([l,v]) => (
              <div key={l} style={{ background: S, borderRadius: 8, padding: '9px 10px' }}>
                <div style={{ fontFamily: body, fontSize: 8, color: DIM, marginBottom: 2 }}>{l}</div>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 17, color: T }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 9, flex: 1, minHeight: 0 }}>
            <div style={{ background: S, borderRadius: 8, padding: '10px 12px' }}>
              <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>{mk.active}</div>
              {mk.projects.map(([n,tp,st],i) => (
                <div key={n} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                    <span style={{ fontFamily: body, fontSize: 10, fontWeight: 600, color: T }}>{n}</span>
                    <span style={{ fontFamily: body, fontSize: 8.5, fontWeight: 600, color: sc(st), background: sc(st)+'22', borderRadius: 100, padding: '1px 7px' }}>{mk.sc[st]||st}</span>
                  </div>
                  <div style={{ height: 4, borderRadius: 100, background: 'rgba(237,232,224,0.1)' }}>
                    <div style={{ height: '100%', width: progPct[i]+'%', borderRadius: 100, background: sc(st), transition: 'width 1.6s cubic-bezier(.22,1,.36,1)' }} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{ background: S, borderRadius: 8, padding: '10px 12px' }}>
              <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>{mk.today}</div>
              {mk.schedule.slice(0,3).map(([t,l,c]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: '1px solid rgba(237,232,224,0.06)' }}>
                  <div style={{ width: 3, height: 18, borderRadius: 100, background: E, flexShrink: 0 }} />
                  <div style={{ fontFamily: mono, fontSize: 9, color: EL, flexShrink: 0 }}>{t}</div>
                  <div style={{ fontFamily: body, fontSize: 9.5, color: T }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </>
      ),
      1: () => (
        <div style={{ background: S, borderRadius: 8, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{mk.nav[1][1]}</div>
          {mk.projects_all.map(([n,tp,st,pct]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', padding: '6px 0', borderBottom: '1px solid rgba(237,232,224,0.06)', gap: 8 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: body, fontSize: 10, fontWeight: 600, color: T }}>{n}</div>
                <div style={{ fontFamily: body, fontSize: 8.5, color: DIM }}>{tp}</div>
              </div>
              <span style={{ fontFamily: body, fontSize: 8.5, fontWeight: 600, color: sc(st), background: sc(st)+'22', borderRadius: 100, padding: '2px 8px' }}>{mk.sc[st]||st}</span>
              <span style={{ fontFamily: head, fontSize: 9, fontWeight: 700, color: EL }}>{pct}</span>
            </div>
          ))}
        </div>
      ),
      2: () => (
        <div style={{ background: S, borderRadius: 8, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{mk.nav[2][1]}</div>
          {mk.quotes.map(([id,n,m,s]) => (
            <div key={id} style={{ display: 'flex', alignItems: 'center', padding: '6px 0', borderBottom: '1px solid rgba(237,232,224,0.06)', gap: 8 }}>
              <span style={{ fontFamily: mono, fontSize: 8.5, color: DIM, width: 50, flexShrink: 0 }}>{id}</span>
              <span style={{ flex: 1, fontFamily: body, fontSize: 10, color: T, fontWeight: 600 }}>{n}</span>
              <span style={{ fontFamily: head, fontSize: 10, fontWeight: 700, color: E }}>{m}</span>
              <span style={{ fontFamily: body, fontSize: 8.5, color: sc(mk.quote_sc[s]||s), background: sc(mk.quote_sc[s]||s)+'22', borderRadius: 100, padding: '2px 7px' }}>{mk.quote_sc[s]||s}</span>
            </div>
          ))}
        </div>
      ),
      3: () => (
        <div style={{ background: S, borderRadius: 8, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{mk.nav[3][1]}</div>
          {mk.clients.map(([ini,n,tel,p]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: '1px solid rgba(237,232,224,0.06)' }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: E+'33', color: EL, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: head, fontWeight: 700, fontSize: 10, flexShrink: 0 }}>{ini}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: body, fontSize: 10, fontWeight: 600, color: T }}>{n}</div>
                <div style={{ fontFamily: body, fontSize: 8.5, color: DIM }}>{tel}</div>
              </div>
              <span style={{ fontFamily: body, fontSize: 8.5, color: EL }}>{p}</span>
            </div>
          ))}
        </div>
      ),
      4: () => (
        <div style={{ background: S, borderRadius: 8, padding: '12px', flex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2, marginBottom: 10 }}>
            {mk.days.map((d,i) => <div key={i} style={{ textAlign:'center', fontFamily:body, fontSize:8, color:DIM, paddingBottom:4 }}>{d}</div>)}
            {[16,17,18,19,20,21,22].map(d => (
              <div key={d} style={{ textAlign:'center', fontFamily:head, fontSize:10, fontWeight:d===20?700:400, color:d===20?'#fff':T,
                background:d===20?E:'transparent', borderRadius:'50%', width:22, height:22, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto' }}>{d}</div>
            ))}
          </div>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>{mk.schedule_title}</div>
          {mk.schedule.map(([t,l,tp],i) => (
            <div key={t} style={{ display: 'flex', gap: 10, padding: '5px 0', borderBottom: '1px solid rgba(237,232,224,0.06)', alignItems: 'center' }}>
              <span style={{ fontFamily: mono, fontSize: 8.5, color: EL, width: 38, flexShrink: 0 }}>{t}</span>
              <div style={{ width: 3, height: 16, borderRadius: 100, background: E, flexShrink: 0 }} />
              <span style={{ flex: 1, fontFamily: body, fontSize: 9.5, color: T }}>{l}</span>
              <span style={{ fontFamily: body, fontSize: 8, color: EL }}>{tp}</span>
            </div>
          ))}
        </div>
      ),
      5: () => (
        <div style={{ background: S, borderRadius: 8, padding: '12px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 12 }}>{mk.finance_title}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
            {mk.finance_stats.map(([l,v]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: head, fontWeight: 700, fontSize: 16, color: E }}>{v}</div>
                <div style={{ fontFamily: body, fontSize: 8, color: DIM }}>{l}</div>
              </div>
            ))}
          </div>
          {mk.finance_items.map(([n,m,s]) => (
            <div key={n} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid rgba(237,232,224,0.06)', alignItems: 'center' }}>
              <span style={{ fontFamily: body, fontSize: 9.5, color: T }}>{n}</span>
              <span style={{ fontFamily: head, fontSize: 10, fontWeight: 700, color: EL }}>{m}</span>
              <span style={{ fontFamily: body, fontSize: 8.5, color: sc(mk.finance_sc[s]||s) }}>{mk.finance_sc[s]||s}</span>
            </div>
          ))}
        </div>
      ),
      6: () => (
        <div style={{ background: S, borderRadius: 8, padding: '14px', flex: 1 }}>
          <div style={{ fontFamily: body, fontSize: 8.5, fontWeight: 700, color: DIM, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 12 }}>{mk.config_title}</div>
          {mk.config_fields.map(([l,v]) => (
            <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid rgba(237,232,224,0.06)' }}>
              <span style={{ fontFamily: body, fontSize: 9.5, color: DIM }}>{l}</span>
              <span style={{ fontFamily: body, fontSize: 9.5, color: T, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>
      ),
    };

    const ViewComponent = views[activeNav] || views[0];
    return (
      <div style={{ position: 'relative', width: 680 }}>
        <div style={{ background: '#0A1520', borderRadius: 16, padding: 10, boxShadow: '0 40px 80px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(237,232,224,0.06)' }}>
          <div style={{ background: '#0D1C2E', borderRadius: '8px 8px 0 0', padding: '7px 14px', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 1 }}>
            <div style={{ display: 'flex', gap: 5 }}>
              {['#FF5F57','#FEBC2E','#28C840'].map(c => <div key={c} style={{ width:9, height:9, borderRadius:'50%', background:c }} />)}
            </div>
            <div style={{ flex:1, background:'#0A1520', borderRadius:6, padding:'3px 12px', textAlign:'center', fontFamily:body, fontSize:10, color:DIM }}>zubehore.britxia.tech</div>
          </div>
          <div style={{ display:'flex', borderRadius:'0 0 8px 8px', overflow:'hidden', height:360 }}>
            <div style={{ width:148, background:B, padding:'14px 0', display:'flex', flexDirection:'column', gap:2, flexShrink:0 }}>
              <div style={{ padding:'0 14px 12px', fontFamily:head, fontWeight:700, fontSize:13, color:E }}>ZUBEHÖRE</div>
              {mk.nav.map(([ic,l],i) => (
                <div key={l} style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 14px',
                  background: i===activeNav ? E+'22' : 'transparent',
                  borderLeft: i===activeNav ? '2px solid '+E : '2px solid transparent',
                  transition: 'background 0.3s' }}>
                  <span style={{ fontSize:10, color: i===activeNav ? E : DIM }}>{ic}</span>
                  <span style={{ fontFamily:body, fontSize:10, fontWeight: i===activeNav ? 600:400, color: i===activeNav ? T:DIM }}>{l}</span>
                </div>
              ))}
            </div>
            <div style={{ flex:1, background:PAN, padding:'14px 16px', display:'flex', flexDirection:'column', gap:10, overflowY:'hidden' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div>
                  <div style={{ fontFamily:head, fontWeight:600, fontSize:13, color:T }}>{mk.nav[activeNav][1]}</div>
                  <div style={{ fontFamily:body, fontSize:9, color:DIM }}>{mk.date}</div>
                </div>
                <div style={{ fontFamily:body, fontSize:10, fontWeight:600, color:B, background:E, borderRadius:6, padding:'5px 10px' }}>{mk.new_btn}</div>
              </div>
              <ViewComponent />
            </div>
          </div>
        </div>
        <div style={{ width:120, height:10, background:'#0A1520', margin:'0 auto', borderRadius:'0 0 4px 4px' }} />
        <div style={{ width:200, height:8, background:'#0D1C2E', margin:'0 auto', borderRadius:'0 0 8px 8px' }} />
        {/* Mini phone overlay */}
        <div style={{ position:'absolute', right:-32, bottom:28, width:138, borderRadius:22, background:'#0B1622',
          padding:5, boxShadow:'0 20px 50px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(237,232,224,0.08)', zIndex:10 }}>
          <div style={{ borderRadius:18, overflow:'hidden', background:'#F3EEE7' }}>
            <div style={{ background:E, padding:'14px 12px 10px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
              <div style={{ fontFamily:head, fontWeight:700, fontSize:11, color:'#fff' }}>ZUBEHÖRE</div>
              <div style={{ fontFamily:body, fontSize:8.5, color:'rgba(255,255,255,0.8)' }}>{mk.mini_title}</div>
            </div>
            <div style={{ padding:'10px 10px 12px', display:'flex', flexDirection:'column', gap:7 }}>
              {mk.mini_proj.map(([n,s,c]) => (
                <div key={n} style={{ background:'#fff', borderRadius:9, padding:'7px 10px' }}>
                  <div style={{ fontFamily:body, fontSize:9.5, fontWeight:600, color:NAVY, marginBottom:3 }}>{n}</div>
                  <div style={{ display:'flex', alignItems:'center', gap:5 }}>
                    <div style={{ width:5, height:5, borderRadius:'50%', background:c }} />
                    <div style={{ fontFamily:body, fontSize:8.5, color:c, fontWeight:600 }}>{mk.sc[s]||s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.Mockups = { KLEO, INGRID, BoXtore, 'ZUBEHÖRE': ZUBEHORE };
})();
