// mnm-tools.jsx — Calculadora de Precios VBP (7 pasos)
const { useState, useMemo, useCallback } = React;

/* ─── ICONS ──────────────────────────────────────────────────────────────────── */
const IcBox     = ()=><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M15.5 5.5L9 9L2.5 5.5M9 9V16.5M15.5 5.5L9 2L2.5 5.5L9 9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>;
const IcWrench  = ()=><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11.5 3a4 4 0 00-4 4c0 .48.09.94.25 1.36L3 13.1a1.3 1.3 0 101.84 1.84l4.74-4.74c.42.16.88.25 1.36.25a4 4 0 000-8z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>;
const IcMonitor = ()=><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1.5" y="2" width="15" height="10.5" rx="2" stroke="currentColor" strokeWidth="1.4"/><path d="M6 16h6M9 12.5V16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>;

const STEP_LABELS = ['Cliente','Negocio','Competencia','Diferenciación','Valor','EVC','Resultado'];

/* ─── STEP INDICATOR ─────────────────────────────────────────────────────────── */
function StepBar({ current }) {
  return (
    <div style={{display:'flex',alignItems:'center',gap:'0',padding:'0 24px',borderBottom:'1px solid var(--border)',background:'var(--surf-1)',flexShrink:0,overflowX:'auto'}}>
      {STEP_LABELS.map((l,i)=>{
        const done = i < current;
        const active = i === current;
        return (
          <React.Fragment key={l}>
            <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',padding:'12px 8px',minWidth:'72px',cursor:'default'}}>
              <div style={{width:'24px',height:'24px',borderRadius:'50%',background:done?'var(--accent)':active?'var(--accent-bg)':'var(--surf-2)',border:`2px solid ${done||active?'var(--accent)':'var(--border)'}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'10px',fontWeight:700,color:done?'var(--accent-text)':active?'var(--accent)':'var(--t3)',transition:'all 0.2s'}}>
                {done ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.5 5L4 7.5L8.5 2.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg> : i+1}
              </div>
              <span style={{fontSize:'10px',fontWeight:active?700:400,color:active?'var(--accent)':done?'var(--t2)':'var(--t3)',whiteSpace:'nowrap'}}>{l}</span>
            </div>
            {i < STEP_LABELS.length-1 && <div style={{flex:1,height:'1px',background:done?'var(--accent)':'var(--border)',minWidth:'12px',transition:'background 0.3s'}}/>}
          </React.Fragment>
        );
      })}
    </div>
  );
}

/* ─── FIELD HELPERS ──────────────────────────────────────────────────────────── */
function VField({label,hint,value,onChange,type='text',placeholder=''}) {
  return (
    <div style={{marginBottom:'16px'}}>
      <label style={{fontSize:'12.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{label}</label>
      {hint&&<p style={{fontSize:'11.5px',color:'var(--t3)',margin:'0 0 6px',lineHeight:1.5}}>{hint}</p>}
      <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
        style={{width:'100%',padding:'10px 14px',borderRadius:'var(--radius-sm)',fontSize:'13.5px'}}/>
    </div>
  );
}
function VTextarea({label,hint,value,onChange,placeholder=''}) {
  return (
    <div style={{marginBottom:'16px'}}>
      <label style={{fontSize:'12.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{label}</label>
      {hint&&<p style={{fontSize:'11.5px',color:'var(--t3)',margin:'0 0 6px',lineHeight:1.5}}>{hint}</p>}
      <textarea value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
        style={{width:'100%',minHeight:'72px',padding:'10px 14px',borderRadius:'var(--radius-sm)',fontSize:'13px',lineHeight:1.6,resize:'vertical'}}/>
    </div>
  );
}
function MoneyInput({label,value,onChange,suffix='USD/mes',estimated=false}) {
  return (
    <div style={{marginBottom:'12px'}}>
      <label style={{fontSize:'12px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{label} {estimated&&<span style={{fontSize:'10px',color:'var(--s-yellow)',fontWeight:700,marginLeft:'4px'}}>[estimado]</span>}</label>
      <div style={{display:'flex',alignItems:'center',background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius-sm)',overflow:'hidden'}}>
        <span style={{padding:'9px 12px',fontSize:'13px',color:'var(--t3)',borderRight:'1px solid var(--border)',flexShrink:0}}>$</span>
        <input type="number" value={value} onChange={e=>onChange(e.target.value)} placeholder="0" min="0"
          style={{flex:1,border:'none',background:'transparent',padding:'9px 10px',fontSize:'14px',fontFamily:'var(--font-mono)',color:'var(--t1)',fontVariantNumeric:'tabular-nums'}}/>
        <span style={{padding:'9px 12px',fontSize:'12px',color:'var(--t3)',borderLeft:'1px solid var(--border)',flexShrink:0,whiteSpace:'nowrap'}}>{suffix}</span>
      </div>
    </div>
  );
}

/* ─── STEP SHELLS ────────────────────────────────────────────────────────────── */
const BUSINESS_MODES = [
  {id:'producto',label:'Producto físico',icon:<IcBox/>},
  {id:'servicio',label:'Servicio',icon:<IcWrench/>},
  {id:'saas',label:'SaaS / Suscripción',icon:<IcMonitor/>},
];

function Step1({d,set}) {
  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Entender al cliente</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'24px',lineHeight:1.55}}>Define quién compra, qué necesita y cuál es el problema principal que resuelves.</p>
      <div style={{display:'flex',gap:'8px',marginBottom:'20px'}}>
        {BUSINESS_MODES.map(m=>(
          <button key={m.id} onClick={()=>set('model',m.id)} style={{flex:1,padding:'12px 8px',borderRadius:'var(--radius)',border:`1px solid ${d.model===m.id?'var(--accent-border)':'var(--border)'}`,background:d.model===m.id?'var(--accent-bg)':'var(--surf-2)',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'center',gap:'8px',transition:'all 0.12s',fontFamily:'var(--font)'}}>
            <span style={{color:d.model===m.id?'var(--accent)':'var(--t3)'}}>{m.icon}</span>
            <span style={{fontSize:'12px',fontWeight:d.model===m.id?700:400,color:d.model===m.id?'var(--accent)':'var(--t2)'}}>{m.label}</span>
          </button>
        ))}
      </div>
      <VTextarea label="Segmento objetivo" hint="Describe brevemente quiénes son tus clientes ideales." value={d.segment} onChange={v=>set('segment',v)} placeholder="Ej: Dueños de restaurantes en LATAM con 1-5 locales que buscan reducir desperdicio de insumos..."/>
      <VTextarea label="Problema principal que resuelves" value={d.problem} onChange={v=>set('problem',v)} placeholder="Ej: No saben cuánto les cuesta producir cada plato, lo que genera pérdidas ocultas..."/>
    </>
  );
}

function Step2({d,set}) {
  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Entender tu negocio</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'24px',lineHeight:1.55}}>Confirma qué puedes entregar con consistencia. Esto define lo que puedes prometer.</p>
      <VField label="¿Cuál es tu producto o servicio principal?" value={d.product} onChange={v=>set('product',v)} placeholder="Ej: Software de control de costos para restaurantes"/>
      <MoneyInput label="Costo de producción o entrega (mensual o por unidad)" value={d.cost} onChange={v=>set('cost',v)} suffix="USD" />
      <MoneyInput label="Costos fijos mensuales (renta, equipo, nómina)" value={d.fixed} onChange={v=>set('fixed',v)}/>
      <VTextarea label="Tus capacidades diferenciales (qué puedes hacer bien de forma consistente)" value={d.capabilities} onChange={v=>set('capabilities',v)} placeholder="Ej: Integración directa con SAT, soporte en español 24/7, implementación en 1 día..."/>
    </>
  );
}

function Step3({d,set}) {
  const setComp = (i,field,val) => {
    const arr = [...(d.competitors||[[],[],[]])];
    if(!arr[i]) arr[i]=[];
    arr[i]=[...arr[i]];
    arr[i][field==='name'?0:field==='price'?1:2]=val;
    set('competitors',arr);
  };
  const comps = d.competitors||[['','',''],['','',''],['','','']];
  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Entender la competencia</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'24px',lineHeight:1.55}}>Ingresa hasta 3 competidores directos con sus precios y diferencias clave.</p>
      {[0,1,2].map(i=>(
        <div key={i} style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'16px',marginBottom:'12px'}}>
          <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',margin:'0 0 12px',textTransform:'uppercase',letterSpacing:'0.05em'}}>Competidor {i+1}</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:'10px',marginBottom:'10px'}}>
            <input value={comps[i]?.[0]||''} onChange={e=>setComp(i,'name',e.target.value)} placeholder="Nombre del competidor" style={{padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/>
            <div style={{display:'flex',alignItems:'center',background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius-sm)',overflow:'hidden',width:'140px'}}>
              <span style={{padding:'9px 10px',fontSize:'12px',color:'var(--t3)',borderRight:'1px solid var(--border)',flexShrink:0}}>$</span>
              <input type="number" value={comps[i]?.[1]||''} onChange={e=>setComp(i,'price',e.target.value)} placeholder="0" style={{flex:1,border:'none',background:'transparent',padding:'9px 8px',fontSize:'13px',fontFamily:'var(--font-mono)',color:'var(--t1)',width:'60px'}}/>
              <span style={{padding:'9px 8px',fontSize:'11px',color:'var(--t3)',borderLeft:'1px solid var(--border)',flexShrink:0}}>/mes</span>
            </div>
          </div>
          <input value={comps[i]?.[2]||''} onChange={e=>setComp(i,'diff',e.target.value)} placeholder="¿Qué prometen que no cumplen? ¿Qué nadie está ofreciendo?" style={{width:'100%',padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/>
        </div>
      ))}
    </>
  );
}

function Step4({d,set}) {
  const attrs = d.differentiators||['','',''];
  const setAttr=(i,v)=>{const a=[...attrs];a[i]=v;set('differentiators',a);};
  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Definir diferenciación</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'20px',lineHeight:1.55}}>Intersección entre lo que el cliente valora, lo que la competencia no ofrece, y lo que tú puedes hacer bien.</p>
      <div style={{background:'var(--accent-bg)',border:'1px solid var(--accent-border)',borderRadius:'var(--radius)',padding:'16px',marginBottom:'20px'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'10px',marginBottom:'12px'}}>
          {[['Cliente valora',d.problem||'(del paso 1)'],['Competencia no tiene',(d.competitors&&d.competitors[0]&&d.competitors[0][2])||'(del paso 3)'],['Tú puedes hacer',d.capabilities||'(del paso 2)']].map(([l,v])=>(
            <div key={l} style={{background:'var(--surf-1)',borderRadius:'var(--radius-sm)',padding:'12px',border:'1px solid var(--border)'}}>
              <p style={{fontSize:'10px',fontWeight:700,color:'var(--accent)',textTransform:'uppercase',letterSpacing:'0.05em',margin:'0 0 6px'}}>{l}</p>
              <p style={{fontSize:'12px',color:'var(--t2)',margin:0,lineHeight:1.5}}>{v}</p>
            </div>
          ))}
        </div>
        <p style={{fontSize:'12px',color:'var(--accent)',margin:0,fontWeight:500}}>↑ Estos son los inputs para tus atributos diferenciadores</p>
      </div>
      <p style={{fontSize:'12.5px',fontWeight:600,color:'var(--t2)',marginBottom:'12px'}}>Tus atributos diferenciadores principales (valida o edita):</p>
      {[0,1,2].map(i=>(
        <div key={i} style={{display:'flex',gap:'10px',marginBottom:'8px',alignItems:'center'}}>
          <div style={{width:'22px',height:'22px',borderRadius:'50%',background:'var(--surf-2)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'11px',fontWeight:700,color:'var(--t3)',flexShrink:0}}>{i+1}</div>
          <input value={attrs[i]} onChange={e=>setAttr(i,e.target.value)} placeholder={`Atributo diferenciador ${i+1}`} style={{flex:1,padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/>
        </div>
      ))}
    </>
  );
}

const VALUE_TYPES = ['Funcional','Económico','Operativo','Relacional','Emocional'];

function Step5({d,set}) {
  const attrs = (d.differentiators||[]).filter(Boolean);
  const vmap  = d.valueMap||{};
  const setV  = (attr,field,val) => set('valueMap',{...vmap,[attr]:{...(vmap[attr]||{}),type:'Funcional',rel:5,...(vmap[attr]||{}),[field]:val}});
  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Definir valor percibido</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'20px',lineHeight:1.55}}>Clasifica cada atributo por tipo de valor y asigna su relevancia para el cliente.</p>
      {attrs.length===0&&<p style={{fontSize:'13px',color:'var(--t3)',padding:'16px',background:'var(--surf-2)',borderRadius:'var(--radius)'}}>Agrega atributos diferenciadores en el paso 4 primero.</p>}
      {attrs.map(attr=>(
        <div key={attr} style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'10px'}}>
          <p style={{fontSize:'13px',fontWeight:600,color:'var(--t1)',margin:'0 0 12px'}}>{attr}</p>
          <div style={{display:'flex',gap:'12px',flexWrap:'wrap',alignItems:'center'}}>
            <select value={vmap[attr]?.type||'Funcional'} onChange={e=>setV(attr,'type',e.target.value)} style={{padding:'7px 10px',borderRadius:'var(--radius-sm)',fontSize:'12.5px',minWidth:'140px'}}>
              {VALUE_TYPES.map(t=><option key={t} value={t}>{t}</option>)}
            </select>
            <div style={{flex:1,minWidth:'160px'}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:'4px'}}>
                <span style={{fontSize:'11.5px',color:'var(--t3)'}}>Relevancia para el cliente</span>
                <span style={{fontSize:'12px',fontWeight:700,color:'var(--accent)',fontFamily:'var(--font-mono)'}}>{vmap[attr]?.rel||5}/10</span>
              </div>
              <input type="range" min="1" max="10" value={vmap[attr]?.rel||5} onChange={e=>setV(attr,'rel',Number(e.target.value))} style={{width:'100%',accentColor:'var(--accent)'}}/>
            </div>
          </div>
        </div>
      ))}
    </>
  );
}

/* ─── STEP 6: EVC ────────────────────────────────────────────────────────────── */
function Step6({d,set}) {
  const benefits = d.benefits||[{id:1,label:'Ahorro de tiempo operativo',hours:'',rate:'',est:false},{id:2,label:'Reducción de errores/pérdidas',pct:'',cost:'',est:true},{id:3,label:'Aumento de ingresos del cliente',extra:'',est:false}];
  const setBen=(id,field,val)=>set('benefits',benefits.map(b=>b.id===id?{...b,[field]:val}:b));

  const refPrice = Number(d.refPrice)||0;
  const b1val = (Number(benefits[0]?.hours)||0)*(Number(benefits[0]?.rate)||0);
  const b2val = ((Number(benefits[1]?.pct)||0)/100)*(Number(benefits[1]?.cost)||0);
  const b3val = Number(benefits[2]?.extra)||0;
  const differential = b1val + b2val + b3val;
  const evc = refPrice + differential;
  const lo  = Math.round(evc * 0.30);
  const hi  = Math.round(evc * 0.70);

  const fmt = n => n.toLocaleString('es',{maximumFractionDigits:0});

  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Cuantificar el valor — EVC</h2>
      <p style={{fontSize:'13px',color:'var(--t2)',marginBottom:'20px',lineHeight:1.55}}><strong>EVC = Precio de alternativa de referencia + Valor diferencial</strong></p>

      {/* Reference */}
      <div style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'16px',marginBottom:'16px'}}>
        <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.05em',margin:'0 0 10px'}}>Alternativa de referencia</p>
        <p style={{fontSize:'12px',color:'var(--t3)',margin:'0 0 10px'}}>Lo que tu cliente usaría si no existieras (herramienta actual, proceso manual, competidor directo)</p>
        <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:'10px'}}>
          <input value={d.refName||''} onChange={e=>set('refName',e.target.value)} placeholder="Ej: Excel + contador externo" style={{padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/>
          <div style={{display:'flex',alignItems:'center',background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius-sm)',overflow:'hidden',width:'160px'}}>
            <span style={{padding:'9px 10px',fontSize:'12px',color:'var(--t3)',borderRight:'1px solid var(--border)'}}>$</span>
            <input type="number" value={d.refPrice||''} onChange={e=>set('refPrice',e.target.value)} placeholder="0" style={{flex:1,border:'none',background:'transparent',padding:'9px 8px',fontSize:'13px',fontFamily:'var(--font-mono)',color:'var(--t1)',width:'70px'}}/>
            <span style={{padding:'9px 8px',fontSize:'11px',color:'var(--t3)',borderLeft:'1px solid var(--border)'}}>USD/mes</span>
          </div>
        </div>
      </div>

      {/* Benefits */}
      <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.05em',marginBottom:'10px'}}>Beneficios diferenciales cuantificados</p>

      {/* B1: time savings */}
      <div style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'10px'}}>
        <p style={{fontSize:'12.5px',fontWeight:600,color:'var(--t1)',margin:'0 0 10px'}}>Ahorro de tiempo operativo</p>
        <div style={{display:'flex',gap:'8px',alignItems:'center',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'0 0 auto'}}>
            <input type="number" value={benefits[0]?.hours||''} onChange={e=>setBen(1,'hours',e.target.value)} placeholder="0" style={{width:'70px',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',fontFamily:'var(--font-mono)'}}/>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>horas/mes</span>
          </div>
          <span style={{fontSize:'13px',color:'var(--t3)'}}>×</span>
          <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'0 0 auto'}}>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>$</span>
            <input type="number" value={benefits[0]?.rate||''} onChange={e=>setBen(1,'rate',e.target.value)} placeholder="0" style={{width:'80px',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',fontFamily:'var(--font-mono)'}}/>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>costo/hora</span>
          </div>
          <span style={{fontSize:'13px',color:'var(--t3)'}}>= <strong style={{color:'var(--accent)',fontFamily:'var(--font-mono)'}}>${fmt(b1val)}</strong>/mes</span>
        </div>
      </div>

      {/* B2: error reduction */}
      <div style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'10px'}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'10px'}}>
          <p style={{fontSize:'12.5px',fontWeight:600,color:'var(--t1)',margin:0}}>Reducción de errores / pérdidas</p>
          <span style={{fontSize:'10px',fontWeight:700,color:'var(--s-yellow)',background:'var(--s-yellow-bg)',padding:'2px 7px',borderRadius:'100px'}}>[estimado]</span>
        </div>
        <div style={{display:'flex',gap:'8px',alignItems:'center',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'0 0 auto'}}>
            <input type="number" value={benefits[1]?.pct||''} onChange={e=>setBen(2,'pct',e.target.value)} placeholder="0" style={{width:'60px',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',fontFamily:'var(--font-mono)'}}/>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>% reducción</span>
          </div>
          <span style={{fontSize:'13px',color:'var(--t3)'}}>×</span>
          <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'0 0 auto'}}>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>$</span>
            <input type="number" value={benefits[1]?.cost||''} onChange={e=>setBen(2,'cost',e.target.value)} placeholder="0" style={{width:'90px',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',fontFamily:'var(--font-mono)'}}/>
            <span style={{fontSize:'12px',color:'var(--t3)'}}>costo actual</span>
          </div>
          <span style={{fontSize:'13px',color:'var(--t3)'}}>= <strong style={{color:'var(--accent)',fontFamily:'var(--font-mono)'}}>${fmt(b2val)}</strong>/mes</span>
        </div>
      </div>

      {/* B3: revenue increase */}
      <div style={{background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'14px 16px',marginBottom:'16px'}}>
        <p style={{fontSize:'12.5px',fontWeight:600,color:'var(--t1)',margin:'0 0 10px'}}>Aumento de ingresos del cliente</p>
        <div style={{display:'flex',alignItems:'center',gap:'6px'}}>
          <span style={{fontSize:'12px',color:'var(--t3)'}}>$</span>
          <input type="number" value={benefits[2]?.extra||''} onChange={e=>setBen(3,'extra',e.target.value)} placeholder="0" style={{width:'120px',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontSize:'13px',fontFamily:'var(--font-mono)'}}/>
          <span style={{fontSize:'12px',color:'var(--t3)'}}>USD/mes adicionales proyectados</span>
          <strong style={{color:'var(--accent)',fontFamily:'var(--font-mono)',marginLeft:'4px'}}>${fmt(b3val)}</strong>
        </div>
      </div>

      {/* EVC Summary */}
      <div style={{background:'var(--surf-1)',border:'1px solid var(--accent-border)',borderRadius:'var(--radius)',padding:'18px 20px',boxShadow:'0 0 24px rgba(77,219,110,0.07)'}}>
        {[['Valor diferencial total','green',`$${fmt(differential)}/mes`],['Precio alternativa de referencia','info',`$${fmt(refPrice)}/mes`]].map(([l,c,v])=>(
          <div key={l} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',borderBottom:'1px solid var(--border)'}}>
            <span style={{fontSize:'13px',color:'var(--t2)'}}>{l}</span>
            <span style={{fontFamily:'var(--font-mono)',fontSize:'13px',fontWeight:600,color:c==='green'?'var(--s-green)':'var(--t1)'}}>{v}</span>
          </div>
        ))}
        <div style={{display:'flex',justifyContent:'space-between',padding:'10px 0 4px',marginTop:'4px'}}>
          <span style={{fontSize:'14px',fontWeight:700,color:'var(--t1)'}}>EVC calculado</span>
          <span style={{fontFamily:'var(--font-mono)',fontSize:'22px',fontWeight:800,color:'var(--accent)',letterSpacing:'-0.03em'}}>${fmt(evc)}/mes</span>
        </div>
        {evc > 0 && (
          <div style={{marginTop:'10px',padding:'10px 12px',background:'var(--accent-bg)',borderRadius:'var(--radius-sm)',border:'1px solid var(--accent-border)'}}>
            <span style={{fontSize:'12px',color:'var(--t2)'}}>Rango de precio recomendado: </span>
            <strong style={{fontSize:'13px',color:'var(--accent)',fontFamily:'var(--font-mono)'}}>${fmt(lo)} – ${fmt(hi)}/mes</strong>
            <span style={{fontSize:'11.5px',color:'var(--t3)',display:'block',marginTop:'2px'}}>30–70% del EVC; el cliente retiene el resto como ganancia neta</span>
          </div>
        )}
      </div>
    </>
  );
}

/* ─── STEP 7: RESULTS ────────────────────────────────────────────────────────── */
function Step7({d, setView}) {
  const refPrice   = Number(d.refPrice)||0;
  const benefits   = d.benefits||[];
  const b1val = (Number(benefits[0]?.hours)||0)*(Number(benefits[0]?.rate)||0);
  const b2val = ((Number(benefits[1]?.pct)||0)/100)*(Number(benefits[1]?.cost)||0);
  const b3val = Number(benefits[2]?.extra)||0;
  const differential = b1val + b2val + b3val;
  const evc  = refPrice + differential;
  const cost = Number(d.cost)||0;
  const fixed= Number(d.fixed)||0;
  const compPrices = (d.competitors||[]).map(c=>Number((c && c[1])||0)).filter(Boolean);
  const compPrice  = compPrices.length ? Math.round(compPrices.reduce((a,b)=>a+b,0)/compPrices.length) : 0;
  const costMargin = cost>0 ? Math.round(cost*1.25) : 0;
  const evcRec     = Math.round(evc * 0.5);

  const margin = (p,c) => p>0&&c>0 ? Math.round(((p-c)/p)*100) : null;
  const peUnits= (p,c,f) => p>c&&f>0 ? Math.ceil(f/(p-c)) : null;

  const methods = [
    {label:'Costo + margen',price:costMargin,color:'var(--t2)',opt:false},
    {label:'Competencia (prom.)',price:compPrice,color:'var(--s-yellow)',opt:false},
    {label:'EVC (recomendado)',price:evcRec,color:'var(--accent)',opt:true},
  ].filter(m=>m.price>0);

  const [slider, setSlider] = useState(evcRec||300);
  const [saved,  setSaved]  = useState(false);
  const fmt = n => n.toLocaleString('es',{maximumFractionDigits:0});
  const sliderMargin = slider>0&&cost>0 ? Math.round(((slider-cost)/slider)*100) : null;
  const sliderPE     = slider>cost&&fixed>0 ? Math.ceil(fixed/(slider-cost)) : null;
  const sliderMin    = Math.round(Math.max(50, (evcRec||300)*0.2));
  const sliderMax    = Math.round((evcRec||300)*2.5);

  return (
    <>
      <h2 style={{fontSize:'20px',fontWeight:800,color:'var(--t1)',letterSpacing:'-0.02em',marginBottom:'6px'}}>Tu precio óptimo</h2>
      <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'20px',lineHeight:1.55}}>Comparación de 3 métodos para: {d.product||'tu producto/servicio'}</p>

      {/* Comparison table */}
      <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',overflow:'hidden',marginBottom:'16px'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr auto auto',borderBottom:'1px solid var(--border)',padding:'10px 16px',background:'var(--surf-2)'}}>
          {['Método','Precio','Margen est.'].map(h=><span key={h} style={{fontSize:'11px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em'}}>{h}</span>)}
        </div>
        {methods.map(m=>{
          const mg = margin(m.price,cost);
          return (
            <div key={m.label} style={{display:'grid',gridTemplateColumns:'1fr auto auto',padding:'13px 16px',borderBottom:'1px solid var(--border)',background:m.opt?'var(--accent-bg)':'none',alignItems:'center',gap:'12px'}}>
              <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
                <span style={{fontSize:'13.5px',fontWeight:m.opt?700:400,color:m.opt?'var(--t1)':'var(--t2)'}}>{m.label}</span>
                {m.opt&&<span style={{fontSize:'9.5px',fontWeight:700,color:'var(--accent)',background:'var(--accent-bg)',padding:'2px 7px',borderRadius:'100px',border:'1px solid var(--accent-border)'}}>ÓPTIMO</span>}
              </div>
              <span style={{fontFamily:'var(--font-mono)',fontSize:'15px',fontWeight:700,color:m.color,textAlign:'right'}}>${fmt(m.price)}</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:'13px',color:mg&&mg>40?'var(--s-green)':mg&&mg>20?'var(--s-yellow)':'var(--t3)',textAlign:'right'}}>{mg!=null?`${mg}%`:'—'}</span>
            </div>
          );
        })}
      </div>

      {/* Slider */}
      <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'20px',marginBottom:'16px'}}>
        <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'14px'}}>Simulador de sensibilidad</p>
        <input type="range" min={sliderMin} max={sliderMax} value={slider} onChange={e=>setSlider(Number(e.target.value))} style={{width:'100%',accentColor:'var(--accent)',marginBottom:'14px'}}/>
        <div className="grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'10px'}}>
          {[
            ['Precio actual',`$${fmt(slider)}/mes`,'var(--accent)'],
            ['Margen bruto',sliderMargin!=null?`${sliderMargin}%`:'—',sliderMargin&&sliderMargin>40?'var(--s-green)':sliderMargin&&sliderMargin>20?'var(--s-yellow)':'var(--s-red)'],
            ['Punto de equilibrio',sliderPE!=null?`${sliderPE} clientes`:'—','var(--t2)'],
          ].map(([l,v,c])=>(
            <div key={l} style={{background:'var(--surf-2)',borderRadius:'var(--radius-sm)',padding:'12px',textAlign:'center'}}>
              <p style={{fontSize:'10.5px',color:'var(--t3)',margin:'0 0 4px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>{l}</p>
              <p style={{fontFamily:'var(--font-mono)',fontSize:'17px',fontWeight:700,color:c,margin:0,letterSpacing:'-0.02em'}}>{v}</p>
            </div>
          ))}
        </div>
      </div>

      {/* CTAs */}
      <div style={{display:'flex',gap:'10px',flexWrap:'wrap'}}>
        <button onClick={()=>setSaved(true)} style={{padding:'11px 20px',borderRadius:'100px',background:saved?'var(--s-green-bg)':'var(--surf-2)',border:`1px solid ${saved?'var(--s-green)':'var(--border-2)'}`,color:saved?'var(--s-green)':'var(--t1)',fontSize:'13px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)',transition:'all 0.2s'}}>
          {saved?'✓ Guardado':'Guardar escenario'}
        </button>
        <button onClick={()=>setView('laboratorio')} style={{padding:'11px 20px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>
          Escalar al Laboratorio — Pricing →
        </button>
      </div>
    </>
  );
}

/* ─── CALCULADORA VBP (main) ─────────────────────────────────────────────────── */
function CalculadoraView({ setView, onBack, productName }) {
  const [step, setStep] = useState(0);
  const initProduct = productName || '';
  const [data, setData] = useState({model:'servicio',segment:'',problem:'',product:initProduct,cost:'',fixed:'',capabilities:'',competitors:[['','',''],['','',''],['','','']],differentiators:['','',''],valueMap:{},refName:'',refPrice:'',benefits:[{id:1,hours:'',rate:'',est:false},{id:2,pct:'',cost:'',est:true},{id:3,extra:'',est:false}]});
  const set = useCallback((k,v)=>setData(d=>({...d,[k]:v})),[]);

  const STEPS_JSX = [
    <Step1 d={data} set={set}/>,
    <Step2 d={data} set={set}/>,
    <Step3 d={data} set={set}/>,
    <Step4 d={data} set={set}/>,
    <Step5 d={data} set={set}/>,
    <Step6 d={data} set={set}/>,
    <Step7 d={data} setView={setView}/>,
  ];

  const header = (
    <div style={{padding:'0',flexShrink:0}}>
      <div style={{padding:'12px 24px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
          {onBack && <button onClick={onBack} style={{background:'none',border:'none',cursor:'pointer',color:'var(--accent)',fontSize:'12.5px',fontFamily:'var(--font)',fontWeight:600,display:'flex',alignItems:'center',gap:'4px',padding:0}}><svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M8 3L4.5 6.5L8 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>Análisis</button>}
          <div>
            <h1 style={{fontSize:'15px',fontWeight:700,color:'var(--t1)',margin:0}}>Calculadora de Precios</h1>
            <p style={{fontSize:'11.5px',color:'var(--t3)',margin:'2px 0 0'}}>Value-Based Pricing · {STEP_LABELS[step]}</p>
          </div>
        </div>
        <button onClick={()=>setStep(0)} style={{fontSize:'12px',color:'var(--t3)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)'}}>Reiniciar</button>
      </div>
      <StepBar current={step}/>
    </div>
  );

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {header}
      <div style={{flex:1,overflowY:'auto',padding:'28px 24px'}} className="main-scroll">
        <div style={{maxWidth:'640px',animation:'fadeInUp 0.2s ease'}}>
          {STEPS_JSX[step]}
          <div style={{display:'flex',gap:'10px',marginTop:'28px',justifyContent:'space-between'}}>
            {step>0 ? <button onClick={()=>setStep(s=>s-1)} style={{padding:'11px 20px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'13.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>← Atrás</button> : <div/>}
            {step < STEPS_JSX.length-1 && (
              <button onClick={()=>setStep(s=>s+1)} style={{padding:'11px 28px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13.5px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>
                Continuar →
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── CALCULADORA LIST VIEW ───────────────────────────────────────────────────── */
const INIT_SCENARIOS = [
  {id:1, nombre:'Almuerzo ejecutivo', model:'producto', status:'completado', evc:'$28/unidad', rango:'$17–$21', date:'15 may 2026'},
  {id:2, nombre:'Delivery combo familiar', model:'producto', status:'en-progreso', evc:'—', rango:'—', date:'20 may 2026'},
];
const MODEL_ICONS = {producto:<IcBox/>, servicio:<IcWrench/>, saas:<IcMonitor/>};
const MODEL_LABELS = {producto:'Producto físico', servicio:'Servicio', saas:'SaaS'};

function CalculadoraListView({ setView }) {
  const [scenarios, setScenarios] = useState(INIT_SCENARIOS);
  const [active, setActive]       = useState(null); // {id, nombre, model} or null
  const [showNew, setShowNew]     = useState(false);
  const [newName, setNewName]     = useState('');
  const [newModel, setNewModel]   = useState('producto');

  const createScenario = () => {
    if (!newName.trim()) return;
    const sc = {id: Date.now(), nombre: newName.trim(), model: newModel, status:'en-progreso', evc:'—', rango:'—', date:'22 may 2026'};
    setScenarios(s => [...s, sc]);
    setShowNew(false);
    setNewName('');
    setActive(sc);
  };

  // Open VBP wizard for a scenario
  if (active) return (
    <CalculadoraView setView={setView} onBack={()=>setActive(null)} productName={active.nombre}/>
  );

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{padding:'16px 24px',borderBottom:'1px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'space-between',gap:'12px'}}>
        <div>
          <h1 style={{fontSize:'16px',fontWeight:700,color:'var(--t1)',margin:0}}>Calculadora de Precios</h1>
          <p style={{fontSize:'12px',color:'var(--t3)',margin:'2px 0 0'}}>Value-Based Pricing por producto o servicio</p>
        </div>
        <button onClick={()=>setShowNew(true)} style={{padding:'8px 18px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)',display:'flex',alignItems:'center',gap:'7px'}}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
          Nuevo análisis
        </button>
      </div>

      <div style={{flex:1,overflowY:'auto',padding:'20px 24px'}} className="main-scroll">
        {/* New scenario modal */}
        {showNew && (
          <div style={{background:'var(--accent-bg)',border:'1px solid var(--accent-border)',borderRadius:'var(--radius)',padding:'20px',marginBottom:'16px',animation:'fadeInUp 0.2s ease'}}>
            <p style={{fontSize:'14px',fontWeight:700,color:'var(--t1)',marginBottom:'14px'}}>Nuevo análisis de precio</p>
            <div style={{marginBottom:'12px'}}>
              <label style={{fontSize:'12px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>Nombre del producto o servicio</label>
              <input value={newName} onChange={e=>setNewName(e.target.value)} onKeyDown={e=>e.key==='Enter'&&createScenario()}
                placeholder="Ej: Menú ejecutivo premium" autoFocus
                style={{width:'100%',padding:'10px 14px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/>
            </div>
            <div style={{marginBottom:'16px'}}>
              <label style={{fontSize:'12px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'8px'}}>Tipo de modelo de negocio</label>
              <div style={{display:'flex',gap:'8px'}}>
                {[['producto','Producto físico',<IcBox/>],['servicio','Servicio',<IcWrench/>],['saas','SaaS',<IcMonitor/>]].map(function(row){return(
                  <button key={row[0]} onClick={()=>setNewModel(row[0])} style={{flex:1,padding:'10px 8px',borderRadius:'var(--radius-sm)',border:'1px solid '+(newModel===row[0]?'var(--accent-border)':'var(--border)'),background:newModel===row[0]?'var(--surf-1)':'var(--surf-2)',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'center',gap:'6px',fontFamily:'var(--font)',transition:'all 0.12s'}}>
                    <span style={{color:newModel===row[0]?'var(--accent)':'var(--t3)',lineHeight:0}}>{row[2]}</span>
                    <span style={{fontSize:'11.5px',fontWeight:newModel===row[0]?700:400,color:newModel===row[0]?'var(--accent)':'var(--t2)'}}>{row[1]}</span>
                  </button>
                );})}
              </div>
            </div>
            <div style={{display:'flex',gap:'8px'}}>
              <button onClick={()=>{setShowNew(false);setNewName('');}} style={{flex:1,padding:'10px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'13px',cursor:'pointer',fontFamily:'var(--font)'}}>Cancelar</button>
              <button onClick={createScenario} disabled={!newName.trim()} style={{flex:2,padding:'10px',borderRadius:'100px',background:newName.trim()?'var(--accent)':'var(--surf-3)',border:'none',color:newName.trim()?'var(--accent-text)':'var(--t3)',fontSize:'13px',fontWeight:700,cursor:newName.trim()?'pointer':'default',fontFamily:'var(--font)',transition:'all 0.15s'}}>Iniciar análisis VBP →</button>
            </div>
          </div>
        )}

        {/* Scenarios list */}
        {scenarios.length === 0 ? (
          <div style={{textAlign:'center',padding:'48px 24px'}}>
            <p style={{fontSize:'13px',color:'var(--t3)',lineHeight:1.65,marginBottom:'16px'}}>No hay análisis de precios aún.<br/>Agrega un producto o servicio para comenzar.</p>
            <button onClick={()=>setShowNew(true)} style={{padding:'10px 24px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>+ Nuevo análisis</button>
          </div>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:'10px',maxWidth:'680px'}}>
            {scenarios.map(sc => {
              const done = sc.status === 'completado';
              return (
                <div key={sc.id} style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'16px 20px',display:'flex',alignItems:'center',gap:'16px',transition:'border-color 0.15s,box-shadow 0.15s'}}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent-border)';e.currentTarget.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)';}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.boxShadow='none';}}>
                  <div style={{width:'40px',height:'40px',borderRadius:'10px',background:done?'var(--accent-bg)':'var(--surf-2)',border:'1px solid '+(done?'var(--accent-border)':'var(--border)'),display:'flex',alignItems:'center',justifyContent:'center',color:done?'var(--accent)':'var(--t3)',flexShrink:0}}>
                    {MODEL_ICONS[sc.model]||<IcBox/>}
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:'flex',alignItems:'center',gap:'8px',marginBottom:'4px'}}>
                      <p style={{fontSize:'14px',fontWeight:600,color:'var(--t1)',margin:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{sc.nombre}</p>
                      <span style={{fontSize:'10px',fontWeight:700,padding:'2px 7px',borderRadius:'100px',background:done?'var(--s-green-bg)':'var(--s-yellow-bg)',color:done?'var(--s-green)':'var(--s-yellow)',whiteSpace:'nowrap',flexShrink:0}}>{done?'Completado':'En progreso'}</span>
                    </div>
                    <div style={{display:'flex',gap:'14px',flexWrap:'wrap'}}>
                      <span style={{fontSize:'12px',color:'var(--t3)'}}>{MODEL_LABELS[sc.model]}</span>
                      {done && <>
                        <span style={{fontSize:'12px',color:'var(--t3)'}}>EVC: <strong style={{color:'var(--accent)',fontFamily:'var(--font-mono)'}}>{sc.evc}</strong></span>
                        <span style={{fontSize:'12px',color:'var(--t3)'}}>Rango: <strong style={{color:'var(--t2)',fontFamily:'var(--font-mono)'}}>{sc.rango}</strong></span>
                      </>}
                      <span style={{fontSize:'12px',color:'var(--t3)'}}>{sc.date}</span>
                    </div>
                  </div>
                  <button onClick={()=>setActive(sc)} style={{padding:'8px 18px',borderRadius:'100px',background:done?'var(--surf-2)':'var(--accent)',border:'1px solid '+(done?'var(--border)':'transparent'),color:done?'var(--t2)':'var(--accent-text)',fontSize:'12.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)',flexShrink:0,whiteSpace:'nowrap'}}>
                    {done?'Ver análisis':'Continuar →'}
                  </button>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { CalculadoraView, CalculadoraListView });