/* SOLUCIONES — detailed page */
const SolHero = () => (
  <section className="page-hero">
    <div className="page-hero-bg" />
    <div className="container">
      <div className="crumb">
        <a href="../index.html">Inicio</a>
        <span className="sep">/</span>
        <span>Soluciones</span>
      </div>
      <h1>Soluciones que se <span className="grad">pagan solas</span> en menos de un trimestre.</h1>
      <p className="lede">Cada servicio está pensado para resolver un problema específico de tu operación. Sin paquetes que pagas y no usas, sin dependencias eternas, sin sorpresas en la factura.</p>
    </div>
  </section>
);

const SolBigNums = () => (
  <section style={{ padding: '0 0 64px' }}>
    <div className="container">
      <div className="big-num-grid">
        <div className="big-num"><div className="n"><span className="grad">100%</span></div><div className="l">El código es tuyo</div></div>
        <div className="big-num"><div className="n"><span className="grad">0</span></div><div className="l">Licencias por usuario</div></div>
        <div className="big-num"><div className="n"><span className="grad">5–7</span></div><div className="l">Días para landing page</div></div>
        <div className="big-num"><div className="n"><span className="grad">8</span></div><div className="l">Semanas para SaaS MVP</div></div>
      </div>
    </div>
  </section>
);

const SolDetailCard = ({ id, num, name, tag, desc, includes, deliverables, price, priceUnit, priceNote, cta, accent = false }) => (
  <section id={id} className="section" style={{ padding: '56px 0', borderTop: '1px solid var(--border)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }} className="sol-detail-grid">
        <div>
          <div className="tl-stage-num"><span className="pill">{num}</span><span>Solución · {name}</span></div>
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', letterSpacing: '-0.025em', margin: '0 0 12px', fontWeight: 700, lineHeight: 1.1 }}>
            {name}
          </h2>
          <p style={{ color: 'var(--cyan)', fontWeight: 500, fontSize: 15, margin: '0 0 16px' }}>{tag}</p>
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, margin: '0 0 24px', maxWidth: 540 }}>{desc}</p>
          <div className="tl-deliverables">
            {deliverables.map((d, i) => (
              <div key={i} className="tl-deliverable">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <div><strong>{d.t}</strong><span>{d.d}</span></div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className={`svc-card ${accent ? 'featured' : ''}`} style={{ position: 'sticky', top: 100 }}>
            {accent && <span className="svc-pop">Más solicitado</span>}
            <h3>Qué incluye</h3>
            <ul className="svc-list" style={{ marginBottom: 24 }}>
              {includes.map((i, idx) => (
                <li key={idx}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {i}
                </li>
              ))}
            </ul>
            <div className="svc-price-box" style={accent ? { background: 'rgba(34,197,94,0.06)', borderColor: 'rgba(34,197,94,0.2)' } : null}>
              <div className="lbl">{priceUnit}</div>
              <div className={`price ${accent ? 'grad' : ''}`}>{price}</div>
              <div className="unit">{priceNote}</div>
            </div>
            <a href="contacto.html" className="svc-cta">{cta} →</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Compare = () => (
  <section className="section section-soft">
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Comparativa</div>
        <h2 className="section-title">¿Software a medida vs. SaaS genérico?</h2>
        <p className="section-sub">A largo plazo, lo que parece "más caro" termina siendo lo más rentable.</p>
      </div>
      <div className="compare">
        <div className="compare-row">
          <div className="compare-cell compare-head">Aspecto</div>
          <div className="compare-cell compare-head">SaaS genérico</div>
          <div className="compare-cell compare-head us">martz forge</div>
        </div>
        {[
          ['Encaja con tu operación', false, 'Diseñado para tus reglas'],
          ['Costo a 3 años', '$18k+ para tu equipo', 'Pago único + soporte'],
          ['Modificable sin permisos', false, 'Tu equipo cambia lo que necesite'],
          ['Tus datos son tuyos', 'Exportables, parcialmente', 'Base de datos, código, IP'],
          ['Integraciones', 'Limitadas a su catálogo', 'Cualquier API existente'],
          ['Soporte técnico', 'Tickets en cola', 'Slack directo, &lt;2h'],
        ].map((row, i) => (
          <div key={i} className="compare-row">
            <div className="compare-cell compare-feature">{row[0]}</div>
            <div className="compare-cell col-2">
              {row[1] === false
                ? <><svg className="x" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> No</>
                : row[1]}
            </div>
            <div className="compare-cell col-3">
              <svg className="c" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              <span dangerouslySetInnerHTML={{ __html: row[2] }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const solutions = [
  {
    id: 'custom',
    num: '01',
    name: 'Software a medida',
    tag: 'Plataformas SaaS · ERP · CRM custom',
    desc: 'Construimos sistemas que respiran como tu negocio: tus reglas, tu flujo, tu lenguaje. Sin licencias por usuario, sin features inútiles, sin negociar con el roadmap de un tercero.',
    deliverables: [
      { t: 'Especificación funcional', d: 'Documento vivo con flujos y reglas.' },
      { t: 'Arquitectura escalable', d: 'Cloud-native, lista para crecer 100×.' },
      { t: 'Código en tu repositorio', d: 'GitHub privado, MIT-license interna.' },
      { t: 'Documentación + handover', d: 'Tu equipo puede tomarlo cuando quiera.' },
    ],
    includes: [
      'Análisis de operación (2 semanas)',
      'Diseño UX/UI dedicado',
      'Desarrollo full-stack (React + Node + Postgres)',
      'Despliegue en cloud (AWS / GCP / propio)',
      'Integraciones con sistemas existentes',
      'Capacitación al equipo',
      '3 meses de soporte incluido',
    ],
    price: 'A consultar',
    priceUnit: 'Inversión típica',
    priceNote: '$4,500 — $45,000 USD según alcance',
    cta: 'Agendar consulta',
    accent: true,
  },
  {
    id: 'web',
    num: '02',
    name: 'Desarrollo Web',
    tag: 'Sitios corporativos · Landing pages · Apps web',
    desc: 'Tu primer punto de contacto digital, hecho como debe hacerse: rápido, accesible, optimizado para convertir y fácil de mantener para tu equipo.',
    deliverables: [
      { t: 'Diseño dedicado', d: 'No template — diseñado para tu marca.' },
      { t: 'Performance >95', d: 'Lighthouse, Core Web Vitals.' },
      { t: 'CMS opcional', d: 'Editas el contenido sin tocar código.' },
      { t: 'Analítica configurada', d: 'GA4, Hotjar, eventos custom.' },
    ],
    includes: [
      'Diseño 100% personalizado',
      'Hasta 8 secciones / 5 páginas',
      'Responsive mobile-first',
      'SEO técnico + meta tags',
      'Formulario de contacto + automation',
      'Hosting + dominio configurado',
      '30 días de ajustes incluidos',
    ],
    price: '$299',
    priceUnit: 'Desde',
    priceNote: 'USD + IVA / proyecto',
    cta: 'Solicitar cotización',
    accent: false,
  },
  {
    id: 'auto',
    num: '03',
    name: 'Automatización de procesos',
    tag: 'Workflows · Integraciones · Webhooks',
    desc: 'Cada hora que tu equipo dedica a copiar datos entre sistemas es dinero perdido. Automatizamos el aburrido para que se enfoquen en lo importante.',
    deliverables: [
      { t: 'Mapa de procesos actuales', d: 'Identificamos qué automatizar primero.' },
      { t: 'Workflows custom', d: 'En tu stack o con n8n / Make.' },
      { t: 'Reportes automáticos', d: 'En Slack, email o dashboard.' },
      { t: 'Alertas inteligentes', d: 'Solo cuando alguien debe actuar.' },
    ],
    includes: [
      'Diagnóstico de procesos (1 semana)',
      'Implementación por flujos (sprints de 2 sem)',
      'Conectores: Stripe, HubSpot, Notion, etc.',
      'Reportes ejecutivos automatizados',
      'Documentación de cada flujo',
    ],
    price: '$2,400',
    priceUnit: 'Por flujo desde',
    priceNote: 'USD + IVA · pack de 5 con descuento',
    cta: 'Diagnóstico gratuito',
    accent: false,
  },
  {
    id: 'ai',
    num: '04',
    name: 'IA aplicada',
    tag: 'Asistentes · Predicción · Análisis',
    desc: 'No vendemos IA por moda. La integramos donde mueve la aguja: agendamiento, clasificación, predicción de demanda, asistentes que entienden tu base de conocimiento.',
    deliverables: [
      { t: 'Asistentes contextuales', d: 'Que saben de TU negocio, no de internet.' },
      { t: 'Predicción de demanda', d: 'Modelos sobre tus datos históricos.' },
      { t: 'Clasificación inteligente', d: 'Tickets, leads, productos, pacientes.' },
      { t: 'Resúmenes diarios', d: 'IA que te cuenta lo que importa.' },
    ],
    includes: [
      'Auditoría de datos disponibles',
      'RAG sobre tu base de conocimiento',
      'Integración con tu sistema actual',
      'Dashboard de uso y precisión',
      'Costo de API optimizado',
    ],
    priceTiers: [
      {
        unit: 'MÓDULO BÁSICO — ADD-ON DESDE',
        price: '$1,200',
        note: 'USD / módulo · sobre proyecto base',
        includes: 'Incluye: asistentes contextuales, resúmenes diarios, clasificación inteligente'
      },
      {
        unit: 'MÓDULO AVANZADO — ADD-ON DESDE',
        price: '$3,500',
        note: 'USD / módulo · sobre proyecto base',
        includes: 'Incluye: RAG sobre datos privados, predicción de demanda, agentes autónomos'
      }
    ],
    cta: 'Explorar IA',
    accent: false,
  },
  {
    id: 'integ',
    num: '05',
    name: 'Integraciones',
    tag: 'APIs · Webhooks · ETL',
    desc: 'Tu CRM, tu ERP, tu pasarela, tu e-commerce: que hablen entre sí en tiempo real, sin Excel intermedio, sin información duplicada, sin errores de captura.',
    deliverables: [
      { t: 'Mapa de sistemas actuales', d: 'Qué se conecta con qué (y cómo).' },
      { t: 'API gateway unificado', d: 'Un solo punto de control.' },
      { t: 'Sincronización en vivo', d: 'Cambios reflejados en segundos.' },
      { t: 'Reintentos + observabilidad', d: 'Fallas detectadas antes que tú.' },
    ],
    includes: [
      'Auditoría de sistemas',
      'Conectores: Stripe, Shopify, HubSpot, SAP, Odoo',
      'Sincronización bidireccional',
      'Manejo de errores robusto',
      'Dashboard de salud de integraciones',
    ],
    price: '$1,800',
    priceUnit: 'Por integración',
    priceNote: 'USD + IVA · descuentos por volumen',
    cta: 'Cotizar integración',
    accent: false,
  },
  {
    id: 'mant',
    num: '06',
    name: 'Mantenimiento IT',
    tag: 'Soporte · Hardening · Evolución',
    desc: 'Tu sistema no se queda quieto: necesita parches, optimización, nuevas features. Te acompañamos con un acuerdo de soporte por escrito, no con un email que responde "mañana revisamos".',
    deliverables: [
      { t: 'Soporte por escrito', d: 'Tiempos de respuesta acordados contigo.' },
      { t: 'Hardening de seguridad', d: 'Auditorías y parches periódicos.' },
      { t: 'Roadmap mensual', d: 'Mejoras priorizadas con tu equipo.' },
      { t: 'Slack directo con devs', d: 'Sin pasar por tickets.' },
    ],
    includes: [
      'Soporte cercano y directo',
      'Tiempos de respuesta acordados',
      'Parches de seguridad periódicos',
      'Optimización de performance',
      'Hasta 20h dev/mes incluidas',
    ],
    price: '$390',
    priceUnit: 'Plan mensual desde',
    priceNote: 'USD / mes · incluido en planes SaaS',
    cta: 'Ver planes',
    accent: false,
  },
];

const SolApp = () => {
  const [active, setActive] = React.useState(0);

  // Scroll to hash on mount and hash change
  React.useEffect(() => {
    const handleHashChange = () => {
      const hash = window.location.hash;
      if (hash) {
        const id = hash.replace('#', '');
        const index = solutions.findIndex(s => s.id === id);
        if (index !== -1) {
          setActive(index);
          setTimeout(() => {
            // Scroll to the proc-window with offset to position it better
            const procWindow = document.querySelector('.proc-window');
            if (procWindow) {
              const y = procWindow.getBoundingClientRect().top + window.pageYOffset - 300;
              window.scrollTo({ top: y, behavior: 'smooth' });
            }
          }, 150);
        }
      }
    };

    // Check on mount
    handleHashChange();

    // Listen for hash changes
    window.addEventListener('hashchange', handleHashChange);

    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  const nextSol = () => {
    if (active < solutions.length - 1) setActive(active + 1);
  };

  const prevSol = () => {
    if (active > 0) setActive(active - 1);
  };

  const currentSol = solutions[active];

  return (
    <>
      <SiteNav current="sol" />
      <SolHero />
      <SolBigNums />

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Soluciones</div>
            <h2 className="section-title">Servicios que se ajustan al tamaño de tu reto.</h2>
          </div>

          {/* Tabs */}
          <div className="proc-tabs">
            {solutions.map((s, i) => (
              <button
                key={s.id}
                className={`proc-tab ${active === i ? 'active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="proc-tab-num">{s.num}</span>
                <span className="proc-tab-label">{s.name}</span>
              </button>
            ))}
          </div>

          {/* Content Window */}
          <div className="proc-window">
            <div className="proc-content">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
                <div>
                  <div className="proc-stage-header">
                    <span className="pill">{currentSol.num}</span>
                    <span className="proc-stage-dur">{currentSol.tag}</span>
                  </div>
                  <h2 className="proc-stage-title">{currentSol.name}</h2>
                  <p className="proc-stage-desc">{currentSol.desc}</p>
                  <div className="tl-deliverables">
                    {currentSol.deliverables.map((d, i) => (
                      <div key={i} className="tl-deliverable">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        <div><strong>{d.t}</strong>{d.d}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div>
                  <div className={`svc-card ${currentSol.accent ? 'featured' : ''}`} style={{ position: 'sticky', top: 20 }}>
                    {currentSol.accent && <span className="svc-pop">Más solicitado</span>}
                    <h3>Qué incluye</h3>
                    <ul className="svc-list" style={{ marginBottom: 24 }}>
                      {currentSol.includes.map((item, idx) => (
                        <li key={idx}>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                          {item}
                        </li>
                      ))}
                    </ul>
                    <div className="svc-price-box" style={currentSol.accent ? { background: 'rgba(34,197,94,0.06)', borderColor: 'rgba(34,197,94,0.2)' } : null}>
                      {currentSol.priceTiers ? (
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                          {currentSol.priceTiers.map((tier, idx) => (
                            <div key={idx} style={{ paddingRight: idx === 0 ? 16 : 0, borderRight: idx === 0 ? '1px solid var(--line)' : 'none' }}>
                              <div className="lbl" style={{ fontSize: 10, letterSpacing: '0.05em', lineHeight: 1.3 }}>{tier.unit}</div>
                              <div className={`price ${currentSol.accent ? 'grad' : ''}`} style={{ fontSize: 28, marginTop: 6, marginBottom: 2 }}>{tier.price}</div>
                              <div className="unit" style={{ fontSize: 11, marginBottom: 6 }}>{tier.note}</div>
                              <div style={{ fontSize: 12, color: 'var(--fg-soft)', lineHeight: 1.3 }}>{tier.includes}</div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <>
                          <div className="lbl">{currentSol.priceUnit}</div>
                          <div className={`price ${currentSol.accent ? 'grad' : ''}`}>{currentSol.price}</div>
                          <div className="unit">{currentSol.priceNote}</div>
                        </>
                      )}
                    </div>
                    <a href="contacto.html" className="svc-cta">{currentSol.cta} →</a>
                  </div>
                </div>
              </div>
            </div>

            {/* Navigation */}
            <div className="proc-nav">
              <button
                className="proc-nav-btn"
                onClick={prevSol}
                disabled={active === 0}
                aria-label="Anterior"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
              </button>
              <div className="proc-nav-dots">
                {solutions.map((_, i) => (
                  <span key={i} className={`proc-dot ${active === i ? 'active' : ''}`} />
                ))}
              </div>
              <button
                className="proc-nav-btn"
                onClick={nextSol}
                disabled={active === solutions.length - 1}
                aria-label="Siguiente"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
              </button>
            </div>
          </div>
        </div>
      </section>

    <Compare />

    <BigCTA />
    <SiteFooter />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<SolApp />);