// App walkthrough — tabbed interactive showcase
function AppWalkthrough() {
  const tabs = [
    {
      id: 'prospector', label: 'Prospector', short: 'Buscar leads',
      title: 'Buscas. Te lo escupe todo.',
      desc: 'Buscas "fontanero Madrid" y te escupe 40+ leads con email, web y puntuación SEO en menos de 30 segundos.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Fprospector.jpg&w=1920&q=75',
      icon: <IconSearch size={16} />,
      stats: [
        { l: 'Leads por búsqueda', v: '40+' },
        { l: 'Con email activo', v: '70%' },
        { l: 'Tiempo', v: '30s' },
      ],
    },
    {
      id: 'analisis', label: 'Análisis SEO', short: 'Auditar',
      title: 'Auditoría técnica al instante.',
      desc: 'Para cada lead: velocidad, mobile, meta tags, Core Web Vitals y un scoring claro. Sabes a quién atacar primero.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Fanalisis.jpg&w=1920&q=75',
      icon: <IconTarget size={16} />,
      stats: [
        { l: 'Métricas analizadas', v: '24' },
        { l: 'Core Web Vitals', v: 'Sí' },
        { l: 'Mobile audit', v: 'Sí' },
      ],
    },
    {
      id: 'web', label: 'Web generada', short: 'Generar web',
      title: 'Una web nueva, hecha a su medida.',
      desc: 'Les creamos una web nueva con su nombre, logo, dirección, fotos y datos reales. Es el "caramelo en la cara" que cierra la venta.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Fweb_generada.jpg&w=1920&q=75',
      icon: <IconWand size={16} />,
      stats: [
        { l: 'Tiempo / web', v: '30s' },
        { l: 'Plantillas', v: '0' },
        { l: 'Personalización', v: '100%' },
      ],
    },
    {
      id: 'email', label: 'Email de venta', short: 'Email + WhatsApp',
      title: 'Emails que abren. Y se contestan.',
      desc: 'Email redactado con GPT, adaptado al negocio, con link a la web y a tu calendario. WhatsApp y script de llamada incluidos.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Femail_venta.jpg&w=1920&q=75',
      icon: <IconMail size={16} />,
      stats: [
        { l: 'Open rate medio', v: '~35%' },
        { l: 'Reply rate', v: '~4%' },
        { l: 'Canales', v: '3' },
      ],
    },
    {
      id: 'embudo', label: 'Pipeline', short: 'Pipeline',
      title: 'Pipeline visual completo.',
      desc: 'Reservado → Contactado → Interesado → Vendido. Sin Notion, sin Excel. Todo dentro.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Fcitas_embudo.jpg&w=1920&q=75',
      icon: <IconCalendar size={16} />,
      stats: [
        { l: 'Estados', v: '4' },
        { l: 'Drag & drop', v: 'Sí' },
        { l: 'Notas / lead', v: 'Sí' },
      ],
    },
    {
      id: 'historial', label: 'Historial', short: 'Historial',
      title: 'Nada se pierde, todo se reutiliza.',
      desc: 'Cada prospección guardada. Nunca vuelves a buscar lo mismo dos veces. Filtras por categoría, ciudad o estado.',
      img: 'https://pillaleads.localbrain.app/_next/image?url=%2Fimg%2Fapp%2Fv3%2Fhistorial.jpg&w=1920&q=75',
      icon: <IconRefresh size={16} />,
      stats: [
        { l: 'Almacenamiento', v: '∞' },
        { l: 'Filtros', v: '8' },
        { l: 'Exportar CSV', v: 'Sí' },
      ],
    },
  ];

  const [active, setActive] = React.useState('prospector');
  const cur = tabs.find(t => t.id === active);

  return (
    <section style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">La app</span>
          <h2 className="pl-display">Todo lo que necesitas, <br /><span className="pl-accent-grad">sin abrir otra pestaña</span></h2>
          <p>Prospección, auditoría, generación web, email y seguimiento — todo en la misma caja.</p>
        </div>

        {/* Tab strip */}
        <div className="pl-noscrollbar" style={{
          display: 'flex', gap: 6, overflowX: 'auto',
          padding: 6,
          background: '#fff',
          border: '1px solid var(--pl-border)',
          borderRadius: 18,
          boxShadow: 'var(--pl-shadow-sm)',
          marginBottom: 26,
          maxWidth: 920, margin: '0 auto 26px',
        }}>
          {tabs.map(t => {
            const on = t.id === active;
            return (
              <button key={t.id} onClick={() => setActive(t.id)} style={{
                appearance: 'none', border: 'none', cursor: 'pointer',
                flex: 1, minWidth: 0,
                padding: '12px 14px',
                borderRadius: 12,
                background: on ? 'var(--pl-ink)' : 'transparent',
                color: on ? '#fff' : 'var(--pl-ink-3)',
                fontWeight: 700, fontSize: 13.5,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                transition: 'background .15s',
                whiteSpace: 'nowrap',
              }}>
                <span style={{ color: on ? '#a78bfa' : 'currentColor' }}>{t.icon}</span>
                {t.short}
              </button>
            );
          })}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 32,
          alignItems: 'center',
        }}>
          <div>
            <h3 className="pl-display" style={{ fontSize: 36, margin: '0 0 14px' }}>{cur.title}</h3>
            <p style={{ fontSize: 16.5, color: 'var(--pl-ink-3)', lineHeight: 1.55, margin: '0 0 24px' }}>{cur.desc}</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {cur.stats.map((s, i) => (
                <div key={i} style={{
                  background: '#fff', border: '1px solid var(--pl-border)',
                  borderRadius: 14, padding: '14px 16px',
                }}>
                  <div style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 22, color: 'var(--pl-accent-deep)', letterSpacing: '-.02em' }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: 'var(--pl-ink-3)' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{
            position: 'relative',
            borderRadius: 18,
            overflow: 'hidden',
            border: '1px solid var(--pl-border)',
            boxShadow: 'var(--pl-shadow-lg)',
            background: '#fff',
          }}>
            <img key={cur.id} src={cur.img} alt={cur.label}
                 style={{ display: 'block', width: '100%', height: 'auto', animation: 'pl-fade-in .35s' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

window.AppWalkthrough = AppWalkthrough;