// v2/sections-b.jsx — Testimonios, Caso, Precios, Nosotros, Contacto, CTA, FAQ, Footer
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// =====================================================
// Testimonios
// =====================================================
function V2Testimonios() {
  const list = [
    { q: 'Pasé de cuadrar caja 2 horas cada noche a 5 minutos. Y por fin sé qué producto me deja más dinero.',
      n: 'Camila Restrepo', r: 'Dueña, Mini Mercado La Esquina' },
    { q: 'En la ferretería manejamos 3,000 productos. TIKELU me alerta cuándo reponer antes de que el cliente se quede sin comprar.',
      n: 'Roberto Sánchez', r: 'Dueño, Ferretería Sánchez & Hijos' },
    { q: 'Lo más sencillo que he usado. Mis empleadas aprendieron en una tarde y el soporte responde por WhatsApp en minutos.',
      n: 'Lucía Fernández', r: 'Dueña, Frutas Don Lucho' },
  ];
  return (
    <section id="clientes" className="v-section" data-screen-label="08 Testimonios">
      <div className="v-wrap">
        <div className="v-section-head">
          <span className="v-eyebrow"><span className="dot"></span>Lo que dicen</span>
          <h2>Más de +500 negocios <span className="v-gradient-text">ya venden con TIKELU</span></h2>
        </div>
        <div className="v-grid-3">
          {list.map((t, i) => (
            <figure key={i} className="v-testi">
              <div className="stars">
                {[1,2,3,4,5].map(k => (
                  <svg key={k} width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
                ))}
              </div>
              <blockquote className="quote">"{t.q}"</blockquote>
              <figcaption className="who">
                <div className="av">{t.n.split(' ').map(s => s[0]).join('').slice(0,2)}</div>
                <div>
                  <div className="n">{t.n}</div>
                  <div className="r">{t.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Caso de éxito
// =====================================================
function V2Caso() {
  return (
    <section className="v-section" data-screen-label="09 Caso de éxito">
      <div className="v-wrap">
        <div className="v-case">
          <div>
            <span className="tag">★ Caso de éxito</span>
            <h2>"TIKELU nos ayudó a <span className="v-gradient-text">duplicar nuestras ventas</span> en 1 año."</h2>
            <p className="lead">Panadería La Espiga llevaba 12 años con caja registradora y cuaderno. En 6 meses con TIKELU, identificaron sus productos más rentables, redujeron mermas en 38% y — con sus propias ganancias — financiaron la expansión del negocio.</p>
            <div style={{display:'flex',gap:14,alignItems:'center',marginTop:32}}>
              <div className="v-testi" style={{padding:0,background:'none',border:0,flexDirection:'row',gap:12,alignItems:'center'}}>
                <div className="av" style={{width:48,height:48,background:'linear-gradient(135deg,#FBBF24,#F59E0B)'}}>MO</div>
                <div>
                  <div style={{color:'#fff',fontWeight:600,fontSize:14}}>Marcela Ortiz</div>
                  <div style={{color:'var(--v-fg-4)',fontSize:13}}>Dueña, Panadería La Espiga</div>
                </div>
              </div>
            </div>
          </div>
          <div className="v-case-metrics">
            <div className="v-case-metric"><div className="n">+62%</div><div className="l">Crecimiento de ventas en 1 año</div></div>
            <div className="v-case-metric"><div className="n">-38%</div><div className="l">Reducción en mermas</div></div>
            <div className="v-case-metric"><div className="n">+2,400</div><div className="l">Clientes nuevos en 6 meses</div></div>
            <div className="v-case-metric"><div className="n">8h</div><div className="l">Ahorradas por semana en cuadres</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Precios
// =====================================================
function V2Precios() {
  const plans = [
    { n: 'Starter', price: '$20', blurb: 'Para arrancar tu negocio con lo esencial.', feats: ['Hasta 50 productos', 'Hasta 2 usuarios', 'Histórico de 30 días', 'Importar productos desde Excel', 'Control de inventario y caja', 'Soporte por correo'] },
    { n: 'Pro', price: '$25', blurb: 'Todo sin límites, para negocios que crecen.', feats: ['Productos y usuarios ilimitados', 'Histórico ilimitado', 'Exportar a Excel', 'Inventario por sucursales', 'Pantalla de cocina y kiosco', 'Ticket personalizable y doble moneda'], highlight: true },
  ];
  return (
    <section id="precios" className="v-section" data-screen-label="10 Precios">
      <div className="v-wrap">
        <div className="v-section-head">
          <span className="v-eyebrow"><span className="dot"></span>Precios</span>
          <h2>Dos planes simples que <span className="v-gradient-text">crecen contigo</span></h2>
          <p className="lead">Empieza con 15 días gratis y acceso completo. Sin tarjeta de crédito. Cancela cuando quieras.</p>
        </div>

        <div className="v-grid-2" style={{maxWidth:760,margin:'0 auto'}}>
          {plans.map((p, i) => (
            <div key={i} className={`v-plan ${p.highlight ? 'highlight' : ''}`}>
              {p.highlight && <span className="badge">Recomendado</span>}
              <div className={`pn ${p.highlight ? 'v-gradient-text' : ''}`} style={p.highlight ? {fontSize:28, fontWeight:800, letterSpacing:'-0.02em'} : null}>{p.n}</div>
              <div className="pp" style={{flexDirection:'column',alignItems:'flex-start',gap:2}}>
                <span className="num">{p.price}<span style={{fontSize:16,fontWeight:600,color:'var(--v-fg-4)'}}> /mes</span></span>
                <span className="pe">por negocio</span>
              </div>
              <div className="blurb">{p.blurb}</div>
              <ul>
                {p.feats.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a className={`v-btn ${p.highlight ? 'v-btn-primary' : 'v-btn-ghost'}`} style={{justifyContent:'center'}} href="#contacto">
                Empezar gratis
              </a>
            </div>
          ))}
        </div>

        <div style={{textAlign:'center',marginTop:28}}>
          <a className="v-btn v-btn-ghost" href="comparar-planes.html">
            Ver comparación completa de planes
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
          </a>
        </div>

        <div className="v-guarantee">
          <span className="v-guarantee-ic">🎁</span>
          <div>
            <div className="v-guarantee-t">15 días gratis con acceso Pro completo</div>
            <div className="v-guarantee-s">Todo negocio nuevo arranca con acceso total durante 15 días. Pruébalo sin tarjeta y decide con calma qué plan le queda mejor a tu negocio.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Nosotros
// =====================================================
function V2Nosotros() {
  return (
    <section id="nosotros" className="v-section" data-screen-label="11 Nosotros">
      <div className="v-section-glow"></div>
      <div className="v-wrap">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'center'}} className="v2-nosotros-grid">
          <div>
            <span className="v-eyebrow"><span className="dot"></span>Quiénes somos</span>
            <h2 style={{marginTop:18}}>Hechos por <span className="v-gradient-text">dueños de negocio</span>, para dueños de negocio</h2>
            <p style={{marginTop:18,color:'var(--v-fg-3)',fontSize:17,lineHeight:1.55}}>
              TIKELU nació en 2021 cuando nuestros fundadores — uno con una panadería, otra con una ferretería — se cansaron de pagar sistemas caros que no entendían su realidad. Lo construimos para nosotros mismos. Hoy, lo usan +500 negocios en Latinoamérica.
            </p>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,marginTop:40}}>
              {[
                { n: '2021', l: 'Año de fundación' },
                { n: '+500', l: 'Negocios activos' },
                { n: '42',   l: 'Personas en el equipo' },
              ].map((s, i) => (
                <div key={i}>
                  <div style={{fontSize:36,fontWeight:700,letterSpacing:'-0.02em',background:'linear-gradient(135deg,#fff,#B8A8FF,#6CE6FF)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>{s.n}</div>
                  <div style={{color:'var(--v-fg-4)',fontSize:13,marginTop:4}}>{s.l}</div>
                </div>
              ))}
            </div>
            <div style={{marginTop:32,display:'flex',gap:12}}>
              <a className="v-btn v-btn-primary" href="#contacto">Conoce al equipo</a>
              <a className="v-btn v-btn-ghost" href="#carreras">Trabaja con nosotros</a>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            {[
              { n: 'María Camila Ruiz', r: 'Cofundadora & CEO',   c: ['#6C47FF', '#00D2FF'] },
              { n: 'Diego Beltrán',     r: 'Cofundador & CTO',     c: ['#FF7A4D', '#FBBF24'] },
              { n: 'Laura Pérez',       r: 'Head of Customer',     c: ['#16A34A', '#84CC16'] },
              { n: 'Sebastián Gómez',   r: 'Head of Product',      c: ['#A855F7', '#EC4899'] },
            ].map((t, i) => (
              <div key={i} className="v-card" style={{
                padding:'28px 18px',textAlign:'center',borderRadius:20
              }}>
                <div style={{
                  width:64,height:64,borderRadius:999,margin:'0 auto',
                  background:`linear-gradient(135deg,${t.c[0]},${t.c[1]})`,
                  display:'grid',placeItems:'center',color:'#fff',fontSize:22,fontWeight:700,
                  border:'1px solid rgba(255,255,255,0.12)',
                  boxShadow:`0 10px 24px -8px ${t.c[0]}99`
                }}>{t.n.split(' ').map(s => s[0]).slice(0,2).join('')}</div>
                <div style={{marginTop:14,fontWeight:600,fontSize:14}}>{t.n}</div>
                <div style={{marginTop:4,fontSize:12,color:'var(--v-fg-4)'}}>{t.r}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Contacto
// =====================================================
function V2Contacto() {
  const [sent, setSent] = useStateB(false);
  const [sending, setSending] = useStateB(false);
  const [form, setForm] = useStateB({ nombre:'', email:'', telefono:'', negocio:'', tipo:'Restaurante / Café', tamano:'Estoy empezando', nota:'' });
  function upd(k, v) { setForm(prev => ({ ...prev, [k]: v })); }
  async function submit(e) {
    e.preventDefault();
    setSending(true);
    try {
      const res = await fetch('https://form-contacto.soporte-jospos.workers.dev/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('error');
      setSent(true);
    } catch {
      alert('Hubo un error al enviar. Por favor escríbenos a contacto@tikelu.com');
    } finally {
      setSending(false);
    }
  }

  return (
    <section id="contacto" className="v-section" data-screen-label="12 Contacto">
      <div className="v-wrap">
        <div className="v-contact-card">
          <div className="v-contact-lhs">
            <span className="v-eyebrow"><span className="dot"></span>Hablemos</span>
            <h2>Recibe una <span className="v-gradient-text">demo personalizada</span> hoy</h2>
            <p className="muted">Te llamamos en menos de 24 horas para mostrarte cómo TIKELU se adapta a tu negocio específico. Sin compromiso. Sin venderte nada que no necesites.</p>

            <div className="v-urgent-strip">
              <span className="ic">⚡</span>
              <div>
                <div className="t">Quedan 47 cupos con 50% OFF este mes.</div>
                <div className="s">El precio sube el 1° del mes siguiente. Tu negocio no puede esperar.</div>
              </div>
            </div>

            <div style={{display:'flex',flexDirection:'column',gap:14,marginTop:8}}>
              {[
                { ic: '✉️', t: 'Correo',    d: 'contacto@tikelu.com' },
                { ic: '📍', t: 'Oficinas',  d: 'Bogotá · Santiago · Caracas' },
              ].map((c, i) => (
                <div key={i} className="v-channel">
                  <span className="ic">{c.ic}</span>
                  <div>
                    <div className="t">{c.t}</div>
                    <div className="d">{c.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            {sent ? (
              <div style={{
                padding:32, borderRadius:20, textAlign:'center',
                background: 'linear-gradient(180deg, rgba(108,71,255,0.12), rgba(0,210,255,0.06))',
                border: '1px solid rgba(108,71,255,0.3)',
              }}>
                <div style={{fontSize:48}}>🎉</div>
                <h3 style={{marginTop:8,fontSize:24}}>¡Listo, {form.nombre || 'amigo'}!</h3>
                <p style={{marginTop:12,color:'var(--v-fg-3)',fontSize:15,lineHeight:1.55}}>
                  Recibimos tu solicitud. Te contactamos por WhatsApp en menos de <strong style={{color:'var(--v-fg)'}}>24 horas</strong> para agendar tu demo personalizada.
                </p>
                <p style={{marginTop:16,color:'var(--v-fg-4)',fontSize:13}}>Mientras tanto, revisa tu correo — te enviamos una guía rápida para que tu equipo se prepare.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="v-field">
                  <label>Tu nombre</label>
                  <input required value={form.nombre} onChange={e=>upd('nombre',e.target.value)} placeholder="Ej. María García"/>
                </div>
                <div className="v-field-row">
                  <div className="v-field">
                    <label>Correo</label>
                    <input required type="email" value={form.email} onChange={e=>upd('email',e.target.value)} placeholder="tu@correo.com"/>
                  </div>
                  <div className="v-field">
                    <label>WhatsApp</label>
                    <input required value={form.telefono} onChange={e=>upd('telefono',e.target.value)} placeholder="+1 555 1234"/>
                  </div>
                </div>
                <div className="v-field">
                  <label>Nombre de tu negocio</label>
                  <input required value={form.negocio} onChange={e=>upd('negocio',e.target.value)} placeholder="Ej. Mini Mercado La Esquina"/>
                </div>
                <div className="v-field-row">
                  <div className="v-field">
                    <label>Tipo de negocio</label>
                    <select value={form.tipo} onChange={e=>upd('tipo',e.target.value)}>
                      <option>Restaurante / Café</option>
                      <option>Minimarket / Tienda</option>
                      <option>Ferretería</option>
                      <option>Frutería</option>
                      <option>Panadería</option>
                      <option>Salón de belleza</option>
                      <option>Otro</option>
                    </select>
                  </div>
                  <div className="v-field">
                    <label>Tamaño</label>
                    <select value={form.tamano} onChange={e=>upd('tamano',e.target.value)}>
                      <option>Estoy empezando</option>
                      <option>Vendo todos los días</option>
                      <option>Tengo varios empleados</option>
                      <option>Es un negocio grande</option>
                    </select>
                  </div>
                </div>
                <div className="v-field">
                  <label>¿Algo que debamos saber? (opcional)</label>
                  <textarea rows="3" value={form.nota} onChange={e=>upd('nota',e.target.value)} placeholder="Ej. Vendo en 2 puntos físicos y por WhatsApp."></textarea>
                </div>
                <button type="submit" disabled={sending} className="v-btn v-btn-primary v-btn-lg" style={{width:'100%',marginTop:6}}>
                  {sending ? 'Enviando…' : 'Solicitar mi demo gratis →'}
                </button>
                <p style={{textAlign:'center',marginTop:12,fontSize:12,color:'var(--v-fg-5)'}}>
                  🔒 No compartimos tus datos. Te respondemos en menos de 24 horas.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Final CTA
// =====================================================
function V2FinalCTA() {
  const [t, setT] = useStateB({ d: 2, h: 14, m: 32, s: 18 });
  useEffectB(() => {
    const id = setInterval(() => {
      setT(prev => {
        let { d, h, m, s } = prev;
        s -= 1;
        if (s < 0) { s = 59; m -= 1; }
        if (m < 0) { m = 59; h -= 1; }
        if (h < 0) { h = 23; d -= 1; }
        if (d < 0) { d = 0; h = 0; m = 0; s = 0; }
        return { d, h, m, s };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="v-section" data-screen-label="13 Final CTA">
      <div className="v-wrap">
        <div className="v-final-cta">
          <div className="mesh-bg v-mesh"></div>
          <div className="grid-bg v-grid-bg"></div>
          <span className="v-urgency-pill warm" style={{marginBottom:14}}>
            <span className="pulse-dot"><span></span><span></span></span>
            <span>⏰ Oferta termina pronto</span>
          </span>
          <h2>Cada día que esperas,<br/><span className="v-gradient-text">le regalas dinero a tu competencia</span></h2>
          <p className="sub">+500 negocios ya están ahorrando horas y vendiendo más con TIKELU. Únete hoy con <strong style={{color:'#00D2FF', fontWeight:700}}>50% OFF los primeros 3 meses</strong>.</p>

          <div className="countdown">
            <div className="v-cd-block"><div className="n">{String(t.d).padStart(2,'0')}</div><div className="l">Días</div></div>
            <div className="v-cd-sep">:</div>
            <div className="v-cd-block"><div className="n">{String(t.h).padStart(2,'0')}</div><div className="l">Horas</div></div>
            <div className="v-cd-sep">:</div>
            <div className="v-cd-block"><div className="n">{String(t.m).padStart(2,'0')}</div><div className="l">Min</div></div>
            <div className="v-cd-sep">:</div>
            <div className="v-cd-block"><div className="n">{String(t.s).padStart(2,'0')}</div><div className="l">Seg</div></div>
          </div>

          <div style={{display:'flex',gap:12,justifyContent:'center',marginTop:36,flexWrap:'wrap'}}>
            <a className="v-btn v-btn-primary v-btn-lg" href="#contacto">Reclamar mi 50% OFF →</a>
            <a className="v-btn v-btn-ghost v-btn-lg" href="#demo">Agendar demo</a>
          </div>
          <p style={{marginTop:18,fontSize:13,color:'var(--v-fg-5)'}}>Sin tarjeta · Sin permanencia · Setup en 12 minutos</p>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// FAQ
// =====================================================
function V2FAQ() {
  const items = [
    { q: '¿Puedo probarlo sin pagar nada?', a: '¡Claro! Tienes 15 días gratis con todas las funciones desbloqueadas y sin pedirte tarjeta. Si te encanta, eliges tu plan; y si no es para ti, no pasa nada — no te cobramos.' },
    { q: '¿Cómo funciona el cobro del servicio?', a: 'Pagas una suscripción mensual fija según tu plan, Starter o Pro, y listo. No te cobramos comisión por tus ventas: lo que vendes es 100% tuyo. La forma en que te pagan tus clientes —efectivo, tarjeta o transferencia— la decides tú.' },
    { q: '¿Sirve para mi tipo de negocio?', a: 'Si vendes algo, casi seguro que sí. Tenemos modos pensados para restaurantes (con mesas y comandas), minimarkets, ferreterías (con productos ilimitados en el plan Pro), fruterías (venta por peso o kilo) y muchos negocios más.' },
    { q: '¿Qué hardware necesito?', a: 'Nada obligatorio. TIKELU funciona en cualquier tablet, computadora o celular que ya tengas (iOS, Android, Windows o Mac). Si quieres impresora de tickets, lector de barras o cajón de dinero, te recomendamos modelos económicos compatibles.' },
    { q: '¿Cuánto tarda en estar funcionando?', a: 'En promedio, 12 minutos. Subes tu catálogo desde Excel o por foto, creas tus usuarios, eliges tu modo y a vender. La app tiene una guía integrada que te lleva paso a paso.' },
    { q: '¿Mis datos están seguros?', a: 'Sí. La información de cada negocio se guarda con aislamiento total entre negocios y respaldo automático en la nube. Y si algún día decides irte, puedes exportar tus datos (disponible en el plan Pro).' },
    { q: '¿Puedo cancelar cuando quiera?', a: 'Sí, sin penalidades ni contratos de permanencia. Pagas mes a mes y, cuando quieras dar de baja, solo escríbenos y lo gestionamos de inmediato por ti.' },
  ];
  return (
    <section id="faq" className="v-section" data-screen-label="14 FAQ">
      <div className="v-wrap" style={{maxWidth:880}}>
        <div className="v-section-head">
          <span className="v-eyebrow"><span className="dot"></span>Preguntas frecuentes</span>
          <h2>Lo que la gente <span className="v-gradient-text">siempre nos pregunta</span></h2>
        </div>
        <div className="v-faq-list">
          {items.map((it, i) => (
            <details key={i} className="v-faq-item">
              <summary>{it.q}<span className="plus">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
              </span></summary>
              <div className="answer">{it.a}</div>
            </details>
          ))}
        </div>
        <p style={{textAlign:'center',marginTop:36,color:'var(--v-fg-4)',fontSize:14}}>
          ¿Otra pregunta? <a href="#contacto" style={{color:'var(--v-brand-light)',fontWeight:600}}>Escríbenos →</a>
        </p>
      </div>
    </section>
  );
}

// =====================================================
// Footer
// =====================================================
function V2Footer() {
  const cols = [
    { h: 'Producto', links: [['Funciones','index.html#features'],['Precios','index.html#precios'],['Comparar planes','comparar-planes.html'],['Novedades','novedades.html'],['Blog','blog.html']] },
    { h: 'Por industria', links: [['Restaurantes','para-restaurantes.html'],['Minimarkets','para-minimarkets.html'],['Ferreterías','para-ferreterias.html'],['Fruterías','para-fruterias.html'],['Panaderías','para-panaderias.html']] },
    { h: 'Por país', links: [['Colombia','colombia.html'],['Chile','chile.html'],['Venezuela','venezuela.html']] },
    { h: 'Empresa',  links: [['Nosotros','nosotros.html'],['Clientes','index.html#clientes'],['Contacto','contacto.html']] },
    { h: 'Recursos', links: [['Centro de ayuda','centro-de-ayuda.html'],['Preguntas frecuentes','faq.html']] },
    { h: 'Legal',    links: [['Privacidad','privacidad.html'],['Términos','terminos.html'],['Cookies','cookies.html'],['Tratamiento de datos','tratamiento-de-datos.html']] },
  ];
  return (
    <footer className="v-footer" data-screen-label="15 Footer">
      <div className="v-wrap">
        <div className="v-footer-grid">
          <div>
            <V2Logo/>
            <p className="v-footer-desc">El punto de venta moderno para negocios que quieren crecer. Hecho con cariño en Latinoamérica.</p>
            <form className="v-footer-news" onSubmit={e => e.preventDefault()}>
              <input type="email" placeholder="tu@correo.com" aria-label="Email"/>
              <button className="v-btn v-btn-primary v-btn-sm" type="submit">Suscribir</button>
            </form>
            <div className="v-socials">
              {[
                { n:'ig', svg:<><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/></> },
                { n:'fb', svg:<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/> },
                { n:'tw', svg:<path d="M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0016 3a4.5 4.5 0 00-4.5 4.5c0 .35.04.7.11 1.03A12.94 12.94 0 013 4s-4 9 5 13a13.94 13.94 0 01-8 2c9 5 20 0 20-11.5 0-.28-.03-.55-.08-.82A7.72 7.72 0 0023 3z"/> },
                { n:'yt', svg:<><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M10 9l5 3-5 3V9z" fill="currentColor"/></> },
                { n:'in', svg:<><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></> },
              ].map(s => {
                const urls = {
                  'ig': 'https://www.instagram.com/tikelu.app',
                  'fb': 'https://www.facebook.com/tikelu',
                  'tw': 'https://twitter.com/tikelu',
                  'yt': 'https://www.youtube.com/@tikelu',
                  'in': 'https://www.linkedin.com/company/tikelu'
                };
                return (
                <a key={s.n} href={urls[s.n]} target="_blank" rel="noopener noreferrer" aria-label={s.n}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{s.svg}</svg>
                </a>
                );
              })}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <h4>{c.h}</h4>
              <ul>{c.links.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="v-footer-legal">
          <span>© 2026 TIKELU Software S.A.S. — Todos los derechos reservados.</span>
          <span className="ok">Todos los sistemas operacionales</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { V2Testimonios, V2Caso, V2Precios, V2Nosotros, V2Contacto, V2FinalCTA, V2FAQ, V2Footer });