const { Button, Card, Icon, Input, Select, Checkbox, SectionLabel, LoadingChevrons } = window.DatnovaDesignSystem_e8e0a8;

const CARGOS = ['CEO', 'CFO', 'CIO', 'CTO', 'CDO', 'VP Data', 'VP AI', 'Innovación', 'Otro'];
const PAISES = [{ value: 'CO', label: 'Colombia' }, { value: 'MX', label: 'México' }, { value: 'BR', label: 'Brasil' }, { value: 'CL', label: 'Chile' }, { value: 'PE', label: 'Perú' }, { value: 'Otro', label: 'Otro' }];
const STACKS = ['Azure', 'Databricks', 'AWS', 'GCP', 'On-premise'];
const DESAFIOS = ['Datos sin gobernanza', 'IA que no llega a producción', 'Migración cloud', 'BI que nadie usa', 'Otro'];
const GRATUITOS = ['gmail.com', 'hotmail.com', 'outlook.com', 'yahoo.com', 'yahoo.com.mx', 'icloud.com', 'live.com', 'aol.com', 'proton.me', 'protonmail.com', 'me.com', 'msn.com'];

const INCLUYE = [
  ['git-compare-arrows', 'Mapeo de brecha por dominio', 'Dónde se detiene el valor hoy: por dominio de datos, con dueño y costo de la demora.'],
  ['server-cog', 'Evaluación de tu stack actual', 'Azure, Databricks u otro entorno: qué se conserva, qué se moderniza y en qué orden.'],
  ['list-ordered', 'Roadmap de sprints priorizado', 'Secuencia de sprints ordenada por impacto, con criterio de aceptación por cada uno.'],
];

function DiagnosticoScreen({ onNavigate }) {
  const [f, setF] = React.useState({ nombre: '', cargo: '', empresa: '', email: '', pais: '', desafio: '', stack: [], trampa: '' });
  const [err, setErr] = React.useState({});
  const [estado, setEstado] = React.useState('idle');
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const toggleStack = s => setF(p => ({ ...p, stack: p.stack.includes(s) ? p.stack.filter(x => x !== s) : [...p.stack, s] }));

  const validar = () => {
    const e = {};
    if (!f.nombre.trim()) e.nombre = 'Escribe tu nombre.';
    if (!f.cargo) e.cargo = 'Selecciona tu cargo.';
    if (!f.empresa.trim()) e.empresa = 'Escribe el nombre de tu empresa.';
    const dom = f.email.split('@')[1] || '';
    if (!/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(f.email)) e.email = 'Revisa el formato del correo.';
    else if (GRATUITOS.includes(dom.toLowerCase())) e.email = 'Usa tu correo corporativo, no una cuenta personal.';
    if (!f.pais) e.pais = 'Selecciona tu país.';
    if (!f.desafio) e.desafio = 'Selecciona tu principal desafío.';
    return e;
  };
  const enviar = ev => {
    ev.preventDefault();
    if (f.trampa) return;
    const e = validar();
    setErr(e);
    if (Object.keys(e).length) return;
    setEstado('sending');
    window.setTimeout(() => setEstado('done'), 900);
  };

  return (
    <main>
      <PageHead eyebrow="Conversión" title="Diagnóstico de 2 semanas"
        lead="Entregable: tu Execution Gap Brief — brecha específica, quick wins y arquitectura propuesta. Monto fijo. Sin compromiso de proyecto completo." />

      <Section tight>
        <div className="split-wide diag-split" style={{ alignItems: 'start' }}>
          <div style={{ display: 'grid', gap: 20, alignContent: 'start', minWidth: 0 }}>
            <SectionLabel>Qué incluye</SectionLabel>
            <div style={{ display: 'grid', gap: 12 }}>
              {INCLUYE.map(([icon, t, d]) => (
                <Card key={t} padding="lg" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18, alignItems: 'start' }}>
                  <Icon name={icon} size={24} color="var(--dn-esmeralda)" />
                  <div style={{ display: 'grid', gap: 6 }}>
                    <h3 style={{ fontSize: 18 }}>{t}</h3>
                    <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)' }}>{d}</p>
                  </div>
                </Card>
              ))}
            </div>
            <div style={{ display: 'grid', gap: 10, padding: '20px 0 0', borderTop: '1px solid var(--border-subtle)' }}>
              <span className="dn-label" style={{ fontSize: 10, color: 'var(--text-muted)' }}>Cómo sigue</span>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-body)', maxWidth: 460 }}>
                Al terminar el diagnóstico decides si continúas. El brief es tuyo en cualquier caso, con o sin sprints posteriores.
              </p>
            </div>
          </div>

          <Card padding="lg" style={{ minWidth: 0, display: 'grid', gap: 20 }}>
            {estado === 'done' ? (
              <div style={{ display: 'grid', gap: 16, justifyItems: 'start', padding: '24px 0' }}>
                <Icon name="check-circle-2" size={32} color="var(--dn-esmeralda)" />
                <h3 style={{ fontSize: 24 }}>Recibido.</h3>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-muted)', maxWidth: 420 }}>
                  Te contactamos en menos de 24 horas hábiles con los próximos pasos.
                </p>
                <Button variant="secondary" onClick={() => onNavigate('metodologia')} iconTrailing="arrow-right" style={{ marginTop: 8 }}>Ver la metodología mientras esperas</Button>
              </div>
            ) : (
              <form onSubmit={enviar} noValidate style={{ display: 'grid', gap: 18 }}>
                <div style={{ display: 'grid', gap: 6 }}>
                  <h2 style={{ fontSize: 26 }}>Solicita tu diagnóstico</h2>
                  <p style={{ fontSize: 14, color: 'var(--text-muted)' }}>Siete campos. Respondemos en menos de 24 horas hábiles.</p>
                </div>
                <div className="grid c2 form-grid" style={{ gap: 16 }}>
                  <Input label="Nombre" required value={f.nombre} error={err.nombre} onChange={e => set('nombre', e.target.value)} placeholder="Nombre y apellido" />
                  <Select label="Cargo" options={CARGOS} value={f.cargo} error={err.cargo} placeholder="Selecciona tu cargo" onChange={e => set('cargo', e.target.value)} />
                  <Input label="Empresa" required value={f.empresa} error={err.empresa} onChange={e => set('empresa', e.target.value)} placeholder="Razón social o marca" />
                  <Input label="Email corporativo" type="email" required icon="mail" value={f.email} error={err.email} hint="Solo dominios corporativos." onChange={e => set('email', e.target.value)} placeholder="nombre@empresa.com" />
                  <Select label="País" options={PAISES} value={f.pais} error={err.pais} placeholder="Selecciona tu país" onChange={e => set('pais', e.target.value)} />
                  <Select label="Principal desafío" options={DESAFIOS} value={f.desafio} error={err.desafio} placeholder="Selecciona una opción" onChange={e => set('desafio', e.target.value)} />
                </div>
                <fieldset style={{ border: 0, padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                  <legend style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: 'var(--text-heading)', padding: 0, marginBottom: 4 }}>¿Stack actual?</legend>
                  <div className="grid c3" style={{ gap: 10 }}>
                    {STACKS.map(s => <Checkbox key={s} label={s} checked={f.stack.includes(s)} onChange={() => toggleStack(s)} />)}
                  </div>
                </fieldset>
                <input type="text" name="empresa_ref" tabIndex="-1" autoComplete="off" aria-hidden="true" value={f.trampa} onChange={e => set('trampa', e.target.value)} style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
                {estado === 'sending' ? (
                  <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14, color: 'var(--text-muted)' }}>
                    <LoadingChevrons size={12} /> Enviando tu solicitud…
                  </div>
                ) : (
                  <Button type="submit" size="lg" fullWidth iconTrailing="arrow-right">Solicitar diagnóstico</Button>
                )}
                <p style={{ fontSize: 12, lineHeight: 1.55, color: 'var(--text-muted)' }}>
                  Tu solicitud llega a contacto@datnova.ai. Usamos tus datos solo para responderla: sin newsletter, sin listas de terceros.
                </p>
              </form>
            )}
          </Card>
        </div>
      </Section>
    </main>
  );
}

Object.assign(window, { DiagnosticoScreen });