// products.jsx — grilla de productos con detalle expandible

const PRODUCTS = [
{
  id: 'billeter',
  name: 'BilleterAI',
  short: 'Tu cobranza, por WhatsApp.',
  blurb: 'PWA donde gestionás clientes, facturas y cobranzas desde el celular. Te logueás, recibís un código y un número de WhatsApp, y le pedís facturas escribiendo como si fuera una persona.',
  icon: 'Wallet',
  tag: 'Mobile · PWA · WhatsApp',
  size: 'lg',
  Mock: 'MockBilleter',
  features: [
  'Alta por código vía WhatsApp',
  'Genera facturas chateando',
  'Seguimiento de cobranzas',
  'Clientes y deuda en un toque',
  'Funciona offline (PWA)',
  'Sin instalación: abrís y listo']

},
{
  id: 'ventas',
  name: 'Agente Ventas',
  short: 'Métricas para el que pisa la calle.',
  blurb: 'Sistema para vendedores: carga de pedidos, clientes, productos y cobranzas, con métricas individuales para que cada uno vea cómo viene la semana.',
  icon: 'Users',
  tag: 'Web · Para equipos',
  size: 'md',
  Mock: 'MockVentas',
  features: [
  'Pedidos en pocos toques',
  'Catálogo de productos',
  'Cobranzas por cliente',
  'Ranking y metas semanales',
  'Histórico de visitas',
  'Exporta a Excel']

},
{
  id: 'central',
  name: 'Agente Central',
  short: 'La torre de control de tu fuerza de venta.',
  blurb: 'Monitorea a todos los vendedores que usan Agente Ventas bajo el ID de tu empresa. Ves movimientos, comparás performance y tomás decisiones con datos.',
  icon: 'Tower',
  tag: 'Web · Tablero ejecutivo',
  size: 'sm',
  Mock: 'MockCentral',
  features: [
  'Vista consolidada de la red',
  'Alertas y heatmap de actividad',
  'Comparativa entre vendedores',
  'Cobranzas vencidas',
  'KPIs por zona',
  'Permisos por rol']

},
{
  id: 'comercio',
  name: 'Agente Comercio',
  short: 'Tu negocio, prolijo y bajo control.',
  blurb: 'Para comercios: proveedores, clientes, historial de ventas, control de stock, métricas y cobro por POS. Todo lo que necesitás para dejar de anotar en un cuaderno.',
  icon: 'Store',
  tag: 'Web · Caja + Stock',
  size: 'md',
  Mock: 'MockComercio',
  features: [
  'Stock en tiempo real',
  'Cobro por POS integrado',
  'Proveedores y compras',
  'Historial completo de ventas',
  'Reportes y márgenes',
  'Multi-sucursal']

},
{
  id: 'resto',
  name: 'Agente Resto',
  short: 'La cocina, en números.',
  blurb: 'Para bares y restaurantes: gestión de recetas, platos, cálculo de mermas, stock y métricas de rendimiento de cocina. Sabés exactamente cuánto te cuesta cada plato.',
  icon: 'Resto',
  tag: 'Web · Gastronomía',
  size: 'lg',
  Mock: 'MockResto',
  features: [
  'Recetas con costo real',
  'Cálculo de mermas',
  'Stock por insumo',
  'Margen plato por plato',
  'Tiempos y eficiencia de cocina',
  'Mozos, mesas y comandas']

}];


function ProductCard({ p, expanded, onToggle, index }) {
  const ref = React.useRef(null);
  const IconCmp = Icon[p.icon];
  const Mock = Mockups[p.Mock];

  // Cursor glow
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - r.left}px`);
      el.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <div
      ref={ref}
      className={`product-card size-${p.size} ${expanded ? 'expanded' : ''}`}
      data-product={p.id} style={{ backgroundSize: "cover", backgroundPosition: "center center" }}>
      
      <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">
            {p.name.includes('Agente') ?
            <>Agente <em>{p.name.replace('Agente ', '')}</em></> :
            p.name === 'BilleterAI' ?
            <>Billeter<em>AI</em></> :
            p.name}
          </div>
        </div>
        <div className="pc-tags">
          <div className="pc-tag live">{p.tag}</div>
          <div className="pc-tag" style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon.Phone size={10} />
            Compatible con celulares
          </div>
        </div>
      </div>
      <p className="pc-blurb">{p.short}</p>

      <div className="pc-mock">{Mock && <Mock />}</div>

      <button
        className="pc-toggle"
        onClick={() => onToggle(p.id)}
        style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
        
        <span>{expanded ? 'Ocultar detalle' : 'Conocer más'}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-dim)' }}>0{index + 1}</span>
          <Icon.ArrowDown size={14} />
        </span>
      </button>

      <div className="pc-detail">
        <div className="pc-detail-inner">
          <p style={{ color: 'var(--ink-muted)', fontSize: 14, lineHeight: 1.6, marginTop: 0, marginBottom: 18, textWrap: 'pretty' }}>{p.blurb}</p>
          <ul className="pc-features">
            {p.features.map((f, i) => <li key={i}>{f}</li>)}
          </ul>
        </div>
      </div>
    </div>);

}

function Products() {
  const [expanded, setExpanded] = React.useState(null);
  const [revealed, setRevealed] = React.useState(false);
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) {setRevealed(true);io.disconnect();}},
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const toggle = (id) => setExpanded((cur) => cur === id ? null : id);

  return (
    <section className="products" id="productos" ref={sectionRef} data-screen-label="02 Productos">
      <div className="shell">
        <div className={`sec-header reveal ${revealed ? 'in' : ''}`}>
          <div>
            <div className="label">Productos · 5 sistemas en vivo</div>
            <h2 style={{ marginTop: 24 }}>Cinco sistemas, <em>una idea</em>: que el software trabaje para vos.</h2>
          </div>
          <p className="desc">Cada uno resuelve un problema concreto. Todos comparten el mismo ADN: rápidos, claros, accesibles desde donde estés. Tocá cualquiera para ver el detalle.</p>
        </div>

        <div className={`products-grid reveal-stagger ${revealed ? 'in' : ''}`}>
          {PRODUCTS.map((p, i) =>
          <ProductCard key={p.id} p={p} index={i} expanded={expanded === p.id} onToggle={toggle} />
          )}
        </div>
      </div>
    </section>);

}

window.Products = Products;