/* Diagnóstico Energético — lead capture page */

const DiagHero = () => (
  <section className="amp-px" style={{ padding: '80px 48px 64px', background: '#F8F7F3', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -260, right: -260, width: 600, height: 600,
      border: '1px solid rgba(196,168,79,0.18)', borderRadius: '50%' }}/>
    <div style={{ position: 'absolute', top: 80, right: -120, width: 360, height: 360,
      border: '1px solid rgba(27,92,44,0.10)', borderRadius: '50%' }}/>
    <div className="amp-g2" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid',
      gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
      <div>
        <div style={{ fontSize: 12, color: '#1B5C2C', fontWeight: 600, marginBottom: 24,
          display: 'flex', alignItems: 'center', gap: 8 }}>
          <a href="/" style={{ color: 'rgba(26,26,24,0.5)', textDecoration: 'none' }}>Ampera</a>
          <span style={{ color: 'rgba(26,26,24,0.3)' }}>›</span>
          <span style={{ color: '#0F3518' }}>Diagnóstico</span>
        </div>
        <Eyebrow>Diagnóstico energético inteligente</Eyebrow>
        <h1 className="amp-t-xl" style={{ fontFamily: 'Inter', fontSize: 64, fontWeight: 700, color: '#0F3518',
          margin: '20px 0 24px', letterSpacing: '-.02em', lineHeight: 1.05, textWrap: 'balance' }}>
          Conoce si tu proyecto solar es <span style={{ color: '#C4A84F' }}>viable</span> antes de invertir.
        </h1>
        <p style={{ fontSize: 19, color: 'rgba(26,26,24,0.72)', lineHeight: 1.6, margin: '0 0 32px', maxWidth: 540 }}>
          Analizamos tu factura, consumo, ubicación e inmueble para estimar ahorro, tamaño del sistema, inversión y retorno. Sin costo y sin compromiso.
        </p>
        <div style={{ display: 'flex', gap: 16, marginBottom: 48, flexWrap: 'wrap' }}>
          <a href="#formulario" style={{ textDecoration: 'none' }}>
            <Button variant="primary" icon="arrow_forward">Solicitar diagnóstico</Button>
          </a>
          <a href="#como-funciona" style={{ textDecoration: 'none' }}>
            <Button variant="outline">Ver cómo funciona</Button>
          </a>
        </div>
        <div className="amp-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24,
          paddingTop: 32, borderTop: '1px solid rgba(15,53,24,0.10)' }}>
          {[
            { icon: 'receipt_long', t: 'Análisis de factura', s: 'Consumo, tarifa y potencial de ahorro.' },
            { icon: 'solar_power', t: 'Prefactibilidad', s: 'Potencia, generación y área estimada.' },
            { icon: 'analytics', t: 'Retorno esperado', s: 'Ahorro, inversión y prioridad comercial.' },
          ].map(v => (
            <div key={v.t}>
              <Icon name={v.icon} size={28} color="#C4A84F" style={{ marginBottom: 12, display: 'block' }}/>
              <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: '#0F3518', marginBottom: 4 }}>{v.t}</div>
              <div style={{ fontSize: 13, color: 'rgba(26,26,24,0.6)', lineHeight: 1.5 }}>{v.s}</div>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div style={{ borderRadius: 16, overflow: 'hidden', boxShadow: '0 24px 80px rgba(15,53,24,.14)',
          background: '#fff', padding: 24 }}>
          <div style={{
            aspectRatio: '4/3', borderRadius: 12,
            backgroundImage: 'url(/assets/photo-engineer.jpg)',
            backgroundSize: 'cover', backgroundPosition: 'center',
            filter: 'saturate(0.92)', marginBottom: 24,
          }}/>
          <div className="amp-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
            {[
              { v: '1', l: 'Factura' },
              { v: '3', l: 'Variables clave' },
              { v: 'A/B/C', l: 'Lead score' },
            ].map((s, i) => (
              <div key={s.l} style={{ textAlign: 'center', padding: '0 12px',
                borderRight: i < 2 ? '1px solid rgba(15,53,24,0.08)' : 'none' }}>
                <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 28, color: '#1B5C2C',
                  letterSpacing: '-.02em', fontFeatureSettings: '"tnum"' }}>{s.v}</div>
                <div style={{ marginTop: 4, fontSize: 10, fontWeight: 700, letterSpacing: '.16em',
                  textTransform: 'uppercase', color: 'rgba(26,26,24,0.5)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ComoFunciona = () => (
  <section id="como-funciona" className="amp-px amp-py" style={{ padding: '96px 48px', background: '#fff' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto' }}>
      <div style={{ maxWidth: 720, marginBottom: 64 }}>
        <Eyebrow>Cómo funciona</Eyebrow>
        <h2 style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 600, color: '#0F3518',
          margin: '16px 0 16px', letterSpacing: '-.01em', lineHeight: 1.2, textWrap: 'balance' }}>
          Un diagnóstico diseñado para tomar mejores decisiones <span style={{ color: '#C4A84F' }}>energéticas</span>
        </h2>
        <p style={{ color: 'rgba(26,26,24,0.7)', margin: 0, fontSize: 17, maxWidth: 600 }}>
          No se trata de vender paneles sin contexto. Primero validamos si el proyecto tiene sentido técnico, financiero y operativo.
        </p>
      </div>
      <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        border: '1px solid rgba(15,53,24,0.08)', borderRadius: 16, overflow: 'hidden' }}>
        {[
          { n: '01', t: 'Solicitud', d: 'El cliente deja sus datos, ciudad, factura aproximada y tipo de inmueble.' },
          { n: '02', t: 'Calificación', d: 'El sistema asigna prioridad según consumo, propiedad, segmento y disponibilidad de factura.' },
          { n: '03', t: 'Prefactibilidad', d: 'Ampera revisa ahorro, potencia sugerida, inversión estimada y retorno esperado.' },
          { n: '04', t: 'Cotización', d: 'Solo los casos viables pasan a cotización técnica y propuesta comercial.' },
        ].map((s, i) => (
          <div key={s.n} style={{
            padding: 32, background: '#F8F7F3',
            borderRight: i < 3 ? '1px solid rgba(15,53,24,0.08)' : 'none',
          }}>
            <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 44, color: '#C4A84F',
              opacity: 0.7, lineHeight: 1, letterSpacing: '-.02em', marginBottom: 20,
              fontFeatureSettings: '"tnum"' }}>{s.n}</div>
            <h4 style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, color: '#0F3518',
              margin: '0 0 12px' }}>{s.t}</h4>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: 'rgba(26,26,24,0.65)' }}>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FormularioDiag = () => {
  const [data, setData] = React.useState({
    nombre: '', tel: '', email: '',
    ciudad: '', tipo: '', factura: '', inmueble: '', facturaDisp: '',
    objetivo: '', techo: '', comentarios: '', acepto: false,
  });
  const [score, setScore] = React.useState(null);
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => {
    const nd = { ...data, [k]: v };
    setData(nd);
    // calculate score
    let s = 0;
    const facturaS = { 'menos_500': 5, '500_1000': 12, '1000_2000': 25, '2000_5000': 35, 'mas_5000': 40 };
    s += facturaS[nd.factura] || 0;
    if (nd.tipo === 'negocio') s += 18; if (nd.tipo === 'empresa') s += 20;
    if (nd.tipo === 'hogar') s += 12; if (nd.tipo === 'rural') s += 10;
    if (nd.inmueble === 'propio') s += 18;
    if (nd.inmueble === 'arrendado_aut') s += 12;
    if (nd.inmueble === 'arrendado_no') s -= 5;
    if (nd.facturaDisp === 'si') s += 15;
    if (['barranquilla','puerto_colombia','santa_marta','cartagena'].includes(nd.ciudad)) s += 10;
    if (['ahorro','control','financiacion'].includes(nd.objetivo)) s += 8;
    if (nd.objetivo === 'informacion') s -= 5;
    if (['metalico','losa','suelo'].includes(nd.techo)) s += 5;
    s = Math.max(0, Math.min(100, s));
    if (Object.values(nd).filter(v => v).length >= 3) setScore(s);
  };
  const getCat = () => {
    if (score === null) return null;
    if (score >= 80) return { cat: 'A', label: 'Alta prioridad', desc: 'Tu caso parece tener buen potencial para avanzar a prefactibilidad y cotización.', color: '#C4A84F' };
    if (score >= 60) return { cat: 'B', label: 'Buen potencial', desc: 'Tu caso puede ser viable. Recomendamos revisar factura y condiciones del inmueble.', color: '#C4A84F' };
    if (score >= 40) return { cat: 'C', label: 'Potencial medio', desc: 'Puede requerir más información o autorización antes de cotizar.', color: 'rgba(255,255,255,0.7)' };
    return { cat: 'D', label: 'Por evaluar', desc: 'Parece una oportunidad de seguimiento o nutrición comercial.', color: 'rgba(255,255,255,0.5)' };
  };
  const cat = getCat();

  const labelStyle = { fontSize: 11, fontWeight: 700, letterSpacing: '.12em',
    textTransform: 'uppercase', color: '#8B7232', marginBottom: 8, display: 'block' };
  const fieldStyle = { width: '100%', boxSizing: 'border-box',
    fontFamily: 'Inter', fontSize: 15, padding: '12px 0',
    border: 'none', borderBottom: '1px solid rgba(15,53,24,0.25)',
    background: 'transparent', color: '#1A1A18', outline: 'none', transition: 'border .2s' };
  const onFocus = e => e.target.style.borderBottomColor = '#C4A84F';
  const onBlur = e => e.target.style.borderBottomColor = 'rgba(15,53,24,0.25)';

  const submit = async () => {
    if (!data.nombre || !data.tel || !data.email || !data.ciudad || !data.tipo || !data.factura) {
      alert('Por favor completa los campos requeridos'); return;
    }
    if (!data.acepto) {
      alert('Debes aceptar la política de tratamiento de datos para continuar.'); return;
    }

    const params = new URLSearchParams(window.location.search);

    const payload = {
      nombre: data.nombre,
      email: data.email,
      telefono: data.tel,
      ciudad: data.ciudad,
      tipo_cliente: data.tipo,
      cubierta: data.techo || '',
      factura_mensual: data.factura,
      factura_disponible: data.facturaDisp || '',
      inmueble: data.inmueble || '',
      objetivo: data.objetivo || '',
      comentarios: data.comentarios || '',
      consumo: '',
      acepto_politica: data.acepto || false,
      origen: 'web',
      utm_source: params.get('utm_source') || '',
      utm_medium: params.get('utm_medium') || '',
      utm_campaign: params.get('utm_campaign') || '',
    };

    try {
      await fetch('/.netlify/functions/create-lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
    } catch (err) {
      console.error('Lead submission error:', err);
    }

    setSent(true);
  };

  return (
    <section id="formulario" className="amp-px amp-py" style={{ padding: '96px 48px', background: '#0F3518', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', bottom: -300, left: -200, width: 700, height: 700,
        border: '1px solid rgba(196,168,79,0.10)', borderRadius: '50%' }}/>
      <div className="amp-g2" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '5fr 7fr', gap: 64, position: 'relative', alignItems: 'start' }}>
        <div className="amp-unsticky" style={{ color: '#fff', position: 'sticky', top: 100 }}>
          <Eyebrow dark>Solicitar diagnóstico</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 600, lineHeight: 1.15,
            color: '#fff', margin: '16px 0 24px', letterSpacing: '-.01em', textWrap: 'balance' }}>
            Cuéntanos sobre tu <span style={{ color: '#C4A84F' }}>consumo</span> energético
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.7)', margin: '0 0 32px', fontSize: 16, lineHeight: 1.65 }}>
            Con esta información clasificamos tu oportunidad y definimos si conviene avanzar a una prefactibilidad solar.
          </p>
          {cat && !sent && (
            <div style={{
              background: 'rgba(255,255,255,0.08)', borderRadius: 16, padding: 24,
              border: '1px solid rgba(255,255,255,0.12)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <Eyebrow dark>Perfil energético</Eyebrow>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 32, color: cat.color,
                    lineHeight: 1, fontFeatureSettings: '"tnum"', letterSpacing: '-.02em' }}>Lead {cat.cat}</div>
                </div>
              </div>
              <div style={{ height: 4, background: 'rgba(255,255,255,0.10)', borderRadius: 99, marginBottom: 16, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: score + '%', background: '#C4A84F',
                  borderRadius: 99, transition: 'width .4s' }}/>
              </div>
              <div style={{ fontSize: 16, fontWeight: 600, color: '#fff', marginBottom: 6 }}>{cat.label}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>{cat.desc}</div>
            </div>
          )}
        </div>

        {sent ? (
          <div style={{ background: '#fff', borderRadius: 16, padding: 56, textAlign: 'center',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
            <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(196,168,79,0.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="check_circle" size={40} color="#C4A84F"/>
            </div>
            <h3 style={{ fontFamily: 'Inter', fontSize: 32, fontWeight: 600, color: '#0F3518',
              margin: 0, letterSpacing: '-.01em' }}>Solicitud recibida</h3>
            <p style={{ color: 'rgba(26,26,24,0.65)', maxWidth: 440, lineHeight: 1.6, margin: 0 }}>
              Gracias, <strong style={{ color: '#0F3518' }}>{data.nombre}</strong>. El equipo de Ampera revisará tu información y te contactará en menos de 24h para avanzar con el diagnóstico energético.
            </p>
            <a href="https://wa.me/573017859742" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
              <Button variant="primary" icon="chat">Continuar por WhatsApp</Button>
            </a>
          </div>
        ) : (
          <div style={{ background: '#fff', borderRadius: 16, padding: 40,
            boxShadow: '0 24px 80px rgba(15,53,24,0.14)' }}>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <input type="text" placeholder="Nombre completo *" style={fieldStyle}
                value={data.nombre} onChange={e => set('nombre', e.target.value)} onFocus={onFocus} onBlur={onBlur}/>
              <input type="tel" placeholder="WhatsApp *" style={fieldStyle}
                value={data.tel} onChange={e => set('tel', e.target.value)} onFocus={onFocus} onBlur={onBlur}/>
            </div>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <input type="email" placeholder="Correo electrónico *" style={fieldStyle}
                value={data.email} onChange={e => set('email', e.target.value)} onFocus={onFocus} onBlur={onBlur}/>
              <select style={fieldStyle} value={data.ciudad} onChange={e => set('ciudad', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">Ciudad *</option>
                <option value="barranquilla">Barranquilla</option>
                <option value="puerto_colombia">Puerto Colombia</option>
                <option value="santa_marta">Santa Marta</option>
                <option value="cartagena">Cartagena</option>
                <option value="valledupar">Valledupar</option>
                <option value="monteria">Montería</option>
                <option value="sincelejo">Sincelejo</option>
                <option value="riohacha">Riohacha</option>
                <option value="otra">Otra ciudad de Colombia</option>
              </select>
            </div>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <select style={fieldStyle} value={data.tipo} onChange={e => set('tipo', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">Tipo de cliente *</option>
                <option value="hogar">Hogar / residencial</option>
                <option value="negocio">Negocio / comercio</option>
                <option value="empresa">Empresa / industrial</option>
                <option value="rural">Finca / rural</option>
              </select>
              <select style={fieldStyle} value={data.factura} onChange={e => set('factura', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">Factura mensual promedio *</option>
                <option value="menos_500">Menos de $500.000</option>
                <option value="500_1000">$500.000 - $1.000.000</option>
                <option value="1000_2000">$1.000.000 - $2.000.000</option>
                <option value="2000_5000">$2.000.000 - $5.000.000</option>
                <option value="mas_5000">Más de $5.000.000</option>
              </select>
            </div>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <select style={fieldStyle} value={data.inmueble} onChange={e => set('inmueble', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">El inmueble es...</option>
                <option value="propio">Propio</option>
                <option value="arrendado_aut">Arrendado con autorización</option>
                <option value="arrendado_no">Arrendado sin autorización</option>
                <option value="por_definir">Por definir</option>
              </select>
              <select style={fieldStyle} value={data.facturaDisp} onChange={e => set('facturaDisp', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">¿Tienes factura reciente?</option>
                <option value="si">Sí, puedo compartirla</option>
                <option value="no">No la tengo a la mano</option>
              </select>
            </div>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <select style={fieldStyle} value={data.objetivo} onChange={e => set('objetivo', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">Objetivo principal</option>
                <option value="ahorro">Reducir costos de energía</option>
                <option value="control">Medir y controlar la energía</option>
                <option value="sostenibilidad">Sostenibilidad</option>
                <option value="financiacion">Evaluar financiación</option>
                <option value="informacion">Solo información</option>
              </select>
              <select style={fieldStyle} value={data.techo} onChange={e => set('techo', e.target.value)} onFocus={onFocus} onBlur={onBlur}>
                <option value="">Tipo de techo</option>
                <option value="metalico">Metálico</option>
                <option value="losa">Losa / concreto</option>
                <option value="teja">Teja</option>
                <option value="suelo">Suelo / terreno</option>
                <option value="no_se">No sé</option>
              </select>
            </div>
            <textarea rows={3} placeholder="Cuéntanos algo adicional (opcional)"
              style={{ ...fieldStyle, paddingTop: 12, paddingBottom: 12, fontFamily: 'Inter', resize: 'vertical' }}
              value={data.comentarios} onChange={e => set('comentarios', e.target.value)}
              onFocus={onFocus} onBlur={onBlur}/>
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginTop: 24, marginBottom: 24,
              fontSize: 13, lineHeight: 1.6, color: 'rgba(26,26,24,0.75)', cursor: 'pointer' }}>
              <input type="checkbox" required
                checked={data.acepto || false}
                onChange={e => set('acepto', e.target.checked)}
                style={{ marginTop: 4, accentColor: '#1B5C2C', flexShrink: 0 }}/>
              <span>
                Autorizo a <strong style={{ color: '#0F3518' }}>Ampera Energy SAS</strong> (NIT 902.062.743-1) a tratar mis datos personales conforme a la Ley 1581 de 2012 para fines de contacto comercial, diagnóstico energético, cotización y envío de información sobre soluciones energéticas. He leído y acepto la{' '}
                <a href="/politica-de-datos/" target="_blank" rel="noopener noreferrer" style={{ color: '#1B5C2C', textDecoration: 'underline' }}>política de tratamiento de datos</a>.
              </span>
            </label>
            <div>
              <Button variant="primary" icon="arrow_forward" onClick={submit}
                disabled={!data.acepto}
                style={{ width: '100%', justifyContent: 'center', padding: '18px 24px',
                  opacity: data.acepto ? 1 : 0.5, cursor: data.acepto ? 'pointer' : 'not-allowed' }}>
                Enviar solicitud de diagnóstico
              </Button>
            </div>
            <p style={{ textAlign: 'center', fontSize: 12, color: 'rgba(26,26,24,0.5)', marginTop: 16 }}>
              También puedes escribirnos por WhatsApp al +57 301 785 9742
            </p>
          </div>
        )}
      </div>
    </section>
  );
};

const ParaQuien = () => (
  <section className="amp-px amp-py" style={{ padding: '96px 48px', background: '#F8F7F3' }}>
    <div className="amp-g2" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48 }}>
      <div>
        <Eyebrow>Para quién</Eyebrow>
        <h2 style={{ fontFamily: 'Inter', fontSize: 40, fontWeight: 600, color: '#0F3518',
          margin: '16px 0 0', letterSpacing: '-.01em', lineHeight: 1.2, textWrap: 'balance' }}>
          ¿Para quién es este <span style={{ color: '#C4A84F' }}>diagnóstico</span>?
        </h2>
      </div>
      <div className="amp-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
        {[
          { icon: 'home', t: 'Hogares', d: 'Casas con consumos altos que buscan ahorro, valorización y control energético.' },
          { icon: 'storefront', t: 'Negocios', d: 'Restaurantes, colegios, clínicas, oficinas y comercios con alta factura.' },
          { icon: 'factory', t: 'Empresas', d: 'Operaciones industriales que buscan eficiencia, monitoreo y visión a largo plazo.' },
        ].map(c => (
          <Card key={c.t}>
            <Icon name={c.icon} size={32} color="#C4A84F" style={{ marginBottom: 20, display: 'block' }}/>
            <h4 style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, color: '#0F3518', margin: '0 0 12px' }}>{c.t}</h4>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'rgba(26,26,24,0.65)' }}>{c.d}</p>
          </Card>
        ))}
      </div>
    </div>
  </section>
);

const DiagnosticoPage = () => (
  <div data-screen-label="02 Diagnóstico">
    <Nav active="Diagnóstico"/>
    <DiagHero/>
    <ComoFunciona/>
    <FormularioDiag/>
    <ParaQuien/>
    <Footer/>
  </div>
);

window.DiagnosticoPage = DiagnosticoPage;