// v2/sections-a.jsx — Nav, Hero, Trust, Problema, Features, Industries
const { useState: useStateA, useEffect: useEffectA } = React;

// =====================================================
// Logo
// =====================================================
function V2Logo() {
  return (
    <a href="#top" className="v-brand" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
      <span className="v-brand-mark">
        <img src="logo-tikelu.png" alt="TIKELU" width="32" height="32"/>
      </span>
      <span>TIKELU</span>
    </a>
  );
}

// =====================================================
// Nav
// =====================================================
function V2Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#features', label: 'Funciones' },
    { href: '#precios', label: 'Precios' },
    { href: 'comparar-planes.html', label: 'Comparar' },
    { href: '#faq', label: 'FAQ' },
  ];

  return (
    <header id="top" className={`v-nav ${scrolled ? 'scrolled' : ''}`} data-screen-label="00 Nav">
      <div className="v-nav-inner">
        <V2Logo/>
        <nav className="v-nav-links">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="v-nav-right">
          <a className="v-btn v-btn-primary v-btn-sm" href="#contacto">Empezar gratis</a>
        </div>
      </div>
    </header>
  );
}

// =====================================================
// Hero
// =====================================================
function V2Hero({ variant = 'center' }) {
  return (
    <section className="v-hero" data-screen-label="01 Hero">
      <div className="v-hero-bg" aria-hidden="true">
        <div className="v-grid-bg grid"></div>
        <div className="mesh"></div>
        <div className="orb-1"></div>
        <div className="orb-2"></div>
      </div>
      <div className="v-wrap">
        {variant === 'split' ? <V2HeroSplit/> : <V2HeroCenter/>}
      </div>
    </section>
  );
}

function V2HeroContent() {
  return (
    <React.Fragment>
      <a href="#features" className="v-urgency-pill v-rise">
        <span className="pulse-dot">
          <span></span><span></span>
        </span>
        <span>🔥 Quedan 47 cupos con 50% OFF este mes</span>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
      </a>
      <h1 className="v-rise" style={{animationDelay:'60ms', marginTop:24}}>
        Empieza a vender más<br/>
        <span className="v-gradient-text">desde hoy mismo</span>
      </h1>
      <p className="sub v-rise" style={{animationDelay:'140ms'}}>
        El punto de venta que cuadra tu caja sola, controla tu inventario y te dice exactamente cuánto ganas. Sin Excel. Sin papelitos. Sin estrés.
      </p>
      <div className="v-hero-cta v-rise" style={{animationDelay:'220ms'}}>
        <a className="v-btn v-btn-primary" href="#contacto">
          Reclamar mi 50% OFF
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <a className="v-btn v-btn-ghost" href="#demo">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M10 9l5 3-5 3z" fill="currentColor"/></svg>
          Ver demo en vivo
        </a>
      </div>
      <ul className="v-hero-trust v-rise" style={{animationDelay:'300ms'}}>
        <li><CheckIcon/> 15 días gratis</li>
        <li><CheckIcon/> Sin tarjeta de crédito</li>
        <li><CheckIcon/> Garantía de satisfacción</li>
        <li><CheckIcon/> Cancela cuando quieras</li>
      </ul>
    </React.Fragment>
  );
}

function V2HeroCenter() {
  return (
    <div className="v-hero-content">
      <V2HeroContent/>
    </div>
  );
}
function V2HeroSplit() {
  return (
    <div className="v-hero-split-grid">
      <div className="v-hero-content split">
        <V2HeroContent/>
      </div>
      <div className="v-rise" style={{animationDelay:'380ms', position:'relative'}}>
        <div className="v-hero-mock-glow" style={{position:'absolute',inset:'-20px',borderRadius:24,background:'radial-gradient(closest-side,rgba(108,71,255,0.3),transparent)',filter:'blur(40px)'}}></div>
        <V2POSMockup/>
      </div>
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#34D399" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7"/>
    </svg>
  );
}

// =====================================================
// Dashboard Mock (in Hero) — themed dark
// =====================================================
function V2DashboardMock() {
  return (
    <div className="v-dash" style={{position:'relative'}}>
      <div className="v-dash-chrome">
        <span className="dot r"></span><span className="dot y"></span><span className="dot g"></span>
        <span className="url">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          app.tikelu.io / dashboard
        </span>
        <span className="live"><span className="ld"></span>En vivo</span>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'180px 1fr', minHeight:520}}>
        {/* Sidebar */}
        <aside style={{borderRight:'1px solid rgba(255,255,255,0.06)', padding:12, display:'flex',flexDirection:'column',gap:4}}>
          {[
            ['Resumen', true],
            ['Pedidos', false],
            ['Productos', false],
            ['Clientes', false],
            ['Reportes', false],
            ['Empleados', false],
            ['Configuración', false],
          ].map(([label, active]) => (
            <div key={label} style={{
              display:'flex', alignItems:'center', gap:8,
              padding:'8px 10px', borderRadius:8,
              fontSize:13,
              background: active ? 'rgba(255,255,255,0.06)' : 'transparent',
              color: active ? '#fff' : 'rgba(255,255,255,0.55)',
            }}>
              <span style={{width:6, height:6, borderRadius:999, background: active ? '#00D2FF' : 'rgba(255,255,255,0.2)', boxShadow: active ? '0 0 8px #00D2FF' : 'none'}}></span>
              {label}
            </div>
          ))}
        </aside>

        {/* Main */}
        <div style={{padding:'20px 24px', display:'flex', flexDirection:'column', gap:16}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end'}}>
            <div>
              <div style={{fontSize:12,color:'rgba(255,255,255,0.5)'}}>Buenos días, María</div>
              <div style={{fontSize:17,fontWeight:600,marginTop:2}}>Ventas — Hoy</div>
            </div>
            <div style={{display:'flex',gap:4,fontSize:12}}>
              {['Hoy','7d','30d'].map((p,i)=>(
                <span key={p} style={{
                  padding:'5px 12px',borderRadius:8,
                  border:'1px solid rgba(255,255,255,0.1)',
                  background: i===0 ? 'rgba(255,255,255,0.05)' : 'transparent',
                  color: i===0 ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.45)'
                }}>{p}</span>
              ))}
            </div>
          </div>

          {/* KPI cards */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
            {[
              {l:'Ingresos', v:'$12,847', d:'+18.4%', c:'#6C47FF'},
              {l:'Pedidos', v:'382', d:'+12.1%', c:'#00D2FF'},
              {l:'Ticket promedio', v:'$33.62', d:'+4.2%', c:'#34D399'},
              {l:'Devoluciones', v:'0.8%', d:'-0.3%', c:'#8F6BFF'},
            ].map((k,i)=>(
              <div key={i} style={{
                padding:14, borderRadius:12,
                border:'1px solid rgba(255,255,255,0.08)',
                background:'rgba(255,255,255,0.02)'
              }}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  <span style={{fontSize:10,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.08em',color:'rgba(255,255,255,0.5)'}}>{k.l}</span>
                  <span style={{width:6,height:6,borderRadius:999,background:k.c, boxShadow:`0 0 10px ${k.c}`}}></span>
                </div>
                <div style={{marginTop:8,fontSize:20,fontWeight:700,letterSpacing:'-0.02em'}}>{k.v}</div>
                <div style={{marginTop:4,fontSize:11,color:'#34D399'}}>{k.d} vs. ayer</div>
              </div>
            ))}
          </div>

          {/* Chart + top selling */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12, flex:1}}>
            <div style={{gridColumn:'span 2', padding:14, borderRadius:12, border:'1px solid rgba(255,255,255,0.08)', background:'rgba(255,255,255,0.02)', display:'flex', flexDirection:'column'}}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'rgba(255,255,255,0.55)'}}>
                <span>Ingresos · últimas 12 horas</span><span style={{color:'rgba(255,255,255,0.4)'}}>Actualizado hace 12s</span>
              </div>
              <V2BigChart/>
            </div>
            <div style={{padding:14, borderRadius:12, border:'1px solid rgba(255,255,255,0.08)', background:'rgba(255,255,255,0.02)'}}>
              <div style={{fontSize:11,color:'rgba(255,255,255,0.55)',marginBottom:12}}>Más vendidos</div>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
                {[
                  ['Café americano', 124, '$486'],
                  ['Tostada de aguacate', 88, '$704'],
                  ['Croissant', 76, '$228'],
                  ['Cold brew', 64, '$320'],
                ].map(([n,q,r]) => (
                  <li key={n} style={{display:'flex',justifyContent:'space-between',fontSize:12,color:'rgba(255,255,255,0.8)'}}>
                    <span>{n}</span>
                    <span style={{color:'rgba(255,255,255,0.4)'}}>{q} · <span style={{color:'#fff'}}>{r}</span></span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Floating cards */}
      <div className="v-float-card" style={{left:'-24px', top:120, animationDelay:'0s'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,fontSize:11,color:'rgba(255,255,255,0.6)'}}>
          <span style={{width:8,height:8,borderRadius:999,background:'#34D399',boxShadow:'0 0 8px #34D399'}}></span>
          Pago recibido
        </div>
        <div style={{marginTop:8,fontSize:22,fontWeight:700,letterSpacing:'-0.02em'}}>+$84.20</div>
        <div style={{marginTop:4,fontSize:11,color:'rgba(255,255,255,0.4)'}}>Visa · 4242 · Caja principal</div>
        <div style={{marginTop:12,height:6,borderRadius:999,background:'rgba(255,255,255,0.05)',overflow:'hidden'}}>
          <div style={{height:'100%',width:'75%',background:'linear-gradient(135deg,#6C47FF,#00D2FF)'}}></div>
        </div>
      </div>

      <div className="v-float-card" style={{right:'-16px', top:48, animationDelay:'1.2s'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:11}}>
          <span style={{color:'rgba(255,255,255,0.6)'}}>Nueva orden</span>
          <span style={{fontSize:10,padding:'2px 8px',borderRadius:999,background:'rgba(108,71,255,0.2)',color:'#B8A8FF'}}>#A-2418</span>
        </div>
        <div style={{marginTop:8,fontSize:14,color:'#fff'}}>Mesa 7 · 3 productos</div>
        <div style={{marginTop:6,fontSize:11,color:'rgba(255,255,255,0.5)'}}>2× Latte · 1× Brioche</div>
        <div style={{marginTop:12,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span style={{fontSize:12,color:'rgba(255,255,255,0.4)'}}>$18.40</span>
          <span style={{fontSize:10,padding:'2px 8px',borderRadius:999,background:'rgba(52,211,153,0.15)',color:'#34D399'}}>Aceptada</span>
        </div>
      </div>

      <div className="v-float-card" style={{right:'-32px', bottom:32, animationDelay:'0.6s'}}>
        <div style={{fontSize:11,color:'rgba(255,255,255,0.6)'}}>Inventario</div>
        <div style={{marginTop:6,fontSize:13,fontWeight:600}}>Cold brew · bajo</div>
        <div style={{marginTop:10,height:6,borderRadius:999,background:'rgba(255,255,255,0.05)',overflow:'hidden'}}>
          <div style={{height:'100%',width:'18%',background:'#FFB454'}}></div>
        </div>
        <div style={{marginTop:8,fontSize:11,color:'rgba(255,255,255,0.4)'}}>12 unidades · pedir reposición</div>
      </div>
    </div>
  );
}

function V2BigChart() {
  const data = [22,28,24,33,29,38,34,44,40,48,42,55,49,60,52,68,61,75,68,82,74,88,82,96];
  const max = Math.max(...data);
  const path = data.map((p,i)=>{
    const x = (i/(data.length-1))*100;
    const y = 100 - (p/max)*88;
    return `${i===0?'M':'L'}${x},${y}`;
  }).join(' ');
  return (
    <svg viewBox="0 0 100 60" preserveAspectRatio="none" style={{marginTop:12,width:'100%',height:140,flex:1}}>
      <defs>
        <linearGradient id="v2chart-g" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#00D2FF" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#6C47FF" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="v2chart-l" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#6C47FF"/>
          <stop offset="100%" stopColor="#00D2FF"/>
        </linearGradient>
      </defs>
      <g transform="scale(1, 0.6)">
        <path d={`${path} L100,100 L0,100 Z`} fill="url(#v2chart-g)"/>
        <path d={path} fill="none" stroke="url(#v2chart-l)" strokeWidth="0.8" vectorEffect="non-scaling-stroke"/>
      </g>
    </svg>
  );
}

// =====================================================
// Simple POS mockup for split hero variant
// =====================================================
function V2POSMockup() {
  return (
    <div className="v-dash" style={{transform:'perspective(1400px) rotateY(-5deg) rotateX(2deg)'}}>
      <div className="v-dash-chrome">
        <span className="dot r"></span><span className="dot y"></span><span className="dot g"></span>
        <span className="url">TIKELU · Punto de venta</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', minHeight:380}}>
        <div style={{padding:16}}>
          <div style={{display:'flex',gap:6,marginBottom:14,flexWrap:'wrap'}}>
            {['Todo','Bebidas','Comida','Snacks'].map((c,i)=>(
              <span key={i} style={{padding:'5px 11px',borderRadius:999,fontSize:11,fontWeight:600,
                background: i===0 ? 'linear-gradient(135deg,#6C47FF,#00D2FF)' : 'rgba(255,255,255,0.04)',
                color: i===0 ? '#fff' : 'rgba(255,255,255,0.7)'
              }}>{c}</span>
            ))}
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
            {[
              {n:'Coca-Cola',p:'$1.20',c:'#EF4444'},
              {n:'Pan',p:'$0.50',c:'#F59E0B'},
              {n:'Manzana',p:'$0.80',c:'#10B981'},
              {n:'Café',p:'$2.50',c:'#92400E'},
              {n:'Agua 500',p:'$0.80',c:'#0EA5E9'},
              {n:'Galletas',p:'$1.50',c:'#A855F7'},
            ].map((it,i)=>(
              <div key={i} style={{
                background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.08)',
                borderRadius:10,padding:8, display:'flex',flexDirection:'column',gap:4
              }}>
                <div style={{height:36,borderRadius:6,background:`linear-gradient(135deg, ${it.c}44, ${it.c}22)`,border:`1px solid ${it.c}33`}}></div>
                <div style={{fontSize:10.5,fontWeight:600,color:'#fff'}}>{it.n}</div>
                <div style={{fontSize:10.5,color:'#00D2FF',fontWeight:700}}>{it.p}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{padding:16, borderLeft:'1px solid rgba(255,255,255,0.06)', display:'flex',flexDirection:'column'}}>
          <div style={{fontSize:12,fontWeight:700,marginBottom:10}}>Ticket #10428</div>
          {[
            {n:'Coca-Cola 600',q:2,p:'$2.40'},
            {n:'Pan integral',q:1,p:'$0.50'},
            {n:'Manzana Roja',q:3,p:'$2.40'},
            {n:'Café americano',q:1,p:'$2.50'},
          ].map((r,i)=>(
            <div key={i} style={{display:'flex',gap:6,padding:'6px 0',borderBottom:'1px dashed rgba(255,255,255,0.06)',fontSize:11,color:'rgba(255,255,255,0.85)'}}>
              <span style={{color:'rgba(255,255,255,0.45)',width:14}}>{r.q}×</span>
              <span style={{flex:1}}>{r.n}</span>
              <span style={{fontWeight:600,color:'#fff'}}>{r.p}</span>
            </div>
          ))}
          <div style={{marginTop:'auto',paddingTop:12}}>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'rgba(255,255,255,0.5)'}}>
              <span>Subtotal</span><span>$7.80</span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:6,paddingTop:8,borderTop:'1px solid rgba(255,255,255,0.08)'}}>
              <span style={{fontWeight:700}}>Total</span>
              <span style={{fontWeight:700,fontSize:18,background:'linear-gradient(135deg,#fff,#B8A8FF,#6CE6FF)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>$8.74</span>
            </div>
            <button style={{
              width:'100%',marginTop:12,padding:'12px 16px',borderRadius:10,
              background:'linear-gradient(135deg,#6C47FF,#00D2FF)',color:'#fff',border:0,fontWeight:700,fontSize:13,
              boxShadow:'0 8px 16px -8px rgba(108,71,255,0.6)'
            }}>Cobrar $8.74</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// =====================================================
// Trust (marquee de beneficios + métricas)
// =====================================================
function V2Trust() {
  const benefits = ['Inventario en tiempo real', 'Cuadra caja sola', 'Sin contratos ni tarjeta', 'Funciona en tablet, PC o celular', 'Soporte por WhatsApp', 'Setup en 12 minutos', 'Reportes en vivo', 'Datos 100% tuyos', 'Cancela cuando quieras'];
  const stats = [
    { v: '+500', l: 'Negocios activos' },
    { v: '$48M', l: 'Procesados / mes' },
    { v: '99.99%', l: 'Tiempo activo' },
  ];
  return (
    <section className="v-section-tight" style={{paddingTop:'14px', paddingBottom:'40px'}} data-screen-label="02 Trust">
      <div className="v-wrap">
        <div className="v-marquee-wrap">
          <div className="v-marquee-track v-marquee">
            {[...benefits, ...benefits].map((b, i) => <span key={i}>✓ {b}</span>)}
          </div>
        </div>
        <div className="v-metrics" style={{gridTemplateColumns:'repeat(3,1fr)',maxWidth:760,margin:'52px auto 0'}}>
          {stats.map(s => (
            <div key={s.l} className="v-metric">
              <div className="n v-gradient-text">{s.v}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Problema
// =====================================================
function V2Problema() {
  const pains = [
    { ic: '😩', t: 'Cuadrar caja te quita 2 horas cada noche', d: 'Cierras tarde, comparas papeles, encuentras diferencias y nunca sabes en qué se fue el dinero.' },
    { ic: '📦', t: 'Compras a ojo y te sobra o te falta', d: 'Pierdes ventas cuando se acaba lo que más vendes, y dejas dinero en lo que nadie compra.' },
    { ic: '🤷', t: 'No sabes qué producto te deja más dinero', d: 'Sin reportes claros, decides por intuición. Hay productos que te están haciendo perder dinero ahora mismo.' },
    { ic: '💸', t: 'Cada mes le regalas dinero a tu competencia', d: 'Mientras decides, otros negocios ya vendieron más, fidelizaron clientes y crecieron. Tú apenas cuadras la caja.' },
  ];
  return (
    <section id="problema" className="v-section" style={{paddingTop:'52px'}} data-screen-label="04 Problema">
      <div className="v-section-glow"></div>
      <div className="v-wrap">
        <div className="v-section-head">
          <span className="v-eyebrow"><span className="dot"></span>El problema</span>
          <h2>Si tienes un negocio, <span className="v-gradient-text">esto te suena familiar</span></h2>
          <p className="lead">No es tu culpa. Es el sistema que estás usando.</p>
        </div>
        <div className="v-grid-2" style={{maxWidth:1080,margin:'0 auto'}}>
          {pains.map((p, i) => (
            <div key={i} className="v-pain">
              <div className="ic" style={{fontSize:22}}>{p.ic}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Features
// =====================================================
const sp = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
function IconBolt(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>);}
function IconBox(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>);}
function IconChart(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg>);}
function IconStore(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M3 9l1.5-5h15L21 9"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg>);}
function IconUsers(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><path d="M15 20c0-2 2-3.5 4-3.5s4 1.5 4 3.5"/></svg>);}
function IconHeart(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M12 21s-7-4.5-9.5-9.2C.8 8 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.2 4 4.5 7.8C19 16.5 12 21 12 21z"/></svg>);}
function IconPhone(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 19h2"/></svg>);}
function IconCloud(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M7 18h11a4 4 0 000-8 6 6 0 00-11.7 1.5A4 4 0 007 18z"/></svg>);}
function IconCard(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M2 10h20"/><path d="M6 15h4"/></svg>);}
function IconReceipt(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>);}
function IconScan(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><path d="M4 7V5a2 2 0 012-2h2M20 7V5a2 2 0 00-2-2h-2M4 17v2a2 2 0 002 2h2M20 17v2a2 2 0 01-2 2h-2"/><path d="M7 8v8M11 8v8M15 8v8M19 8v8"/></svg>);}
function IconReport(){return(<svg width="18" height="18" viewBox="0 0 24 24" {...sp}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>);}

function V2Features() {
  const features = [
    { t: 'Cobra a tu cliente en 3 segundos', d: 'Tan fácil que tu empleado más nuevo vende en su primer turno. Con o sin código de barras, sin manuales.', icon: IconBolt },
    { t: 'Tu inventario se cuadra solo', d: 'Cada venta descuenta stock automáticamente. Te avisa cuándo reponer antes de que pierdas la venta.', icon: IconBox },
    { t: 'Sabe exactamente cuánto ganas hoy', d: 'Reportes en vivo en tu celular. Cuánto vendiste, cuánto te queda y cuál producto te deja más dinero.', icon: IconChart },
    { t: 'Tus empleados no pueden hacer trampa', d: 'Cada usuario con su acceso. Sabes quién vendió qué, quién dio descuento, quién abrió la caja.', icon: IconUsers },
    { t: 'Comisiones por vendedor', d: 'Configura porcentajes por rol, asigna cada venta a quien la cerró y genera el reporte automático. Sin calcular en papel.', icon: IconReport },
    { t: 'Modo restaurante incluido', d: 'Plano de mesas, comandas directo a cocina y dividir la cuenta — sin costo extra.', icon: IconReceipt },
  ];
  return (
    <section id="features" className="v-section" data-screen-label="05 Features">
      <div className="v-section-glow"></div>
      <div className="v-wrap">
        <div className="v-section-head">
          <span className="v-eyebrow"><span className="dot"></span>La solución</span>
          <h2>Todo lo que un dueño de negocio necesita, <span className="v-gradient-text">en un solo lugar</span></h2>
          <p className="lead">TIKELU reemplaza tu caja registradora, tu cuaderno y tu Excel — y trabaja para ti, no al revés.</p>
        </div>
        <div className="v-grid-3">
          {features.map((f, i) => (
            <div key={i} className="v-feat">
              <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:10}}>
                <div className="ic"><f.icon/></div>
                <h3 style={{margin:0}}>{f.t}</h3>
              </div>
              <p>{f.d}</p>
            </div>
          ))}
        </div>

        {/* Mid-CTA after solution */}
        <div className="v-mid-cta">
          <div>
            <h3 style={{fontSize:22}}>¿Te imaginas tu negocio funcionando así?</h3>
            <p style={{color:'var(--v-fg-4)', marginTop:8, fontSize:15}}>Empieza gratis hoy y vende más mañana mismo.</p>
          </div>
          <a className="v-btn v-btn-primary v-btn-lg" href="#contacto">Reclamar mi 50% OFF →</a>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Industrias / Modos
// =====================================================
function V2Industrias() {
  const items = [
    { ic: '🍽', t: 'Restaurantes' },
    { ic: '☕', t: 'Cafeterías' },
    { ic: '🛒', t: 'Minimarkets' },
    { ic: '🔧', t: 'Ferreterías' },
    { ic: '🍎', t: 'Fruterías' },
    { ic: '🎂', t: 'Panaderías' },
    { ic: '💊', t: 'Farmacias' },
    { ic: '💈', t: 'Salones' },
    { ic: '🐶', t: 'Pet shops' },
    { ic: '👕', t: 'Tiendas de ropa' },
  ];
  return (
    <section id="industrias" className="v-section-tight" data-screen-label="06 Industrias">
      <div className="v-wrap" style={{textAlign:'center'}}>
        <span className="v-eyebrow"><span className="dot"></span>Hecho para tu negocio</span>
        <h2 style={{marginTop:18}}>Funciona para <span className="v-gradient-text">cualquier negocio que venda</span></h2>
        <p className="lead" style={{margin:'18px auto 0',maxWidth:560,color:'var(--v-fg-4)',fontSize:17}}>
          Con o sin código de barras, con o sin mesas. TIKELU se adapta a cómo tú vendes.
        </p>
        <div className="v-chip-row">
          {items.map((it, i) => (
            <span key={i} className="v-ind-chip"><span className="e">{it.ic}</span>{it.t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { V2Logo, V2Nav, V2Hero, V2Trust, V2Problema, V2Features, V2Industrias });