/* INDUSTRIAS — positioning page showing we understand each sector */
const { useState: useStateI, useEffect: useEffectI } = React;

const IndHero = () => (
  <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>Industrias</span></div>
      <h1>Conocemos tu industria. Ya resolvimos sus <span className="grad">problemas.</span></h1>
      <p className="lede">No llegamos a aprender cómo funciona tu negocio. Llegamos con soluciones probadas en tu sector.</p>
    </div>
  </section>
);

const IndustrySection = ({ ind }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
    <div>
      <span style={{ display: 'inline-block', padding: '6px 14px', borderRadius: 100, background: 'rgba(34,197,94,0.1)', color: '#22c55e', fontSize: 12, fontWeight: 600, marginBottom: 16 }}>
        {ind.badge}
      </span>
      <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 38px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 16px', lineHeight: 1.2 }}>
        {ind.headline.split(/(Cada|El|El|Vender)/).map((part, i) =>
      ['Cada', 'El', 'Vender'].includes(part) ? <span key={i} className="grad">{part}</span> : part
    )}
      </h2>
      <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, maxWidth: 680, marginBottom: 32 }}>
        {ind.intro}
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 32 }}>
        <div>
          <h3 style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Lo que está pasando en tu negocio</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {ind.pains.map((pain, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
                  <line x1="18" y1="6" x2="6" y2="18"/>
                  <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
                <span style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.5 }}>{pain}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <h3 style={{ fontSize: 14, fontWeight: 600, marginBottom: 16, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Lo que construimos para ti</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {ind.solutions.map((solution, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.5 }}>{solution}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="case-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: '24px', background: 'var(--bg-soft)', borderRadius: 12 }}>
        {ind.stats.map((stat, i) => (
          <div key={i} className="case-stat" style={{ textAlign: 'center' }}>
            <div className="v" style={{ fontSize: 24, fontWeight: 700, color: 'var(--fg)', marginBottom: 4 }}>{stat.v}</div>
            <div className="l" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{stat.l}</div>
          </div>
        ))}
      </div>
    </div>

    <div>
      <div className="svc-card" style={{ position: 'sticky', top: 20, padding: 32, borderRadius: 12, border: '1px solid var(--border)', background: 'var(--bg)', boxShadow: 'var(--shadow-md)' }}>
        <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>Resultado medido</h3>
        <p style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.6, marginBottom: 24 }}>
          Este caso es real. Los números son medidos y verificables.
        </p>
        <div style={{ padding: '20px', background: 'rgba(34,197,94,0.05)', borderRadius: 8, border: '1px solid rgba(34,197,94,0.15)', marginBottom: 24 }}>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 8 }}>Cliente</div>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>{ind.caseName}</div>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#22c55e' }}>{ind.icon}</svg>
        </div>
        <a href={ind.caseLink} className="btn btn-primary" style={{ width: '100%', textAlign: 'center' }}>Ver caso completo →</a>
      </div>
    </div>
  </div>
);

const industries = [
  {
    id: 'clinicas',
    badge: 'Clínicas y salud',
    headline: 'Cada cita perdida es dinero que no vuelve',
    intro: 'Las clínicas modernas no fallan por falta de pacientes. Fallan por sistemas desconectados que generan no-shows, expedientes duplicados y recepcionistas que pasan más tiempo coordinando que atendiendo.',
    pains: [
      'No-show promedio del 18% — cada cita vacía destruye margen',
      'Citas repartidas en papel, Excel y Calendly sin sincronización',
      'Médicos sin acceso al historial completo entre sucursales',
      'Recepcionistas haciendo trabajo manual que debería ser automático',
    ],
    solutions: [
      'Agenda unificada con recordatorios automáticos por WhatsApp 24h y 2h antes',
      'Expediente médico compartido en tiempo real entre todas las sucursales',
      'Dashboard ejecutivo con KPIs del día — desde el celular',
      'Confirmación y reagendamiento automático sin intervención humana',
    ],
    stats: [{ v: '−66%', l: 'No-show' }, { v: '+32%', l: 'Citas agendadas' }, { v: '8h/sem', l: 'Liberadas en recepción' }],
    caseLink: 'casos.html#clinicas',
    caseName: 'Clínica Noria — 3 sucursales, CDMX',
    icon: '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',
  },
  {
    id: 'restaurantes',
    badge: 'Restaurantes',
    headline: 'El 9% de merma no es mala suerte — es falta de datos',
    intro: 'Cuando el inventario vive en Excel y los reportes llegan con 5 días de retraso, las decisiones se toman a ciegas. La diferencia entre un restaurante rentable y uno que sobrevive está en la velocidad de la información.',
    pains: [
      'Mermas del 9% cuando la industria promedia 4% — diferencia pura de proceso',
      'Inventario en Excel por sucursal, sin visión consolidada',
      'Reportes de ventas que llegan el miércoles para la semana anterior',
      'Órdenes a proveedores basadas en intuición, no en datos',
    ],
    solutions: [
      'Inventario en tiempo real conectado al POS de cada sucursal',
      'Predicción de demanda con IA: clima + eventos locales + histórico propio',
      'Órdenes automáticas a proveedores cuando el stock baja del umbral',
      'Cierre semanal que se genera solo en 25 minutos',
    ],
    stats: [{ v: '−41%', l: 'Mermas' }, { v: '2.3×', l: 'Rotación de stock' }, { v: '6h → 25m', l: 'Cierre semanal' }],
    caseLink: 'casos.html#restaurantes',
    caseName: 'Sabor del Sur — 4 sucursales, Yucatán',
    icon: 'M2 22V12a10 10 0 0 1 20 0v10',
  },
  {
    id: 'empresas',
    badge: 'Empresas & operaciones',
    headline: 'Cuatro sistemas que no se hablan cuestan más que uno que sí lo hace',
    intro: 'HubSpot, SAP, Contpaqi, Zendesk — cada área vive en su silo. El cierre mensual se convierte en 8 días de cuadrar planillas a mano, y las decisiones llegan tarde porque los datos llegan tarde.',
    pains: [
      'Cierre mensual de 8 días cruzando datos entre sistemas manualmente',
      'Ventas, contabilidad, logística y soporte en silos sin comunicación',
      'Cobros sin facturar perdidos entre sistemas — dinero invisible',
      'El CFO toma decisiones con información de la semana pasada',
    ],
    solutions: [
      'Hub de integración central con sincronización bidireccional en tiempo real',
      'Dashboard ejecutivo unificado con KPIs de todas las áreas en una pantalla',
      'Reportes contables que se generan solos el día 1 de cada mes',
      'Alertas automáticas cuando los números entre sistemas no cuadran',
    ],
    stats: [{ v: '8 → 2 días', l: 'Cierre mensual' }, { v: '−68%', l: 'Tiempo en reportes' }, { v: '$180K', l: 'Cobros recuperados' }],
    caseLink: 'casos.html#empresas',
    caseName: 'Logística Andina — 120 empleados, LATAM',
    icon: 'M3 3v18h18M7 11h3v7H7zM12 7h3v11h-3z',
  },
  {
    id: 'retail',
    badge: 'Retail & E-commerce',
    headline: 'Vender algo que ya no tienes destruye más que no venderlo',
    intro: 'Cuando el inventario físico y el online no están sincronizados, cada sobre-venta es una queja, una devolución y un cliente que no vuelve. Con 12,000 SKUs, el pricing manual es simplemente imposible de sostener.',
    pains: [
      'Shopify y el POS físico con inventarios distintos — sobre-ventas constantes',
      'Pricing manual en miles de SKUs consume horas cada semana',
      'Cada devolución toma 30 minutos y frustra al equipo y al cliente',
      'Sin recomendaciones en checkout — ticket promedio estancado',
    ],
    solutions: [
      'Sincronización en vivo Shopify ↔ POS — un solo inventario, cero sobre-ventas',
      'Motor de pricing dinámico con reglas por canal, categoría y temporada',
      'Módulo de devoluciones en 1 minuto que convierte quejas en fidelización',
      'Recomendaciones IA en checkout basadas en historial del cliente',
    ],
    stats: [{ v: '0', l: 'Sobre-ventas' }, { v: '+14%', l: 'Ticket promedio' }, { v: '+22%', l: 'Conversión web' }],
    caseLink: 'casos.html#retail',
    caseName: 'Verde Retail — 2 tiendas + Shopify, 12K SKUs',
    icon: 'M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0',
  },
];

const IndApp = () => {
  const [active, setActive] = useStateI(0);

  const currentInd = industries[active];

  useEffectI(() => {
    const handleHash = () => {
      const hash = window.location.hash.replace('#', '');
      const index = industries.findIndex(ind => ind.id === hash);
      if (index !== -1) {
        setActive(index);
        setTimeout(() => {
          const section = document.querySelector('.section');
          if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
      }
    };
    handleHash();
    window.addEventListener('hashchange', handleHash);
    return () => window.removeEventListener('hashchange', handleHash);
  }, []);

  return (
    <>
      <SiteNav current="industrias" />
      <IndHero />

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

          {/* Tabs */}
          <div className="proc-tabs">
            {industries.map((ind, i) => (
              <button
                key={ind.id}
                className={`proc-tab ${active === i ? 'active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="proc-tab-num">{{clinicas:'Clínicas',restaurantes:'Restaurantes',empresas:'Empresas',retail:'Retail'}[ind.id]}</span>
                <span className="proc-tab-label">{ind.badge}</span>
              </button>
            ))}
          </div>

          {/* Content Window */}
          <div className="proc-window">
            <div className="proc-content">
              <IndustrySection ind={currentInd} />
            </div>
          </div>
        </div>
      </section>

      <section className="section section-soft">
        <div className="container" style={{ textAlign: 'center', maxWidth: 600 }}>
          <h2 style={{ fontSize: 'clamp(24px, 2.8vw, 32px)', fontWeight: 700, marginBottom: 16 }}>¿Tu industria no está aquí?</h2>
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, marginBottom: 32 }}>
            Trabajamos con más de 11 sectores. Si no ves el tuyo, igual podemos ayudarte — el problema de fondo suele ser el mismo.
          </p>
          <a href="contacto.html" className="btn btn-primary">Agendar demo →</a>
        </div>
      </section>

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

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