/* HOME PAGE — refined: ROI focus + pricing solutions */
const { useState: useStateH, useEffect: useEffectH } = React;

const TWEAK_DEFAULTS_HOME = /*EDITMODE-BEGIN*/{
  "accentHueShift": 0,
  "showAI": true
}/*EDITMODE-END*/;

const HomeHero = () => (
  <section className="hero" id="top">
    <div className="hero-bg" />
    <div className="container hero-grid">
      <div>
        <div className="hero-eyebrow"><span className="dot" /> Disponibles para nuevos proyectos · Q2 2026</div>
        <h1>
          Software que se<br />
          <span className="grad">adapta a</span><br />
          tu negocio.
        </h1>
        <p className="lede">
          Desarrollamos sistemas a medida que <strong>recuperan horas</strong>, <strong>aumentan ingresos</strong> y <strong>eliminan errores costosos</strong>. Con IA aplicada cuando aporta valor real — nunca por moda.
        </p>
        <div className="hero-actions">
          <a href="pages/contacto.html" className="btn btn-primary">
            Cuéntanos tu proyecto
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <a href="pages/soluciones.html" className="btn btn-secondary">
            Ver soluciones
          </a>
        </div>
        <div className="hero-meta">
          <span className="hero-meta-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            Primera consulta sin costo
          </span>
          <span className="hero-meta-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            Código que es tuyo
          </span>
          <span className="hero-meta-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            Sin contratos rígidos
          </span>
        </div>
      </div>
      <div>
        <HeroDashboard />
      </div>
    </div>
  </section>
);

const ROISection = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Lo que está en juego</div>
        <h2 className="section-title">Cada mes sin el sistema correcto te cuesta dinero real.</h2>
        <p className="section-sub">Estos son los costos invisibles que detectamos en el primer diagnóstico — y lo que cambia cuando los resolvemos.</p>
      </div>
      <div className="roi-grid">
        <div className="roi-card roi-loss">
          <h4><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg> Sin sistema correcto</h4>
          <div className="big big-text">Costos ocultos</div>
          <p className="sub">Lo que suele filtrarse en una operación con sistemas dispersos y procesos manuales.</p>
          <ul>
            <li><svg width="14" height="14" 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>Horas perdidas en tareas manuales repetitivas</li>
            <li><svg width="14" height="14" 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>Errores de captura que cuestan dinero</li>
            <li><svg width="14" height="14" 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>Decisiones tomadas con datos desactualizados</li>
            <li><svg width="14" height="14" 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>Seguimiento tardío que enfría oportunidades</li>
          </ul>
        </div>
        <div className="roi-card roi-gain">
          <h4><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> Con martz forge</h4>
          <div className="big big-text">Operación bajo control</div>
          <p className="sub">Lo que cambia cuando el sistema se ajusta a cómo realmente trabaja tu equipo.</p>
          <ul>
            <li><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>Tareas repetitivas automatizadas</li>
            <li><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>Menos errores operativos</li>
            <li><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>KPIs en vivo para decidir con datos del día</li>
            <li><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>Mejor experiencia para tus clientes</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const SolutionsRich = () => (
  <section className="section section-soft" id="soluciones">
    <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>
        <p className="section-sub">Desde una landing page hasta una plataforma SaaS completa. Precios transparentes y alcance claro desde el primer día.</p>
      </div>
      <div className="svc-grid">
        {/* Web */}
        <div className="svc-card">
          <div className="svc-head">
            <div className="svc-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
            </div>
            <span className="svc-status"><span className="dot" /> Disponible</span>
          </div>
          <h3>Desarrollo Web</h3>
          <p className="svc-tag">Sitios & Landing Pages</p>
          <p className="svc-desc">Diseñamos y desarrollamos tu presencia digital desde cero. Sitios corporativos, landing pages de alto impacto y aplicaciones web personalizadas.</p>
          <ul className="svc-list">
            <li><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>Landing pages profesionales</li>
            <li><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>Sitios corporativos</li>
            <li><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>Diseño responsive mobile-first</li>
            <li><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>Optimización SEO + analítica</li>
            <li><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>Entrega en 5–7 días hábiles</li>
          </ul>
          <div className="svc-price-box">
            <div className="lbl">Desde</div>
            <div className="price">$299<span style={{ fontSize: 14, opacity: 0.6, marginLeft: 4 }}>USD</span></div>
            <div className="unit">+ IVA / proyecto</div>
            <div className="note">Precio varía según complejidad</div>
          </div>
          <a href="pages/contacto.html" className="svc-cta">Solicitar cotización →</a>
          <div className="svc-foot">Empresas · Emprendedores · Profesionales</div>
        </div>

        {/* Software a medida (featured) */}
        <div className="svc-card featured">
          <span className="svc-pop">Más popular</span>
          <div className="svc-head">
            <div className="svc-icon" style={{ background: 'var(--grad)', color: '#fff' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></svg>
            </div>
            <span className="svc-status"><span className="dot" /> Disponible</span>
          </div>
          <h3>Software a medida</h3>
          <p className="svc-tag">SaaS & Sistemas empresariales</p>
          <p className="svc-desc">Desarrollamos sistemas, plataformas SaaS y aplicaciones empresariales adaptadas exactamente a los procesos de tu negocio. Sin limitaciones, sin licencias por usuario.</p>
          <ul className="svc-list">
            <li><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>Sistemas de gestión empresarial</li>
            <li><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>Plataformas SaaS personalizadas</li>
            <li><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>Integraciones con sistemas existentes</li>
            <li><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>Dashboards ejecutivos en vivo</li>
            <li><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>Consultoría tecnológica incluida</li>
          </ul>
          <div className="svc-price-box" style={{ background: 'rgba(34,197,94,0.06)', borderColor: 'rgba(34,197,94,0.2)' }}>
            <div className="lbl">Inversión</div>
            <div className="price grad">A consultar</div>
            <div className="unit">según alcance del proyecto</div>
            <div className="note"><window.MartzIcon name="check" size={14} strokeWidth={2.4} /> Primera consulta gratuita</div>
          </div>
          <a href="pages/contacto.html" className="svc-cta">Agendar consulta →</a>
          <div className="svc-foot">Startups · Clínicas · Empresas · Agencias</div>
        </div>

        {/* IA */}
        <div className="svc-card">
          <div className="svc-head">
            <div className="svc-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/><path d="M19 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1z"/></svg>
            </div>
            <span className="svc-status"><span className="dot" /> Disponible</span>
          </div>
          <h3>IA aplicada</h3>
          <p className="svc-tag">Asistentes & Automatización</p>
          <p className="svc-desc">Integramos inteligencia artificial donde aporta valor real: asistentes para citas, predicción de demanda, análisis del día y recomendaciones personalizadas.</p>
          <ul className="svc-list">
            <li><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>Asistentes conversacionales</li>
            <li><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>Agendamiento automático</li>
            <li><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>Análisis y resúmenes diarios</li>
            <li><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>Recomendaciones contextuales</li>
            <li><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>RAG sobre tus datos privados</li>
          </ul>
          <div className="svc-price-box">
            <div className="lbl">Add-on desde</div>
            <div className="price">$1,200<span style={{ fontSize: 14, opacity: 0.6, marginLeft: 4 }}>USD</span></div>
            <div className="unit">+ IVA / módulo</div>
            <div className="note">Sobre proyecto existente</div>
          </div>
          <a href="pages/contacto.html" className="svc-cta">Explorar IA →</a>
          <div className="svc-foot">Clínicas · Restaurantes · Servicios</div>
        </div>
      </div>

      <div className="svc-row-2">
        <div className="svc-mini">
          <div className="svc-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
          </div>
          <div>
            <h4>Automatización de procesos</h4>
            <p className="svc-tag">Workflows & Operación</p>
            <p>Eliminamos tareas manuales repetitivas. Conectamos sistemas, generamos reportes y disparamos acciones automáticamente.</p>
            <ul className="mini-list">
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Workflows custom</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Webhooks & APIs</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Reportes automáticos</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Notificaciones smart</li>
            </ul>
            <a href="pages/soluciones.html#auto" style={{ color: 'var(--cyan)', fontSize: 13, fontWeight: 500 }}>Ver detalle →</a>
          </div>
        </div>
        <div className="svc-mini">
          <div className="svc-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          </div>
          <div>
            <h4>Mantenimiento & Evolución</h4>
            <p className="svc-tag">Incluido en planes SaaS</p>
            <p>Tu sistema no se queda quieto: añadimos módulos, optimizamos queries, mantenemos la seguridad y respondemos con agilidad.</p>
            <ul className="mini-list">
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Soporte cercano y directo</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Tiempos de respuesta acordados</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Hardening de seguridad</li>
              <li><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Roadmap mensual</li>
            </ul>
            <a href="pages/soluciones.html#mant" style={{ color: 'var(--cyan)', fontSize: 13, fontWeight: 500 }}>Ver detalle →</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HomeProducts = () => {
  const products = [
    {
      name: 'Martz POS', tag: 'Sistema POS para pequeñas empresas',
      desc: 'Punto de venta e inventario en la nube para negocios locales que necesitan vender rápido, controlar stock y cerrar caja sin Excel.',
      audience: 'Tiendas · Minisúper · Cafeterías · Restaurantes', status: 'Disponible', soon: false,
      price: 'Desde $24.99', unit: 'USD + IVA / mes', href: 'pages/productos/martz-pos.html', featured: true,
      icon: <><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></>,
    },
    {
      name: 'Martz Hospitality', tag: 'Gestión hotelera y reservas',
      desc: 'Software para hoteles, hostales y alojamientos que unifica reservas, habitaciones, recepción y restaurante en un solo panel.',
      audience: 'Hoteles · Hostales · Alojamientos · Reservas', status: 'Próximamente', soon: true,
      price: 'Desde $39.99', unit: 'Precio estimado de lanzamiento', href: 'pages/productos/martz-hospitality.html', featured: false,
      icon: <><path d="M2 22V12a10 10 0 0 1 20 0v10"/><path d="M2 14h20M7 14v8M17 14v8"/></>,
    },
    {
      name: 'Martz Health', tag: 'Gestión clínica y expedientes',
      desc: 'Plataforma para clínicas, consultorios y laboratorios: pacientes, citas, expedientes y farmacia en un flujo continuo.',
      audience: 'Clínicas · Consultorios · Laboratorios · Farmacias', status: 'Próximamente', soon: true,
      price: 'Próximamente', unit: 'Regístrate para acceso anticipado', href: 'pages/productos/martz-health.html', featured: false,
      icon: <><path d="M19 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2zM12 7v4M10 9h4"/></>,
    },
  ];
  return (
    <section className="section" id="productos-saas">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Productos SaaS</div>
          <h2 className="section-title">Nuestros Productos SaaS.</h2>
          <p className="section-sub">Además del desarrollo a medida, construimos software propio por suscripción mensual — listo para operar desde el día uno. <a href="pages/productos.html" style={{ color: 'var(--cyan)', fontWeight: 500 }}>Ver todos los productos →</a></p>
        </div>
        <div className="svc-grid">
          {products.map(p => (
            <div key={p.name} className={`svc-card product-saas-card ${p.featured ? 'featured' : ''}`}>
              {p.featured && <span className="svc-pop">Disponible ahora</span>}
              <div className="svc-head">
                <div className="svc-icon" style={p.featured ? { background: 'var(--grad)', color: '#fff' } : null}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{p.icon}</svg>
                </div>
                <span className="svc-status" style={p.soon ? { background: 'rgba(6,182,212,0.1)', color: 'var(--cyan)' } : null}>
                  {p.soon ? null : <span className="dot" />}
                  {p.status}
                </span>
              </div>
              <h3>{p.name}</h3>
              <p className="svc-tag">{p.tag}</p>
              <p className="svc-desc">{p.desc}</p>
              <div className="product-audience">{p.audience}</div>
              <div className="svc-price-box" style={p.featured ? { background: 'rgba(34,197,94,0.06)', borderColor: 'rgba(34,197,94,0.2)' } : null}>
                <div className="lbl">Precio</div>
                <div className={`price ${p.featured ? 'grad' : ''}`} style={p.soon ? { fontSize: 24 } : null}>{p.price}</div>
                <div className="unit">{p.unit}</div>
              </div>
              <a href={p.href} className="svc-cta">{p.soon ? 'Unirme a la lista' : 'Ver planes'} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Trust = () => {
  const logos = [
    { mark: 'SA', name: 'Salud' },
    { mark: 'RE', name: 'Restaurantes' },
    { mark: 'EM', name: 'Empresas' },
    { mark: 'RT', name: 'Retail' },
  ];
  return (
    <section className="trust">
      <div className="container">
        <p className="trust-label">Sectores para los que diseñamos soluciones</p>
        <div className="trust-row">
          {logos.map(l => (
            <span key={l.name} className="trust-logo">
              <span className="mark">{l.mark}</span>{l.name}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─── Metodología: cuatro pilares que sustituyen las métricas ─────────
   Cada pilar es un objeto de datos y se renderiza con <MethodCard>.
   Los iconos son SVG outline propios (estilo Lucide, stroke 1.6). */
const METHOD_CHECK = <path d="m4 12 5 5L20 6" />;

const METHODOLOGY = [
  {
    tag: 'Arquitectura',
    title: 'Arquitectura escalable',
    description: 'Diseñamos soluciones modulares preparadas para crecer junto con tu empresa, permitiendo incorporar nuevas funcionalidades e integraciones sin comprometer la estabilidad del sistema.',
    icon: <><path d="M12 2 2 7l10 5 10-5-10-5Z" /><path d="m2 17 10 5 10-5" /><path d="m2 12 10 5 10-5" /></>,
    highlights: ['Arquitectura modular', 'Escalable desde el primer día', 'Fácil mantenimiento', 'Preparada para futuras integraciones'],
  },
  {
    tag: 'Procesos',
    title: 'Desarrollo a medida',
    description: 'Analizamos la operación de cada empresa para diseñar herramientas que se adapten a sus procesos, objetivos y forma de trabajar.',
    icon: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" /></>,
    highlights: ['Análisis del negocio', 'Diseño orientado a procesos', 'Soluciones personalizadas', 'Experiencia centrada en el usuario'],
  },
  {
    tag: 'Integraciones',
    title: 'Integraciones inteligentes',
    description: 'Conectamos plataformas, APIs y servicios para automatizar procesos y mantener toda la información sincronizada desde un solo lugar.',
    icon: <><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4" /></>,
    highlights: ['APIs modernas', 'Automatización', 'Sistemas conectados', 'Información centralizada'],
  },
  {
    tag: 'Soporte',
    title: 'Acompañamiento continuo',
    description: 'Nuestro trabajo no termina con la entrega del proyecto. Acompañamos la evolución del software para adaptarlo al crecimiento del negocio.',
    icon: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="4" /><path d="m4.9 4.9 4.3 4.3M14.8 14.8l4.3 4.3M14.8 9.2l4.3-4.3M4.9 19.1l4.3-4.3" /></>,
    highlights: ['Evolución constante', 'Soporte cercano', 'Mejoras continuas', 'Visión de largo plazo'],
  },
];

const MethodCard = ({ pillar, index }) => (
  <article className="method-card" style={{ '--i': index }}>
    <span className="method-top" aria-hidden="true" />
    <div className="method-card-head">
      <span className="method-icon" aria-hidden="true">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{pillar.icon}</svg>
      </span>
      <span className="method-tag">{pillar.tag}</span>
    </div>
    <h3 className="method-title">{pillar.title}</h3>
    <p className="method-desc">{pillar.description}</p>
    <ul className="method-list">
      {pillar.highlights.map((h, i) => (
        <li key={h} style={{ '--j': i }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{METHOD_CHECK}</svg>
          <span>{h}</span>
        </li>
      ))}
    </ul>
  </article>
);

const Methodology = () => (
  <section className="section section-dark method-section" aria-labelledby="method-title">
    <div className="method-bg" aria-hidden="true" />
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Nuestra metodología</div>
        <h2 className="section-title" id="method-title">Desarrollamos software preparado para evolucionar junto a tu negocio.</h2>
        <p className="section-sub">Cada solución que construimos combina una arquitectura moderna, procesos bien definidos y una visión de largo plazo para crear software confiable, escalable y fácil de mantener.</p>
      </div>
      <div className="method-grid">
        {METHODOLOGY.map((p, i) => <MethodCard key={p.title} pillar={p} index={i} />)}
      </div>
      <div className="method-cta">
        <div className="method-cta-text">
          <h3>¿Tu empresa necesita una solución diferente?</h3>
          <p>Analizamos tus procesos, identificamos oportunidades de mejora y diseñamos soluciones de software adaptadas a la forma en que realmente trabaja tu organización.</p>
        </div>
        <div className="method-cta-actions">
          <a href="pages/contacto.html" className="btn btn-primary">Solicitar una consultoría
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </a>
          <a href="pages/soluciones.html" className="btn btn-method-secondary">Conocer nuestros servicios</a>
        </div>
      </div>
    </div>
  </section>
);

const DashPreview = () => (
  <section className="section section-soft">
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Vista previa</div>
        <h2 className="section-title">Así se ve un sistema hecho a medida.</h2>
        <p className="section-sub">Un panel real construido para una clínica multi-sucursal: agenda inteligente, KPIs en vivo y un asistente de IA que detecta patrones y sugiere acciones.</p>
      </div>
      <window.Dashboard />
    </div>
  </section>
);

const HowItWorks = () => {
  const steps = [
    { n: '01', t: 'Descubrimiento', d: 'Mapeamos tu operación, identificamos cuellos de botella y proponemos el alcance correcto. Sin promesas vacías.' },
    { n: '02', t: 'Desarrollo iterativo', d: 'Sprints de 2 semanas con demos en vivo. Tú ves cómo crece tu sistema y nos corriges en tiempo real.' },
    { n: '03', t: 'Evolución', d: 'Después del lanzamiento seguimos contigo: nuevos módulos, integraciones, mejoras de IA. Crecemos a tu ritmo.' },
  ];
  return (
    <section className="section" id="proceso">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Cómo trabajamos</div>
          <h2 className="section-title">Un proceso claro, de principio a fin.</h2>
          <p className="section-sub">Así se ve en resumen. Nuestro método completo tiene cinco etapas diseñadas para que tomes decisiones con información real, no con presentaciones bonitas. <a href="pages/proceso.html" style={{ color: 'var(--cyan)', fontWeight: 500 }}>Ver el proceso completo →</a></p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div className="step-num"><span className="grad-dot" />Paso {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CasesPreview = () => {
  const cases = [
    { ind: 'Clínicas', problem: 'Citas, expedientes y sucursales trabajando por separado.', result: 'Plataforma clínica centralizada y adaptada a la operación.', href: 'pages/casos.html#clinicas' },
    { ind: 'Restaurantes', problem: 'Inventario, compras y reportes administrados manualmente.', result: 'Sistema integrado para coordinar sucursales y procesos.', href: 'pages/casos.html#restaurantes' },
    { ind: 'Empresas', problem: 'Herramientas que no comparten información entre áreas.', result: 'Integraciones, automatización y un dashboard unificado.', href: 'pages/casos.html#empresas' },
  ];
  return (
    <section className="section section-soft" id="casos">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Software personalizado</div>
          <h2 className="section-title">Escenarios para operaciones con necesidades únicas.</h2>
          <p className="section-sub"><a href="pages/casos.html" style={{ color: 'var(--cyan)', fontWeight: 500 }}>Explorar escenarios de implementación →</a></p>
        </div>
        <div className="cases">
          {cases.map(c => (
            <a key={c.ind} className="case-card" href={c.href}>
              <div className="case-icon">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/></svg>
              </div>
              <h3>{c.ind}</h3>
              <div className="case-step"><span className="l">Situación</span><span>{c.problem}</span></div>
              <div className="case-step r"><span className="l">Propuesta</span><span>{c.result}</span></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const BigCTA = () => (
  <section className="big-cta" id="contacto">
    <div className="container">
      <h2>Tu software debería <span className="grad">adaptarse a ti</span>,<br />no al revés.</h2>
      <p>Cuéntanos sobre tu operación. Una llamada de 30 minutos basta para saber cuánto podrías estar perdiendo — y cómo recuperarlo.</p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="pages/contacto.html" className="btn btn-primary">Comenzar proyecto
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <a href="mailto:martzlab@outlook.com" className="btn btn-secondary" style={{ background: 'rgba(255,255,255,0.06)', color: '#fff', borderColor: 'rgba(255,255,255,0.14)' }}>martzlab@outlook.com</a>
      </div>
      <div style={{ marginTop: 32, display: 'flex', gap: 24, justifyContent: 'center', color: 'rgba(255,255,255,0.45)', fontSize: 13, flexWrap: 'wrap' }}>
        <span>· Respondemos en menos de 24h</span>
        <span>· Primera reunión sin costo</span>
        <span>· NDA disponible</span>
      </div>
    </div>
  </section>
);

const TweaksPanelHome = ({ tweaks, setTweak }) => (
  <TweaksPanel title="Tweaks">
    <TweakSection title="Apariencia">
      <TweakSlider label="Tono del acento" value={tweaks.accentHueShift} onChange={(v)=>setTweak('accentHueShift',v)} min={-60} max={60} step={5} suffix="°" />
    </TweakSection>
    <TweakSection title="Demo">
      <TweakToggle label="Asistente IA en demo" value={tweaks.showAI} onChange={(v)=>setTweak('showAI',v)} />
    </TweakSection>
  </TweaksPanel>
);

const HomeApp = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS_HOME);
  useEffectH(() => {
    const root = document.documentElement;
    const shift = tweaks.accentHueShift || 0;
    if (shift === 0) {
      root.style.removeProperty('--grad'); root.style.removeProperty('--grad-soft');
    } else {
      const gH = 142 + shift, cH = 189 + shift;
      root.style.setProperty('--grad', `linear-gradient(135deg, hsl(${gH},71%,45%) 0%, hsl(${cH},94%,43%) 100%)`);
      root.style.setProperty('--grad-soft', `linear-gradient(135deg, hsla(${gH},71%,45%,0.12) 0%, hsla(${cH},94%,43%,0.12) 100%)`);
    }
  }, [tweaks.accentHueShift]);
  useEffectH(() => {
    const el = document.querySelector('.dash-ai');
    if (el) el.style.display = tweaks.showAI ? '' : 'none';
  }, [tweaks.showAI]);

  return (
    <>
      <SiteNav current="home" />
      <HomeHero />
      <Trust />
      <ROISection />
      <SolutionsRich />
      <HomeProducts />
      <Methodology />
      <DashPreview />
      <HowItWorks />
      <CasesPreview />
      <BigCTA />
      <SiteFooter />
      <TweaksPanelHome tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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