// ============================================
// SECTIONS 2 — Modules (bento), Growth Timeline, Excel Comparator, Product Carousel, Roles, Testimonials
// ============================================
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

// ---------- MODULES (bento grid) ----------
function Modules() {
  const [filter, setFilter] = useS2('todos');
  const [hover, setHover] = useS2(null);

  const mods = [
    { id: 'M01', n: 'Dashboard', d: 'KPIs en tiempo real y resumen ejecutivo', c: 'cyan', cat: 'activos', big: true },
    { id: 'M02', n: 'Activos Fijos', d: 'Inventario con foto, QR único, estados y responsables', c: 'lime', cat: 'activos' },
    { id: 'M03', n: 'Hoja de Vida', d: 'Historial completo de cada activo', c: 'amber', cat: 'activos' },
    { id: 'M04', n: 'Códigos QR', d: 'Identifica y rastrea con el celular', c: 'violet', cat: 'activos' },
    { id: 'M05', n: 'Exportar QR PDF', d: 'Imprime QR de activos seleccionados', c: 'cyan', cat: 'activos' },
    { id: 'M06', n: 'Carga Masiva Excel', d: 'Importa cientos de activos con plantilla', c: 'magenta', cat: 'activos', new: true },
    { id: 'M07', n: 'Asignaciones', d: 'Responsables y custodia', c: 'lime', cat: 'activos' },
    { id: 'M08', n: 'Baja de Activos', d: 'Retiro con motivo y trazabilidad', c: 'red', cat: 'activos' },
    { id: 'M09', n: 'Depreciación', d: '5 métodos: línea recta, saldo dec., suma dígitos y más', c: 'magenta', cat: 'dep', big: true },
    { id: 'M10', n: 'Proyección 5 Años', d: 'Valor futuro en libros', c: 'cyan', cat: 'dep' },
    { id: 'M11', n: 'Mantenimiento', d: 'Preventivo, correctivo y predictivo', c: 'amber', cat: 'mant' },
    { id: 'M12', n: 'Técnicos', d: 'Usuarios de rol técnico con mantenimientos asignados', c: 'cyan', cat: 'mant' },
    { id: 'M13', n: 'Consumibles', d: 'Papelería e insumos con trazabilidad total', c: 'lime', cat: 'cons', new: true, big: true },
    { id: 'M14', n: 'Asignar a Usuario', d: 'Con confirmación de recibido', c: 'amber', cat: 'cons', new: true },
    { id: 'M15', n: 'Historial Trazable', d: 'Saldo anterior → nuevo por cada consumo', c: 'violet', cat: 'cons', new: true },
    { id: 'M16', n: 'Reportes & PDF', d: '10 reportes con gráficas y exportación PDF', c: 'cyan', cat: 'rep' },
    { id: 'M17', n: 'Alertas Tiempo Real', d: 'Sonido + toast + badge. Polling cada 30s', c: 'magenta', cat: 'rep' },
    { id: 'M18', n: 'Auditoría', d: 'Trazabilidad completa de cada cambio', c: 'lime', cat: 'rep' },
  ];

  const filtered = filter === 'todos' ? mods : mods.filter(m => m.cat === filter);

  return (
    <section className="block" id="modulos">
      <div className="container">
        <div className="section-head-center reveal">
          <div className="eyebrow violet" style={{margin: '0 auto'}}><span className="dot"></span><span>MÓDULOS · 16 DISPONIBLES</span></div>
          <h2 className="section-h">Todo en <span className="glow">una plataforma</span></h2>
          <p className="section-sub" style={{margin: '0 auto'}}>
            Activa solo los módulos que necesitás. Crece cuando tu operación crece.
          </p>
        </div>

        <div className="mod-tabs reveal">
          {[
            { k: 'todos', l: 'Todos', n: mods.length },
            { k: 'activos', l: 'Activos', n: mods.filter(m => m.cat === 'activos').length },
            { k: 'dep', l: 'Depreciación', n: mods.filter(m => m.cat === 'dep').length },
            { k: 'mant', l: 'Mantenimiento', n: mods.filter(m => m.cat === 'mant').length },
            { k: 'cons', l: 'Consumibles', n: mods.filter(m => m.cat === 'cons').length },
            { k: 'rep', l: 'Reportes', n: mods.filter(m => m.cat === 'rep').length },
          ].map(t => (
            <button key={t.k} className={`mod-tab hover-target ${filter===t.k?'active':''}`} onClick={() => setFilter(t.k)}>
              {t.l} <span className="mono mod-tab-count">{t.n}</span>
            </button>
          ))}
        </div>

        <div className="mod-bento reveal">
          {filtered.map(m => (
            <div
              key={m.id}
              className={`mod-card hover-target ${m.big ? 'big' : ''}`}
              onMouseEnter={() => setHover(m.id)}
              onMouseLeave={() => setHover(null)}
              style={{'--c': `var(--${m.c})`}}
            >
              <div className="mod-card-head">
                <span className="mono mod-card-id">{m.id}</span>
                {m.new && <span className="mod-card-new mono">NUEVO</span>}
              </div>
              <div className="mod-card-icon">
                <ModIcon name={m.n}/>
              </div>
              <div className="mod-card-name">{m.n}</div>
              <div className="mod-card-desc">{m.d}</div>
              <div className="mod-card-arrow">→</div>
              <div className="mod-card-glow"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModIcon({name}) {
  const icons = {
    'Dashboard': 'M4 20V10M10 20V4M16 20v-8M22 20v-4',
    'Activos Fijos': 'M4 8l8-4 8 4v10l-8 4-8-4V8zM4 8l8 4M12 12v10M20 8l-8 4',
    'Depreciación': 'M4 18l5-5 4 4 7-9M20 8h-5M20 8v5',
    'Mantenimiento': 'M14 6l4 4-12 12H2v-4L14 6zM14 6l2-2 4 4-2 2',
    'Códigos QR': 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h3v3h-3zM18 18h3M14 21v-3',
    'Asignaciones': 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-2a6 6 0 0116 0v2',
    'Reportes': 'M8 4h8l4 4v12a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2zM8 13h8M8 17h6M8 9h4',
    'Alertas': 'M12 3a6 6 0 00-6 6v5l-2 3h16l-2-3V9a6 6 0 00-6-6zM10 20a2 2 0 004 0',
    'Hoja de Vida': 'M12 21a9 9 0 100-18 9 9 0 000 18zM12 7v5l3 3',
    'Exportar QR PDF': 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h3v3h-3zM18 18h3M14 21v-3',
    'Carga Masiva Excel': 'M12 3v13M8 11l4 4 4-4M4 19h16v2H4z',
    'Baja de Activos': 'M4 8h16l-2 12H6L4 8zM9 8V5a2 2 0 012-2h2a2 2 0 012 2v3M10 12v5M14 12v5',
    'Proyección 5 Años': 'M4 18l4-5 4 3 6-9M20 7h-4M20 7v4',
    'Técnicos': 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-2a6 6 0 0116 0v2M16 8l4-2M16 8l3 3',
    'Consumibles': 'M6 7h12l-1 13H7L6 7zM9 7V5a3 3 0 016 0v2',
    'Asignar a Usuario': 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-1a6 6 0 0110 0M17 18l3 3 3-5',
    'Historial Trazable': 'M12 3a9 9 0 109 9h-2M12 3V1M12 3l-3 3M12 8v4l3 2',
    'Alertas Tiempo Real': 'M12 3a6 6 0 00-6 6v5l-2 3h16l-2-3V9a6 6 0 00-6-6zM10 20a2 2 0 004 0',
    'Auditoría': 'M12 5c-5 0-9 7-9 7s4 7 9 7 9-7 9-7-4-7-9-7zM12 12a3 3 0 100-6 3 3 0 000 6z',
  };
  const d = icons[name] || 'M4 4h16v16H4z';
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d={d}/>
    </svg>
  );
}

// ---------- GROWTH TIMELINE ----------
function GrowthTimeline() {
  const [year, setYear] = useS2(1);
  const milestones = [
    { y: 1, t: 'Mes 1', assets: 120, val: 2.1, event: 'Carga masiva Excel inicial' },
    { y: 2, t: 'Mes 3', assets: 180, val: 3.4, event: 'QR desplegados en todas las sedes' },
    { y: 3, t: 'Mes 6', assets: 260, val: 4.8, event: 'Mantenimientos preventivos activados' },
    { y: 4, t: 'Mes 12', assets: 420, val: 7.2, event: 'Consumibles con trazabilidad total' },
    { y: 5, t: 'Año 2', assets: 680, val: 11.5, event: 'Expansión a 5 sedes' },
  ];

  useE2(() => {
    const id = setInterval(() => {
      setYear(y => (y % milestones.length) + 1);
    }, 2600);
    return () => clearInterval(id);
  }, []);

  const current = milestones[year-1];

  return (
    <section className="block" id="crecimiento">
      <div className="container">
        <div className="section-head reveal" style={{textAlign: 'center', margin: '0 auto 60px', maxWidth: 720}}>
          <div className="eyebrow amber" style={{margin: '0 auto'}}><span className="dot"></span><span>CRECIMIENTO · TIMELINE</span></div>
          <h2 className="section-h">Tu inventario <span className="glow">crece</span>, el sistema escala</h2>
          <p className="section-sub" style={{margin: '0 auto'}}>
            Desde 100 activos hasta miles. Un cliente real visto a lo largo de 2 años.
          </p>
        </div>

        <div className="timeline-wrap reveal">
          <div className="timeline-track">
            {milestones.map((m, i) => (
              <button
                key={m.y}
                className={`timeline-node hover-target ${year === m.y ? 'active' : ''} ${year > m.y ? 'passed' : ''}`}
                onClick={() => setYear(m.y)}
                style={{left: `${(i / (milestones.length-1)) * 100}%`}}
              >
                <div className="timeline-dot"></div>
                <div className="timeline-label mono">{m.t}</div>
              </button>
            ))}
            <div className="timeline-line">
              <div className="timeline-line-fill" style={{width: `${((year-1) / (milestones.length-1)) * 100}%`}}></div>
            </div>
          </div>

          <div className="timeline-readout">
            <div className="tl-read-kpi">
              <div className="mono" style={{color: 'var(--ink-3)', fontSize: 10, letterSpacing: '0.1em'}}>ACTIVOS GESTIONADOS</div>
              <div className="tl-read-v text-cyan"><CountUp2 value={current.assets}/></div>
            </div>
            <div className="tl-read-kpi">
              <div className="mono" style={{color: 'var(--ink-3)', fontSize: 10, letterSpacing: '0.1em'}}>VALOR EN LIBROS (COP)</div>
              <div className="tl-read-v text-amber">$<CountUp2 value={current.val*10} decimals/>B</div>
            </div>
            <div className="tl-read-kpi">
              <div className="mono" style={{color: 'var(--ink-3)', fontSize: 10, letterSpacing: '0.1em'}}>HITO</div>
              <div className="tl-read-v text-lime" style={{fontSize: 16}}>{current.event}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CountUp2({ value, decimals }) {
  const [d, setD] = useS2(value);
  const prev = useR2(value);
  useE2(() => {
    const s = prev.current, diff = value - s, dur = 800, t0 = performance.now();
    let raf;
    const tick = t => {
      const p = Math.min(1, (t - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setD(s + diff * e);
      if (p < 1) raf = requestAnimationFrame(tick);
      else prev.current = value;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <span>{decimals ? (d/10).toFixed(1) : Math.round(d).toLocaleString('es-CO')}</span>;
}

// ---------- EXCEL vs MI ACTIVO 360 COMPARATOR ----------
function Comparator() {
  const [pos, setPos] = useS2(50);
  const dragging = useR2(false);

  useE2(() => {
    const onMove = e => {
      if (!dragging.current) return;
      const el = document.querySelector('.cmp-stage');
      if (!el) return;
      const r = el.getBoundingClientRect();
      const x = (e.clientX || e.touches?.[0]?.clientX) - r.left;
      setPos(Math.max(0, Math.min(100, (x / r.width) * 100)));
    };
    const onUp = () => { dragging.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <section className="block" id="comparador">
      <div className="container">
        <div className="section-head reveal" style={{textAlign: 'center', maxWidth: 720, margin: '0 auto 50px'}}>
          <div className="eyebrow magenta" style={{margin: '0 auto'}}><span className="dot"></span><span>ANTES / DESPUÉS</span></div>
          <h2 className="section-h">Arrastrá para ver <span className="glow">la diferencia</span></h2>
          <p className="section-sub" style={{margin: '0 auto'}}>
            A la izquierda: planilla de Excel típica. A la derecha: Mi Activo 360.
          </p>
        </div>

        <div className="cmp-stage reveal" onMouseDown={() => dragging.current = true} onTouchStart={() => dragging.current = true}>
          {/* Right side — full */}
          <div className="cmp-side cmp-after">
            <div className="cmp-label mono"><span className="text-cyan">●</span> MI ACTIVO 360</div>
            <AfterView/>
          </div>
          {/* Left overlay — excel */}
          <div className="cmp-side cmp-before" style={{clipPath: `inset(0 ${100-pos}% 0 0)`}}>
            <div className="cmp-label mono"><span style={{color:'var(--red)'}}>●</span> EXCEL / MANUAL</div>
            <BeforeView/>
          </div>
          {/* Handle */}
          <div className="cmp-handle" style={{left: `${pos}%`}}>
            <div className="cmp-handle-line"></div>
            <div className="cmp-handle-knob hover-target">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M8 6l-4 6 4 6M16 6l4 6-4 6"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BeforeView() {
  return (
    <div className="cmp-before-body">
      <div className="excel-bar">
        <span className="mono" style={{color:'#999'}}>Archivo Edición Ver Formato Datos Ayuda</span>
      </div>
      <div className="excel-toolbar">
        <span>Calibri 11</span><span>B I U</span><span>$</span><span>%</span>
      </div>
      <div className="excel-grid">
        <div className="excel-header">
          {['A: ID', 'B: Activo', 'C: Sede', 'D: Costo', 'E: Año', 'F: Dep.'].map(h => <div key={h}>{h}</div>)}
        </div>
        {[
          ['ACT-001', 'Servidor Dell', '???', '$380,000,000', '2021', '=?'],
          ['ACT-002', 'Planta Eléctrica', 'sede ppal', '$1.200.000.000', '2022', '=B2*0.1'],
          ['ACT-003', 'Montacargas', 'bodega', '$220000000', '2020', '#ERROR'],
          ['act004', 'Compresor', 'Bodega', '$45,000,000 ', '2023', ''],
          ['ACT-005', '', 'N/A', '?', '?', '?'],
          ['', 'Impresora HP', 'oficina', '$18M', '2024', ''],
          ['ACT-007', 'Montacargas', 'Bogotá', '$95,000,000', '2019', '=B7*15%'],
        ].map((row, i) => (
          <div className="excel-row" key={i}>
            {row.map((c, j) => <div key={j} className={c.includes?.('ERROR') ? 'err' : ''}>{c}</div>)}
          </div>
        ))}
      </div>
      <div className="excel-alerts">
        <div>⚠ Fórmula inconsistente en F3</div>
        <div>⚠ Formato de fecha no válido</div>
        <div>⚠ Duplicado en columna A</div>
      </div>
    </div>
  );
}

function AfterView() {
  return (
    <div className="cmp-after-body">
      <div className="after-top">
        <div className="mono" style={{fontSize: 11, color: 'var(--cyan)'}}>ACTIVOS FIJOS · LIVE</div>
        <div className="mono" style={{fontSize: 10, color: 'var(--lime)'}}>● SINCRONIZADO</div>
      </div>
      <div className="after-stats">
        {[
          {l:'Total', v:'248', c:'cyan'},
          {l:'Valor', v:'$4.2B', c:'lime'},
          {l:'Dep/mes', v:'$12.4M', c:'magenta'},
          {l:'Mant.', v:'12', c:'amber'},
        ].map(s => (
          <div key={s.l} className="after-stat">
            <div className="mono" style={{fontSize: 9, color:'var(--ink-3)', letterSpacing:'0.1em'}}>{s.l.toUpperCase()}</div>
            <div className={`text-${s.c}`} style={{fontSize: 22, fontFamily: 'var(--display)', fontWeight: 600, marginTop: 2}}>{s.v}</div>
          </div>
        ))}
      </div>
      <div className="after-table">
        {[
          {id:'ACT-2021-048', n:'Servidor Dell R-740', s:'Data Center', v:'$380M', st:'lime'},
          {id:'ACT-2022-012', n:'Planta Eléctrica 250kVA', s:'Sede Principal', v:'$1.2B', st:'cyan'},
          {id:'ACT-2020-033', n:'Montacargas Toyota', s:'Bodega Norte', v:'$220M', st:'amber'},
          {id:'ACT-2023-007', n:'Compresor Atlas', s:'Taller', v:'$45M', st:'lime'},
          {id:'ACT-2024-091', n:'Impresora HP LaserJet', s:'Oficina 3', v:'$18M', st:'lime'},
          {id:'ACT-2019-122', n:'UPS Schneider 10kVA', s:'Bogotá', v:'$95M', st:'lime'},
        ].map((r, i) => (
          <div className="after-row" key={r.id} style={{animationDelay: `${i*0.06}s`}}>
            <span className="mono text-cyan">{r.id}</span>
            <span style={{color:'var(--ink-0)'}}>{r.n}</span>
            <span style={{color:'var(--ink-2)', fontSize:11}}>{r.s}</span>
            <span className="mono" style={{color:'var(--ink-1)'}}>{r.v}</span>
            <span className={`text-${r.st}`}>●</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- ROLES ----------
function Roles() {
  const roles = [
    { n: 'Administrador', d: 'Control total, consumibles, usuarios y configuración', c: 'cyan' },
    { n: 'Contador', d: 'Ver activos, procesar depreciación mensual y reportes', c: 'magenta' },
    { n: 'Técnico', d: 'Crear y gestionar mantenimientos, reportar novedades QR', c: 'amber' },
    { n: 'Auditor', d: 'Solo lectura, trazabilidad completa y auditoría', c: 'violet' },
    { n: 'Usuario', d: 'Ve sus activos asignados, confirma recibido y reporta consumo', c: 'lime' },

  ];
  return (
    <section className="block" id="roles">
      <div className="container">
        <div className="roles-wrap">
          <div className="reveal">
            <div className="eyebrow lime"><span className="dot"></span><span>ROLES · PERMISOS GRANULARES</span></div>
            <h2 className="section-h">Un rol para <span className="glow">cada persona</span></h2>
            <p className="section-sub">Cada usuario ve y hace exactamente lo que necesita. Sin excepciones.</p>
            <a className="btn btn-ghost" style={{marginTop: 24}} href="https://wa.me/573017287922?text=Estoy%20interesado%20en%20Mi%20Activo%20360...">
              Solicitar demo →
            </a>
          </div>
          <div className="roles-grid reveal-stagger reveal">
            {roles.map(r => (
              <div key={r.n} className="role-card hover-target" style={{'--c': `var(--${r.c})`}}>
                <div className="role-av">
                  <RoleIcon name={r.n}/>
                </div>
                <div className="role-name">{r.n}</div>
                <div className="role-desc">{r.d}</div>
                <div className="role-access mono">
                  {['Dashboard', 'Activos', 'Reportes', 'Config.'].map(a => (
                    <span key={a} className={Math.random() > 0.3 ? 'on' : 'off'}>●</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RoleIcon({name}) {
  const icons = {
    'Administrador': 'M12 4l-8 4v4c0 5 3 9 8 10 5-1 8-5 8-10V8l-8-4z',
    'Contador': 'M4 6h16v12H4zM8 10h4M8 14h8',
    'Técnico': 'M14 6l4 4-12 12H2v-4L14 6z',
    'Operador': 'M3 17h13l2-6h3l1 3v4M6 17v2M16 17v2',
    'Auditor': 'M12 5c-5 0-9 7-9 7s4 7 9 7 9-7 9-7-4-7-9-7zM12 12a3 3 0 100-6 3 3 0 000 6z',
    'Usuario': 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0',
  };
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d={icons[name] || icons['Usuario']}/>
    </svg>
  );
}

// ---------- TESTIMONIALS ----------
function Testimonials() {
  const items = [
    { t: 'Pasamos de 600 activos en Excel a tenerlos todos en Mi Activo 360 en menos de una semana. La depreciación automática nos ahorra 3 días de trabajo al mes.', n: 'Carlos Mendoza', r: 'Gerente Financiero', co: 'Holding Andina', c: 'cyan' },
    { t: 'El módulo de consumibles cambió todo. Ahora cada usuario confirma lo que recibe y vemos el historial completo con saldos.', n: 'Andrea Pizano', r: 'Coord. Administrativa', co: 'HMV Ingeniería', c: 'amber' },
    { t: 'El QR desde el celular es increíble. Los técnicos reportan novedades en campo con foto y queda en la hoja de vida del equipo.', n: 'Juan Ríos', r: 'Director de Operaciones', co: 'Equirent S.A.', c: 'magenta' },
  ];
  return (
    <section className="block" id="testimonios">
      <div className="container">
        <div className="section-head-center reveal">
          <div className="eyebrow lime" style={{margin: '0 auto'}}><span className="dot"></span><span>TESTIMONIOS · 4.9★</span></div>
          <h2 className="section-h">Lo que dicen <span className="glow">los clientes</span></h2>
        </div>
        <div className="test-grid reveal-stagger reveal">
          {items.map((t, i) => (
            <div key={i} className="test-card hover-target" style={{'--c': `var(--${t.c})`}}>
              <div className="test-stars">★★★★★</div>
              <div className="test-text">"{t.t}"</div>
              <div className="test-author">
                <div className="test-av mono">{t.n.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                <div>
                  <div style={{color:'var(--ink-0)', fontSize: 13, fontWeight: 600}}>{t.n}</div>
                  <div className="mono" style={{fontSize: 10, color: 'var(--ink-3)', letterSpacing:'0.05em'}}>{t.r} · {t.co}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Modules = Modules;
window.GrowthTimeline = GrowthTimeline;
window.Comparator = Comparator;
window.Roles = Roles;
window.Testimonials = Testimonials;