// AI section — IA que ayuda a KPIs + Telegram bot + WhatsApp guía + Bienestar animal

const AISection = () => {
  return (
    <section id="ia" style={{
      padding:'140px 0', background:'var(--ink)', color:'#FAFAF7',
      position:'relative', overflow:'hidden'
    }}>
      <div aria-hidden style={{
        position:'absolute', inset:0,
        backgroundImage:'radial-gradient(circle at 80% 20%, rgba(232,168,124,0.18), transparent 50%), radial-gradient(circle at 10% 80%, rgba(45,106,79,0.25), transparent 50%)',
      }}/>
      <div className="container" style={{ position:'relative' }}>
        <SectionTag num="04" label="Inteligencia + Comunicación" style={{ marginBottom:28, color:'rgba(250,250,247,0.6)' }}/>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:60, marginBottom:64 }} className="ai-head">
          <h2 className="serif" style={{
            fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.02,
            letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance'
          }}>
            IA que <span style={{ fontStyle:'italic', color:'var(--accent)' }}>cuida tu negocio</span><br/>
            y guía a cada tutor.
          </h2>
          <p style={{ fontSize:17, color:'rgba(250,250,247,0.75)', lineHeight:1.55, margin:0, maxWidth:480, alignSelf:'end' }}>
            Gemini analiza tus KPIs en tiempo real, te avisa por Telegram cuando algo necesita atención,
            y conversa por WhatsApp con cada tutor para que su mascota llegue a la consulta en las mejores condiciones.
          </p>
        </div>

        {/* Top row: 2 large feature cards */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom: 14 }} className="ai-row">
          {/* KPI Insights */}
          <div style={{
            background:'rgba(250,250,247,0.04)', border:'1px solid rgba(250,250,247,0.12)',
            borderRadius:14, padding:'28px 28px 0', overflow:'hidden', minHeight: 460,
            display:'flex', flexDirection:'column'
          }}>
            <Pill tone="default" style={{ marginBottom:14, color:'var(--accent)', borderColor:'rgba(232,168,124,0.3)', background:'rgba(232,168,124,0.08)' }}>IA · Insights de gestión</Pill>
            <h3 className="serif" style={{ fontSize:28, fontWeight:500, letterSpacing:'-0.015em', lineHeight:1.1, margin:'0 0 10px' }}>
              KPIs vivos. La IA detecta lo que tú no ves.
            </h3>
            <p style={{ fontSize:14, color:'rgba(250,250,247,0.72)', lineHeight:1.55, margin:'0 0 22px', maxWidth:440 }}>
              Gemini lee tu agenda, ventas y retención cada noche. Detecta caídas en adquisición, clientes en riesgo de fuga y oportunidades de upsell — y te las explica con narrativa, no con dashboards muertos.
            </p>
            <div style={{ marginTop:'auto', marginLeft:-2, marginRight:-2 }}>
              <KPIDemo/>
            </div>
          </div>

          {/* Telegram Bot */}
          <div style={{
            background:'rgba(250,250,247,0.04)', border:'1px solid rgba(250,250,247,0.12)',
            borderRadius:14, padding:'28px 28px 0', overflow:'hidden', minHeight: 460,
            display:'flex', flexDirection:'column'
          }}>
            <Pill tone="default" style={{ marginBottom:14, color:'#54A9EB', borderColor:'rgba(84,169,235,0.3)', background:'rgba(84,169,235,0.08)' }}>Telegram · @DrVetBot</Pill>
            <h3 className="serif" style={{ fontSize:28, fontWeight:500, letterSpacing:'-0.015em', lineHeight:1.1, margin:'0 0 10px' }}>
              El pulso de tu clínica, en tu bolsillo.
            </h3>
            <p style={{ fontSize:14, color:'rgba(250,250,247,0.72)', lineHeight:1.55, margin:'0 0 22px', maxWidth:440 }}>
              El bot de Telegram avisa al dueño y a los médicos lo que pasa: una emergencia que llegó, el cierre del día, alertas de stock, KPIs semanales. Sin abrir la plataforma.
            </p>
            <div style={{ marginTop:'auto', marginLeft:-2, marginRight:-2 }}>
              <TelegramDemo/>
            </div>
          </div>
        </div>

        {/* Big WhatsApp tutor guidance card */}
        <div style={{
          background:'rgba(250,250,247,0.04)', border:'1px solid rgba(250,250,247,0.12)',
          borderRadius:14, padding:'28px', display:'grid',
          gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'center', marginBottom: 14
        }} className="wa-row">
          <div>
            <Pill tone="default" style={{ marginBottom:14, color:'#9DD089', borderColor:'rgba(79,121,66,0.4)', background:'rgba(79,121,66,0.12)' }}>WhatsApp · Bienestar previo a la visita</Pill>
            <h3 className="serif" style={{ fontSize:32, fontWeight:500, letterSpacing:'-0.015em', lineHeight:1.1, margin:'0 0 12px', textWrap:'balance' }}>
              Que tu paciente llegue tranquilo, en ayuno y listo para una buena consulta.
            </h3>
            <p style={{ fontSize:15, color:'rgba(250,250,247,0.75)', lineHeight:1.55, margin:'0 0 20px' }}>
              DrVet.app conversa con el tutor por WhatsApp antes de cada cita. Le explica qué traer,
              cómo preparar al perro o gato, qué hacer si vomita, cómo medir signos en casa.
              Cuando el paciente cruza la puerta, está en mejores condiciones — y eso mejora cada diagnóstico.
            </p>
            <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8 }}>
              {[
                'Ayuno previo a cirugías y exámenes con seguimiento de horas',
                'Guía calmante para gatos: transportadora, feromonas, ruta',
                'Recordatorios de medicación 30 min antes de salir',
                'Triaje en casa: cuándo es urgencia, cuándo puede esperar',
              ].map((b,i) => (
                <li key={i} style={{ display:'flex', gap:10, fontSize:13, color:'rgba(250,250,247,0.85)', lineHeight:1.5 }}>
                  <span style={{ color:'#9DD089', flexShrink:0, marginTop:2 }}>{Ico.check()}</span>{b}
                </li>
              ))}
            </ul>
          </div>
          <WhatsappTutorDemo/>
        </div>

        {/* Bienestar animal banner — with real pet faces */}
        <div style={{
          background:'linear-gradient(135deg, rgba(232,168,124,0.12), rgba(184,92,44,0.08))',
          border:'1px solid rgba(232,168,124,0.3)',
          borderRadius:18, padding:'32px 36px',
          display:'grid', gridTemplateColumns:'auto 1fr auto', gap:32, alignItems:'center',
          marginBottom: 32
        }} className="welfare-row">
          <div style={{ color:'var(--accent)' }}>
            <PetArt.paw style={{ width:64, height:64 }}/>
          </div>
          <div>
            <div className="mono" style={{ fontSize:10, color:'var(--accent)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:8 }}>Plataforma con bienestar animal</div>
            <h3 className="serif" style={{ margin:0, fontSize:26, fontWeight:500, letterSpacing:'-0.01em', textWrap:'balance', lineHeight:1.2 }}>
              Cada decisión de DrVet.app — desde el triaje IA hasta los mensajes WhatsApp — está pensada para reducir el estrés del paciente y proteger su bienestar.
            </h3>
          </div>
          {/* Real photo faces, stacked */}
          <div style={{ display:'flex', alignItems:'center' }}>
            {[PHOTOS.goldenSmile, PHOTOS.catKitten, PHOTOS.rabbit2, PHOTOS.parrot, PHOTOS.hamster].map((kind,i) => (
              <div key={i} style={{ marginLeft: i>0 ? -16 : 0 }}>
                <PetAvatar kind={kind} size={54} border={3} borderColor="var(--ink)"/>
              </div>
            ))}
          </div>
        </div>

        {/* Smaller IA features */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, borderTop:'1px solid rgba(250,250,247,0.15)' }} className="ai-grid">
          {[
            { n:'05', t:'AI Scribe SOAP', d:'Tu dictado libre se convierte en historia estructurada con procedures sugeridos.' },
            { n:'06', t:'Triaje en booking', d:'Antes de reservar online, detecta señales de emergencia y obliga a llamar.' },
            { n:'07', t:'OCR Gemini Vision', d:'Foto a una etiqueta o factura → ERP rellena los campos solo.' },
            { n:'08', t:'AI Vision médica', d:'Análisis de rayos X, dermatología y citología (add-on PRO / incluido ENTERPRISE).' },
          ].map((f, i) => (
            <div key={i} style={{
              padding:'24px 22px', borderRight: i<3 ? '1px solid rgba(250,250,247,0.15)' : 'none',
            }}>
              <span className="mono" style={{ fontSize:11, color:'var(--accent)' }}>{f.n}</span>
              <h4 className="serif" style={{ fontSize:18, fontWeight:500, letterSpacing:'-0.005em', margin:'10px 0 8px', lineHeight:1.2 }}>{f.t}</h4>
              <p style={{ fontSize:12.5, color:'rgba(250,250,247,0.65)', lineHeight:1.55, margin:0 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .ai-head, .ai-row, .wa-row { grid-template-columns: 1fr !important; }
          .ai-grid { grid-template-columns: 1fr 1fr !important; }
          .ai-grid > div:nth-child(2){ border-right: none !important; }
          .welfare-row { grid-template-columns: auto 1fr !important; }
          .welfare-row > div:last-child { display: none !important; }
        }
        @media (max-width: 600px){
          .ai-grid { grid-template-columns: 1fr !important; }
          .ai-grid > div { border-right: none !important; }
        }
      `}</style>
    </section>
  );
};

const KPIDemo = () => {
  const items = [
    { k:'Adquisición', v:'−18%', d:'Últimos 14d vs anteriores', tone:'warn', insight:'La IA detectó que el booking público bajó tras pausar Meta Ads.' },
    { k:'Retención',   v:'+12%', d:'Cohorte de marzo', tone:'ok', insight:'Re-engagement nocturno está funcionando — felinos vuelven 2× más.' },
    { k:'Riesgo fuga', v:'47',   d:'tutores sin visita >180d', tone:'warn', insight:'Sugerencia: campaña vacunación canina · estimado +$1.460.' },
  ];
  return (
    <div style={{
      background:'rgba(0,0,0,0.25)', borderTop:'1px solid rgba(250,250,247,0.1)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'18px 18px 0'
    }}>
      <div className="mono" style={{ fontSize:9.5, color:'rgba(250,250,247,0.5)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:12 }}>
        Reporte semanal · generado por IA · 6 abr
      </div>
      {items.map((it,i) => (
        <div key={i} style={{
          padding:'10px 0', borderBottom: i<2 ? '1px solid rgba(250,250,247,0.08)' : 'none',
          display:'grid', gridTemplateColumns:'90px 60px 1fr', gap:10, alignItems:'center'
        }}>
          <span style={{ fontSize:11, color:'rgba(250,250,247,0.7)' }}>{it.k}</span>
          <span className="serif" style={{
            fontSize:22, fontWeight:400, letterSpacing:'-0.01em',
            color: it.tone === 'ok' ? '#9DD089' : '#F5C7B5'
          }}>{it.v}</span>
          <span style={{ fontSize:11, color:'rgba(250,250,247,0.55)', lineHeight:1.4 }}>{it.insight}</span>
        </div>
      ))}
    </div>
  );
};

const TelegramDemo = () => {
  const msgs = [
    { from:'DrVetBot', t:'🚨 Emergencia ingresada · Toby (canino) · ATV. Dr. Rivera asignado.', time:'09:14' },
    { from:'DrVetBot', t:'📊 Cierre del día · 24 consultas · $1.840 · 3 ventas pendientes de cobro.', time:'19:32' },
    { from:'DrVetBot', t:'⚠️ Stock bajo · Maropitant 10mg · quedan 6u. ¿Genero orden a Distrivet?', time:'20:01', actions:true },
  ];
  return (
    <div style={{
      background:'#17212B', margin:'0 -28px', borderRadius:'8px 8px 0 0',
      padding:'14px 16px 0', borderTop:'1px solid rgba(250,250,247,0.1)'
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, paddingBottom:12, borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ width:32, height:32, borderRadius:99, background:'#54A9EB', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71l-4.13-3.05-1.99 1.93c-.23.23-.42.42-.85.42z"/></svg>
        </div>
        <div>
          <div style={{ fontSize:13, fontWeight:600, color:'#fff' }}>@DrVetBot</div>
          <div style={{ fontSize:10, color:'rgba(255,255,255,0.5)' }}>Notificaciones · Clínica VetSur</div>
        </div>
      </div>
      <div style={{ padding:'12px 0' }}>
        {msgs.map((m,i) => (
          <div key={i} style={{ marginBottom:8 }}>
            <div style={{
              background:'#182533', borderRadius:8, padding:'8px 10px',
              fontSize:12, color:'rgba(255,255,255,0.85)', lineHeight:1.4,
              borderLeft:'3px solid #54A9EB'
            }}>
              {m.t}
            </div>
            {m.actions && (
              <div style={{ display:'flex', gap:6, marginTop:6 }}>
                <button style={{ flex:1, padding:'6px', fontSize:10, background:'#54A9EB', color:'#fff', border:'none', borderRadius:6, fontWeight:500 }}>Sí, generar</button>
                <button style={{ flex:1, padding:'6px', fontSize:10, background:'transparent', color:'rgba(255,255,255,0.7)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:6 }}>Más tarde</button>
              </div>
            )}
            <div style={{ fontSize:9, color:'rgba(255,255,255,0.35)', marginTop:4, fontFamily:"'JetBrains Mono', monospace" }}>{m.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const WhatsappTutorDemo = () => (
  <div style={{
    background:'#075E54', borderRadius:14, padding:14
  }}>
    <div style={{
      background:'#ECE5DD', borderRadius:8, padding:'14px 14px',
      backgroundImage:'repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 13px)',
    }}>
      {[
        { side:'r', t:'Hola Carolina 🐾 Mañana a las 10:30 traes a Firulais para su cirugía dental. Hay 2 cositas importantes:', time:'18:00' },
        { side:'r', t:'1️⃣ Ayuno desde las 22:00 esta noche (agua sí). 2️⃣ Su transportadora ya con la manta que usa siempre.', time:'18:00' },
        { side:'l', t:'Ok, la manta. ¿Y si tiene mucha sed?', time:'18:14' },
        { side:'r', t:'Sí puede tomar agua hasta las 6 am. Después solo cubitos de hielo si lo pide. Te dejo este audio para que veas cómo lo subimos al auto sin estrés 🎧', time:'18:15', meta:'IA · Bienestar' },
        { side:'r', t:'Llegando, escríbeme aquí mismo y bajo a recibirlos al estacionamiento. Así no pasamos por la sala de espera 🐶', time:'18:16' },
      ].map((m,i) => (
        <div key={i} style={{
          display:'flex', justifyContent: m.side==='r' ? 'flex-end' : 'flex-start', marginBottom:5
        }}>
          <div style={{
            background: m.side==='r' ? '#DCF8C6' : '#fff',
            borderRadius:8, padding:'7px 10px', maxWidth:'82%',
            fontSize:12, lineHeight:1.4, color:'#0E1A14'
          }}>
            <div>{m.t}</div>
            <div style={{ fontSize:9, color:'#7B8B86', marginTop:3, textAlign:'right', display:'flex', justifyContent:'flex-end', alignItems:'center', gap:4 }}>
              {m.meta && <span style={{ background:'rgba(0,0,0,0.05)', padding:'1px 5px', borderRadius:3, fontFamily:"'JetBrains Mono', monospace", fontSize:8 }}>{m.meta}</span>}
              {m.time}
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

window.AISection = AISection;