// pages.jsx — all subpages

// ============ EMPRESA ============
function Empresa({ go }) {
  useLucide();
  return (
    <>
      <PageHero go={go} bc={[{label:'Empresa'}]} title="Soluciones operacionales para minería e industria" subtitle="En Performance Technologíes desarrollamos soluciones técnicas especializadas para operaciones mineras, con foco en continuidad operacional, seguridad y eficiencia en terreno." />
      <section className="section white">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start'}}>
            <Reveal>
              <div className="eyebrow">Pilares</div>
              <h2 className="section-title" style={{marginTop:18}}>Continuidad operacional para la gran minería</h2>
              <p className="section-lead">Desarrollamos soluciones técnicas especializadas para operaciones mineras e industriales, integrando seguridad, control operativo y continuidad operacional en cada intervención.</p>
            </Reveal>
            <Reveal delay={2}>
              <div className="values">
                {[['01','Liderazgo','Formación en seguridad, comunicación y modelo operativo.'],['02','Estructura','Organización y roles claros para cada intervención.'],['03','Sistema','Procedimientos, estandarización y control.'],['04','Proceso','Monitoreo de condiciones y continuidad operativa.']].map(([n,t,d],i)=>(
                  <div key={i} className="val"><div className="val-n">{n}</div><h4 className="val-t">{t}</h4><p className="val-d">{d}</p></div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
      <section className="stats"><div className="stats-inner">
        <div className="stat"><div className="stat-num">52</div><div className="stat-lbl">Dotación permanente</div></div>
        <div className="stat"><div className="stat-num">+15<span className="u">años</span></div><div className="stat-lbl">En gran minería</div></div>
        <div className="stat"><div className="stat-num">5</div><div className="stat-lbl">Contratos base activos</div></div>
        <div className="stat"><div className="stat-num">6</div><div className="stat-lbl">Operaciones eventuales</div></div>
      </div></section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Presencia operativa</div><h2 className="section-title">Experiencias y servicios eventuales</h2><p className="section-lead">Experiencia declarada en operaciones de cobre del norte de Chile. Referencias sujetas a validación editorial.</p></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>Contratos base</div>
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {['Anglo · Los Bronces','Anglo · Tórtolas','Cenizas · Franke','Cenizas · POX','Cenizas · Las Luces'].map(n=>(
                  <li key={n} style={{padding:'14px 0', borderBottom:'1px solid var(--pt-stone-100)', display:'flex', alignItems:'center', gap:12}}><i data-lucide="map-pin" style={{width:16, height:16, color:'var(--pt-copper)'}}></i><span style={{fontSize:15, fontWeight:500}}>{n}</span></li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>Servicios eventuales y asesorías</div>
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {['RT · DCH','Antucoya','Fluor · Salfa Centinela','Pucobre','Desarrollo de equipos'].map(n=>(
                  <li key={n} style={{padding:'14px 0', borderBottom:'1px solid var(--pt-stone-100)', display:'flex', alignItems:'center', gap:12}}><i data-lucide="circle-dot" style={{width:16, height:16, color:'var(--pt-copper)'}}></i><span style={{fontSize:15, fontWeight:500}}>{n}</span></li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </section>
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Escuela de Vulca</div><h2 className="section-title">Conocimiento transmitido, no improvisado</h2><p className="section-lead">Programa interno donde expertos transmiten know-how en diseño, operación, mantenimiento y solución de problemas en correas transportadoras.</p></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
            {[['graduation-cap','Formación técnica','Diseño, operación y mantenimiento de correas transportadoras.'],['hand-helping','Ergonomía y herramientas','Prácticas ergonómicas y uso de herramientas especializadas.'],['trending-up','Resultados operativos','Mayor eficiencia, menor tiempo de inactividad y disponibilidad.']].map(([ico,t,d],i)=>(
              <div key={i} style={{padding:'32px 28px', border:'1px solid var(--pt-stone-100)', background:'var(--pt-bone)'}}>
                <div style={{width:44, height:44, color:'var(--pt-copper)', marginBottom:18}}><i data-lucide={ico}></i></div>
                <h4 style={{fontSize:16, fontWeight:500, textTransform:'uppercase', letterSpacing:'.04em', margin:'0 0 10px'}}>{t}</h4>
                <p style={{fontSize:14, fontWeight:300, lineHeight:1.6, color:'var(--pt-stone-500)', margin:0}}>{d}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <section className="section white" style={{paddingTop:48, paddingBottom:48}}>
        <div className="wrap">
          <Reveal className="section-hdr" style={{marginBottom:24}}><div className="eyebrow">Conviccion</div><h2 className="section-title" style={{fontSize:28}}>Clientes que confían en nosotros</h2></Reveal>
          <div className="clients-marquee">
            <div className="clients-track">
              {[...Array(2)].flatMap((_,k)=>[
                ['teck-qb2','Teck · QB2'],
                ['candelaria','Candelaria'],
                ['collahuasi','Collahuasi'],
                ['antamina','Antamina'],
                ['sierra-gorda','Sierra Gorda SCM'],
                ['mantos-blancos','Capstone Copper · Mantos Blancos'],
                ['cerro-verde','Cerro Verde'],
              ].map(([slug,alt])=>(
                <img key={`${k}-${slug}`} src={`assets/clients/${slug}.png`} alt={alt} loading="lazy" />
              )))}
            </div>
          </div>
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Valores</div><h2 className="section-title">Lo que nos guía en cada operación</h2><p className="section-lead">Principios que orientan nuestra forma de trabajar con clientes, equipos y comunidades.</p></Reveal>
          <Reveal>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0, border:'1px solid var(--pt-stone-100)', background:'var(--pt-bone)'}}>
            {[
              ['01','shield-alert','Cuidado por las personas','Las personas son el corazón de cada operación y servicio. Garantizamos ante todo el bienestar.'],
              ['02','clipboard-check','Excelencia técnica','Operamos con alta rigurosidad, experiencia y estándares en cada actividad.'],
              ['03','lightbulb','Innovación','Incorporamos nuevas tecnologías a nuestros procesos para lograr la excelencia operacional.'],
              ['04','users','Trabajo en equipo','Colaboración entre personas, especialidades y cliente para lograr mejores resultados.'],
              ['05','refresh-cw','Mejora continua','Evaluamos, aprendemos y optimizamos constantemente nuestra forma de operar.'],
              ['06','handshake','Compromiso','Nos involucramos con cada proyecto, aportando siempre valor real.'],
            ].map(([n,ico,t,d],i)=>(
              <div key={i} style={{padding:'36px 32px', borderRight:(i%3!==2)?'1px solid var(--pt-stone-100)':'none', borderBottom:(i<3)?'1px solid var(--pt-stone-100)':'none', display:'flex', flexDirection:'column', gap:14}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                  <div style={{fontSize:12, fontWeight:500, letterSpacing:'.12em', color:'var(--pt-stone-500)'}}>VALOR {n}</div>
                  <div style={{width:32, height:32, color:'var(--pt-copper)'}}><i data-lucide={ico}></i></div>
                </div>
                <h4 style={{fontSize:20, fontWeight:600, textTransform:'uppercase', letterSpacing:'.02em', margin:'4px 0 0', lineHeight:1.2}}>{t}</h4>
                <p style={{fontSize:14, fontWeight:300, lineHeight:1.6, color:'var(--pt-stone-500)', margin:0}}>{d}</p>
              </div>
            ))}
          </div>
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ SERVICIOS HUB ============
function ServiciosHub({ go }) {
  const [servicios, setServicios] = React.useState(null);
  const [page, setPage] = React.useState(0);
  const [expanded, setExpanded] = React.useState(false);
  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) { setServicios([]); return; }
    supa.from('equipos')
      .select('*')
      .eq('disponible', true)
      .eq('categoria', 'servicio')
      .order('orden', { ascending: true })
      .order('created_at', { ascending: true })
      .then(({ data }) => setServicios(data || []));
  }, []);
  const total = servicios?.length || 0;
  const pages = total > 3 ? total : 1;
  React.useEffect(() => {
    if (expanded || total <= 3) return;
    const t = setInterval(() => setPage(p => (p + 1) % pages), 6000);
    return () => clearInterval(t);
  }, [expanded, total, pages]);
  const visible = expanded
    ? (servicios || [])
    : total <= 3
      ? (servicios || [])
      : [servicios[page % total], servicios[(page + 1) % total], servicios[(page + 2) % total]];
  useLucide('hub_' + (servicios ? servicios.length : 'l') + '_' + page + '_' + expanded);
  const renderCard = (s, idx) => {
    const highlight = !expanded && idx === 1;
    const imgs = [
      s.imagen_url,
      ...((Array.isArray(s.imagenes) ? s.imagenes : []).map(g => g && g.url).filter(Boolean)),
    ].filter(Boolean);
    return (
      <div key={s.id} className={`line-card svc-card-img ${highlight ? 'highlight' : ''}`} onClick={() => go('ficha-equipo', { id: s.id, from: 'servicios' })}>
        <div className="svc-card-img-wrap">
          {imgs.length > 0
            ? <RotatingImage images={imgs} alt={s.nombre} staggerKey={idx} />
            : <div className="svc-card-img-ph"><i data-lucide="image"></i></div>}
        </div>
        <div className="line-num">Servicio</div>
        <h3 className="line-title">{s.nombre}</h3>
        <p className="line-body">{s.descripcion_corta || s.descripcion_larga || ''}</p>
        <span className="line-cta">Ver ficha <i data-lucide="arrow-right"></i></span>
      </div>
    );
  };
  return (
    <>
      <PageHero go={go} bc={[{label:'Servicios'}]} title="Soluciones Integrales para Correas Transportadoras" subtitle="Servicios especializados en mantenimiento, confiabilidad, inspección y suministro operacional de sistemas de correas transportadoras." />
      <section className="section white">
        <div className="wrap">
          {servicios === null ? (
            <div style={{minHeight:320}}></div>
          ) : total === 0 ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>No hay servicios disponibles por ahora.</p>
          ) : (
            <>
              <div
                key={expanded ? 'all' : 'p' + page}
                className="lines svc-carousel-anim"
                style={expanded
                  ? {gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:24, border:'none'}
                  : {gridTemplateColumns:'repeat(3, 1fr)', gap:32, border:'none'}}
              >
                {visible.map((s, i) => renderCard(s, i))}
              </div>
              <div style={{display:'flex', justifyContent:'center', marginTop:32}}>
                <button type="button" className="btn ghost" onClick={() => setExpanded(e => !e)}>
                  {expanded ? 'Ver menos' : `Ver más servicios${total > 0 ? ` (${total})` : ''}`} <i data-lucide={expanded ? 'chevron-up' : 'chevron-down'}></i>
                </button>
              </div>
            </>
          )}
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Servicios priorizados</div><h2 className="section-title">Ingeniería, Inspección y Confiabilidad</h2></Reveal>
          <Reveal className="svc-grid">
            {[
              ['shield-check','Inspecciones programadas'],
              ['repeat','Cambios y empalmes'],
              ['wrench','Reparación de daños'],
              ['radio','Inspección radiográfica'],
              ['gauge','Medición de espesores'],
              ['audio-waveform','Ultrasonido aplicado'],
              ['thermometer','Inspección termográfica'],
              ['activity','Monitoreo y seguimiento'],
            ].map(([ico, name], i) => (
              <div key={i} className="svc-card" onClick={() => go('servicio-detalle')}>
                <div className="svc-ico"><i data-lucide={ico}></i></div>
                <h3 className="svc-name">{name}</h3>
                <p className="svc-desc">Metodología de siete etapas, reportabilidad y respaldo técnico.</p>
                <div className="svc-more">Ver detalle <i data-lucide="arrow-right"></i></div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ MANTENIMIENTO HUB ============
function Mantenimiento({ go }) {
  useLucide();
  return (
    <>
      <PageHero go={go} bc={[{label:'Servicios', go:'servicios'},{label:'Mantenimiento de correas'}]} title="Mantenimiento de correas transportadoras" subtitle="Inspección, intervención, reparación y evaluación técnica de correas. Diagnóstico, control, metodología, reportabilidad y seguimiento." />
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Qué resuelve esta línea</div><h2 className="section-title">Continuidad sobre correas críticas</h2></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
            {[['alert-triangle','Detenciones no programadas','Planificación y metodología reducen eventos imprevistos y su impacto.'],['trending-down','Desgaste sin monitoreo','Medición, ultrasonido y visión 3D cuantifican el estado real de la correa.'],['link','Empalmes fuera de estándar','Empalmes ST y EP ejecutados con control dimensional, alineación y tensión.'],['eye-off','Falta de visibilidad','Reportabilidad técnica con dashboards e informes post-mantención.'],['calendar','Cambios planificados','Cambios de correa con metodología de siete etapas, desde evaluación a cierre.'],['refresh-ccw','Pérdida de vida útil','Recomendaciones individuales y seguimiento para extender vida útil.']].map(([ico,t,d],i)=>(
              <div key={i} style={{padding:'28px 24px', border:'1px solid var(--pt-stone-100)', background:'#fff', transition:'transform .3s, box-shadow .3s', cursor:'pointer'}} className="svc-card">
                <div className="svc-ico"><i data-lucide={ico}></i></div>
                <h4 className="svc-name">{t}</h4>
                <p className="svc-desc">{d}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Servicios incluidos</div><h2 className="section-title">Servicios con página técnica</h2></Reveal>
          <Reveal className="svc-grid">
            {[['shield-check','Inspecciones programadas','Preventivas y planificadas con checklist y reporte.'],['repeat','Cambios y empalmes','ST y EP con control dimensional, alineación y tensión.'],['wrench','Reparación de daños','Reparación vulcanizada en caliente y polímeros.'],['radio','Inspección radiográfica','Rayos-X para empalmes y correas con cable de acero.'],['gauge','Medición de espesores','Evaluación de desgaste en cubiertas y refuerzos.']].map(([ico, t, d],i)=>(
              <div key={i} className="svc-card" onClick={() => go('servicio-detalle')}>
                <div className="svc-ico"><i data-lucide={ico}></i></div>
                <h3 className="svc-name">{t}</h3>
                <p className="svc-desc">{d}</p>
                <div className="svc-more">Ver detalle <i data-lucide="arrow-right"></i></div>
              </div>
            ))}
          </Reveal>
          <Reveal style={{marginTop:32}}>
            <div className="eyebrow" style={{marginBottom:16}}>Capacidades complementarias</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, borderTop:'1px solid var(--pt-stone-200)'}}>
              {['Protección de correas con polímeros','Reparaciones vulcanizadas en caliente','Variantes de reparación según daño','Medidor de dureza (diagnóstico)','Software como soporte','Asesoramiento técnico'].map(x=>(
                <div key={x} style={{padding:'14px 0', borderBottom:'1px solid var(--pt-stone-100)', fontSize:14, fontWeight:300, color:'var(--pt-stone-600)'}}>· {x}</div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ TÉCNICOS HUB ============
function Tecnicos({ go }) {
  const [servicios, setServicios] = React.useState(null);
  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) { setServicios([]); return; }
    supa.from('equipos')
      .select('*')
      .eq('disponible', true)
      .eq('categoria', 'servicio')
      .order('orden', { ascending: true })
      .order('created_at', { ascending: true })
      .then(({ data }) => setServicios(data || []));
  }, []);
  const fallback = [
    {id:'_f1', nombre:'Ultrasonido aplicado', descripcion_corta:'Control de espesor de caucho, capas de refuerzo, revestimientos, estructuras, mantos de poleas y piping.', _ico:'audio-waveform'},
    {id:'_f2', nombre:'Inspección termográfica', descripcion_corta:'Mantenimiento predictivo y preventivo. Identificación temprana de anomalías térmicas antes de falla.', _ico:'thermometer'},
    {id:'_f3', nombre:'Monitoreo y seguimiento', descripcion_corta:'Visión artificial 3D 24/7 remoto. Cuantificación de desgaste, ancho, largo, desalineamiento y rajaduras.', _ico:'activity'},
  ];
  const items = (servicios && servicios.length > 0) ? servicios : fallback;
  const cols = Math.min(3, Math.max(1, items.length));
  useLucide('tec_' + items.length);
  return (
    <>
      <PageHero go={go} bc={[{label:'Servicios', go:'servicios'},{label:'Servicios técnicos especializados'}]} title="Servicios técnicos especializados" subtitle="Diagnosticamos, monitoreamos y anticipamos fallas con tecnología aplicada. Termografía, ultrasonido, radiografía y visión 3D con dashboard de reportabilidad." />
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Capacidades</div><h2 className="section-title">{items.length === 1 ? 'Servicio con página técnica completa' : `${items.length} servicios con página técnica completa`}</h2></Reveal>
          {servicios === null ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Cargando servicios…</p>
          ) : (
            <div className="svc-grid" style={{gridTemplateColumns:`repeat(${cols}, minmax(260px, 380px))`, justifyContent: cols < 3 ? 'center' : 'start'}}>
              {items.map((s) => {
                const isDb = !s._ico;
                const ico = s._ico || 'activity';
                const onClick = isDb ? () => go('ficha-equipo', { id: s.id }) : () => go('servicio-detalle');
                return (
                  <div key={s.id} className="svc-card" onClick={onClick} style={{minHeight:280}}>
                    {isDb && s.imagen_url
                      ? <div className="svc-ico" style={{width:48, height:48, overflow:'hidden', borderRadius:6}}><img src={s.imagen_url} alt={s.nombre} style={{width:'100%', height:'100%', objectFit:'cover'}} /></div>
                      : <div className="svc-ico"><i data-lucide={ico}></i></div>}
                    <h3 className="svc-name">{s.nombre}</h3>
                    <p className="svc-desc">{s.descripcion_corta || '—'}</p>
                    <div className="svc-more">Ver detalle <i data-lucide="arrow-right"></i></div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Tecnologías complementarias</div><h2 className="section-title">Capacidades de innovación aplicada</h2></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}}>
            {[['box','Inmersión minera y levantamiento 3D'],['camera','Matterport · MatterPak'],['crosshair','Láser de diagnóstico'],['headset','Asesoramiento técnico']].map(([ico,t],i)=>(
              <div key={i} style={{padding:'24px', border:'1px solid var(--pt-stone-100)', background:'#fff'}}>
                <div style={{width:36, height:36, color:'var(--pt-copper)', marginBottom:14}}><i data-lucide={ico}></i></div>
                <div style={{fontSize:13, fontWeight:500, textTransform:'uppercase', letterSpacing:'.06em'}}>{t}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ SERVICE DETAIL (template) ============
function ServicioDetalle({ go }) {
  useLucide();
  const [openFaq, setOpenFaq] = useState(0);
  const faqs = [
    ['¿Qué tipos de empalme ejecutan?','Empalmes ST y EP para correas transportadoras, con control dimensional, alineación y tensión. La metodología incluye verificación post-empalme y liberación controlada a operación.'],
    ['¿Cuál es la capacidad declarada?','Atendemos correas de hasta 72″ de ancho y 15 metros lineales, con configuraciones para anchos superiores según requerimiento técnico de la operación.'],
    ['¿Qué entregables reciben los clientes?','Diagnóstico e informe técnico, reporte de hallazgos, recomendaciones individuales, informe técnico de cierre y registro para seguimiento y mantenibilidad.'],
    ['¿Cómo se coordina la intervención?','Mediante revisión de programa, línea de tiempo, carta Gantt, procedimientos, checklist y coordinación continua entre cliente y PERTEC.'],
  ];
  return (
    <>
      <PageHero go={go} bc={[{label:'Servicios', go:'servicios'},{label:'Mantenimiento', go:'mantenimiento'},{label:'Cambios y empalmes'}]} title="Cambios y empalmes de correas transportadoras" subtitle="Cambios de correa y empalmes ST / EP planificados con control operativo, seguridad y reportabilidad post-intervención." />
      <section className="section white">
        <div className="wrap">
          <div className="sdetail">
            <div className="sdetail-main">
              <Reveal className="sdetail-block">
                <h3>Resumen ejecutivo</h3>
                <h2>Intervenciones críticas con metodología de siete etapas</h2>
                <p>Ejecutamos cambios de correa y empalmes sobre correas ST y EP en operaciones de gran minería. Nuestro alcance combina ingeniería, preparación del área, ejecución con supervisión permanente, puesta en marcha controlada y cierre con informe técnico.</p>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Problema que resuelve</h3>
                <h2>Empalmes fuera de estándar y detenciones no planificadas</h2>
                <p>Un empalme defectuoso es causa frecuente de detenciones no programadas y pérdida de vida útil. Este servicio elimina ambigüedad técnica entregando control dimensional, registros trazables y liberación operacional verificada.</p>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Alcance del servicio</h3>
                <ul className="sdetail-list">
                  <li>Preparación de correa y componentes</li>
                  <li>Retiro de correa o tramo dañado</li>
                  <li>Posicionamiento e instalación</li>
                  <li>Ejecución de empalme ST / EP</li>
                  <li>Control dimensional y tensión</li>
                  <li>Alineación y verificación</li>
                  <li>Monitoreo de arranque</li>
                  <li>Liberación controlada</li>
                </ul>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Metodología general</h3>
                <div className="method" style={{marginTop:20}}>
                  {[['Evaluación','Levantamiento en terreno'],['Ingeniería','Metodología y secuencia'],['Recursos','Materiales y acreditación'],['Área','Segregación y seguridad'],['Ejecución','Instalación y empalme'],['Puesta en marcha','Arranque y ajuste'],['Cierre','Informe y hallazgos']].map(([t,d],i)=>(
                    <div key={i} className="method-step">
                      <div className="method-n">Etapa {String(i+1).padStart(2,'0')}</div>
                      <div className="method-t">{t}</div>
                      <div className="method-d">{d}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Seguridad, calidad y control</h3>
                <p>Segregación del área, housekeeping, verificación de puntos de energía y maniobra, supervisión permanente de seguridad y calidad, y control operativo de empalme según procedimiento del cliente.</p>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Entregables</h3>
                <ul className="sdetail-list">
                  <li>Informe técnico de cierre</li>
                  <li>Registro de resultados y hallazgos</li>
                  <li>Recomendaciones de seguimiento</li>
                  <li>Oportunidades de mejora</li>
                  <li>Checklist ejecutado</li>
                  <li>Reporte FODA del servicio</li>
                </ul>
              </Reveal>
              <Reveal className="sdetail-block">
                <h3>Preguntas frecuentes</h3>
                <div className="faq" style={{marginTop:20}}>
                  {faqs.map(([q,a],i)=>(
                    <div key={i} className={`faq-item ${openFaq===i?'open':''}`}>
                      <button className="faq-q" onClick={()=>setOpenFaq(openFaq===i?-1:i)}>{q}<i data-lucide="plus"></i></button>
                      <div className="faq-a"><div className="faq-a-inner">{a}</div></div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
            <aside className="sdetail-aside">
              <div className="sdetail-aside-card">
                <div className="eyebrow on-dark">Cotizar servicio</div>
                <h4 style={{marginTop:14}}>Hablemos de esta intervención</h4>
                <p>Envíe los antecedentes técnicos y respondemos con propuesta, plazos y equipos asignados.</p>
                <ul className="sdetail-aside-list">
                  <li><i data-lucide="check"></i>SLA comercial definido</li>
                  <li><i data-lucide="check"></i>Equipo técnico asignado</li>
                  <li><i data-lucide="check"></i>Metodología trazable</li>
                  <li><i data-lucide="check"></i>Informe técnico incluido</li>
                </ul>
                <a className="btn primary" onClick={()=>go('contacto')}>Cotizar ahora <i data-lucide="arrow-right" className="arrow"></i></a>
                <div style={{marginTop:16, fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.6)'}}>O hablar con un especialista</div>
              </div>
            </aside>
          </div>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ ARRIENDO HUB ============
function Arriendo({ go }) {
  const [fichas, setFichas] = React.useState([]);
  const [loadingFichas, setLoadingFichas] = React.useState(true);
  const cat = 'producto';

  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) { setLoadingFichas(false); return; }
    supa.from('equipos')
      .select('*')
      .eq('disponible', true)
      .order('orden', { ascending: true })
      .order('created_at', { ascending: true })
      .then(({ data }) => { setFichas(data || []); setLoadingFichas(false); });
  }, []);

  const visibleFichas = fichas.filter(f => (f.categoria || 'producto') === cat);
  useLucide(cat + '_' + visibleFichas.length);
  return (
    <>
      <PageHero go={go} bc={[{label:'Arriendo'}]} title="Arriendo de maquinaria y equipos" subtitle="Equipos certificados para soportar continuidad operativa en correas transportadoras. Foco comercial en equipos vulcanizadores." />
      <section className="rent-feat">
        <div className="rent-inner">
          <Reveal>
            <div className="rent-visual">
              <div className="rent-visual-frame">
                <img
                  src="assets/equipo-vulcanizador-foco.jpg"
                  alt="Equipo vulcanizador PERTEC certificado ALMEX y CESMEC"
                  className="rent-visual-img"
                  loading="lazy"
                />
              </div>
              <div className="rent-cert">
                <div className="rent-cert-rule"></div>
                <div className="rent-cert-t">Certificado</div>
                <div className="rent-cert-v">ALMEX · Bureau Veritas CESMEC · Marzo 2026</div>
              </div>
            </div>
          </Reveal>
          <div>
            <Reveal><div className="eyebrow on-dark">Equipos vulcanizadores</div></Reveal>
            <Reveal delay={1}><h2 className="section-title" style={{color:'#fff', marginTop:18}}>Prensas y equipos para vulcanización en faena</h2></Reveal>
            <Reveal delay={2}><p className="section-lead" style={{color:'rgba(255,255,255,.8)', marginTop:16}}>Correas de hasta 72″ y 15 m lineales, con configuraciones para anchos superiores. Respaldados por Escuela de Vulca y experiencia real en empalmes.</p></Reveal>
            <Reveal delay={3} className="rent-list">
              <div className="rent-list-item"><i data-lucide="check"></i>Certificación ALMEX · CESMEC vigente</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Capacidad para trabajos planificados y emergencia</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Soporte técnico durante el arriendo</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Integración con metodología y reportabilidad</div>
            </Reveal>
            <Reveal delay={4}><a className="btn primary lg" onClick={()=>go('contacto')}>Cotizar arriendo <i data-lucide="arrow-right" className="arrow"></i></a></Reveal>
          </div>
        </div>
      </section>
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Catálogo</div><h2 className="section-title">Nuestros productos</h2><p className="section-lead">El equipo PERTEC actualiza el catálogo continuamente.</p></Reveal>
          <Reveal className="cat-actions">
            <DownloadCatalogButton variant="ghost" className="cat-pdf-btn" equipos={fichas} />
          </Reveal>
          {loadingFichas ? (
            <Reveal><p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Cargando catálogo…</p></Reveal>
          ) : visibleFichas.length === 0 ? (
            <Reveal><p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>No hay {cat === 'servicio' ? 'servicios' : 'productos'} disponibles por ahora.</p></Reveal>
          ) : (
            <Reveal className="cat-grid">
              {visibleFichas.map((eq, idx) => {
                const isComp = eq.tipo === 'Complementario';
                const imgs = [
                  eq.imagen_url,
                  ...((Array.isArray(eq.imagenes) ? eq.imagenes : []).map(g => g && g.url).filter(Boolean)),
                ].filter(Boolean);
                return (
                  <div key={eq.id} className="cat-card" onClick={()=>go('ficha-equipo', { id: eq.id })}>
                    <div className="cat-img">
                      <div className="cat-tag" style={isComp ? {background:'rgba(23,20,17,.8)'} : {}}>{eq.tipo || 'Equipo'}</div>
                      {imgs.length > 0
                        ? (imgs.length > 1
                            ? <div style={{position:'absolute', inset:0}}><RotatingImage images={imgs} alt={eq.nombre} staggerKey={idx} /></div>
                            : <img src={imgs[0]} alt={eq.nombre} className="cat-img-photo" />)
                        : <div className="cat-img-ico"><i data-lucide={isComp ? 'wrench' : 'cpu'}></i></div>}
                    </div>
                    <div className="cat-body">
                      <h3 className="cat-ttl">{eq.nombre}</h3>
                      <div className="cat-specs">
                        <span>{eq.descripcion_corta || '—'}</span>
                        <span><b>{eq.ancho_correa_max || '—'}</b></span>
                        <span>{eq.destacado ? 'Destacado' : 'Disponible'}</span>
                      </div>
                      <div className="cat-more">Ver ficha <i data-lucide="arrow-right"></i></div>
                    </div>
                  </div>
                );
              })}
            </Reveal>
          )}
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Beneficios</div><h2 className="section-title">¿Qué respalda nuestro servicio de arriendo?</h2></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20}}>
            {[['award','Certificación vigente','Equipos respaldados por ALMEX y CESMEC.'],['headset','Soporte técnico','Acompañamiento durante toda la operación.'],['zap','Continuidad','Disponibilidad para críticos y planificados.'],['file-check','Reportabilidad','Documentación técnica del equipo y su uso.']].map(([ico,t,d],i)=>(
              <div key={i} className="hse-cat"><div className="hse-cat-ico"><i data-lucide={ico}></i></div><h4 className="hse-cat-t">{t}</h4><p className="hse-cat-d">{d}</p></div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ FICHA EQUIPO ============
function FichaEquipo({ go, params }) {
  const [eq, setEq] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);
  const [zoomOpen, setZoomOpen] = React.useState(false);
  const [zoomed, setZoomed] = React.useState(false);
  const [zoomOrigin, setZoomOrigin] = React.useState({ x: 50, y: 50 });
  const [mainImg, setMainImg] = React.useState('');

  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa || !params || !params.id) { setLoading(false); setError(true); return; }
    supa.from('equipos').select('*').eq('id', params.id).single()
      .then(({ data, error: e }) => {
        if (e || !data) setError(true);
        else setEq(data);
        setLoading(false);
      });
  }, [params && params.id]);

  React.useEffect(() => {
    if (!zoomOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') { setZoomOpen(false); setZoomed(false); } };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [zoomOpen]);

  useLucide(eq ? eq.id + '_' + zoomOpen : (loading ? 'l' : 'e'));

  const updateOriginFromEvent = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100));
    const y = Math.max(0, Math.min(100, ((e.clientY - r.top) / r.height) * 100));
    setZoomOrigin({ x, y });
  };
  const onZoomImageClick = (e) => {
    e.stopPropagation();
    if (!zoomed) updateOriginFromEvent(e);
    setZoomed((z) => !z);
  };
  const onZoomImageMove = (e) => {
    if (!zoomed) return;
    updateOriginFromEvent(e);
  };

  if (loading) {
    return (
      <>
        <PageHero go={go} bc={[{label:'Arriendo', go:'arriendo'},{label:'Cargando…'}]} title="Cargando equipo…" subtitle="" />
        <section className="section white"><div className="wrap"><p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Cargando datos del equipo…</p></div></section>
        <ContactBlock go={go} />
      </>
    );
  }

  if (error || !eq) {
    return (
      <>
        <PageHero go={go} bc={[{label:'Arriendo', go:'arriendo'},{label:'No encontrado'}]} title="Equipo no encontrado" subtitle="El equipo que buscas no existe o fue retirado del catálogo." />
        <section className="section white"><div className="wrap" style={{textAlign:'center'}}>
          <p style={{color:'var(--pt-stone-500)', marginBottom:20}}>Vuelva al catálogo para ver los equipos disponibles.</p>
          <a className="btn primary" onClick={()=>go('arriendo')}>Volver al catálogo <i data-lucide="arrow-right" className="arrow"></i></a>
        </div></section>
        <ContactBlock go={go} />
      </>
    );
  }

  const specs = Array.isArray(eq.especificaciones) ? eq.especificaciones.filter(s => s && (s.k || s.v)) : [];
  const subtitle = eq.descripcion_corta || '';
  const galeria = Array.isArray(eq.imagenes) ? eq.imagenes.filter(g => g && g.url) : [];
  const descsExtra = Array.isArray(eq.descripciones_extra) ? eq.descripciones_extra.filter(d => d && (d.titulo || d.contenido)) : [];
  const allImgs = [eq.imagen_url, ...galeria.map(g => g.url)].filter(Boolean);
  const displayImg = mainImg || eq.imagen_url || (galeria[0] && galeria[0].url) || '';
  const fromServicios = (params && params.from === 'servicios');

  if (fromServicios) {
    return (
      <>
        <PageHero go={go} bc={[{label:'Servicios', go:'servicios'},{label:eq.nombre}]} title={eq.nombre} subtitle={subtitle} />
        <section className="section white">
          <div className="wrap" style={{maxWidth: 880}}>
            {displayImg && (
              <Reveal>
                <button
                  type="button"
                  className="equip-visual-zoom-trigger"
                  onClick={() => { setZoomed(false); setZoomOpen(true); }}
                  aria-label="Ver imagen ampliada"
                  style={{display:'block', width:'100%', aspectRatio:'16/9', overflow:'hidden', border:'1px solid var(--pt-stone-100)', background:'#fff', padding:0, marginBottom: allImgs.length > 1 ? 12 : 32, position:'relative'}}
                >
                  <img src={displayImg} alt={eq.nombre} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
                  <span className="equip-visual-zoom-hint" aria-hidden="true"><i data-lucide="zoom-in"></i></span>
                </button>
                {allImgs.length > 1 && (
                  <div style={{display:'flex', gap:8, marginBottom:32, flexWrap:'wrap'}}>
                    {allImgs.map((u, i) => (
                      <button
                        key={i}
                        type="button"
                        onClick={()=>setMainImg(u)}
                        style={{padding:0, border:(displayImg===u)?'2px solid var(--pt-copper)':'1px solid var(--pt-stone-200)', background:'#fff', cursor:'pointer', width:80, height:80, overflow:'hidden'}}
                        aria-label={`Vista ${i+1}`}
                      >
                        <img src={u} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
                      </button>
                    ))}
                  </div>
                )}
              </Reveal>
            )}
            {eq.descripcion_larga && (
              <Reveal>
                <p style={{fontSize:17, fontWeight:300, lineHeight:1.7, color:'var(--pt-stone-700)', margin:'0 0 28px', whiteSpace:'pre-line'}}>{eq.descripcion_larga}</p>
              </Reveal>
            )}
            {descsExtra.length > 0 && (
              <Reveal>
                <div style={{display:'grid', gap:32, marginBottom:32}}>
                  {descsExtra.map((d, i) => (
                    <div key={i}>
                      {d.titulo && <h3 style={{fontSize:14, fontWeight:600, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--pt-copper)', margin:'0 0 12px'}}>{d.titulo}</h3>}
                      {d.contenido && <p style={{fontSize:15, fontWeight:300, lineHeight:1.7, color:'var(--pt-stone-600)', margin:0, whiteSpace:'pre-line'}}>{d.contenido}</p>}
                    </div>
                  ))}
                </div>
              </Reveal>
            )}
            {specs.length > 0 && (
              <Reveal>
                <div className="eyebrow" style={{marginBottom:12}}>Especificaciones</div>
                <div className="equip-specs" style={{marginBottom:32}}>
                  {specs.map((s, i) => (
                    <div key={i} className="spec-row"><div className="spec-k">{s.k}</div><div className="spec-v">{s.v}</div></div>
                  ))}
                </div>
              </Reveal>
            )}
            <Reveal>
              <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
                <a className="btn primary" onClick={()=>go('contacto')}>Solicitar este servicio <i data-lucide="arrow-right" className="arrow"></i></a>
                <a className="btn ghost" onClick={()=>go('contacto')}>Hablar con un especialista</a>
              </div>
            </Reveal>
          </div>
        </section>
        <ContactBlock go={go} />
        {zoomOpen && displayImg && (
          <div className="zoom-lightbox" role="dialog" aria-modal="true" onClick={() => { setZoomOpen(false); setZoomed(false); }}>
            <button type="button" className="zoom-close" aria-label="Cerrar" onClick={(ev) => { ev.stopPropagation(); setZoomOpen(false); setZoomed(false); }}>×</button>
            <img src={displayImg} alt={eq.nombre} className={`zoom-img ${zoomed ? 'is-zoomed' : ''}`} style={{ transformOrigin: `${zoomOrigin.x}% ${zoomOrigin.y}%` }} onClick={onZoomImageClick} onMouseMove={onZoomImageMove} draggable={false} />
          </div>
        )}
      </>
    );
  }

  return (
    <>
      <PageHero go={go} bc={[{label:'Arriendo', go:'arriendo'},{label:eq.nombre}]} title={eq.nombre} subtitle={eq.descripcion_larga || eq.descripcion_corta || ''} />
      <section className="section white">
        <div className="wrap">
          <div className="equip-hero">
            <Reveal>
              <div className="equip-visual">
                {eq.destacado && <div className="equip-chip">Destacado</div>}
                {displayImg
                  ? (
                    <button
                      type="button"
                      className="equip-visual-zoom-trigger"
                      onClick={() => { setZoomed(false); setZoomOpen(true); }}
                      aria-label="Ver imagen ampliada"
                    >
                      <img src={displayImg} alt={eq.nombre} className="equip-visual-img" />
                      <span className="equip-visual-zoom-hint" aria-hidden="true">
                        <i data-lucide="zoom-in"></i>
                      </span>
                    </button>
                  )
                  : <div className="equip-visual-label"><i data-lucide={eq.tipo === 'Complementario' ? 'wrench' : 'cpu'}></i><span>{eq.tipo || 'Equipo'} · imagen pendiente</span></div>}
              </div>
              {allImgs.length > 1 && (
                <div style={{display:'flex', gap:8, marginTop:12, flexWrap:'wrap'}}>
                  {allImgs.map((u, i) => (
                    <button
                      key={i}
                      type="button"
                      onClick={()=>setMainImg(u)}
                      style={{padding:0, border: (displayImg === u) ? '2px solid var(--pt-copper)' : '1px solid var(--pt-stone-200)', background:'#fff', cursor:'pointer', width:72, height:72, overflow:'hidden'}}
                      aria-label={`Vista ${i+1}`}
                    >
                      <img src={u} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
                    </button>
                  ))}
                </div>
              )}
            </Reveal>
            <Reveal delay={2}>
              <div className="eyebrow">{eq.tipo || 'Equipo'}</div>
              <h2 style={{fontSize:28, fontWeight:500, textTransform:'uppercase', letterSpacing:'.02em', margin:'16px 0 24px'}}>Datos del equipo</h2>
              {specs.length > 0 ? (
                <div className="equip-specs">
                  {specs.map((s, i) => (
                    <div key={i} className="spec-row"><div className="spec-k">{s.k}</div><div className="spec-v">{s.v}</div></div>
                  ))}
                </div>
              ) : (
                <div className="equip-specs">
                  {eq.tipo && <div className="spec-row"><div className="spec-k">Tipo</div><div className="spec-v">{eq.tipo}</div></div>}
                  {eq.ancho_correa_max && <div className="spec-row"><div className="spec-k">Ancho de correa máx.</div><div className="spec-v">{eq.ancho_correa_max}</div></div>}
                  {eq.descripcion_corta && <div className="spec-row"><div className="spec-k">Descripción</div><div className="spec-v">{eq.descripcion_corta}</div></div>}
                  <div className="spec-row"><div className="spec-k">Disponibilidad</div><div className="spec-v">{eq.disponible ? 'Disponible para arriendo' : 'No disponible'}</div></div>
                </div>
              )}
              <div style={{marginTop:24, display:'flex', gap:12, flexWrap:'wrap'}}>
                <a className="btn primary" onClick={()=>go('contacto')}>Cotizar arriendo <i data-lucide="arrow-right" className="arrow"></i></a>
                <a className="btn ghost" onClick={()=>go('contacto')}>Hablar con un especialista</a>
              </div>
              {descsExtra.length > 0 && (
                <div style={{marginTop:32, display:'grid', gap:24}}>
                  {descsExtra.map((d, i) => (
                    <div key={i}>
                      {d.titulo && <div className="eyebrow" style={{marginBottom:10}}>{d.titulo}</div>}
                      {d.contenido && <p style={{fontSize:14, fontWeight:300, lineHeight:1.7, color:'var(--pt-stone-600)', margin:0, whiteSpace:'pre-line'}}>{d.contenido}</p>}
                    </div>
                  ))}
                </div>
              )}
            </Reveal>
          </div>
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Incluye</div><h2 className="section-title">Qué viene con el arriendo</h2></Reveal>
          <Reveal style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
            {[['Entrega y coordinación','Logística coordinada con la faena y verificación pre-uso.'],['Soporte técnico','Acompañamiento operativo durante el periodo de arriendo.'],['Documentación','Certificados, manuales y registros entregables al cliente.']].map(([t,d],i)=>(
              <div key={i} style={{padding:'28px', background:'#fff', borderLeft:'3px solid var(--pt-copper)'}}>
                <h4 style={{fontSize:16, fontWeight:500, textTransform:'uppercase', letterSpacing:'.04em', margin:'0 0 12px'}}>{t}</h4>
                <p style={{fontSize:14, fontWeight:300, lineHeight:1.6, color:'var(--pt-stone-500)', margin:0}}>{d}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
      {zoomOpen && displayImg && (
        <div
          className="zoom-lightbox"
          role="dialog"
          aria-modal="true"
          onClick={() => { setZoomOpen(false); setZoomed(false); }}
        >
          <button
            type="button"
            className="zoom-close"
            aria-label="Cerrar"
            onClick={(ev) => { ev.stopPropagation(); setZoomOpen(false); setZoomed(false); }}
          >
            ×
          </button>
          <img
            src={displayImg}
            alt={eq.nombre}
            className={`zoom-img ${zoomed ? 'is-zoomed' : ''}`}
            style={{ transformOrigin: `${zoomOrigin.x}% ${zoomOrigin.y}%` }}
            onClick={onZoomImageClick}
            onMouseMove={onZoomImageMove}
            draggable={false}
          />
        </div>
      )}
    </>
  );
}

// ============ CASOS ============
const CASO_GRADIENTS = {
  'cobre':         'linear-gradient(135deg,#7a3010,#171411)',
  'teal':          'linear-gradient(135deg,#00594a,#171411)',
  'cobre-bright':  'linear-gradient(135deg,#C85217,#2b2927)',
  'negro':         'linear-gradient(135deg,#3f3c39,#171411)',
  'teal-deep':     'linear-gradient(135deg,#004d3e,#171411)',
};
function casoBg(c) {
  return CASO_GRADIENTS[c.color || 'cobre'] || CASO_GRADIENTS['cobre'];
}

function Casos({ go }) {
  const [cases, setCases] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) { setLoading(false); return; }
    supa.from('casos')
      .select('*')
      .order('orden', { ascending: true })
      .order('created_at', { ascending: true })
      .then(({ data, error }) => {
        if (error) console.error('casos read failed', error);
        setCases(data || []);
        setLoading(false);
      });
  }, []);
  useLucide(cases.length + '_' + loading);

  return (
    <>
      <PageHero go={go} bc={[{label:'Casos y resultados'}]} title="Casos y resultados" subtitle="Trabajos ejecutados en contratos base y servicios eventuales en la gran minería chilena. Publicación sujeta a validación con clientes." />
      <section className="section white">
        <div className="wrap">
          {loading ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Cargando casos…</p>
          ) : cases.length === 0 ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Aún no hay casos publicados.</p>
          ) : (
            <div className="case-strip" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
              {cases.map((c) => (
                <div key={c.id} className="case-card">
                  <div className="case-card-bg" style={{background: casoBg(c)}}>
                    {c.imagen_url && <img src={c.imagen_url} alt={c.titulo} className="case-card-img" />}
                  </div>
                  <div className="case-card-overlay"></div>
                  <div className="case-card-hatch"></div>
                  <div className="case-card-arrow"><i data-lucide="arrow-up-right"></i></div>
                  <div className="case-card-body">
                    <div className="case-card-tag">{c.tag || 'Caso publicable'}</div>
                    <div className="case-card-title">{c.titulo}</div>
                    <div className="case-card-meta">
                      <span>{[c.cliente, c.ano].filter(Boolean).join(' · ') || '—'}</span>
                      {c.metricas && <b>{c.metricas}</b>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ RECURSOS ============
function Recursos({ go }) {
  useLucide();
  return (
    <>
      <PageHero go={go} bc={[{label:'Recursos técnicos'}]} title="Recursos técnicos" subtitle="Material técnico publicable: guías, fichas de producto, notas de aplicación y documentos de metodología." />
      <section className="section white">
        <div className="wrap">
          <Reveal className="res-grid">
            {[
              ['Guía','Metodología de cambio de correa','Siete etapas, recursos y entregables.','Guía técnica · 12 pp'],
              ['Ficha','Empalmes ST y EP','Parámetros, tolerancias y controles.','Ficha · 6 pp'],
              ['Nota','Visión 3D aplicada a correas','Capacidades de monitoreo 24/7.','Nota técnica · 4 pp'],
              ['Guía','Ultrasonido aplicado','Control de espesor y vida útil.','Guía · 8 pp'],
              ['Ficha','Termografía preventiva','Detección temprana de anomalías.','Ficha · 5 pp'],
              ['Nota','Protección radiológica','Procedimientos en rayos-X industrial.','Nota · 6 pp'],
            ].map(([type,t,d,m],i)=>(
              <div key={i} className="res-card">
                <div className="res-type"><i data-lucide="file-text"></i>{type}</div>
                <h3 className="res-ttl">{t}</h3>
                <p style={{fontSize:13, fontWeight:300, color:'var(--pt-stone-500)', margin:0, lineHeight:1.55}}>{d}</p>
                <div className="res-meta"><span>{m}</span><span style={{color:'var(--pt-copper)'}}>Descargar →</span></div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ HSE ============
function HSE({ go }) {
  useLucide();
  return (
    <>
      <PageHero go={go} bc={[{label:'HSE y cumplimiento'}]} title="HSE y cumplimiento" subtitle="Centro de confianza técnico y sobrio. Seguridad, prevención, calidad, estándares y respaldo documental." />
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Pilares</div><h2 className="section-title">Cómo entendemos la seguridad</h2></Reveal>
          <Reveal className="hse-cats">
            {[['hard-hat','Seguridad en faena','Control de condiciones de trabajo y liderazgo en terreno.'],['shield','Prevención y salud','Procedimientos, estándares y formación continua.'],['badge-check','Calidad y estándares','Procedimientos estandarizados y mejora continua.'],['file-check','Respaldo técnico','Documentos publicables con vigencia verificada.']].map(([ico,t,d],i)=>(
              <div key={i} className="hse-cat"><div className="hse-cat-ico"><i data-lucide={ico}></i></div><h4 className="hse-cat-t">{t}</h4><p className="hse-cat-d">{d}</p></div>
            ))}
          </Reveal>
        </div>
      </section>
      <section className="section stone">
        <div className="wrap">
          <Reveal className="section-hdr"><div className="eyebrow">Documentos publicables</div><h2 className="section-title">Centro de confianza</h2><p className="section-lead">Políticas, certificados y respaldo técnico bajo control editorial. Vigencia verificada antes de publicación.</p></Reveal>
          <Reveal className="hse-docs">
            {[
              ['Certificación ALMEX · equipos vulcanizadores','PDF · Marzo 2026','Certificado','shield'],
              ['Bureau Veritas CESMEC · respaldo técnico','PDF · Marzo 2026','Certificado','badge-check'],
              ['Política integrada de seguridad y calidad','PDF · Vigente','Política','file-text'],
              ['Protección radiológica · procedimiento','PDF · Vigente','Procedimiento','shield'],
              ['Código de conducta y ética','PDF · Vigente','Política','file-text'],
              ['Política de sostenibilidad','PDF · Vigente','Política','leaf'],
            ].map(([t,m,tag,ico],i)=>(
              <div key={i} className="hse-doc">
                <div className="hse-doc-ico"><i data-lucide={ico}></i></div>
                <div>
                  <div className="hse-doc-t">{t}</div>
                  <div className="hse-doc-meta" style={{marginTop:4}}>{tag}</div>
                </div>
                <div className="hse-doc-meta">{m}</div>
                <i data-lucide="download" className="hse-doc-arrow"></i>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
      <ContactBlock go={go} />
    </>
  );
}

// ============ CONTACTO ============
function Contacto({ go }) {
  useLucide();
  return (
    <>
      <PageHero go={go} bc={[{label:'Contacto / Cotización'}]} title="Contacto y cotización" subtitle="Formularios diferenciados por escenario. Su solicitud se deriva al equipo técnico o comercial correspondiente." />
      <ContactBlock go={go} />
    </>
  );
}

// ============ NOTICIAS MINERAS ============
function Noticias({ go }) {
  const [news, setNews] = React.useState(null);
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [open]);
  React.useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) { setNews([]); return; }
    let q = supa.from('mining_news').select('*').order('published_at', { ascending: false, nullsFirst: false }).order('created_at', { ascending: false }).limit(60);
    q.then(({ data }) => setNews(data || []));
  }, []);
  useLucide('news_' + (news ? news.length : 'l'));
  const visible = news || [];
  const fmtDate = (iso) => {
    if (!iso) return '';
    try { return new Date(iso).toLocaleDateString('es-CL', { day:'2-digit', month:'short', year:'numeric' }); }
    catch { return ''; }
  };
  const SOURCE_LABELS = {
    'mining.com': 'Mining.com',
    'cochilco': 'Cochilco',
    'el_pulso_minero': 'El Pulso Minero',
  };
  const srcLabel = (s) => SOURCE_LABELS[s] || s;
  return (
    <>
      <PageHero go={go} bc={[{label:'Noticias'}]} title="Noticias del sector minero" subtitle="Últimas publicaciones sobre minería en Chile, agregadas desde fuentes especializadas." />
      <section className="section white">
        <div className="wrap">
          {news === null ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>Cargando noticias…</p>
          ) : visible.length === 0 ? (
            <p style={{textAlign:'center', color:'var(--pt-stone-500)'}}>No hay noticias todavía. El sistema sincroniza cada 6 horas.</p>
          ) : (
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:24}}>
              {visible.map(n => (
                <div key={n.id} onClick={() => setOpen(n)} role="button" tabIndex={0}
                   style={{display:'flex', flexDirection:'column', textDecoration:'none', color:'inherit', background:'#fff', border:'1px solid var(--pt-stone-100)', transition:'transform .25s, box-shadow .25s', cursor:'pointer'}}
                   onMouseEnter={e => { e.currentTarget.style.transform='translateY(-3px)'; e.currentTarget.style.boxShadow='0 10px 30px rgba(0,0,0,.08)'; }}
                   onMouseLeave={e => { e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow=''; }}>
                  <div style={{aspectRatio:'16/9', background:'linear-gradient(135deg,#2b2927,#0c0a09)', overflow:'hidden', position:'relative'}}>
                    {n.image_url
                      ? <img src={n.image_url} alt="" loading="lazy" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
                      : <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'rgba(255,255,255,.35)'}}><i data-lucide="newspaper" style={{width:48, height:48}}></i></div>}
                  </div>
                  <div style={{padding:'20px 22px 22px', display:'flex', flexDirection:'column', gap:10, flex:1}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--pt-copper)', fontWeight:600}}>
                      <span>{srcLabel(n.source)}</span>
                      <span style={{color:'var(--pt-stone-400)', fontWeight:500}}>{fmtDate(n.published_at || n.created_at)}</span>
                    </div>
                    <h3 style={{fontSize:16, fontWeight:600, lineHeight:1.3, margin:0, display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{n.title}</h3>
                    {n.description && (
                      <p style={{fontSize:13.5, fontWeight:300, lineHeight:1.55, color:'var(--pt-stone-500)', margin:0, display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{n.description}</p>
                    )}
                    <span style={{marginTop:'auto', fontSize:12, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--pt-copper)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:6}}>Leer noticia <i data-lucide="arrow-right" style={{width:14, height:14}}></i></span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
      <ContactBlock go={go} />
      {open && (
        <div onClick={() => setOpen(null)} role="dialog" aria-modal="true"
          style={{position:'fixed', inset:0, background:'rgba(0,0,0,.65)', zIndex:1000, display:'flex', alignItems:'flex-start', justifyContent:'center', padding:'48px 16px', overflowY:'auto', backdropFilter:'blur(4px)'}}>
          <div onClick={e => e.stopPropagation()} style={{maxWidth:760, width:'100%', background:'#fff', boxShadow:'0 30px 80px rgba(0,0,0,.4)', position:'relative'}}>
            <button type="button" aria-label="Cerrar" onClick={() => setOpen(null)}
              style={{position:'absolute', top:12, right:12, width:36, height:36, border:'none', background:'rgba(0,0,0,.5)', color:'#fff', fontSize:22, lineHeight:1, cursor:'pointer', borderRadius:'50%', zIndex:1}}>×</button>
            <div style={{aspectRatio:'16/9', background:'linear-gradient(135deg,#2b2927,#0c0a09)', overflow:'hidden', position:'relative'}}>
              {open.image_url
                ? <img src={open.image_url} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
                : <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'rgba(255,255,255,.4)'}}><i data-lucide="newspaper" style={{width:64, height:64}}></i></div>}
            </div>
            <div style={{padding:'32px 40px 40px'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--pt-copper)', fontWeight:600, marginBottom:14}}>
                <span>{srcLabel(open.source)}</span>
                <span style={{color:'var(--pt-stone-400)', fontWeight:500}}>{fmtDate(open.published_at || open.created_at)}</span>
              </div>
              <h2 style={{fontSize:26, fontWeight:600, lineHeight:1.25, margin:'0 0 18px', textTransform:'none'}}>{open.title}</h2>
              {open.description && (
                <p style={{fontSize:15, fontWeight:300, lineHeight:1.7, color:'var(--pt-stone-700)', margin:0, whiteSpace:'pre-line'}}>{open.description}</p>
              )}
              <div style={{marginTop:28, paddingTop:20, borderTop:'1px solid var(--pt-stone-100)'}}>
                <a className="btn ghost" href={open.url} target="_blank" rel="noopener noreferrer">Ver fuente original <i data-lucide="external-link"></i></a>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { Empresa, ServiciosHub, Mantenimiento, Tecnicos, ServicioDetalle, Arriendo, FichaEquipo, Casos, Recursos, Noticias, HSE, Contacto });