/* Altrixz marketing site — UI components */

const Eyebrow = ({ children, num }) => (
  <span className="t-eyebrow">{num && <span style={{opacity:0.6}}>{num} / </span>}{children}</span>
);

const Btn = ({ variant = 'primary', size = 'md', children, arrow, ...rest }) => {
  const cls = `btn btn-${variant} ${size === 'lg' ? 'btn-lg' : size === 'sm' ? 'btn-sm' : ''}`;
  return (
    <button className={cls} {...rest}>
      {children}
      {arrow && <span className="arr">→</span>}
    </button>
  );
};

const Header = ({ active = 'metodo', onNav = () => {}, onCta = () => {} }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [['metodo', 'Método'], ['casos', 'Casos'], ['stack', 'Stack']];
  const handleNav = (id) => { setMenuOpen(false); onNav(id); };
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <div className="site-header__left">
          <a href="#" className="brand" onClick={(e)=>{e.preventDefault();handleNav('home');}}>
            <img src="assets/logo-horizontal.png" alt="Altrixz" />
          </a>
          <nav className="nav-links">
            {navItems.map(([id, label]) => (
              <a key={id} href={`#${id}`}
                 className={active === id ? 'on' : ''}
                 onClick={(e)=>{e.preventDefault();handleNav(id);}}>{label}</a>
            ))}
          </nav>
        </div>
        <div className="site-header__right">
          <Btn variant="primary" size="sm" arrow onClick={onCta}>Agendar diagnóstico</Btn>
          <button className="hamburger" aria-label="Abrir menú" aria-expanded={menuOpen} onClick={()=>setMenuOpen(o=>!o)}>
            <span /><span /><span />
          </button>
        </div>
      </div>
      <div className="strip">
        <span><span className="dot">●</span> EN OPERACIÓN</span>
        <span className="sep">·</span>
        <span>MTY · REMOTO</span>
        <span className="sep">·</span>
        <span>RESPUESTA EN 24H</span>
      </div>
      {menuOpen && (
        <nav className="mobile-nav">
          {navItems.map(([id, label]) => (
            <a key={id} href={`#${id}`}
               className={active === id ? 'on' : ''}
               onClick={(e)=>{e.preventDefault();handleNav(id);}}>{label}</a>
          ))}
          <Btn variant="primary" arrow onClick={()=>{setMenuOpen(false);onCta();}}>Agendar diagnóstico</Btn>
        </nav>
      )}
    </header>
  );
};

const Hero = ({ onCta }) => (
  <section className="hero">
    <div className="hero__mark">
      <img src="assets/logo-mark.png" alt="" />
    </div>
    <div className="hero__inner">
      <Eyebrow>Software a medida · Diagnóstico primero</Eyebrow>
      <h1 className="hero__h">
        Tu sistema actual<br/>
        te <span className="red">limita</span>.<br/>
        Hagámoslo explícito.
      </h1>
      <p className="hero__lead">
        Entramos a tu operación. Vemos qué está roto. Lo nombramos. Construimos
        exactamente lo que falta — con la calidad de UI/UX que no creías
        posible para una empresa de tu tamaño.
      </p>
      <div className="hero__ctas">
        <Btn variant="primary" size="lg" arrow onClick={onCta}>Agendar diagnóstico</Btn>
        <Btn variant="secondary" size="lg" onClick={()=>document.getElementById('metodo')?.scrollIntoView({behavior:'smooth'})}>Lee el método</Btn>
      </div>
      <div className="hero__meta">
        <span><b>30 min</b> · sin slides</span>
        <span className="sep">·</span>
        <span><b>0$</b> · sin compromiso</span>
        <span className="sep">·</span>
        <span><b>72h</b> · primera lectura</span>
      </div>
    </div>
  </section>
);

const Method = () => {
  const phases = [
    {
      n: '01',
      h: 'Diagnóstico',
      b: 'Dos semanas. Entrevistas con el equipo, lectura del código existente, mapa de la operación. Te entregamos qué está roto, qué se puede salvar, y qué hay que rehacer. En texto. Sin slides.',
      tag: '2 SEMANAS',
    },
    {
      n: '02',
      h: 'Construcción',
      b: 'Sprints de dos semanas con demo en vivo. Sin agency-talk, sin status meetings de relleno. Tú decides scope al final de cada sprint. Si algo no aporta, lo cortamos.',
      tag: '8–16 SEMANAS',
    },
    {
      n: '03',
      h: 'Operación',
      b: 'Quedamos. Observabilidad, on-call compartido, y un canal directo con quien escribió el código. No te dejamos con un binario y un README.',
      tag: 'CONTINUO',
    },
  ];
  return (
    <section id="metodo" className="section">
      <div className="section__head">
        <Eyebrow num="01">Método</Eyebrow>
        <h2 className="section__h">Diagnosticamos antes de recetar.</h2>
        <p className="section__lead">No vendemos paquetes. Vendemos lo que tu operación necesita — ni una pantalla más.</p>
      </div>
      <div className="method-grid">
        {phases.map(p => (
          <article key={p.n} className="phase">
            <div className="phase__top">
              <span className="phase__n">{p.n}</span>
              <span className="phase__tag">{p.tag}</span>
            </div>
            <h3 className="phase__h">{p.h}</h3>
            <p className="phase__b">{p.b}</p>
          </article>
        ))}
      </div>
    </section>
  );
};

const Cases = ({ onOpen }) => {
  return (
    <section id="casos" className="section">
      <div className="section__head">
        <Eyebrow num="02">Casos</Eyebrow>
        <h2 className="section__h">Lo que hemos construido.</h2>
        <p className="section__lead">No mostramos logos. Mostramos números y código.</p>
      </div>
      <div className="cases">
        <article className="case case--featured" onClick={()=>{ window.location.href='incubadora-spec.html'; }}>
          <div className="case__top">
            <span className="case__n">CASO 01</span>
            <span className="case__tag">PLATAFORMA EDUCATIVA</span>
          </div>
          <h3 className="case__h">Incubadora de negocios reemplaza 5 herramientas con una plataforma hecha a medida</h3>
          <p className="case__b">
            Operaban con WhatsApp, Sheets, Drive, Typeform y correo en paralelo — ninguno confiable como source of truth. Cada generación de emprendedores era un caos nuevo: archivos regados, mentorías sin registro, talleristas sin visibilidad del avance de su grupo.
          </p>
          <p className="case__b" style={{marginTop:'1rem'}}>
            Construimos una SPA con tres subdominios por rol (admin, emprendedor, mentor) sobre Firebase. Generaciones, equipos, talleres, bitácoras y mentorías en un solo modelo de datos. El admin ve el programa completo. El emprendedor ve su ruta. El mentor ve solo su grupo.
          </p>
          <p className="case__b" style={{marginTop:'1rem'}}>
            Resultado: cero correos de "¿dónde está el archivo?", cero Sheets con versiones duplicadas, y un equipo de operación que por primera vez puede medir el avance real de cada generación en tiempo real.
          </p>
          <div className="case__stats" style={{display:'flex',gap:'2rem',marginTop:'1.5rem',flexWrap:'wrap'}}>
            <div className="case__stat">
              <span className="case__num">5→1</span>
              <span className="case__lbl">herramientas reemplazadas</span>
            </div>
            <div className="case__stat">
              <span className="case__num">3</span>
              <span className="case__lbl">roles con subdominios propios</span>
            </div>
            <div className="case__stat">
              <span className="case__num">0</span>
              <span className="case__lbl">correos de soporte por archivos perdidos</span>
            </div>
          </div>
          <a className="case__more" href="incubadora-spec.html" onClick={e=>e.stopPropagation()}>Leer caso completo →</a>
        </article>
      </div>
    </section>
  );
};

const Stack = () => {
  const groups = [
    { h: 'Backend', items: ['TypeScript', 'Go', 'PostgreSQL', 'Redis'] },
    { h: 'Frontend', items: ['React', 'Next.js', 'Tailwind', 'Three.js'] },
    { h: 'Infra', items: ['AWS', 'Terraform', 'GitHub Actions', 'Datadog'] },
    { h: 'No usamos', items: ['Low-code', 'No-code', 'WordPress', 'Stack rotante'] },
  ];
  return (
    <section id="stack" className="section section--alt">
      <div className="section__head">
        <Eyebrow num="03">Stack</Eyebrow>
        <h2 className="section__h">Decidimos el stack en función del problema.</h2>
        <p className="section__lead">Pero hay cosas que no negociamos.</p>
      </div>
      <div className="stack-grid">
        {groups.map(g => (
          <div key={g.h} className={`stack-col ${g.h === 'No usamos' ? 'stack-col--no' : ''}`}>
            <div className="stack-col__h">{g.h}</div>
            <ul>
              {g.items.map(i => <li key={i}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};

const Discovery = ({ onSubmit }) => {
  const cfg = window.ALTRIXZ_CONFIG || {};
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({ nombre: '', email: '', empresa: '', tam: '10–50', dolor: '', _gotcha: '' });
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (data._gotcha) return;
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
    if (!emailPattern.test(data.email.trim())) { setStep('error'); return; }
    const payload = {
      nombre:  data.nombre.trim().slice(0, 100),
      email:   data.email.trim().toLowerCase().slice(0, 254),
      empresa: data.empresa.trim().slice(0, 200),
      tam:     data.tam,
      dolor:   data.dolor.trim().slice(0, 2000),
    };
    setStep(1);
    try {
      const res = await fetch(`https://formspree.io/f/${(window.ALTRIXZ_CONFIG || {}).discoveryFormId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (res.ok) { setStep(2); onSubmit?.(); }
      else setStep('error');
    } catch { setStep('error'); }
  };

  if (step === 'error') {
    return (
      <div className="discovery discovery--done">
        <Eyebrow>Error</Eyebrow>
        <h3 className="discovery__h">Algo salió mal.</h3>
        <p className="discovery__b">No pudimos enviar tu mensaje. Intenta de nuevo o escríbenos a <a href="mailto:contacto@altrixz.com">contacto@altrixz.com</a>.</p>
        <Btn variant="secondary" size="lg" onClick={() => setStep(0)}>Intentar de nuevo</Btn>
      </div>
    );
  }

  if (step === 2) {
    const calendlyHref = cfg.calendlyLink
      ? `${cfg.calendlyLink}?name=${encodeURIComponent(data.nombre)}&email=${encodeURIComponent(data.email)}`
      : null;
    return (
      <div className="discovery discovery--done">
        <Eyebrow>Recibido</Eyebrow>
        <h3 className="discovery__h">Listo, {data.nombre || 'tú'}.</h3>
        <p className="discovery__b">
          Recibimos tu mensaje. Si tu caso no es para nosotros, te lo decimos y te recomendamos a alguien.
        </p>
        {calendlyHref && (
          <a href={calendlyHref} target="_blank" rel="noopener noreferrer" className="btn btn-secondary" style={{marginTop:'20px'}}>
            Agenda tu diagnóstico →
          </a>
        )}
        <div className="discovery__meta">
          <span className="t-mono">ticket #DX-{Math.floor(Math.random()*9000+1000)}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="discovery">
      <Eyebrow num="04">Diagnóstico</Eyebrow>
      <h3 className="discovery__h">30 minutos. Sin slides.</h3>
      <p className="discovery__b">
        Si tu operación está atorada en sistemas que no escalan, hablemos.
        Si no es para nosotros, te lo decimos.
      </p>
      <form className="discovery__form" onSubmit={handleSubmit}>
        {/* honeypot — bots fill this, humans don't */}
        <input
          type="text"
          name="_gotcha"
          value={data._gotcha}
          onChange={e=>update('_gotcha', e.target.value)}
          style={{display:'none'}}
          tabIndex="-1"
          autoComplete="off"
          aria-hidden="true"
        />
        <div className="field">
          <label>Nombre</label>
          <input value={data.nombre} onChange={e=>update('nombre', e.target.value)} placeholder="María González" required maxLength={100} />
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" name="email" value={data.email} onChange={e=>update('email', e.target.value)} placeholder="maria@empresa.com" required maxLength={254} />
        </div>
        <div className="field">
          <label>Empresa</label>
          <input value={data.empresa} onChange={e=>update('empresa', e.target.value)} placeholder="Empresa S.A." required maxLength={200} />
        </div>
        <div className="field">
          <label>Tamaño del equipo</label>
          <select value={data.tam} onChange={e=>update('tam', e.target.value)}>
            <option>1–10</option>
            <option>10–50</option>
            <option>50–200</option>
            <option>200+</option>
          </select>
        </div>
        <div className="field field--full">
          <label>¿Qué está atorado?</label>
          <textarea value={data.dolor} onChange={e=>update('dolor', e.target.value)} placeholder="Una o dos frases. Sin contexto, sin pitch — sólo lo que más te molesta hoy." rows="3" maxLength={2000} />
        </div>
        <div className="discovery__cta">
          <Btn variant="primary" size="lg" arrow type="submit" disabled={step === 1}>{step === 1 ? 'Enviando…' : 'Enviar'}</Btn>
          <span className="t-caption" style={{color:'var(--fg-3)'}}>No te suscribimos a nada.</span>
        </div>
      </form>
    </div>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="site-footer__top">
      <div className="site-footer__brand">
        <img src="assets/logo-horizontal-tagline.png" alt="Altrixz Digital Infrastructure" />
        <p>Software a medida para empresas que quieren subir de nivel su operación.</p>
      </div>
      <div className="site-footer__cols">
        <div>
          <div className="ft-h">Empresa</div>
          <a href="#metodo">Método</a><a href="#casos">Casos</a>
        </div>
        <div>
          <div className="ft-h">Contacto</div>
          <a href="mailto:contacto@altrixz.com">contacto@altrixz.com</a>
          <a href="tel:+528110069889">+52 81 1006 9889</a>
          <span style={{fontSize:'13px',color:'var(--fg-3)',padding:'4px 0',display:'block'}}>MTY</span>
        </div>
      </div>
    </div>
    <div className="site-footer__bot">
      <span>© 2026 Altrixz Co.®. Digital Infrastructure.</span>
      <span className="t-mono" style={{color:'var(--fg-4)'}}>build a3f9c · {new Date().toISOString().slice(0,10)}</span>
    </div>
  </footer>
);

// ─── Resolve — multi-step lead quiz ────────────────────────────────────────

const RESOLVE_QUESTIONS = [
  {
    key: 'q1_frecuencia',
    label: '1 / 6',
    text: '¿Qué tan seguido alguien en tu empresa hace algo manualmente que debería hacer un sistema?',
    opts: ['Todos los días, en varios procesos', 'Pasa, pero lo tenemos "controlado"', 'Solo en áreas específicas', 'Ya lo resolvimos'],
  },
  {
    key: 'q2_area',
    label: '2 / 6',
    text: '¿En qué parte de tu operación sientes que más se pierde tiempo, dinero o información?',
    opts: ['Seguimiento de clientes, pedidos o proyectos', 'Procesos internos que dependen de personas específicas', 'Capacitación o conocimiento que no se puede replicar', 'Datos que existen pero nadie puede leer a tiempo', 'Servicio en campo o mantenimiento sin trazabilidad'],
  },
  {
    key: 'q3_situacion',
    label: '3 / 6',
    text: '¿Cómo maneja tu equipo ese proceso hoy?',
    opts: ['Excel, correo o WhatsApp (ya le llegó el límite)', 'Una herramienta genérica que nadie terminó de adoptar', 'Cada quien lo maneja a su manera', 'Tenemos algo propio pero con huecos importantes'],
  },
  {
    key: 'q4_personas',
    label: '4 / 6',
    text: '¿Cuántas personas están involucradas en ese proceso?',
    opts: ['Menos de 10', '10 – 50', '50 – 150', 'Más de 150'],
  },
  {
    key: 'q5_rol',
    label: '5 / 6',
    text: '¿Cuál es tu posición?',
    opts: ['Dirección General / Gerencia', 'Operaciones / Producción', 'IT / Sistemas', 'Ventas / Comercial', 'Otro'],
  },
];

const Resolve = () => {
  const cfg = window.ALTRIXZ_CONFIG || {};
  const TOTAL = RESOLVE_QUESTIONS.length + 1; // 5 choice + 1 contact = 6

  const [current,  setCurrent]  = React.useState(0);
  const [exiting,  setExiting]  = React.useState(-1);
  const [answers,  setAnswers]  = React.useState({});
  const [contact,  setContact]  = React.useState({ nombre: '', empresa: '', whatsapp: '', _gotcha: '' });
  const [sending,  setSending]  = React.useState(false);
  const [done,     setDone]     = React.useState(false);
  const [netError, setNetError] = React.useState(false);

  const progress = Math.round(((current + 1) / (TOTAL + 1)) * 100);

  const advance = () => {
    const idx = current;
    setExiting(idx);
    setCurrent(idx + 1);
    setTimeout(() => setExiting(-1), 420);
  };

  React.useEffect(() => {
    const handler = (e) => {
      if (current > 0 && !done) {
        e.preventDefault();
        e.returnValue = '¿Seguro? Tu diagnóstico no se guardó.';
      }
    };
    window.addEventListener('beforeunload', handler);
    return () => window.removeEventListener('beforeunload', handler);
  }, [current, done]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (contact._gotcha) return;
    const payload = {
      ...answers,
      nombre:   contact.nombre.trim().slice(0, 100),
      empresa:  contact.empresa.trim().slice(0, 200),
      whatsapp: contact.whatsapp.trim().slice(0, 30),
      _subject: 'Nuevo lead — Encuesta RESOLVE',
    };
    setSending(true);
    setNetError(false);
    try {
      const res = await fetch(`https://formspree.io/f/${cfg.resolveFormId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (res.ok) { setDone(true); }
      else { setSending(false); setNetError(true); }
    } catch { setSending(false); setNetError(true); }
  };

  const stepClass = (i) =>
    ['rv-step', i === current ? 'is-active' : i === exiting ? 'is-prev' : ''].filter(Boolean).join(' ');

  if (done) return (
    <div className="rv-thanks">
      <div className="rv-thanks__icon">✓</div>
      <h1 className="rv-thanks__title">Listo.</h1>
      <p className="rv-thanks__body">Antes de 24 horas te llega algo concreto basado en lo que respondiste.</p>
      <p className="rv-thanks__sub">Si prefieres hablar ahora:</p>
      <div className="rv-thanks__actions">
        <a className="rv-btn rv-btn--red" href={cfg.waLink} target="_blank" rel="noopener noreferrer">WhatsApp</a>
        <a className="rv-btn rv-btn--ghost" href={cfg.calendlyLink} target="_blank" rel="noopener noreferrer">Agendar 20 min</a>
      </div>
    </div>
  );

  return (
    <div className="rv-shell">
      <div className="rv-progress"><div className="rv-progress__fill" style={{ width: progress + '%' }} /></div>

      <div className="rv-steps">
        {RESOLVE_QUESTIONS.map((q, i) => (
          <div key={i} className={stepClass(i)}>
            <div className="rv-step__inner">
              <div className="rv-label">{q.label}</div>
              <div className="rv-question">{q.text}</div>
              <div className="rv-opts">
                {q.opts.map((opt) => (
                  <button key={opt} className="rv-opt" onClick={() => {
                    setAnswers(a => ({ ...a, [q.key]: opt }));
                    setTimeout(advance, 240);
                  }}>{opt}</button>
                ))}
              </div>
            </div>
          </div>
        ))}

        {/* Contact step (Q6) */}
        <div className={stepClass(RESOLVE_QUESTIONS.length)}>
          <div className="rv-step__inner">
            <div className="rv-label">6 / 6</div>
            <div className="rv-question">Basado en lo que respondiste, te armamos un diagnóstico breve.<br/>¿A dónde te lo mandamos?</div>
            <form onSubmit={handleSubmit}>
              {/* honeypot — bots fill this, humans don't */}
              <input
                type="text"
                name="_gotcha"
                value={contact._gotcha}
                onChange={e => setContact(c => ({ ...c, _gotcha: e.target.value }))}
                style={{display:'none'}}
                tabIndex="-1"
                autoComplete="off"
                aria-hidden="true"
              />
              <div className="rv-fields">
                {[
                  { id: 'rv-nombre',  key: 'nombre',   label: 'Nombre',   type: 'text',  ph: 'Tu nombre',             ac: 'given-name',   max: 100 },
                  { id: 'rv-empresa', key: 'empresa',  label: 'Empresa',  type: 'text',  ph: 'Nombre de tu empresa',  ac: 'organization', max: 200 },
                  { id: 'rv-wa',      key: 'whatsapp', label: 'WhatsApp', type: 'tel',   ph: '+52 55 0000 0000',      ac: 'tel',          max: 30  },
                ].map(({ id, key, label, type, ph, ac, max }) => (
                  <div key={key} className="rv-field">
                    <label className="rv-field__label" htmlFor={id}>{label}</label>
                    <input
                      className="rv-field__input"
                      id={id} type={type} placeholder={ph} required autoComplete={ac} maxLength={max}
                      value={contact[key]}
                      onChange={e => setContact(c => ({ ...c, [key]: e.target.value }))}
                    />
                  </div>
                ))}
              </div>
              {netError && (
                <p style={{color:'#f43547',fontSize:'0.875rem',marginBottom:'12px'}}>
                  Error al enviar. Intenta de nuevo o escríbenos por WhatsApp.
                </p>
              )}
              <button type="submit" className="rv-cta" disabled={sending}>
                <span>{sending ? 'Enviando…' : 'Quiero el diagnóstico'}</span>
                {!sending && <span>→</span>}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Header, Hero, Method, Cases, Stack, Discovery, Footer, Btn, Eyebrow, Resolve });