// MiPaghi · Beauty Corner — iPhone scenes
// Vendita assistita in corner beauty/cosmetics/parfume, con autenticazione addetta,
// catalogo corner + bundle + omaggi a soglia, doppio percorso locale/remoto.

// ─────────────────────────────────────────────────────────────
// Dati: staff, store, catalogo corner
// ─────────────────────────────────────────────────────────────

const STORES_B = [
  { id: 'mi', name: 'Milano · Corso Buenos Aires', code: 'MI-01' },
  { id: 'rm', name: 'Roma · Via del Corso', code: 'RM-02' },
  { id: 'ct', name: 'Catania · Via Etnea', code: 'CT-03' },
];

const STAFF_B = [
  { id: 'elena',  name: 'Elena Vitali',    init: 'EV', store: 'mi', role: 'Beauty advisor' },
  { id: 'franca', name: 'Francesca Riva',  init: 'FR', store: 'mi', role: 'Beauty advisor' },
  { id: 'giada',  name: 'Giada Colombo',   init: 'GC', store: 'rm', role: 'Beauty advisor' },
  { id: 'marta',  name: 'Marta Ferrero',   init: 'MF', store: 'ct', role: 'Beauty advisor' },
];

const CATB = {
  spf50:    { id: 'spf50',    cat: 'solari', name: 'Spray Solare SPF 50+',      sub: '200 ml · resistente all\u2019acqua', price: 29.90, glyph: 'sun' },
  latte:    { id: 'latte',    cat: 'solari', name: 'Latte Solare SPF 30',       sub: '150 ml · pelli sensibili',           price: 24.90, glyph: 'sun' },
  doposole: { id: 'doposole', cat: 'solari', name: 'Doposole Lenitivo',         sub: '200 ml · aloe vera',                 price: 19.90, glyph: 'drop' },
  crema:    { id: 'crema',    cat: 'viso',   name: 'Crema Viso Idratante',      sub: '50 ml · acido ialuronico',           price: 39.90, glyph: 'cream' },
  siero:    { id: 'siero',    cat: 'viso',   name: 'Siero Illuminante',         sub: '30 ml · vitamina C',                 price: 45.00, glyph: 'drop' },
  parfum:   { id: 'parfum',   cat: 'parfum', name: 'Eau de Parfum \u201CSoleil\u201D', sub: '50 ml · note agrumate',        price: 79.00, glyph: 'parfum' },
  kitsolari:{ id: 'kitsolari',cat: 'bundle', name: 'Kit Solari + Pochette',     sub: 'SPF 50+ e Doposole · pochette in omaggio', price: 44.90, glyph: 'gift', bundle: true, save: 4.90 },
  kitviso:  { id: 'kitviso',  cat: 'bundle', name: 'Routine Viso Completa',     sub: 'Crema + Siero · mini detergente in omaggio', price: 74.90, glyph: 'gift', bundle: true, save: 10.00 },
};

const GIFT_THRESHOLD_B = 80;
const GIFT_B = { id: 'gift', name: 'Mini Doposole 50 ml', sub: 'Omaggio iniziativa corner', price: 0, glyph: 'gift' };

const fmtB = (n) => n.toLocaleString('it-IT', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const eurB = (n) => `€ ${fmtB(n)}`;

// ─────────────────────────────────────────────────────────────
// Product glyph placeholder (in attesa delle foto reali)
// ─────────────────────────────────────────────────────────────
function BGlyph({ glyph = 'sun', size = 44, radius = 12 }) {
  const palettes = {
    sun:    { bg: 'linear-gradient(135deg, #FBF6E9, #F3E3BC)', fg: '#C9A24B' },
    drop:   { bg: 'linear-gradient(135deg, #E8F1FA, #CFE3F4)', fg: '#1E78C8' },
    cream:  { bg: 'linear-gradient(135deg, #FBF1F4, #F2D8E1)', fg: '#C86E8A' },
    parfum: { bg: 'linear-gradient(135deg, #F0EBF7, #DCD0EE)', fg: '#8A6FB8' },
    gift:   { bg: 'linear-gradient(135deg, #FBF1F4, #F3E3BC)', fg: '#A94F6D' },
  };
  const p = palettes[glyph] || palettes.sun;
  const s = Math.round(size * .5);
  const icon = (() => {
    if (glyph === 'sun') return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth={1.8} strokeLinecap="round">
        <circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5 5l2.1 2.1M16.9 16.9L19 19M5 19l2.1-2.1M16.9 7.1L19 5"/>
      </svg>);
    if (glyph === 'drop') return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3s6.5 7 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 10 12 3 12 3Z"/>
      </svg>);
    if (glyph === 'cream') return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
        <rect x="5" y="9" width="14" height="11" rx="3"/><path d="M7 9V7.5A1.5 1.5 0 0 1 8.5 6h7A1.5 1.5 0 0 1 17 7.5V9"/>
      </svg>);
    if (glyph === 'parfum') return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
        <rect x="7" y="10" width="10" height="11" rx="3"/><path d="M10 10V8h4v2M12 8V5M9.5 5h5"/>
      </svg>);
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="10" width="16" height="10" rx="2"/><path d="M4 10h16M12 10v10M12 10s-1-4-4-4a2 2 0 0 0 0 4M12 10s1-4 4-4a2 2 0 0 1 0 4"/>
      </svg>);
  })();
  return (
    <div style={{ width: size, height: size, borderRadius: radius, background: p.bg, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
      {icon}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// UI atoms
// ─────────────────────────────────────────────────────────────
function BChrome({ title, back, right, sub }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 10, background: '#fff', borderBottom: '1px solid var(--line-2)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
          {back ? (
            <button onClick={back} style={{ border: 'none', background: 'transparent', width: 28, height: 28, display: 'grid', placeItems: 'center', color: 'var(--ink)', cursor: 'pointer', padding: 0 }}>
              <IconArrowL size={18} stroke={2}/>
            </button>
          ) : (<MiPaghiMark size={24}/>)}
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15, minWidth: 0 }}>
            <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>{title}</span>
            {sub && <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>{sub}</span>}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{right}</div>
      </div>
    </div>
  );
}

function BPrimary({ children, onClick, icon, secondary = false, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      border: 'none', cursor: disabled ? 'default' : 'pointer',
      background: secondary ? 'var(--blue-pale)' : 'var(--blue)',
      color: secondary ? 'var(--ink)' : '#fff',
      padding: '13px 18px', borderRadius: 12, fontWeight: 700, fontSize: 14,
      width: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      opacity: disabled ? .45 : 1, fontFamily: 'inherit',
      boxShadow: secondary ? 'none' : '0 4px 12px rgba(30,120,200,.25)',
    }}>{children}{icon}</button>
  );
}

function BLabel({ children, style }) {
  return <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '14px 0 8px', ...style }}>{children}</div>;
}

function BFooter({ children }) {
  return <div style={{ padding: '12px 16px calc(16px + 34px)', borderTop: '1px solid var(--line-2)', background: '#fff' }}>{children}</div>;
}

// Badge addetta autenticata, sempre visibile nelle scene di vendita
function StaffBadge({ staff, store }) {
  if (!staff) return null;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', borderRadius: 999, background: 'var(--rose-pale)', border: '1px solid rgba(200,110,138,.25)' }}>
      <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--rose)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 8, fontWeight: 800 }}>{staff.init}</div>
      <span style={{ fontSize: 9, fontWeight: 800, color: 'var(--rose-deep)', letterSpacing: '.03em' }}>{store?.code}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 1 — Autenticazione: store → addetta → PIN
// ─────────────────────────────────────────────────────────────
function B_Auth({ actions }) {
  const [step, setStep] = React.useState('store'); // store → staff → pin → ok
  const [storeId, setStoreId] = React.useState(null);
  const [staffId, setStaffId] = React.useState(null);
  const [pin, setPin] = React.useState('');
  const [err, setErr] = React.useState(false);

  const store = STORES_B.find(s => s.id === storeId);
  const staff = STAFF_B.find(s => s.id === staffId);

  const pressKey = (k) => {
    setErr(false);
    if (k === 'del') { setPin(p => p.slice(0, -1)); return; }
    if (pin.length >= 4) return;
    const next = pin + k;
    setPin(next);
    if (next.length === 4) {
      setTimeout(() => {
        setStep('ok');
        setTimeout(() => actions.login(staff, store), 900);
      }, 250);
    }
  };

  if (step === 'ok') {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, background: '#fff', animation: 'fadeIn .3s' }}>
        <div style={{ position: 'relative', width: 76, height: 76 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--ok)', opacity: .15, animation: 'ringPing 1.2s ease-out infinite' }}/>
          <div style={{ position: 'absolute', inset: 8, borderRadius: '50%', background: 'var(--ok)', display: 'grid', placeItems: 'center' }}>
            <IconCheck size={30} color="#fff" stroke={2.6}/>
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.01em' }}>Benvenuta, {staff?.name.split(' ')[0]}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 600, marginTop: 4 }}>{store?.name}</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#fff', animation: 'fadeIn .3s' }}>
      <div style={{ padding: '18px 20px 8px', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}><MiPaghiMark size={40}/></div>
        <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em' }}>Iniziativa Beauty Corner</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-3)', fontWeight: 600, marginTop: 3 }}>
          {step === 'store' ? 'Seleziona il tuo punto vendita' :
           step === 'staff' ? store?.name : `${staff?.name} · ${store?.code}`}
        </div>
      </div>

      {step === 'store' && (
        <div style={{ padding: '10px 16px', display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto' }}>
          {STORES_B.map((s, i) => (
            <button key={s.id} onClick={() => { setStoreId(s.id); setStep('staff'); }} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 12,
              border: '1px solid var(--line-2)', background: '#fff', cursor: 'pointer', textAlign: 'left',
              fontFamily: 'inherit', animation: `fadeIn .3s ${i*0.06}s both`,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue-pale)', color: 'var(--blue)', display: 'grid', placeItems: 'center' }}>
                <IconStore size={18} stroke={1.8}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{s.name}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600 }}>Corner attivo · {s.code}</div>
              </div>
              <IconChev size={15} stroke={2.4} color="var(--ink-3)"/>
            </button>
          ))}
        </div>
      )}

      {step === 'staff' && (
        <div style={{ padding: '10px 16px', display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto' }}>
          {STAFF_B.filter(s => s.store === storeId).map((s, i) => (
            <button key={s.id} onClick={() => { setStaffId(s.id); setStep('pin'); }} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 12,
              border: '1px solid var(--line-2)', background: '#fff', cursor: 'pointer', textAlign: 'left',
              fontFamily: 'inherit', animation: `fadeIn .3s ${i*0.06}s both`,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--rose)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 800 }}>{s.init}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{s.name}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600 }}>{s.role}</div>
              </div>
              <IconChev size={15} stroke={2.4} color="var(--ink-3)"/>
            </button>
          ))}
          <button onClick={() => setStep('store')} style={{ marginTop: 4, border: 'none', background: 'transparent', color: 'var(--ink-3)', fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
            ← Cambia punto vendita
          </button>
        </div>
      )}

      {step === 'pin' && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '8px 24px calc(16px + 34px)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, margin: '16px 0 6px', animation: err ? 'shake .3s' : 'none' }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{
                width: 14, height: 14, borderRadius: '50%',
                background: i < pin.length ? 'var(--blue)' : 'transparent',
                border: '1.5px solid', borderColor: i < pin.length ? 'var(--blue)' : 'var(--line)',
                transition: 'all .12s',
              }}/>
            ))}
          </div>
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, marginBottom: 10 }}>Inserisci il tuo PIN a 4 cifre</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 'auto' }}>
            {['1','2','3','4','5','6','7','8','9','','0','del'].map((k, i) => (
              k === '' ? <div key={i}/> :
              <button key={i} onClick={() => pressKey(k)} style={{
                padding: '14px 0', borderRadius: 12, border: '1px solid var(--line-2)',
                background: '#fff', fontSize: 18, fontWeight: 700, color: 'var(--ink)',
                cursor: 'pointer', fontFamily: 'inherit',
              }}>
                {k === 'del' ? '⌫' : k}
              </button>
            ))}
          </div>
          <button onClick={() => setStep('staff')} style={{ marginTop: 12, border: 'none', background: 'transparent', color: 'var(--ink-3)', fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
            ← Cambia profilo
          </button>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 2 — Corner dashboard (post-login)
// ─────────────────────────────────────────────────────────────
function B_Corner({ state, actions }) {
  const { staff, store } = state;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title={`Ciao ${staff?.name.split(' ')[0] || 'Elena'}`} sub={store?.name || 'Milano · Corso Buenos Aires'}
        right={<StaffBadge staff={staff} store={store}/>}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px' }}>
        {/* Iniziativa banner */}
        <div style={{
          padding: 14, borderRadius: 14, marginBottom: 12,
          background: 'linear-gradient(135deg, var(--rose-pale), var(--gold-pale))',
          border: '1px solid rgba(200,110,138,.2)',
        }}>
          <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--rose-deep)', marginBottom: 4 }}>Iniziativa co-marketing</div>
          <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-0.01em' }}>LUMÉA Paris × MiPaghi</div>
          <div style={{ fontSize: 11, color: 'var(--ink-2)', fontWeight: 600, marginTop: 2 }}>
            Summer Corner · −20% sui solari · omaggio oltre {eurB(GIFT_THRESHOLD_B)}
          </div>
        </div>

        {/* Personal stats */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 14 }}>
          {[
            { label: 'Oggi', value: '€ 312', sub: '5 ordini' },
            { label: 'Settimana', value: '€ 1.480', sub: '22 ordini' },
            { label: 'Remoto', value: '38%', sub: 'via link' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '10px 10px', borderRadius: 10, background: 'var(--paper)', border: '1px solid var(--line-2)' }}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{s.label}</div>
              <div style={{ fontSize: 15, fontWeight: 800, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{s.value}</div>
              <div style={{ fontSize: 9.5, color: 'var(--ink-3)', fontWeight: 600 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        <BLabel style={{ marginTop: 0 }}>Nuova vendita</BLabel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={() => actions.startSale('local')} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 12,
            border: '1.5px solid var(--blue)', background: 'var(--blue-pale)',
            cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
          }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue)', color: '#fff', display: 'grid', placeItems: 'center' }}>
              <IconStore size={18} stroke={1.8}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 800 }}>Cliente al corner</div>
              <div style={{ fontSize: 11, color: 'var(--ink-2)', fontWeight: 600 }}>Vendita diretta · ritiro immediato</div>
            </div>
            <IconChev size={15} stroke={2.4} color="var(--blue)"/>
          </button>
          <button onClick={() => actions.startSale('remote')} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 12,
            border: '1px solid var(--line-2)', background: '#fff',
            cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
          }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue-pale)', color: 'var(--blue)', display: 'grid', placeItems: 'center' }}>
              <IconWA size={18} stroke={1.8}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 800 }}>Cliente remoto</div>
              <div style={{ fontSize: 11, color: 'var(--ink-2)', fontWeight: 600 }}>WhatsApp / social · link + spedizione</div>
            </div>
            <IconChev size={15} stroke={2.4} color="var(--ink-3)"/>
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 3 — Catalogo corner (tabs + bundle) + foto live
// ─────────────────────────────────────────────────────────────
function B_Catalog({ state, actions }) {
  const [tab, setTab] = React.useState('all');
  const items = Object.values(CATB).filter(it => !state.cart.some(c => c.id === it.id));
  const filtered = tab === 'all' ? items : items.filter(i => i.cat === tab);
  const tabs = [
    { id: 'all', label: 'Tutti' }, { id: 'solari', label: 'Solari' },
    { id: 'viso', label: 'Viso' }, { id: 'parfum', label: 'Profumi' },
    { id: 'bundle', label: 'Bundle' },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Catalogo corner" sub={state.cart.length > 0 ? `${state.cart.length} nel carrello · ${eurB(state.cart.reduce((s,l)=>s+l.price,0))}` : 'Scegli il prodotto'}
        back={actions.back} right={<StaffBadge staff={state.staff} store={state.store}/>}/>

      <div style={{ padding: '10px 16px 0', display: 'flex', gap: 5, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '6px 12px', borderRadius: 999, border: 'none', flexShrink: 0,
            background: tab === t.id ? 'var(--ink)' : 'var(--blue-pale)',
            color: tab === t.id ? '#fff' : 'var(--ink-2)',
            fontWeight: 700, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
          }}>{t.label}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {filtered.map((it, i) => (
          <button key={it.id} onClick={() => actions.pickItem(it.id)} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 11, borderRadius: 12,
            border: it.bundle ? '1.5px solid rgba(201,162,75,.5)' : '1px solid var(--line-2)',
            background: it.bundle ? 'var(--gold-pale)' : '#fff',
            cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
            animation: `fadeIn .3s ${i*0.04}s both`,
          }}>
            <BGlyph glyph={it.glyph} size={46}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>{it.name}</span>
                {it.bundle && <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', background: 'var(--gold)', color: '#fff', padding: '2px 6px', borderRadius: 999 }}>Bundle</span>}
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600, marginTop: 1 }}>{it.sub}</div>
              {it.save && <div style={{ fontSize: 10, color: 'var(--ok)', fontWeight: 700, marginTop: 2 }}>Risparmi {eurB(it.save)}</div>}
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(it.price)}</div>
          </button>
        ))}

        {/* Foto live per prodotti fuori corner */}
        <button onClick={actions.toLivePhoto} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 13,
          borderRadius: 12, border: '1.5px dashed var(--line)', background: 'transparent',
          color: 'var(--ink-2)', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
        }}>
          <IconCamera size={15} stroke={2}/> Prodotto fuori corner · foto live
        </button>

        {state.cart.length > 0 && (
          <button onClick={actions.toCart} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 12,
            borderRadius: 12, border: 'none', background: 'var(--navy)', color: '#fff',
            fontWeight: 700, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit',
          }}>
            Vai al carrello · {eurB(state.cart.reduce((s,l)=>s+l.price,0))} <IconArrow size={14} stroke={2.2}/>
          </button>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 4 — Foto live (prodotto fuori corner)
// ─────────────────────────────────────────────────────────────
function B_LivePhoto({ state, actions }) {
  const [phase, setPhase] = React.useState('framing'); // framing → flash → form
  const [name, setName] = React.useState('');
  const [price, setPrice] = React.useState('');
  const shoot = () => {
    if (phase !== 'framing') return;
    setPhase('flash');
    setTimeout(() => setPhase('form'), 600);
  };
  const priceNum = parseFloat(price.replace(',', '.')) || 0;

  if (phase !== 'form') {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#0E1A24', position: 'relative', animation: 'fadeIn .3s' }}>
        <div style={{ position: 'absolute', top: 58, left: '50%', transform: 'translateX(-50%)', zIndex: 3,
          padding: '5px 12px', borderRadius: 999, background: 'rgba(0,0,0,.4)', backdropFilter: 'blur(10px)',
          color: '#fff', fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: '#FF453A', animation: 'pulseDot 1.5s infinite' }}/>
          Foto prodotto fuori corner
        </div>
        {/* Area di inquadratura: la foto vive DENTRO gli angolari del mirino */}
        <div style={{ position: 'absolute', top: 120, left: 18, right: 18, bottom: 160, zIndex: 1, borderRadius: 6, overflow: 'hidden', background: 'linear-gradient(135deg, rgba(251,241,244,.96), rgba(242,216,225,.96))', boxShadow: '0 20px 50px rgba(0,0,0,.45)' }}>
          <image-slot id="foto-prodotto-live" shape="rect"
              src="assets/beauty-profumo.webp"
              credit="" credit-href=""
              placeholder="Trascina qui la foto del prodotto (profumo, crema…)"></image-slot>
          {/* Griglia dei terzi, come nella camera reale */}
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: .28,
            backgroundImage: 'linear-gradient(to right, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(to bottom, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px))' }}/>
        </div>
        {[{ top: 112, left: 10 }, { top: 112, right: 10 }, { bottom: 152, left: 10 }, { bottom: 152, right: 10 }].map((s, i) => (
          <div key={i} style={{ position: 'absolute', zIndex: 2, width: 26, height: 26, ...s,
            borderTop: s.top != null ? '2.5px solid #fff' : 'none', borderBottom: s.bottom != null ? '2.5px solid #fff' : 'none',
            borderLeft: s.left != null ? '2.5px solid #fff' : 'none', borderRight: s.right != null ? '2.5px solid #fff' : 'none', opacity: .9, borderRadius: 2 }}/>
        ))}
        <button onClick={shoot} aria-label="Scatta" style={{
          position: 'absolute', left: '50%', bottom: 56, transform: 'translateX(-50%)', zIndex: 2,
          width: 66, height: 66, borderRadius: '50%', background: '#fff',
          boxShadow: 'inset 0 0 0 4px #0E1A24, 0 0 0 3px #fff', border: 'none', cursor: 'pointer', padding: 0,
        }}/>
        {phase === 'flash' && <div style={{ position: 'absolute', inset: 0, zIndex: 4, background: '#fff', animation: 'flash .35s ease both', pointerEvents: 'none' }}/>}
        <button onClick={actions.back} style={{ position: 'absolute', top: 58, left: 14, zIndex: 3, border: 'none', background: 'rgba(0,0,0,.4)', color: '#fff', width: 30, height: 30, borderRadius: '50%', display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
          <IconArrowL size={16} stroke={2}/>
        </button>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Nuovo articolo" sub="Da foto live" back={actions.back}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 72, height: 72, borderRadius: 14, overflow: 'hidden', flexShrink: 0 }}>
            <image-slot id="foto-prodotto-live" shape="rounded" radius="14"
              src="assets/beauty-profumo.webp"
              placeholder="Foto prodotto"></image-slot>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
            <IconSparkle size={12} stroke={2}/> Foto acquisita
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Nome prodotto</div>
          <input value={name} onChange={e => setName(e.target.value)} placeholder="Es. Maschera viso notte"
            style={{ width: '100%', border: '1px solid var(--line-2)', borderRadius: 10, padding: '10px 12px', font: 'inherit', fontSize: 13, fontWeight: 600, outline: 'none' }}/>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Prezzo</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1px solid var(--line-2)', borderRadius: 10, padding: '10px 12px', background: '#fff' }}>
            <span style={{ color: 'var(--blue)', fontWeight: 700 }}>€</span>
            <input value={price} onChange={e => setPrice(e.target.value)} placeholder="0,00"
              style={{ flex: 1, border: 'none', font: 'inherit', fontSize: 15, fontWeight: 800, outline: 'none', fontVariantNumeric: 'tabular-nums' }}/>
          </div>
        </div>
      </div>
      <BFooter>
        <BPrimary disabled={!name || priceNum <= 0} onClick={() => actions.addCustomItem(name, priceNum)} icon={<IconArrow size={15} stroke={2.2}/>}>
          Aggiungi al carrello
        </BPrimary>
      </BFooter>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 5 — Carrello: omaggio a soglia + promo iniziativa
// ─────────────────────────────────────────────────────────────
function B_Cart({ state, actions }) {
  const subtotal = state.cart.reduce((s, l) => s + l.price, 0);
  const [promoOn, setPromoOn] = React.useState(state.promoOn ?? true);
  const solariTotal = state.cart.filter(l => (CATB[l.id]?.cat === 'solari') || CATB[l.id]?.cat === 'bundle').reduce((s,l)=>s+l.price,0);
  const promoVal = promoOn ? solariTotal * 0.20 : 0;
  const total = subtotal - promoVal;
  const giftUnlocked = total >= GIFT_THRESHOLD_B;
  const missing = GIFT_THRESHOLD_B - total;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Carrello" sub={`${state.cart.length} ${state.cart.length === 1 ? 'articolo' : 'articoli'}`} back={actions.back}
        right={<StaffBadge staff={state.staff} store={state.store}/>}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {state.cart.map((line, i) => {
            const it = CATB[line.id];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 12, border: '1px solid var(--line-2)', background: '#fff' }}>
                <BGlyph glyph={it?.glyph || 'cream'} size={42}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>{line.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)', fontWeight: 600 }}>{it?.sub || 'Foto live · fuori corner'}</div>
                </div>
                <div style={{ fontSize: 12.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(line.price)}</div>
              </div>
            );
          })}
          {/* Omaggio riga */}
          {giftUnlocked && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 12, border: '1.5px solid rgba(201,162,75,.5)', background: 'var(--gold-pale)', animation: 'fadeIn .3s' }}>
              <BGlyph glyph="gift" size={42}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700 }}>{GIFT_B.name}</div>
                <div style={{ fontSize: 10, color: 'var(--gold)', fontWeight: 700 }}>Omaggio sbloccato · oltre {eurB(GIFT_THRESHOLD_B)}</div>
              </div>
              <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--ok)' }}>Gratis</div>
            </div>
          )}
        </div>

        {/* Soglia omaggio progress */}
        {!giftUnlocked && (
          <div style={{ marginTop: 12, padding: 12, borderRadius: 12, background: 'var(--gold-pale)', border: '1px solid rgba(201,162,75,.3)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 700, marginBottom: 6 }}>
              <span style={{ color: 'var(--ink-2)' }}>🎁 Omaggio a {eurB(GIFT_THRESHOLD_B)}</span>
              <span style={{ color: 'var(--gold)', fontVariantNumeric: 'tabular-nums' }}>mancano {eurB(Math.max(0, missing))}</span>
            </div>
            <div style={{ height: 6, borderRadius: 3, background: 'rgba(201,162,75,.2)', overflow: 'hidden' }}>
              <div style={{ width: `${Math.min(100, (total / GIFT_THRESHOLD_B) * 100)}%`, height: '100%', background: 'var(--gold)', transition: 'width .3s' }}/>
            </div>
          </div>
        )}

        {/* Promo iniziativa */}
        <button onClick={() => setPromoOn(!promoOn)} style={{
          marginTop: 10, width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: 12,
          borderRadius: 12, border: promoOn ? '1.5px solid var(--rose)' : '1px solid var(--line-2)',
          background: promoOn ? 'var(--rose-pale)' : '#fff', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
        }}>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: promoOn ? 'var(--rose)' : 'var(--rose-pale)', color: promoOn ? '#fff' : 'var(--rose)', display: 'grid', placeItems: 'center' }}>
            <IconTag size={16} stroke={2}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700 }}>Promo iniziativa −20% solari</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600 }}>{promoOn ? `Risparmio ${eurB(promoVal)}` : 'Tocca per applicare'}</div>
          </div>
          <div style={{ width: 20, height: 20, borderRadius: '50%', border: '1.5px solid', borderColor: promoOn ? 'var(--rose)' : 'var(--line)', background: promoOn ? 'var(--rose)' : 'transparent', display: 'grid', placeItems: 'center' }}>
            {promoOn && <IconCheck size={12} color="#fff" stroke={3}/>}
          </div>
        </button>

        <button onClick={actions.addAnother} style={{
          marginTop: 10, width: '100%', padding: 11, borderRadius: 10, border: '1.5px dashed var(--line)',
          background: 'transparent', color: 'var(--blue)', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <IconPlus size={13} stroke={2.4}/> Aggiungi altro
        </button>

        {/* Totale */}
        <div style={{ marginTop: 12, padding: 14, borderRadius: 12, background: 'var(--navy)', color: '#fff', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}><span style={{ opacity: .8, fontWeight: 600 }}>Subtotale</span><span style={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eurB(subtotal)}</span></div>
          {promoVal > 0 && <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}><span style={{ opacity: .8, fontWeight: 600 }}>Promo −20% solari</span><span style={{ fontWeight: 700, color: '#9FE6C2', fontVariantNumeric: 'tabular-nums' }}>− {eurB(promoVal)}</span></div>}
          {giftUnlocked && <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}><span style={{ opacity: .8, fontWeight: 600 }}>{GIFT_B.name}</span><span style={{ fontWeight: 700, color: '#9FE6C2' }}>Omaggio</span></div>}
          <div style={{ height: 1, background: 'rgba(255,255,255,.12)', margin: '4px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', opacity: .7 }}>Totale</span>
            <span style={{ fontSize: 24, fontWeight: 800, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{eurB(total)}</span>
          </div>
        </div>
      </div>
      <BFooter>
        <BPrimary onClick={() => actions.toDelivery({ promoOn, promoVal, gift: giftUnlocked, totalAfterPromo: total })} icon={<IconArrow size={15} stroke={2.2}/>}>
          Concludi ordine
        </BPrimary>
      </BFooter>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 6 — Consegna: ritiro al corner / spedizione
// ─────────────────────────────────────────────────────────────
function B_Delivery({ state, actions }) {
  const isRemote = state.saleMode === 'remote';
  const [mode, setMode] = React.useState(isRemote ? 'ship' : 'pickup');
  const [shipStr, setShipStr] = React.useState('6,90');
  const shipCost = mode === 'ship' ? (parseFloat(shipStr.replace(',', '.')) || 0) : 0;
  const base = state.checkout.totalAfterPromo || state.cart.reduce((s,l)=>s+l.price,0);
  const total = base + shipCost;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Consegna" sub={isRemote ? 'Cliente remoto' : 'Cliente al corner'} back={actions.back}
        right={<StaffBadge staff={state.staff} store={state.store}/>}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <button onClick={() => setMode('pickup')} style={{
            padding: 12, borderRadius: 12, textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer',
            border: mode==='pickup' ? '1.5px solid var(--blue)' : '1px solid var(--line-2)',
            background: mode==='pickup' ? 'var(--blue-pale)' : '#fff',
            display: 'flex', flexDirection: 'column', gap: 5,
          }}>
            <IconStore size={17} stroke={1.8} color={mode==='pickup' ? 'var(--blue)' : 'var(--ink-2)'}/>
            <div style={{ fontSize: 12.5, fontWeight: 700, marginTop: 3 }}>Ritiro al corner</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600 }}>{state.store?.name.split('·')[0] || 'Milano'} · subito</div>
          </button>
          <button onClick={() => setMode('ship')} style={{
            padding: 12, borderRadius: 12, textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer',
            border: mode==='ship' ? '1.5px solid var(--blue)' : '1px solid var(--line-2)',
            background: mode==='ship' ? 'var(--blue-pale)' : '#fff',
            display: 'flex', flexDirection: 'column', gap: 5,
          }}>
            <IconTruck size={17} stroke={1.8} color={mode==='ship' ? 'var(--blue)' : 'var(--ink-2)'}/>
            <div style={{ fontSize: 12.5, fontWeight: 700, marginTop: 3 }}>Spedizione</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600 }}>2–3 giorni · a domicilio</div>
          </button>
        </div>

        {mode === 'ship' && (
          <div style={{ marginTop: 10, padding: '10px 14px', background: 'var(--blue-pale)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', animation: 'fadeIn .25s' }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>Costo spedizione</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--blue)' }}>€</span>
              <input value={shipStr} onChange={e => setShipStr(e.target.value)} style={{
                width: 64, border: '1px solid rgba(30,120,200,.25)', borderRadius: 8, padding: '6px 8px',
                font: 'inherit', fontSize: 14, fontWeight: 800, textAlign: 'right', outline: 'none',
                fontVariantNumeric: 'tabular-nums', background: '#fff',
              }}/>
            </div>
          </div>
        )}

        {isRemote && mode === 'pickup' && (
          <div style={{ marginTop: 10, padding: 10, borderRadius: 10, background: 'var(--gold-pale)', border: '1px solid rgba(201,162,75,.3)', fontSize: 11, color: 'var(--ink-2)', fontWeight: 600, lineHeight: 1.4 }}>
            💡 Cliente remoto con ritiro al corner: il link di pagamento conferma la prenotazione del prodotto.
          </div>
        )}

        <div style={{ marginTop: 14, padding: 14, borderRadius: 12, background: 'var(--paper)', border: '1px solid var(--line-2)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
            <span style={{ color: 'var(--ink-2)', fontWeight: 600 }}>Ordine</span>
            <span style={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eurB(base)}</span>
          </div>
          {shipCost > 0 && (
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
              <span style={{ color: 'var(--ink-2)', fontWeight: 600 }}>Spedizione</span>
              <span style={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eurB(shipCost)}</span>
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 8, marginTop: 4, borderTop: '1px solid var(--line-2)' }}>
            <span style={{ fontSize: 12, fontWeight: 800 }}>Totale</span>
            <span style={{ fontSize: 20, fontWeight: 800, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.01em' }}>{eurB(total)}</span>
          </div>
        </div>
      </div>
      <BFooter>
        <BPrimary onClick={() => actions.toPayment({ ...state.checkout, delivery: mode, shippingCost: shipCost, total })} icon={<IconArrow size={15} stroke={2.2}/>}>
          Vai al pagamento · {eurB(total)}
        </BPrimary>
      </BFooter>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 7 — Pagamento (BNPL presente, non protagonista)
// ─────────────────────────────────────────────────────────────
function B_Payment({ state, actions }) {
  const [method, setMethod] = React.useState(null);
  const total = state.checkout.total;
  const installment = total / 3;
  const opts = [
    { id: 'card', label: 'Carta di credito', sub: 'Visa · Mastercard · Amex', Ic: IconCard },
    { id: 'bank', label: 'Bonifico istantaneo', sub: 'SEPA', Ic: IconBank },
    { id: 'bnpl', label: 'Paga in 3 rate', sub: `3 × ${eurB(installment)} · senza interessi`, Ic: IconSplit, flexible: true },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Pagamento" sub={`Totale ${eurB(total)}`} back={actions.back}
        right={<StaffBadge staff={state.staff} store={state.store}/>}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {opts.map(o => {
          const a = method === o.id;
          return (
            <button key={o.id} onClick={() => setMethod(o.id)} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 12,
              border: a ? '1.5px solid var(--blue)' : o.flexible ? '1px solid rgba(30,120,200,.35)' : '1px solid var(--line-2)',
              background: a ? 'var(--blue-pale)' : o.flexible ? 'linear-gradient(135deg, #F2F7FC, #E8F1FA)' : '#fff',
              cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: a ? 'var(--blue)' : 'var(--blue-pale)', color: a ? '#fff' : 'var(--blue)', display: 'grid', placeItems: 'center' }}>
                <o.Ic size={17} stroke={1.9}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>{o.label}</span>
                  {o.flexible && <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', background: 'var(--blue)', color: '#fff', padding: '2px 6px', borderRadius: 999 }}>BNPL</span>}
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600 }}>{o.sub}</div>
              </div>
              <div style={{ width: 20, height: 20, borderRadius: '50%', border: '1.5px solid', borderColor: a ? 'var(--blue)' : 'var(--line)', background: a ? 'var(--blue)' : 'transparent', display: 'grid', placeItems: 'center' }}>
                {a && <IconCheck size={12} color="#fff" stroke={3}/>}
              </div>
            </button>
          );
        })}
        {method === 'bnpl' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, animation: 'fadeIn .25s' }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ padding: '8px 10px', borderRadius: 10, background: 'var(--blue-pale)', border: '1px solid rgba(30,120,200,.15)' }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{i===0 ? 'Oggi' : `+${i*30} gg`}</div>
                <div style={{ fontSize: 12, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(installment)}</div>
              </div>
            ))}
          </div>
        )}
        <div style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-3)', fontWeight: 500, lineHeight: 1.45, padding: '0 4px' }}>
          Il metodo scelto sarà proposto al cliente nel link. Il pagamento resta tracciato su {state.store?.code || 'MI-01'} · {state.staff?.name || 'Elena Vitali'}.
        </div>
      </div>
      <BFooter>
        <BPrimary disabled={!method} onClick={() => actions.toShare(method)} icon={<IconLink size={15} stroke={2.2}/>}>
          Genera link ordine
        </BPrimary>
      </BFooter>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 8 — Dati cliente + canale
// ─────────────────────────────────────────────────────────────
function B_Share({ state, actions }) {
  const [cust, setCust] = React.useState({ first: 'Sofia', last: 'Greco', email: 'sofia.greco@email.it', phone: '+39 340 9876543' });
  const [channel, setChannel] = React.useState(null);
  const orderId = 'BC-4D7K';
  const set = (k) => (e) => setCust(c => ({ ...c, [k]: e.target.value }));

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <BChrome title="Invia al cliente" sub={`Ordine #${orderId} · ${eurB(state.checkout.total)}`} back={actions.back}
        right={<StaffBadge staff={state.staff} store={state.store}/>}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
        <BLabel style={{ marginTop: 0 }}>Dati cliente · facoltativi</BLabel>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <BField label="Nome" value={cust.first} onChange={set('first')}/>
          <BField label="Cognome" value={cust.last} onChange={set('last')}/>
        </div>
        <div style={{ marginTop: 8 }}><BField label="Email" value={cust.email} onChange={set('email')}/></div>
        <div style={{ marginTop: 8 }}><BField label="Telefono" value={cust.phone} onChange={set('phone')}/></div>

        <BLabel>Canale di invio</BLabel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { id: 'wa', label: 'WhatsApp', sub: cust.phone, Ic: IconWA, color: '#25D366' },
            { id: 'email', label: 'Email', sub: cust.email, Ic: IconMail, color: '#1E78C8' },
            { id: 'sms', label: 'SMS', sub: cust.phone, Ic: IconSMS, color: '#7A8A98' },
            { id: 'copy', label: 'Copia link', sub: `mipaghi.it/o/${orderId}`, Ic: IconCopy, color: '#0E2A3D' },
          ].map(c => {
            const a = channel === c.id;
            return (
              <button key={c.id} onClick={() => setChannel(c.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 12,
                border: a ? `1.5px solid ${c.color}` : '1px solid var(--line-2)',
                background: a ? c.color + '12' : '#fff', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
              }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: c.color + '20', color: c.color, display: 'grid', placeItems: 'center' }}>
                  <c.Ic size={16} stroke={2}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>{c.label}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.sub}</div>
                </div>
                <div style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid', borderColor: a ? c.color : 'var(--line)', background: a ? c.color : 'transparent', display: 'grid', placeItems: 'center' }}>
                  {a && <IconCheck size={10} color="#fff" stroke={3}/>}
                </div>
              </button>
            );
          })}
        </div>
      </div>
      <BFooter>
        <BPrimary disabled={!channel} onClick={() => actions.sendLink(channel, cust)} icon={<IconArrow size={15} stroke={2.2}/>}>
          Invia al cliente
        </BPrimary>
      </BFooter>
    </div>
  );
}

function BField({ label, value, onChange }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
        <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{label}</span>
        <span style={{ fontSize: 9, fontWeight: 700, color: 'var(--ink-3)', opacity: .6 }}>opzionale</span>
      </div>
      <input value={value} onChange={onChange} style={{
        width: '100%', border: '1px solid var(--line-2)', background: '#fff', borderRadius: 10,
        padding: '9px 11px', font: 'inherit', fontSize: 13, fontWeight: 600, color: 'var(--ink)', outline: 'none',
      }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 9 — Esperienza cliente
// ─────────────────────────────────────────────────────────────
function B_Customer({ state, actions }) {
  const [view, setView] = React.useState('chat'); // chat → order → confirm
  const orderId = 'BC-4D7K';
  const total = state.checkout.total;
  const installment = total / 3;
  const isBNPL = state.payment === 'bnpl';
  const cust = state.customer || { first: 'Sofia' };

  if (view === 'confirm') {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 22, background: '#fff', animation: 'fadeIn .3s' }}>
        <div style={{ position: 'relative', width: 76, height: 76, marginBottom: 18 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--blue)', opacity: .15, animation: 'ringPing 1.6s ease-out infinite' }}/>
          <div style={{ position: 'absolute', inset: 8, borderRadius: '50%', background: 'var(--blue)', display: 'grid', placeItems: 'center' }}>
            <IconCheck size={28} color="#fff" stroke={2.6}/>
          </div>
        </div>
        <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 6 }}>Pagamento confermato</div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)', textAlign: 'center', maxWidth: 270, lineHeight: 1.5, fontWeight: 500 }}>
          {isBNPL
            ? <>Prima rata di <b>{eurB(installment)}</b> autorizzata. Le prossime in automatico.</>
            : <>{eurB(total)} pagati. Conferma via email in arrivo.</>}
        </div>
        <div style={{ marginTop: 18, padding: '8px 12px', borderRadius: 999, background: 'var(--paper)', border: '1px solid var(--line-2)', fontSize: 11, fontWeight: 600, color: 'var(--ink-2)' }}>
          Vendita registrata su <b style={{ color: 'var(--ink)' }}>{state.store?.code} · {state.staff?.name}</b>
        </div>
        <div style={{ marginTop: 22, width: '100%' }}>
          <BPrimary onClick={actions.toBackoffice} icon={<IconArrow size={14} stroke={2.2}/>}>Vedi nel backoffice</BPrimary>
        </div>
      </div>
    );
  }

  if (view === 'order') {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#fff', animation: 'fadeIn .3s' }}>
        <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--paper)' }}>
          <button onClick={() => setView('chat')} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0 }}><IconArrowL size={18} stroke={2} color="var(--ink)"/></button>
          <MiPaghiMark size={20}/>
          <div style={{ fontSize: 12, fontWeight: 700 }}>Beauty Corner · {state.store?.name.split('·')[0] || 'Milano'}</div>
          <div style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--ink-3)', fontWeight: 600 }}>vista cliente</div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '14px 16px' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Ordine #{orderId}</div>
          <h2 style={{ margin: '4px 0 12px', fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em' }}>Conferma il tuo ordine</h2>
          {state.cart.map((line, i) => {
            const it = CATB[line.id];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--line-2)' }}>
                <BGlyph glyph={it?.glyph || 'cream'} size={42}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>{line.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{it?.sub || ''}</div>
                </div>
                <div style={{ fontSize: 12, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{eurB(line.price)}</div>
              </div>
            );
          })}
          {state.checkout.gift && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--line-2)' }}>
              <BGlyph glyph="gift" size={42}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700 }}>{GIFT_B.name}</div>
                <div style={{ fontSize: 10, color: 'var(--gold)', fontWeight: 700 }}>In omaggio per te 🎁</div>
              </div>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ok)' }}>Gratis</div>
            </div>
          )}
          <div style={{ padding: '10px 0' }}>
            {state.checkout.promoVal > 0 && (
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', color: 'var(--ok)' }}>
                <span>Promo iniziativa −20%</span><span style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>− {eurB(state.checkout.promoVal)}</span>
              </div>
            )}
            {state.checkout.delivery === 'ship' && state.checkout.shippingCost > 0 && (
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', color: 'var(--ink-2)' }}>
                <span>Spedizione</span><span style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{eurB(state.checkout.shippingCost)}</span>
              </div>
            )}
            {state.checkout.delivery === 'pickup' && (
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', color: 'var(--ink-2)' }}>
                <span>Ritiro al corner</span><span style={{ fontWeight: 600 }}>Gratuito</span>
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 8, paddingTop: 10, borderTop: '1px solid var(--line-2)' }}>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Totale</span>
              <span style={{ fontSize: 22, fontWeight: 800, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{eurB(total)}</span>
            </div>
          </div>
          {isBNPL && (
            <div style={{ padding: 12, borderRadius: 12, background: 'linear-gradient(135deg, #E8F1FA, #D2E5F4)', border: '1px solid rgba(30,120,200,.2)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                <IconSplit size={14} stroke={2} color="var(--blue)"/>
                <span style={{ fontSize: 12, fontWeight: 800 }}>Paga in 3 rate</span>
                <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '.06em', textTransform: 'uppercase', background: 'var(--blue)', color: '#fff', padding: '2px 6px', borderRadius: 999 }}>BNPL</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
                {[0,1,2].map(i => (
                  <div key={i} style={{ background: 'rgba(255,255,255,.7)', borderRadius: 8, padding: '6px 8px' }}>
                    <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{i===0 ? 'Oggi' : `+${i*30} gg`}</div>
                    <div style={{ fontSize: 11, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(installment)}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
        <BFooter>
          <BPrimary onClick={() => setView('confirm')} icon={<IconLock size={14} stroke={2}/>}>
            {isBNPL ? 'Paga ora la prima rata' : 'Paga ora'}
          </BPrimary>
        </BFooter>
      </div>
    );
  }

  // chat (WhatsApp default)
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeIn .3s' }}>
      <div style={{ background: '#075E54', color: '#fff', padding: '8px 14px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={actions.back} style={{ border: 'none', background: 'transparent', color: '#fff', cursor: 'pointer', padding: 0 }}><IconArrowL size={18} stroke={2}/></button>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>BC</div>
        <div style={{ flex: 1, lineHeight: 1.1 }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>Beauty Corner {state.store?.name.split('·')[0] || 'Milano'}</div>
          <div style={{ fontSize: 10, opacity: .75 }}>{state.staff?.name || 'Elena Vitali'} · online</div>
        </div>
        <div style={{ fontSize: 10, opacity: .65, fontWeight: 600 }}>vista cliente</div>
      </div>
      <div style={{ flex: 1, background: '#ECE5DD', padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 6 }}>
        <div style={{ alignSelf: 'flex-start', maxWidth: '85%', background: '#fff', borderRadius: 12, padding: 10, fontSize: 12, color: 'var(--ink)', lineHeight: 1.4 }}>
          Ciao {cust.first}! Ecco il tuo ordine con la promo del corner ✨
        </div>
        <div style={{ alignSelf: 'flex-start', maxWidth: '90%', background: '#fff', borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ background: 'linear-gradient(135deg, var(--navy), var(--navy-2))', color: '#fff', padding: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><MiPaghiMark size={16}/> <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', opacity: .7 }}>MiPaghi · Ordine</span></div>
            <div style={{ fontSize: 12, fontWeight: 700, marginTop: 4 }}>Riepilogo ordine #{orderId}</div>
            <div style={{ fontSize: 11, opacity: .8 }}>{state.cart.length} articoli{state.checkout.gift ? ' + omaggio' : ''} · {eurB(total)}</div>
          </div>
          <div style={{ padding: '6px 10px', fontSize: 11, color: 'var(--ink-3)' }}>mipaghi.it/o/{orderId}</div>
        </div>
        <button onClick={() => setView('order')} style={{ alignSelf: 'flex-start', background: '#fff', border: '1px solid var(--line)', borderRadius: 12, padding: '8px 12px', fontSize: 11, fontWeight: 700, color: 'var(--blue)', cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6 }}>
          Apri il link <IconArrow size={12} stroke={2.4}/>
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCENA 10 — Backoffice con filtro store + performance addette
// ─────────────────────────────────────────────────────────────
function B_Backoffice({ state, actions }) {
  const [storeFilter, setStoreFilter] = React.useState('all');
  const cust = state.customer || { first: 'Sofia', last: 'Greco' };
  const staffName = state.staff?.name || 'Elena Vitali';
  const storeCode = state.store?.code || 'MI-01';

  const orders = [
    { id: 'BC-4D7K', who: `${cust.first} ${cust.last}`, store: storeCode, staff: staffName, total: state.checkout.total || 89.70, method: state.payment || 'bnpl', status: 'paid', when: 'Adesso', isCurrent: true },
    { id: 'BC-3H2M', who: 'Laura Neri', store: 'MI-01', staff: 'Francesca Riva', total: 64.80, method: 'card', status: 'paid', when: 'Oggi · 12:40' },
    { id: 'BC-2P9X', who: 'Anna Riccio', store: 'RM-02', staff: 'Giada Colombo', total: 112.50, method: 'bnpl', status: 'paid', when: 'Oggi · 11:15' },
    { id: 'BC-1V5R', who: 'Paola Santi', store: 'CT-03', staff: 'Marta Ferrero', total: 44.90, method: 'card', status: 'pending', when: 'Oggi · 10:02' },
    { id: 'BC-0K8T', who: 'Elisa Fabbri', store: 'MI-01', staff: 'Elena Vitali', total: 79.00, method: 'bank', status: 'paid', when: 'Ieri · 17:20' },
  ];
  const filtered = storeFilter === 'all' ? orders : orders.filter(o => o.store === storeFilter);
  const totalFiltered = filtered.filter(o => o.status === 'paid').reduce((s,o)=>s+o.total,0);
  const bnplShare = Math.round(filtered.filter(o => o.method === 'bnpl').length / Math.max(1, filtered.length) * 100);

  const staffPerf = [
    { name: 'Elena Vitali', store: 'MI-01', sales: 22, value: 1480 },
    { name: 'Giada Colombo', store: 'RM-02', sales: 18, value: 1265 },
    { name: 'Francesca Riva', store: 'MI-01', sales: 15, value: 940 },
    { name: 'Marta Ferrero', store: 'CT-03', sales: 11, value: 720 },
  ].filter(p => storeFilter === 'all' || p.store === storeFilter);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: 'var(--paper)', animation: 'fadeIn .3s' }}>
      <div style={{ background: 'var(--navy)', color: '#fff', padding: '12px 16px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <MiPaghiMark size={22}/>
            <div style={{ fontSize: 13, fontWeight: 800 }}>Backoffice iniziativa</div>
            <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '.06em', textTransform: 'uppercase', background: 'var(--gold)', color: '#fff', padding: '2px 7px', borderRadius: 999 }}>Admin</span>
          </div>
          {/* Filtro store */}
          <select value={storeFilter} onChange={e => setStoreFilter(e.target.value)} style={{
            background: 'rgba(255,255,255,.12)', color: '#fff', border: '1px solid rgba(255,255,255,.2)',
            borderRadius: 8, padding: '5px 8px', fontSize: 11, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer',
          }}>
            <option value="all" style={{ color: '#000' }}>Tutti gli store</option>
            {STORES_B.map(s => <option key={s.id} value={s.code} style={{ color: '#000' }}>{s.code}</option>)}
          </select>
        </div>
        <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
            { label: 'Incasso', value: eurB(totalFiltered), accent: '#9FE6C2' },
            { label: 'Ordini', value: String(filtered.length) },
            { label: 'Quota BNPL', value: `${bnplShare}%` },
          ].map((s, i) => (
            <div key={i} style={{ background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.10)', borderRadius: 10, padding: '8px 10px' }}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', opacity: .65 }}>{s.label}</div>
              <div style={{ fontSize: 14, fontWeight: 800, color: s.accent || '#fff', marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{s.value}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 8, fontSize: 10, color: 'rgba(255,255,255,.65)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5 }}>
          <IconLock size={11} stroke={2}/> Vista riservata all'amministratore — ogni addetta vede solo le proprie vendite.
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px' }}>
        <BLabel style={{ margin: '4px 4px 8px' }}>Ordini</BLabel>
        {filtered.map((o, i) => (
          <div key={o.id} style={{
            background: '#fff', border: o.isCurrent ? '1.5px solid var(--blue)' : '1px solid var(--line-2)',
            borderRadius: 12, padding: 10, marginBottom: 6,
            boxShadow: o.isCurrent ? '0 0 0 3px rgba(30,120,200,.10)' : 'none',
            animation: `fadeIn .25s ${i*0.04}s both`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 6, height: 34, borderRadius: 3, background: o.status === 'paid' ? 'var(--ok)' : 'var(--warn)' }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 700 }}>{o.who}</span>
                  {o.isCurrent && <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', background: 'var(--blue)', color: '#fff', padding: '2px 5px', borderRadius: 4 }}>Nuovo</span>}
                </div>
                <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>
                  #{o.id} · <b style={{ color: 'var(--rose-deep)' }}>{o.store}</b> · {o.staff} · {o.method === 'bnpl' ? 'BNPL' : o.method === 'card' ? 'Carta' : 'Bonifico'} · {o.when}
                </div>
              </div>
              <div style={{ fontSize: 13, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(o.total)}</div>
            </div>
          </div>
        ))}

        <BLabel style={{ margin: '14px 4px 8px' }}>Performance addette</BLabel>
        {staffPerf.map((p, i) => (
          <div key={i} style={{ background: '#fff', border: '1px solid var(--line-2)', borderRadius: 12, padding: 10, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--rose-pale)', color: 'var(--rose-deep)', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800 }}>
              {p.name.split(' ').map(s => s[0]).join('')}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700 }}>{p.name}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{p.store} · {p.sales} vendite</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 12, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{eurB(p.value)}</div>
              <div style={{ height: 4, width: 70, borderRadius: 2, background: 'var(--line-2)', marginTop: 4, overflow: 'hidden' }}>
                <div style={{ width: `${(p.value / 1480) * 100}%`, height: '100%', background: 'var(--rose)' }}/>
              </div>
            </div>
          </div>
        ))}
      </div>

      <BFooter>
        <BPrimary secondary onClick={actions.restart} icon={<IconArrow size={14} stroke={2.2}/>}>
          Ricomincia la demo
        </BPrimary>
      </BFooter>
    </div>
  );
}

Object.assign(window, {
  STORES_B, STAFF_B, CATB, GIFT_B, GIFT_THRESHOLD_B, fmtB, eurB, BGlyph,
  B_Auth, B_Corner, B_Catalog, B_LivePhoto, B_Cart, B_Delivery, B_Payment, B_Share, B_Customer, B_Backoffice,
});