// amedida.jsx — Sección "Hechos a medida": trabajos para clientes

const CUSTOM = [
{
  id: 'rutapro',
  name: 'RutaPro',
  client: 'Agencia de remis',
  short: 'Toda la agencia de remis, en el celular.',
  blurb: 'App para una agencia de remis: cotiza por kilómetro o por zona con la rentabilidad real de cada viaje, sigue a los choferes en el mapa, controla cobranzas, flota y gastos, y lee tickets de nafta con IA.',
  icon: 'Car',
  Mock: 'MockRutaPro',
  features: [
  'Cotizador por km y por zona',
  'Rentabilidad neta por viaje',
  'Viajes en vivo en el mapa',
  'Cobranzas y alias por WhatsApp',
  'Flota con vencimientos',
  'Tickets de nafta leídos por IA'],
  video: 'video/rutapro.mp4',
  poster: 'video/rutapro-poster.jpg',
  dur: '2:10'
},
{
  id: 'seguros',
  name: 'Gestión de Seguros',
  client: 'Sector seguros',
  short: 'Cotizaciones, ventas y entregas del sector seguros.',
  blurb: 'Sistema para un sector que vende a compañías aseguradoras: cotiza contra todas las listas de proveedores, sigue cada orden de trabajo de punta a punta y arma el cierre de mes solo.',
  icon: 'Shield',
  Mock: 'MockSeguros',
  features: [
  'Cotizador con las 5 mejores opciones',
  'Historial de cotizaciones ganadas y perdidas',
  'Proyector de cierre contra la meta',
  'Alertas por órdenes demoradas',
  'Despachos con WhatsApp redactado por IA',
  'Semáforo de casos y cierre de mes'],
  video: 'video/gestion-seguros.mp4',
  poster: 'video/gestion-seguros-poster.jpg',
  dur: '1:30'
},
{
  id: 'ventas',
  name: 'Tablero de Ventas',
  client: 'Sector ventas',
  short: 'Toda la venta, analizada en tiempo real.',
  blurb: 'Tablero que se alimenta solo del sistema de gestión de la empresa, sin subir planillas: facturación, vendedores, productos, marcas y tipo de cliente, con un análisis de IA al que le podés preguntar.',
  icon: 'Chart',
  Mock: 'MockTableroVentas',
  features: [
  'Sincronización automática con el sistema de gestión',
  'Ranking y margen por vendedor',
  'Clasificación ABC de productos',
  'Participación por marca y tipo de cliente',
  'Mi Dashboard con indicadores fijados',
  'Análisis con IA y exportación a PDF'],
  video: 'video/tablero-ventas.mp4',
  poster: 'video/tablero-ventas-poster.jpg',
  dur: '1:12'
},
{
  id: 'compras',
  name: 'Compras y Stock',
  client: 'Sector compras',
  short: 'Qué comprar, cuánto y de qué marca.',
  blurb: 'Sistema de abastecimiento: segmenta las medidas por venta, controla la política de marcas y sugiere qué comprar cada semana, con previsión de quiebre y comparativa de proveedores.',
  icon: 'Cart',
  Mock: 'MockComprasStock',
  features: [
  'Segmentación A1 / A2 / B / C',
  'Cobertura en días y política de marcas',
  'Sugerencia de compra por categoría',
  'Previsión de quiebre de stock',
  'Comparativa de listas de proveedores',
  'Pérdidas por quiebre y pedido a Excel'],
  video: 'video/compras-stock.mp4',
  poster: 'video/compras-stock-poster.jpg',
  dur: '1:14'
}];


function CustomCard({ c, index }) {
  const IconCmp = Icon[c.icon];
  const Mock = Mockups[c.Mock];
  return (
    <article className="product-card custom-card" data-custom={c.id}>
      <div className="glow" />
      <div className="pc-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            width: 36, height: 36, borderRadius: 10,
            border: '1px solid var(--line-strong)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--accent)',
            background: 'color-mix(in srgb, var(--accent) 8%, transparent)'
          }}>
            <IconCmp size={18} />
          </span>
          <div className="pc-name">{c.name}</div>
        </div>
        <div className="pc-tags">
          <div className="pc-tag live">A medida · {c.client}</div>
        </div>
      </div>
      <p className="pc-blurb">{c.short}</p>
      <div className="custom-body">
        <div className="custom-main">
          <div className="pc-mock">{Mock && <Mock />}</div>
          <p className="custom-desc">{c.blurb}</p>
          <ul className="pc-features">
            {c.features.map((f, i) => <li key={i}>{f}</li>)}
          </ul>
        </div>
        <div className="custom-video">
          <video controls playsInline preload="metadata" poster={c.poster}>
            <source src={c.video} type="video/mp4" />
          </video>
          <div className="demo-meta"><span className="demo-tag">Demo · datos ficticios</span><span className="demo-dur">{c.dur}</span></div>
        </div>
      </div>
    </article>);
}

function AMedida() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } },
      { threshold: 0.05 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section className="amedida" id="a-medida" ref={ref} data-screen-label="A medida">
      <div className="shell">
        <div className={`sec-header reveal ${inView ? 'in' : ''}`}>
          <div>
            <div className="label">Hechos a medida · Trabajos para clientes</div>
            <h2 style={{ marginTop: 24 }}>Lo que construimos <em>para otros</em>.</h2>
          </div>
          <p className="desc">Además de nuestros productos, desarrollamos sistemas a medida para empresas con problemas propios. Estos son algunos, con datos de ejemplo.</p>
        </div>
        <div className={`custom-grid reveal-stagger ${inView ? 'in' : ''}`}>
          {CUSTOM.map((c, i) => <CustomCard key={c.id} c={c} index={i} />)}
        </div>
      </div>
    </section>);
}

window.AMedida = AMedida;