// Lifecycle — the bridge from "una visita" to "para siempre"
// 4 stages of how DrVet.app turns a one-time visit into a lifetime relationship.

const Lifecycle = () => {
  const stages = [
    {
      num:'01', tag:'Antes',
      title:'La cita nace fácil',
      body:'Reserva online en /booking/tu-clinica con triaje IA que detecta emergencias. Multi-recurso: vet + sala + equipo, sin conflictos.',
      bullets:['Triaje IA bloquea reservas que parecen emergencia','Reserva pública sin login','.ics para Google/Apple Calendar']
    },
    {
      num:'02', tag:'Durante',
      title:'La visita queda registrada sin esfuerzo',
      body:'AI Scribe SOAP convierte tu dictado en historia clínica completa. Procedures registrados generan venta automática en caja.',
      bullets:['Dictado libre → SOAP estructurado','Charge capture automático','Lectura HL7 de laboratorio externo']
    },
    {
      num:'03', tag:'Después',
      title:'El cliente no se olvida',
      body:'Recordatorios T-24h y T-2h se programan al crear la cita. Tutoriales pre-visita, recetas y re-engagement por WhatsApp.',
      bullets:['Recordatorios con backoff exponencial','Tutoriales pre-visita personalizados','Receta digital firmada']
    },
    {
      num:'04', tag:'Para siempre',
      title:'Vuelve, sin que lo persigas',
      body:'Re-engagement automático nocturno contacta a tutores que no regresan. Cada paciente tiene su propia línea de vida.',
      bullets:['Cron nocturno de re-engagement','Cohorts y retención medibles','Portal del tutor con historial completo']
    },
  ];

  return (
    <section id="flujo" style={{ padding:'140px 0', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="02" label="El método DrVet.app" style={{ marginBottom:28 }}/>
        <div style={{
          display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',
          gap:60, alignItems:'end', marginBottom: 80
        }} className="lc-head">
          <h2 className="serif" style={{
            fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.0,
            letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance'
          }}>
            De una <span style={{ fontStyle:'italic' }}>visita única</span>{' '}
            a una <span style={{ color:'var(--primary)' }}>relación de años</span>.
          </h2>
          <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, margin:0, maxWidth:460 }}>
            DrVet.app acompaña cada cliente en cuatro momentos críticos.
            En cada uno, automatizamos lo que tu equipo solía olvidar — para que la relación nunca se rompa.
          </p>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0 }} className="lc-grid">
          {stages.map((s, i) => (
            <div key={i} style={{
              padding:'28px 24px', borderTop:'1px solid var(--ink)',
              borderRight: i < stages.length - 1 ? '1px solid var(--line)' : 'none',
              position:'relative'
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:24 }}>
                <span className="mono" style={{ fontSize:11, color:'var(--accent)' }}>{s.num}</span>
                <span className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em' }}>{s.tag}</span>
              </div>
              <h3 className="serif" style={{
                fontSize:24, lineHeight:1.15, letterSpacing:'-0.01em',
                fontWeight:500, margin:'0 0 14px', textWrap:'balance'
              }}>{s.title}</h3>
              <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 18px' }}>{s.body}</p>
              <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:8 }}>
                {s.bullets.map((b, j) => (
                  <li key={j} style={{ display:'flex', gap:8, fontSize:12.5, color:'var(--ink-2)' }}>
                    <span style={{ color:'var(--ok)', flexShrink:0, marginTop:2 }}>{Ico.check()}</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .lc-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .lc-grid { grid-template-columns: 1fr 1fr !important; }
          .lc-grid > div:nth-child(2) { border-right: none !important; }
        }
        @media (max-width: 600px){
          .lc-grid { grid-template-columns: 1fr !important; }
          .lc-grid > div { border-right: none !important; }
        }
      `}</style>
    </section>
  );
};

window.Lifecycle = Lifecycle;