// sections-3.jsx — App preview, Testimonials, FAQ, CTA, Footer

// ─── App preview block ──────────────────────────────────────────────────
function AppPreview() {
  return (
    <Section bg={M.cream} py={120} id="app" screenLabel="06 App">
      <div style={{
        background: '#fff', borderRadius: 28, padding: 64,
        border: `1px solid ${M.rule}`, position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div style={{
          position: 'absolute', top: -120, right: -120, width: 380, height: 380,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${M.mint}55 0%, transparent 70%)`,
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative' }}>
          <Eyebrow>App Medicya</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 52, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 20px',
            textWrap: 'balance', color: M.ink,
          }}>Tu plan, tus marcadores,<br/>tu médico — en tu bolsillo.</h2>
          <p style={{
            fontFamily: POPPINS, fontSize: 17, color: M.ink2,
            lineHeight: 1.6, margin: '0 0 28px', maxWidth: 480,
          }}>
            Sigue tu protocolo día a día. Mensajea a tu médico. Conecta tu wearable.
            Recibe ajustes mensuales basados en tus datos reales.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px' }}>
            {[
              'Recordatorios y diario de protocolo',
              'Chat directo con tu médico (respuesta < 6 h)',
              'Marcadores conectados con Apple Health, Garmin y Whoop',
              'Reposiciones y envíos programados automáticamente',
            ].map((x, i) => (
              <li key={i} style={{
                display: 'flex', gap: 12, alignItems: 'center',
                padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${M.ruleSoft}`,
                fontFamily: POPPINS, fontSize: 15, color: M.ink,
              }}>
                {Icon.check(M.primary)} {x}
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn kind="dark" size="lg">Ver la app interactiva {Icon.arrow('#fff')}</Btn>
            <Btn kind="ghost" size="lg">Descargar (iOS · Android)</Btn>
          </div>
        </div>

        {/* phone */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{
            width: 300, height: 600, borderRadius: 42, padding: 8,
            background: '#0A0A0F',
            boxShadow: '0 50px 90px rgba(6,58,51,0.22), 0 0 0 1px rgba(0,0,0,0.4)',
            transform: 'rotate(-2deg)',
          }}>
            <div style={{
              width: '100%', height: '100%', borderRadius: 34,
              overflow: 'hidden', position: 'relative',
              background: `linear-gradient(180deg, ${M.forest} 0%, ${M.primary} 60%, #fff 60%, #fff 100%)`,
              padding: '50px 20px 20px',
            }}>
              <div style={{
                position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
                width: 96, height: 28, borderRadius: 16, background: '#000',
              }}/>
              <div style={{ color: '#fff', fontFamily: POPPINS }}>
                <div style={{ fontSize: 12, opacity: 0.8, marginBottom: 4 }}>Tu progreso</div>
                <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 4 }}>−6.4 kg</div>
                <div style={{ fontSize: 13, opacity: 0.85 }}>en 8 semanas · va arriba del promedio</div>
              </div>
              {/* chart card */}
              <div style={{
                marginTop: 60, background: '#fff', borderRadius: 16, padding: 18,
                fontFamily: POPPINS, color: M.ink,
                boxShadow: '0 20px 40px rgba(0,0,0,0.15)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                  <span style={{ fontSize: 12, color: M.ink3 }}>Peso · 8 sem</span>
                  <span style={{ fontSize: 11, color: M.primary, fontWeight: 600 }}>↓ 6.8%</span>
                </div>
                <svg width="100%" height="80" viewBox="0 0 240 80">
                  <defs>
                    <linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={M.primary} stopOpacity="0.3"/>
                      <stop offset="100%" stopColor={M.primary} stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <path d="M0 20 C 30 24, 50 30, 80 38 S 130 56, 160 60 S 210 70, 240 72 L 240 80 L 0 80 Z" fill="url(#ag)"/>
                  <path d="M0 20 C 30 24, 50 30, 80 38 S 130 56, 160 60 S 210 70, 240 72" stroke={M.primary} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                </svg>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 10, color: M.ink3 }}>
                  <span>Sem 1</span><span>Sem 4</span><span>Sem 8</span>
                </div>
              </div>
              {/* msg */}
              <div style={{
                marginTop: 14, background: M.creamSoft, borderRadius: 14, padding: 14,
                fontFamily: POPPINS,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 99, background: M.primary }}/>
                  <span style={{ fontSize: 11, fontWeight: 600, color: M.ink }}>Dra. Carolina</span>
                  <span style={{ fontSize: 10, color: M.ink3 }}>· hace 12 m</span>
                </div>
                <div style={{ fontSize: 12, color: M.ink2, lineHeight: 1.4 }}>
                  Excelente avance, Alejandro. Mantén la dosis y agrega 10 g de proteína al desayuno.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─── Testimonials ───────────────────────────────────────────────────────
function Testimonials() {
  const t = [
    { q: 'Bajé 14 kilos en 5 meses sin sentirme ansioso ni con hambre. Mi doctor me ajustó la dosis dos veces y los marcadores volvieron a la normalidad.', n: 'Andrés M.', a: '42 · Monterrey', tag: 'Optimización metabólica', img: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80' },
    { q: 'Lo que más me sorprendió fue la cercanía. Mi médico me responde en horas, no en semanas. Se siente como tener un equipo personal de salud.', n: 'Valentina R.', a: '38 · Bogotá', tag: 'Equilibrio hormonal', img: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80' },
    { q: 'Después de los 50 sentía que mi energía se iba apagando. Tres meses después, vuelvo al gimnasio y duermo como antes. Datos, no promesas.', n: 'Felipe S.', a: '54 · Santiago', tag: 'Longevidad & vitalidad', img: 'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=200&q=80' },
  ];
  return (
    <Section bg={M.cream} py={120} id="historias" screenLabel="07 Testimonios">
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <Eyebrow>Historias reales</Eyebrow>
        <h2 style={{
          fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 0',
          textWrap: 'balance',
        }}>Pacientes que recuperaron<br/>su mejor versión.</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {t.map((it, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 20, padding: 32,
            border: `1px solid ${M.rule}`,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 380,
          }}>
            <div>
              <div style={{ display: 'flex', gap: 2, marginBottom: 20 }}>
                {[0,1,2,3,4].map(s => <Icon.star key={s} c={M.primary}/>)}
              </div>
              <p style={{
                fontFamily: POPPINS, fontSize: 19, color: M.ink,
                lineHeight: 1.45, margin: 0, letterSpacing: '-0.01em',
                textWrap: 'pretty',
              }}>"{it.q}"</p>
            </div>
            <div style={{
              marginTop: 28, paddingTop: 20, borderTop: `1px solid ${M.rule}`,
              display: 'flex', gap: 14, alignItems: 'center',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 99,
                backgroundImage: `url(${it.img})`,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }}></div>
              <div>
                <div style={{ fontFamily: POPPINS, fontSize: 14, fontWeight: 600, color: M.ink }}>{it.n}</div>
                <div style={{ fontFamily: POPPINS, fontSize: 12, color: M.ink3 }}>{it.a} · {it.tag}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: '¿Quién puede usar Medicya?', a: 'Cualquier adulto mayor de 21 años residente en países donde operamos (México, Colombia, Argentina, Chile, Perú, España y EE.UU.). Cada protocolo tiene criterios médicos específicos y la evaluación inicial determina si calificas.' },
    { q: '¿Necesito una receta para iniciar?', a: 'No. Si calificas tras la evaluación clínica, uno de nuestros médicos certificados emite la receta digital y coordina el envío de tu medicación a tu domicilio.' },
    { q: '¿Qué pasa si tengo efectos secundarios?', a: 'Tu médico está disponible 24/7 vía chat. La gran mayoría de efectos son leves y se ajustan modificando la dosis. Si aparece algo serio, escalamos a una llamada inmediata y, si hace falta, a un especialista presencial.' },
    { q: '¿Cómo se calcula el precio?', a: 'El precio mensual incluye la consulta, el seguimiento, los análisis incluidos en cada protocolo, la medicación y el envío. No cobramos por separado consultas ni recetas mientras estés activo.' },
    { q: '¿Cómo cuidan mis datos?', a: 'Cifrado de extremo a extremo, servidores con cumplimiento HIPAA y la Ley Federal de Protección de Datos Personales. Nunca compartimos tu información con farmacéuticas, aseguradoras ni anunciantes.' },
    { q: '¿Puedo cancelar cuando quiera?', a: 'Sí. Sin permanencia mínima ni penalizaciones. Si pausas, tu historial y tu plan quedan guardados para cuando quieras retomar.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section bg={M.creamSoft} py={120} id="faq" screenLabel="08 FAQ">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 24px',
          }}>Lo que necesitas saber.</h2>
          <p style={{ fontFamily: POPPINS, fontSize: 16, color: M.ink2, lineHeight: 1.6, margin: '0 0 24px' }}>
            ¿No encuentras lo que buscas? Escríbenos y un médico te responde en menos de 6 horas.
          </p>
          <Btn kind="dark" size="md">Hablar con un médico</Btn>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: `1px solid ${M.rule}`,
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: '24px 0', background: 'transparent', border: 'none',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: POPPINS, fontSize: 20, fontWeight: 500, color: M.ink,
                  letterSpacing: '-0.02em', cursor: 'pointer', textAlign: 'left',
                }}>
                  {it.q}
                  <span style={{
                    flexShrink: 0, marginLeft: 16, width: 36, height: 36, borderRadius: 99,
                    background: isOpen ? M.primary : 'transparent',
                    border: isOpen ? 'none' : `1px solid ${M.rule}`,
                    color: isOpen ? '#fff' : M.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all .2s ease',
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                  }}>{Icon.chevron(isOpen ? '#fff' : M.ink)}</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 200 : 0, overflow: 'hidden',
                  transition: 'max-height .35s ease, padding .35s ease',
                  paddingBottom: isOpen ? 24 : 0,
                }}>
                  <p style={{
                    fontFamily: POPPINS, fontSize: 16, color: M.ink2,
                    lineHeight: 1.6, margin: 0, maxWidth: 640,
                  }}>{it.a}</p>
                </div>
              </div>
            );
          })}
          <div style={{ borderTop: `1px solid ${M.rule}` }}/>
        </div>
      </div>
    </Section>
  );
}

// ─── Final CTA ──────────────────────────────────────────────────────────
function FinalCTA({ onStart }) {
  return (
    <Section bg={M.forest} color="#fff" py={120} id="empezar" screenLabel="09 CTA">
      <div style={{
        textAlign: 'center', maxWidth: 760, margin: '0 auto', position: 'relative',
      }}>
        <Eyebrow dark>Empieza hoy</Eyebrow>
        <h2 style={{
          fontFamily: POPPINS, fontSize: 'clamp(48px, 6vw, 84px)', fontWeight: 600,
          letterSpacing: '-0.035em', lineHeight: 1.02, margin: '20px 0 24px',
          textWrap: 'balance',
        }}>Tu salud.<br/>
          <span style={{
            background: `linear-gradient(90deg, ${M.mint}, ${M.primaryHi})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Optimizada. Hoy.</span>
        </h2>
        <p style={{
          fontFamily: POPPINS, fontSize: 19, color: 'rgba(255,255,255,0.75)',
          lineHeight: 1.55, margin: '0 0 36px',
        }}>
          Tres minutos. Una decisión que tu yo de los próximos 30 años te va a agradecer.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn kind="primary" size="lg" onClick={onStart}>Inicia tu evaluación · Gratis</Btn>
          <Btn kind="onDark" size="lg">Habla con un médico</Btn>
        </div>
        <div style={{
          marginTop: 28, fontFamily: POPPINS, fontSize: 13,
          color: 'rgba(255,255,255,0.55)',
        }}>Sin compromisos · Cancelas cuando quieras · Pago seguro</div>
      </div>
    </Section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { h: 'Tratamientos', l: ['Optimización metabólica', 'Longevidad & vitalidad', 'Equilibrio hormonal', 'Sueño & estrés', 'Ver todos'] },
    { h: 'Empresa',      l: ['Sobre Medicya', 'Equipo médico', 'Ciencia', 'Carreras', 'Prensa'] },
    { h: 'Recursos',     l: ['Blog', 'Guías clínicas', 'Centro de ayuda', 'Para médicos', 'Contacto'] },
    { h: 'Legal',        l: ['Aviso de privacidad', 'Términos del servicio', 'Consentimiento médico', 'Política de envíos', 'Cumplimiento'] },
  ];
  return (
    <footer style={{ background: M.forestDeep, color: 'rgba(255,255,255,0.7)', padding: '80px 0 40px' }} data-screen-label="10 Footer">
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 56 }}>
          <div>
            <Wordmark size={22} color="#fff"/>
            <p style={{ fontFamily: POPPINS, fontSize: 14, lineHeight: 1.6, margin: '20px 0 24px', maxWidth: 280 }}>
              Medicina personalizada impulsada por IA y médicos certificados.
              Hecho en LATAM, para LATAM.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              {['IG', 'X', 'YT', 'IN'].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 99,
                  background: 'rgba(255,255,255,0.08)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontFamily: POPPINS, fontSize: 11, fontWeight: 600,
                  textDecoration: 'none', letterSpacing: '0.02em',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div style={{
                fontFamily: POPPINS, fontSize: 12, fontWeight: 600,
                color: '#fff', letterSpacing: '0.06em', textTransform: 'uppercase',
                marginBottom: 16,
              }}>{c.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.l.map(li => (
                  <li key={li}>
                    <a href="#" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 14 }}>{li}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* regulatory */}
        <div style={{
          paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.12)',
          fontFamily: POPPINS, fontSize: 12, lineHeight: 1.6,
          color: 'rgba(255,255,255,0.5)', maxWidth: 1100,
        }}>
          <p style={{ margin: '0 0 12px' }}>
            <strong style={{ color: 'rgba(255,255,255,0.75)', fontWeight: 600 }}>Información médica importante.</strong>{' '}
            Medicya no sustituye una emergencia médica. Si presentas síntomas graves, llama a los servicios de emergencia
            de tu país. Los protocolos requieren evaluación clínica y solo se prescriben cuando un médico considera que
            son apropiados para tu caso.
          </p>
          <p style={{ margin: '0 0 12px' }}>
            Servicios médicos prestados por Medicya Salud S.A.P.I. de C.V. (México), Medicya Salud S.A.S. (Colombia)
            y entidades afiliadas. Registros sanitarios COFEPRIS · INVIMA · ANMAT · ISP · DIGEMID · AEMPS.
            Las medicaciones controladas se dispensan únicamente con receta vigente emitida por médico tratante.
          </p>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            marginTop: 28, flexWrap: 'wrap', gap: 16,
          }}>
            <span>© 2026 Medicya. Todos los derechos reservados.</span>
            <span style={{ display: 'flex', gap: 24 }}>
              <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Aviso de privacidad</a>
              <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Términos</a>
              <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Cookies</a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AppPreview, Testimonials, FAQ, FinalCTA, Footer });