// mnm-landing.jsx — Landing matching AppContador design
const { useState, useEffect } = React;

/* ─── MINI DASHBOARD PREVIEW ────────────────────────────────────────────── */
function MiniDashboard() {
  var kpis = [
    {l:'REVENUE',    v:'$45.2K', c:'+12%', dot:'#16A34A'},
    {l:'',           v:'62%',    c:'+3%',  dot:'#16A34A'},
    {l:'',           v:'$18.5K', c:'+8%',  dot:'#16A34A'},
    {l:'BURN RATE',  v:'$8.2K',  c:'+15%', dot:'#D97706'},
    {l:'RUNWAY',     v:'2.3 mo', c:'−22%', dot:'#EF4444'},
    {l:'EBITDA',     v:'28%',    c:'−2%',  dot:'#D97706'},
  ];
  return (
    <div style={{background:'#FFFFFF',borderRadius:'20px',padding:'22px',boxShadow:'0 24px 64px rgba(0,0,0,0.13)',width:'420px',maxWidth:'100%',border:'1px solid rgba(0,0,0,0.06)'}}>
      {/* Header */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'10px',paddingBottom:'10px',borderBottom:'1px solid rgba(0,0,0,0.06)'}}>
        <div style={{display:'flex',alignItems:'center',gap:'9px'}}>
          <div style={{width:'28px',height:'28px',borderRadius:'50%',background:'linear-gradient(135deg,#f4b8a4,#a0b5eb)',flexShrink:0}}/>
          <div>
            <p style={{fontSize:'9.5px',color:'#999',textTransform:'uppercase',letterSpacing:'0.08em',margin:'0 0 1px',fontFamily:'IBM Plex Mono,monospace'}}>NEGOCIO</p>
            <p style={{fontSize:'12.5px',fontWeight:600,color:'#000',margin:0,fontFamily:'IBM Plex Mono,monospace'}}>Quinta del Valle · USD</p>
          </div>
        </div>
        <div style={{display:'flex',gap:'4px'}}>
          <button style={{padding:'4px 10px',borderRadius:'100px',background:'transparent',border:'1px solid #e0ddd8',color:'#666',fontSize:'11.5px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer'}}>Caja</button>
          <button style={{padding:'4px 10px',borderRadius:'100px',background:'#242424',border:'none',color:'#f6f3f1',fontSize:'11.5px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer'}}>Facturado</button>
        </div>
      </div>
      {/* WhatsApp notification */}
      <div style={{background:'#1a1714',borderRadius:'8px',padding:'7px 12px',marginBottom:'10px',display:'flex',alignItems:'center',gap:'8px'}}>
        <span style={{width:'6px',height:'6px',borderRadius:'50%',background:'#25D366',flexShrink:0}}/>
        <span style={{fontSize:'11px',color:'#f6f3f1',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.01em'}}>WhatsApp · "45000 almuerzo equipo" · ✓ guardado</span>
      </div>
      {/* KPI mini grid */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'7px'}}>
        {kpis.map(function(k,i){
          var isPos = k.c[0]==='+';
          return (
            <div key={i} style={{background:'#faf8f5',borderRadius:'10px',padding:'10px 11px',border:'1px solid rgba(0,0,0,0.05)'}}>
              {k.l&&<p style={{fontSize:'8.5px',color:'#999',textTransform:'uppercase',letterSpacing:'0.07em',margin:'0 0 2px',fontFamily:'IBM Plex Mono,monospace'}}>{k.l}</p>}
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:'3px'}}>
                <span style={{fontSize:'18px',fontWeight:600,color:'#000',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.025em'}}>{k.v}</span>
                <span style={{width:'7px',height:'7px',borderRadius:'50%',background:k.dot,flexShrink:0}}/>
              </div>
              <span style={{fontSize:'10px',color:isPos?'#16A34A':'#EF4444',fontWeight:500,fontFamily:'IBM Plex Mono,monospace'}}>{k.c}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── HALLAZGO CARD ──────────────────────────────────────────────────────── */
function HallazgoCard() {
  return (
    <div style={{background:'#FFFFFF',borderRadius:'14px',padding:'16px 18px',boxShadow:'0 8px 24px rgba(0,0,0,0.10)',border:'1px solid rgba(0,0,0,0.06)',marginTop:'10px',maxWidth:'420px'}}>
      <div style={{display:'flex',gap:'10px',alignItems:'flex-start'}}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{flexShrink:0,marginTop:'1px'}}><path d="M8 2L14.5 13H1.5L8 2Z" stroke="#D97706" strokeWidth="1.4" strokeLinejoin="round"/><path d="M8 7v2.5" stroke="#D97706" strokeWidth="1.4" strokeLinecap="round"/><circle cx="8" cy="11" r=".7" fill="#D97706"/></svg>
        <div>
          <p style={{fontSize:'13px',fontWeight:600,color:'#000',margin:'0 0 4px',lineHeight:1.4,fontFamily:'IBM Plex Mono,monospace'}}>De cada $100 que vendes, te quedan $8 menos que el mes pasado.</p>
          <p style={{fontSize:'12px',color:'#797776',margin:0,lineHeight:1.5,fontFamily:'IBM Plex Mono,monospace'}}>Subió el costo de tu materia prima. Si renegocias, recuperas $400 al mes.</p>
        </div>
      </div>
    </div>
  );
}

/* ─── NOTIFICATION BAR ───────────────────────────────────────────────────── */
function NotifBar({ onCTA }) {
  return (
    <div style={{background:'#000000',color:'#f6f3f1',padding:'10px 40px',display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',fontSize:'13px',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.01em',flexShrink:0}}>
      <span>4 de cada 10 negocios en Latinoamérica todavía llevan sus cuentas en un cuaderno.</span>
      <span style={{color:'rgba(246,243,241,0.5)'}}>·</span>
      <button onClick={onCTA} style={{color:'#f6f3f1',background:'none',border:'none',cursor:'pointer',fontFamily:'IBM Plex Mono,monospace',fontSize:'13px',textDecoration:'underline',textDecorationColor:'rgba(246,243,241,0.4)',letterSpacing:'-0.01em'}}>Ver mis números →</button>
    </div>
  );
}

/* ─── LANDING NAV ────────────────────────────────────────────────────────── */
function LandingNav({ onLogin, onRegister, onDemo, onConsultores }) {
  var [scrolled,setScrolled] = useState(false);
  useEffect(function(){
    var el = document.getElementById('landing-scroll');
    if(!el) return;
    var h = function(){setScrolled(el.scrollTop>20);};
    el.addEventListener('scroll',h);
    return function(){el.removeEventListener('scroll',h);};
  },[]);

  return (
    <nav style={{background:scrolled?'rgba(246,243,241,0.96)':'rgba(246,243,241,0.92)',backdropFilter:'blur(12px)',WebkitBackdropFilter:'blur(12px)',borderBottom:scrolled?'1px solid rgba(0,0,0,0.07)':'none',padding:'16px 48px',display:'flex',alignItems:'center',justifyContent:'space-between',position:'sticky',top:0,zIndex:100,transition:'all 0.2s'}}>
      {/* Logo */}
      <div style={{display:'flex',alignItems:'center',gap:'8px',cursor:'pointer'}}>
        <div style={{width:'28px',height:'28px',borderRadius:'50%',border:'2px solid #000',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="#000" strokeWidth="2" strokeLinecap="round"/></svg>
        </div>
        <span style={{fontSize:'16px',fontWeight:400,color:'#000',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.02em'}}>Mi Negocio en Números.</span>
      </div>
      {/* Links */}
      <div className="hide-mobile" style={{display:'flex',gap:'4px',alignItems:'center'}}>
        {['Cómo funciona','Planes','Para quién es','Preguntas'].map(function(l){return(
          <a key={l} href={'#'+l.toLowerCase().replace(/\s/g,'-')} style={{padding:'6px 12px',fontSize:'14px',color:'#242424',textDecoration:'none',fontFamily:'IBM Plex Mono,monospace',borderRadius:'6px',transition:'background 0.1s',letterSpacing:'-0.01em'}}
            onMouseEnter={function(e){e.currentTarget.style.background='rgba(0,0,0,0.05)';}}
            onMouseLeave={function(e){e.currentTarget.style.background='transparent';}}>{l}</a>
        );})}
        <button onClick={onConsultores} style={{padding:'6px 12px',fontSize:'14px',color:'#242424',background:'none',border:'none',cursor:'pointer',fontFamily:'IBM Plex Mono,monospace',borderRadius:'6px',letterSpacing:'-0.01em',transition:'background 0.1s'}}
          onMouseEnter={function(e){e.currentTarget.style.background='rgba(0,0,0,0.05)';}}
          onMouseLeave={function(e){e.currentTarget.style.background='transparent';}}>Para consultores</button>
      </div>
      {/* CTAs */}
      <div style={{display:'flex',gap:'8px',alignItems:'center'}}>
        <button onClick={onLogin} style={{padding:'8px 16px',borderRadius:'100px',background:'transparent',border:'none',color:'#242424',fontSize:'14px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer',letterSpacing:'-0.01em'}}>Entrar</button>
        <button onClick={onRegister} style={{padding:'8px 20px',borderRadius:'100px',background:'#242424',border:'none',color:'#f6f3f1',fontSize:'14px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer',letterSpacing:'-0.01em',transition:'opacity 0.15s'}}
          onMouseEnter={function(e){e.currentTarget.style.opacity='0.85';}}
          onMouseLeave={function(e){e.currentTarget.style.opacity='1';}}>
          Ver mis números →
        </button>
      </div>
    </nav>
  );
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
function HeroSection({ onRegister, onDemo }) {
  return (
    <section style={{minHeight:'82vh',display:'flex',alignItems:'center',padding:'40px 48px 60px',position:'relative',overflow:'hidden',background:'linear-gradient(135deg,#ffe8de 0%,#f6f0e8 35%,#eff5f0 100%)'}}>
      <div style={{display:'flex',alignItems:'center',gap:'60px',maxWidth:'1280px',width:'100%',margin:'0 auto'}}>
        {/* Left */}
        <div style={{flex:'0 0 auto',maxWidth:'520px',animation:'fadeInUp 0.5s ease'}}>
          {/* Badge */}
          <div style={{display:'inline-flex',alignItems:'center',gap:'7px',padding:'5px 12px',borderRadius:'100px',border:'1px solid rgba(0,0,0,0.12)',background:'rgba(246,243,241,0.7)',marginBottom:'28px'}}>
            <span style={{width:'6px',height:'6px',borderRadius:'50%',background:'#16A34A'}}/>
            <span style={{fontSize:'11px',fontWeight:400,color:'#4e4d4d',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'0.06em',textTransform:'uppercase'}}>Un contador que nunca duerme</span>
          </div>
          {/* Vertical bar + headline */}
          <div style={{display:'flex',gap:'16px',alignItems:'flex-start',marginBottom:'20px'}}>
            <div style={{width:'3px',background:'#242424',borderRadius:'2px',flexShrink:0,height:'120px',marginTop:'6px'}}/>
            <div>
              <h1 style={{fontFamily:'Lora,Georgia,serif',fontSize:'clamp(44px,5vw,68px)',fontWeight:700,color:'#000',lineHeight:1.06,letterSpacing:'-0.025em',margin:'0 0 4px'}}>Tus números<br/>listos,</h1>
              <p style={{fontFamily:'Lora,Georgia,serif',fontSize:'clamp(44px,5vw,68px)',fontWeight:400,fontStyle:'italic',color:'#6b6560',lineHeight:1.06,letterSpacing:'-0.025em',margin:0}}>a cualquier hora.</p>
            </div>
          </div>
          {/* Body */}
          <p style={{fontSize:'15px',color:'#4e4d4d',lineHeight:1.7,marginBottom:'32px',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.01em',maxWidth:'440px'}}>
            Desde que tu negocio es solo una idea hasta que tienes 5 empresas. Subes tus datos como te resulte más fácil — a mano, un Excel, foto por WhatsApp, conectando tu banco. Te decimos cuánto ganas, cuánto pierdes y qué hacer al respecto.
          </p>
          {/* CTAs */}
          <div style={{display:'flex',gap:'10px',flexWrap:'wrap'}}>
            <button onClick={onRegister} style={{padding:'13px 24px',borderRadius:'100px',background:'#242424',border:'none',color:'#f6f3f1',fontSize:'14px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer',letterSpacing:'-0.01em',transition:'opacity 0.15s'}}
              onMouseEnter={function(e){e.currentTarget.style.opacity='0.85';}}
              onMouseLeave={function(e){e.currentTarget.style.opacity='1';}}>
              Ver mis números →
            </button>
            <button onClick={onDemo} style={{padding:'13px 24px',borderRadius:'100px',background:'transparent',border:'1px solid rgba(0,0,0,0.2)',color:'#242424',fontSize:'14px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer',letterSpacing:'-0.01em',transition:'border-color 0.15s'}}
              onMouseEnter={function(e){e.currentTarget.style.borderColor='rgba(0,0,0,0.5)';}}
              onMouseLeave={function(e){e.currentTarget.style.borderColor='rgba(0,0,0,0.2)';}}>
              Cómo se ve por dentro
            </button>
          </div>
        </div>
        {/* Right: mini dashboard */}
        <div className="hide-mobile" style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',animation:'fadeInUp 0.7s ease'}}>
          <MiniDashboard/>
          <HallazgoCard/>
        </div>
      </div>
    </section>
  );
}

/* ─── FEATURES SECTION ───────────────────────────────────────────────────── */
var IcDash2 = function(){return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="12" width="4" height="8" rx="1" stroke="currentColor" strokeWidth="1.5"/><rect x="9" y="7" width="4" height="13" rx="1" stroke="currentColor" strokeWidth="1.5"/><rect x="16" y="2" width="4" height="18" rx="1" stroke="currentColor" strokeWidth="1.5"/></svg>;};
var IcAI2   = function(){return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 1.5l1.8 5.7L18.5 5l-3 4.5L20 11.5l-5.5 1.5L17 18.5l-6-2.5L11 20.5l-1-4.5L4 18.5l2.5-5L1 11.5l5.5-2L4 5l5.5 2.2L11 1.5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>;};
var IcData2 = function(){return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3L20 8.5L11 14L2 8.5L11 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="M2 14L11 19.5L20 14M2 11L11 16.5L20 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;};
var IcLab2  = function(){return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M9 3v7L3 19a1 1 0 00.9 1.5h14.2A1 1 0 0019 19L13 10V3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M8.5 3h5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;};
const FEATURES = [
  {Icon:IcDash2,title:'Dashboard inteligente',desc:'50+ KPIs curados según tu negocio. En lenguaje simple, no en jerga contable.'},
  {Icon:IcAI2,  title:'Motor de análisis IA', desc:'Hallazgos automáticos con contexto y acciones concretas. Qué pasó y qué hacer.'},
  {Icon:IcData2,title:'Múltiples fuentes',     desc:'Manual, CSV, banco, WhatsApp, facturas electrónicas (CFDI, DIAN, SII, AFIP).'},
  {Icon:IcLab2, title:'Laboratorio con expertos',desc:'Sesiones 1:1 con consultores verificados. Llegas con el brief pre-llenado por IA.'},
];

function FeaturesSection() {
  return (
    <section id="cómo-funciona" style={{padding:'80px 48px',background:'#FFFFFF',borderTop:'1px solid rgba(0,0,0,0.07)'}}>
      <div style={{maxWidth:'1000px',margin:'0 auto'}}>
        <p style={{fontSize:'11px',fontWeight:400,color:'#797776',letterSpacing:'0.1em',textTransform:'uppercase',textAlign:'center',marginBottom:'8px',fontFamily:'IBM Plex Mono,monospace'}}>Características</p>
        <h2 style={{fontFamily:'Lora,Georgia,serif',fontSize:'36px',fontWeight:700,color:'#000',textAlign:'center',letterSpacing:'-0.02em',marginBottom:'48px',lineHeight:1.2}}>Todo para controlar tu negocio</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(210px,1fr))',gap:'16px'}}>
          {FEATURES.map(function(f){return(
            <div key={f.title} style={{background:'#f6f3f1',borderRadius:'16px',padding:'28px 24px',border:'1px solid rgba(0,0,0,0.06)',transition:'transform 0.15s'}}
              onMouseEnter={function(e){e.currentTarget.style.transform='translateY(-3px)';}}
              onMouseLeave={function(e){e.currentTarget.style.transform='none';}}>
              <div style={{marginBottom:'14px',color:'var(--off-black)'}}><f.Icon/></div>
              <h3 style={{fontSize:'15px',fontWeight:600,color:'#000',marginBottom:'8px',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.015em'}}>{f.title}</h3>
              <p style={{fontSize:'13px',color:'#4e4d4d',lineHeight:1.6,margin:0,fontFamily:'IBM Plex Mono,monospace'}}>{f.desc}</p>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

/* ─── PRICING SECTION ────────────────────────────────────────────────────── */
const PLANS = [
  {name:'Gratis',price:'$0',sub:'/mes',features:['1 empresa','KPIs básicos','Manual y CSV','Sin IA','Sin Laboratorio'],highlight:false,cta:'Comenzar gratis'},
  {name:'Pro',price:'$15.99',sub:'/mes',features:['Empresas ilimitadas','50+ KPIs','Todas las fuentes','Motor IA ✓','Laboratorio ✓','Bóveda ✓','Team ✓'],highlight:true,cta:'Elegir Pro'},
];

function PricingSection({ onRegister }) {
  return (
    <section id="planes" style={{padding:'80px 48px',background:'#f6f3f1'}}>
      <div style={{maxWidth:'900px',margin:'0 auto'}}>
        <p style={{fontSize:'11px',fontWeight:400,color:'#797776',letterSpacing:'0.1em',textTransform:'uppercase',textAlign:'center',marginBottom:'8px',fontFamily:'IBM Plex Mono,monospace'}}>Planes</p>
        <h2 style={{fontFamily:'Lora,Georgia,serif',fontSize:'36px',fontWeight:700,color:'#000',textAlign:'center',letterSpacing:'-0.02em',marginBottom:'12px'}}>Simple y transparente</h2>
        <p style={{fontSize:'14px',color:'#4e4d4d',textAlign:'center',marginBottom:'48px',fontFamily:'IBM Plex Mono,monospace'}}>Sin contratos, sin sorpresas. Exporta tus datos en cualquier plan.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:'14px',alignItems:'start'}}>
          {PLANS.map(function(p){return(
            <div key={p.name} style={{background:p.highlight?'#242424':'#FFFFFF',border:p.highlight?'none':'1px solid rgba(0,0,0,0.08)',borderRadius:'20px',padding:'28px 24px',position:'relative',transform:p.highlight?'scale(1.02)':'none',boxShadow:p.highlight?'0 20px 48px rgba(0,0,0,0.15)':'0 4px 16px rgba(0,0,0,0.04)'}}>
              {p.highlight&&<div style={{position:'absolute',top:'-10px',left:'50%',transform:'translateX(-50%)',background:'#f6f3f1',color:'#242424',fontSize:'10px',fontWeight:600,padding:'3px 12px',borderRadius:'100px',letterSpacing:'0.06em',fontFamily:'IBM Plex Mono,monospace',whiteSpace:'nowrap'}}>MÁS POPULAR</div>}
              <h3 style={{fontSize:'15px',fontWeight:600,color:p.highlight?'#f6f3f1':'#000',marginBottom:'10px',fontFamily:'IBM Plex Mono,monospace'}}>{p.name}</h3>
              <div style={{display:'flex',alignItems:'baseline',gap:'4px',marginBottom:'4px'}}>
                <span style={{fontSize:'38px',fontWeight:600,color:p.highlight?'#f6f3f1':'#000',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.03em'}}>{p.price}</span>
                <span style={{fontSize:'13px',color:p.highlight?'rgba(246,243,241,0.6)':'#797776',fontFamily:'IBM Plex Mono,monospace'}}>{p.sub}</span>
              </div>
              <div style={{height:'1px',background:p.highlight?'rgba(246,243,241,0.15)':'rgba(0,0,0,0.07)',margin:'16px 0'}}/>
              <div style={{display:'flex',flexDirection:'column',gap:'8px',marginBottom:'24px'}}>
                {p.features.map(function(f){return(
                  <div key={f} style={{display:'flex',gap:'8px',alignItems:'flex-start'}}>
                    <span style={{color:f.includes('Sin')?'rgba(246,243,241,0.35)':p.highlight?'rgba(246,243,241,0.7)':'#16A34A',fontSize:'12px',marginTop:'1px'}}>
                      {f.includes('Sin')?'—':'✓'}
                    </span>
                    <span style={{fontSize:'12.5px',color:f.includes('Sin')?'rgba(246,243,241,0.35)':p.highlight?'rgba(246,243,241,0.75)':'#4e4d4d',fontFamily:'IBM Plex Mono,monospace'}}>{f.replace(' ✓','').replace('Sin ','')}</span>
                  </div>
                );})}
              </div>
              <button onClick={onRegister} style={{width:'100%',padding:'11px',borderRadius:'100px',background:p.highlight?'#f6f3f1':'#242424',border:'none',color:p.highlight?'#242424':'#f6f3f1',fontSize:'13px',fontWeight:400,cursor:'pointer',fontFamily:'IBM Plex Mono,monospace',transition:'opacity 0.15s'}}
                onMouseEnter={function(e){e.currentTarget.style.opacity='0.85';}}
                onMouseLeave={function(e){e.currentTarget.style.opacity='1';}}>{p.cta}</button>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
function LandingFooter() {
  return (
    <footer style={{padding:'32px 48px',borderTop:'1px solid rgba(0,0,0,0.07)',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:'14px',background:'#f6f3f1'}}>
      <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
        <div style={{width:'22px',height:'22px',borderRadius:'50%',border:'1.5px solid #000',display:'flex',alignItems:'center',justifyContent:'center'}}><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="#000" strokeWidth="2" strokeLinecap="round"/></svg></div>
        <span style={{fontSize:'12px',color:'#797776',fontFamily:'IBM Plex Mono,monospace'}}>© 2025 Mi Negocio en Números</span>
      </div>
      <div style={{display:'flex',gap:'20px'}}>
        {['Términos','Privacidad','Contacto'].map(function(l){return(
          <a key={l} href="#" style={{fontSize:'12px',color:'#797776',textDecoration:'none',fontFamily:'IBM Plex Mono,monospace'}}>{l}</a>
        );})}
      </div>
    </footer>
  );
}

/* ─── LANDING PAGE ───────────────────────────────────────────────────────── */
function LandingPage({ onLogin, onRegister, onConsultores, onDemo }) {
  return (
    <div style={{height:'100vh',display:'flex',flexDirection:'column',overflow:'hidden'}}>
      <NotifBar onCTA={onRegister}/>
      <div id="landing-scroll" style={{flex:1,overflowY:'auto'}}>
        <LandingNav onLogin={onLogin} onRegister={onRegister} onDemo={onDemo} onConsultores={onConsultores}/>
        <HeroSection onRegister={onRegister} onDemo={onDemo}/>
        <FeaturesSection/>
        <PricingSection onRegister={onRegister}/>
        {/* Final CTA */}
        <div style={{padding:'80px 48px',textAlign:'center',background:'#FFFFFF',borderTop:'1px solid rgba(0,0,0,0.07)'}}>
          <h2 style={{fontFamily:'Lora,Georgia,serif',fontSize:'36px',fontWeight:700,color:'#000',marginBottom:'14px',letterSpacing:'-0.02em'}}>¿Listo para conocer tus números?</h2>
          <p style={{fontSize:'14px',color:'#4e4d4d',marginBottom:'28px',fontFamily:'IBM Plex Mono,monospace'}}>Empieza gratis hoy. Sin tarjeta, sin contrato.</p>
          <button onClick={onRegister} style={{padding:'13px 32px',borderRadius:'100px',background:'#242424',border:'none',color:'#f6f3f1',fontSize:'14px',fontFamily:'IBM Plex Mono,monospace',cursor:'pointer'}}>Comenzar gratis →</button>
        </div>
        <LandingFooter/>
      </div>
    </div>
  );
}

/* ─── CONSULTORES PAGE ───────────────────────────────────────────────────── */
var CONS_DATA = [
  {nombre:'Ana Gómez',    area:'Finanzas y control',  bio:'12 años ayudando a dueños en LATAM. Ex-CFO de tres startups. MBA en INCAE.',rating:4.9,sessions:47,price:170, photo:'uploads/10-Poses-para-foto-de-Perfil-Profesional-Mujer-04-2022-1-819x1024.webp'},
  {nombre:'Carlos Reyes', area:'Marketing · CAC/LTV', bio:'Especialista en unit economics para startups seed/serie A. Trabajé en Rappi y Kavak.',rating:4.7,sessions:31,price:140, photo:'uploads/foto-curriculum.webp'},
  {nombre:'Luis Herrera',  area:'Tax & Compliance',   bio:'Contador en México, Colombia y Panamá. Más de 200 empresas asesoradas.',rating:4.9,sessions:89,price:180, photo:'uploads/images-0653eb6b.jpg'},
  {nombre:'Sofía Méndez', area:'Pricing · VBP',       bio:'Tu precio comunica quién eres. VBP para productos físicos y SaaS en LATAM.',rating:4.8,sessions:22,price:150, photo:'uploads/Poses-Perfil-Profesional-Mujeres-ago.-10-2023-1-819x1024.webp'},
  {nombre:'Rodrigo Castro',area:'Operaciones',         bio:'Ex-director de operaciones en e-commerce. Reducé costos sin perder calidad.',rating:4.6,sessions:18,price:130, photo:'uploads/fotografia_curriculum_foto_linkedin_corporativa_madrid_222.jpg'},
  {nombre:'Valentina Ríos',area:'Fundraising',         bio:'Ayudo a founders a preparar su deck financiero y pitch para inversores.',rating:4.9,sessions:34,price:220,photo:'uploads/Poses-Perfil-Profesional-Mujeres-jul.-12-2023-768x960.webp'},
];

function ConsultorCard({ c }) {
  var stars = Math.floor(c.rating);
  return (
    <div style={{background:'rgba(255,255,255,0.80)',backdropFilter:'blur(16px)',WebkitBackdropFilter:'blur(16px)',border:'0.5px solid rgba(255,255,255,0.7)',borderRadius:'16px',padding:'20px',boxShadow:'0 2px 12px rgba(0,0,0,0.07)',display:'flex',flexDirection:'column',gap:'12px'}}>
      {/* Header */}
      <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
        <img src={c.photo} alt={c.nombre} style={{width:'44px',height:'44px',borderRadius:'50%',objectFit:'cover',objectPosition:'top',flexShrink:0,border:'1px solid rgba(0,0,0,0.07)'}}/>
        <div>
          <p style={{fontSize:'14px',fontWeight:600,color:'#000',margin:0,fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.015em'}}>{c.nombre}</p>
          <p style={{fontSize:'11.5px',color:'#797776',margin:'1px 0 0',fontFamily:'IBM Plex Mono,monospace'}}>{c.area}</p>
        </div>
      </div>
      {/* Bio */}
      <p style={{fontSize:'12.5px',color:'#4e4d4d',lineHeight:1.6,margin:0,fontFamily:'IBM Plex Mono,monospace',flex:1}}>{c.bio}</p>
      {/* Footer */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <div style={{display:'flex',alignItems:'center',gap:'5px'}}>
          <span style={{color:'#F97316',fontSize:'13px',letterSpacing:'1px'}}>{'★'.repeat(stars)+'☆'.repeat(5-stars)}</span>
          <span style={{fontSize:'11.5px',color:'#797776',fontFamily:'IBM Plex Mono,monospace'}}>{c.rating} · {c.sessions}</span>
        </div>
        <span style={{fontSize:'15px',fontWeight:600,color:'#000',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'-0.02em'}}>${c.price}/h</span>
      </div>
    </div>
  );
}

function ConsultoresPage({ onBack }) {
  var [sent,setSent] = useState(false);
  var [form,setForm] = useState({nombre:'',linkedin:'',area:'',tarifa:'',porQue:''});

  var set = function(k,v){setForm(function(p){var n=Object.assign({},p);n[k]=v;return n;});};

  return (
    <div style={{height:'100vh',display:'flex',flexDirection:'column',overflow:'hidden',background:'linear-gradient(135deg,#ffe8de 0%,#f6f0e8 40%,#eff5f0 100%)'}}>
      {/* Nav */}
      <div style={{padding:'14px 48px',display:'flex',alignItems:'center',justifyContent:'space-between',background:'rgba(246,243,241,0.88)',backdropFilter:'blur(12px)',borderBottom:'1px solid rgba(0,0,0,0.06)',flexShrink:0}}>
        <button onClick={onBack} style={{display:'flex',alignItems:'center',gap:'6px',background:'none',border:'none',color:'#4e4d4d',cursor:'pointer',fontSize:'13px',fontFamily:'IBM Plex Mono,monospace'}}>← Volver</button>
        <div style={{display:'flex',alignItems:'center',gap:'7px'}}>
          <div style={{width:'22px',height:'22px',borderRadius:'50%',border:'1.5px solid #000',display:'flex',alignItems:'center',justifyContent:'center'}}><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="#000" strokeWidth="2" strokeLinecap="round"/></svg></div>
          <span style={{fontSize:'13px',fontWeight:400,color:'#000',fontFamily:'IBM Plex Mono,monospace'}}>Mi Negocio en Números · Laboratorio</span>
        </div>
        <div style={{width:'80px'}}/>
      </div>

      <div style={{flex:1,overflowY:'auto',padding:'48px'}}>
        {/* Hero */}
        <div style={{maxWidth:'700px',margin:'0 auto 52px',textAlign:'center'}}>
          <div style={{display:'inline-flex',alignItems:'center',gap:'7px',padding:'4px 12px',borderRadius:'100px',border:'1px solid rgba(249,115,22,0.3)',background:'rgba(249,115,22,0.06)',marginBottom:'20px'}}>
            <span style={{width:'6px',height:'6px',borderRadius:'50%',background:'#F97316'}}/>
            <span style={{fontSize:'11px',color:'#F97316',fontFamily:'IBM Plex Mono,monospace',letterSpacing:'0.06em',textTransform:'uppercase'}}>~10% de aceptación · consultores verificados</span>
          </div>
          <h1 style={{fontFamily:'Lora,Georgia,serif',fontSize:'42px',fontWeight:700,color:'#000',letterSpacing:'-0.025em',marginBottom:'16px',lineHeight:1.1}}>Conviértete en consultor<br/><em style={{fontWeight:400,color:'#6b6560'}}>del Laboratorio</em></h1>
          <p style={{fontSize:'14px',color:'#4e4d4d',lineHeight:1.7,fontFamily:'IBM Plex Mono,monospace',marginBottom:'0'}}>
            Ayuda a dueños de negocio a pasar de datos a acción. Llegas a cada sesión con el brief pre-llenado por IA — KPIs, hallazgos y contexto del negocio listos.
          </p>
        </div>

        {/* Stats */}
        <div style={{display:'flex',justifyContent:'center',gap:'48px',marginBottom:'52px',flexWrap:'wrap'}}>
          {[['$130–$220','rango de tarifa/hora USD'],['+200','consultores en lista de espera'],['94%','satisfacción de sesiones']].map(function(s){return (
            <div key={s[0]} style={{textAlign:'center'}}>
              <p style={{fontFamily:'IBM Plex Mono,monospace',fontSize:'28px',fontWeight:600,color:'#F97316',margin:0,letterSpacing:'-0.025em'}}>{s[0]}</p>
              <p style={{fontSize:'11px',color:'#797776',margin:'4px 0 0',fontFamily:'IBM Plex Mono,monospace'}}>{s[1]}</p>
            </div>
          );})}
        </div>

        {/* Consultant grid */}
        <div style={{maxWidth:'1100px',margin:'0 auto 56px'}}>
          <p style={{fontSize:'11px',fontWeight:400,color:'#797776',letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:'16px',fontFamily:'IBM Plex Mono,monospace',textAlign:'center'}}>Consultores activos en el Laboratorio</p>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(230px,1fr))',gap:'14px'}}>
            {CONS_DATA.map(function(c){return <ConsultorCard key={c.nombre} c={c}/>;} )}
          </div>
        </div>

        {/* How it works */}
        <div style={{maxWidth:'860px',margin:'0 auto 52px'}}>
          <p style={{fontSize:'11px',fontWeight:400,color:'#797776',letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:'24px',fontFamily:'IBM Plex Mono,monospace',textAlign:'center'}}>Cómo funciona el Laboratorio</p>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:'12px'}}>
            {[
              {n:'01',title:'El cliente analiza sus KPIs',desc:'Sube datos; la IA detecta hallazgos en lenguaje simple.'},
              {n:'02',title:'Escala al Laboratorio',desc:'Genera un brief pre-llenado con KPIs y hallazgos.'},
              {n:'03',title:'Elige a su consultor',desc:'Selecciona por área, propone horarios. Tú confirmas.'},
              {n:'04',title:'Sesión de 60 min',desc:'Llegas con el brief. La conversación va directo al punto.'},
            ].map(function(s){return (
              <div key={s.n} style={{background:'rgba(255,255,255,0.68)',backdropFilter:'blur(16px)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'14px',padding:'18px'}}>
                <span style={{fontFamily:'IBM Plex Mono,monospace',fontSize:'22px',fontWeight:600,color:'#F97316',opacity:0.5}}>{s.n}</span>
                <h3 style={{fontSize:'13px',fontWeight:600,color:'#000',margin:'10px 0 6px',lineHeight:1.3,fontFamily:'IBM Plex Mono,monospace'}}>{s.title}</h3>
                <p style={{fontSize:'12px',color:'#4e4d4d',lineHeight:1.55,margin:0,fontFamily:'IBM Plex Mono,monospace'}}>{s.desc}</p>
              </div>
            );})}
          </div>
        </div>

        {/* Application form */}
        <div style={{maxWidth:'560px',margin:'0 auto'}}>
          <h2 style={{fontFamily:'Lora,Georgia,serif',fontSize:'26px',fontWeight:700,color:'#000',marginBottom:'8px',letterSpacing:'-0.02em',textAlign:'center'}}>Aplicar como consultor</h2>
          <p style={{fontSize:'13px',color:'#797776',textAlign:'center',marginBottom:'28px',fontFamily:'IBM Plex Mono,monospace'}}>Respondemos en 5–10 días hábiles.</p>

          {sent ? (
            <div style={{textAlign:'center',padding:'40px',background:'rgba(255,255,255,0.75)',backdropFilter:'blur(16px)',border:'0.5px solid rgba(255,255,255,0.7)',borderRadius:'16px'}}>
              <div style={{width:'48px',height:'48px',borderRadius:'50%',background:'rgba(22,163,74,0.1)',border:'1.5px solid #16A34A',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 14px',fontSize:'22px'}}>✓</div>
              <h3 style={{fontSize:'18px',fontWeight:700,color:'#000',marginBottom:'8px',fontFamily:'IBM Plex Mono,monospace'}}>¡Aplicación recibida!</h3>
              <p style={{fontSize:'13px',color:'#4e4d4d',fontFamily:'IBM Plex Mono,monospace'}}>Revisamos cada aplicación con cuidado. Te contactamos pronto.</p>
            </div>
          ) : (
            <div style={{background:'rgba(255,255,255,0.75)',backdropFilter:'blur(16px)',border:'0.5px solid rgba(255,255,255,0.7)',borderRadius:'16px',padding:'28px'}}>
              {[
                {label:'Nombre completo',key:'nombre',type:'text',placeholder:'Tu nombre y apellido'},
                {label:'LinkedIn o portafolio (obligatorio)',key:'linkedin',type:'text',placeholder:'https://linkedin.com/in/...'},
                {label:'Tarifa deseada (USD/hora)',key:'tarifa',type:'number',placeholder:'85'},
              ].map(function(f){return (
                <div key={f.key} style={{marginBottom:'14px'}}>
                  <label style={{fontSize:'11.5px',fontWeight:500,color:'#4e4d4d',display:'block',marginBottom:'5px',fontFamily:'IBM Plex Mono,monospace'}}>{f.label}</label>
                  <input type={f.type} value={form[f.key]} onChange={function(e){set(f.key,e.target.value);}} placeholder={f.placeholder} style={{width:'100%',padding:'10px 13px',borderRadius:'10px',fontSize:'13.5px'}}/>
                </div>
              );})}
              <div style={{marginBottom:'14px'}}>
                <label style={{fontSize:'11.5px',fontWeight:500,color:'#4e4d4d',display:'block',marginBottom:'7px',fontFamily:'IBM Plex Mono,monospace'}}>Área de especialidad</label>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'6px'}}>
                  {['Finanzas y control','Marketing / CAC','Operaciones','Tax & Compliance','Pricing / VBP','Fundraising'].map(function(a){return (
                    <button key={a} onClick={function(){set('area',a);}} style={{padding:'8px 12px',borderRadius:'100px',border:'0.5px solid '+(form.area===a?'rgba(249,115,22,0.5)':'rgba(0,0,0,0.12)'),background:form.area===a?'rgba(249,115,22,0.08)':'transparent',color:form.area===a?'#F97316':'#4e4d4d',fontSize:'12px',cursor:'pointer',fontFamily:'IBM Plex Mono,monospace',fontWeight:form.area===a?600:400,transition:'all 0.12s'}}>{a}</button>
                  );})}
                </div>
              </div>
              <div style={{marginBottom:'20px'}}>
                <label style={{fontSize:'11.5px',fontWeight:500,color:'#4e4d4d',display:'block',marginBottom:'5px',fontFamily:'IBM Plex Mono,monospace'}}>¿Por qué quieres ser consultor?</label>
                <textarea value={form.porQue} onChange={function(e){set('porQue',e.target.value);}} placeholder="Cuéntanos qué te motiva..." style={{width:'100%',padding:'10px 13px',borderRadius:'10px',fontSize:'13px',resize:'none',minHeight:'84px',lineHeight:1.55}}/>
              </div>
              <button onClick={function(){if(form.linkedin.trim())setSent(true);}} style={{width:'100%',padding:'12px',borderRadius:'100px',background:'#242424',border:'none',color:'#f6f3f1',fontSize:'14px',fontWeight:400,cursor:'pointer',fontFamily:'IBM Plex Mono,monospace',transition:'opacity 0.15s'}}
                onMouseEnter={function(e){e.currentTarget.style.opacity='0.85';}}
                onMouseLeave={function(e){e.currentTarget.style.opacity='1';}}>
                Enviar aplicación →
              </button>
              <p style={{fontSize:'11.5px',color:'#9a9490',textAlign:'center',marginTop:'10px',fontFamily:'IBM Plex Mono,monospace'}}>No creamos cuenta de usuario. Solo registramos tu solicitud.</p>
            </div>
          )}
        </div>
        <div style={{height:'60px'}}/>
      </div>
    </div>
  );
}

Object.assign(window, { LandingPage, ConsultoresPage });