// Realistic ProSuite-style product mockups in pure HTML/CSS

function BrowserChrome({ url, children, height }) {
  return (
    <div style={{
      background: '#fff', borderRadius: 14, overflow: 'hidden',
      boxShadow: '0 32px 80px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.06)',
      border: '1px solid var(--border-default)', height,
    }}>
      <div style={{ padding: '10px 14px', background: '#F7F9FC', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FCA5A5' }}/>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FCD34D' }}/>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#86EFAC' }}/>
        <div style={{ marginLeft: 12, fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>{url}</div>
      </div>
      {children}
    </div>
  );
}

// ============= FACTURACIÓN MOCKUP =============
function FacturacionMockup() {
  const bars = [40, 65, 50, 80, 55, 95, 70, 100, 85, 110, 90, 130];
  return (
    <BrowserChrome url="prosuite.aferapp.com/facturas" height={460}>
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
          <div>
            <h3 style={{ fontSize: 17, margin: '0 0 4px', color: 'var(--fg-strong)' }}>Facturación · Octubre</h3>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>32 facturas · 12 clientes</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <div className="afer-badge afer-badge--info"><Icon name="sparkle" size={11}/> IA activa</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 110, marginBottom: 18 }}>
          {bars.map((h, i) => (
            <div key={i} style={{ flex: 1, height: h, background: i === 11 ? 'var(--brand-accent)' : 'var(--brand-primary-soft)', borderRadius: '4px 4px 0 0', position: 'relative' }}>
              {i === 11 && <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', fontSize: 10, fontWeight: 700, color: 'var(--brand-accent)' }}>+18%</div>}
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {[
            ['Facturado', '24.560 €', 'var(--success)', 'success'],
            ['Pendiente', '8.120 €', 'var(--warning)', 'warning'],
            ['Vencido', '1.240 €', 'var(--danger)', 'danger'],
          ].map(([label, val, color]) => (
            <div key={label} style={{ padding: 12, background: '#F7F9FC', borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginBottom: 4 }}>{label}</div>
              <div className="afer-tabular" style={{ fontSize: 17, fontWeight: 700, color }}>{val}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, padding: 12, background: '#fff', border: '1px solid var(--border-default)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--success-soft)', color: 'var(--success-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="check" size={16}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>F-2026-0341 · Construcciones García</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Conciliada con BBVA · hace 2 min</div>
          </div>
          <div className="afer-tabular" style={{ fontSize: 14, fontWeight: 700 }}>1.250,00 €</div>
        </div>
      </div>
    </BrowserChrome>
  );
}

// ============= CONTROL HORARIO MOCKUP =============
function HorarioMockup() {
  const employees = [
    { name: 'Marta Rodríguez', role: 'Diseño', in: '09:02', status: 'En jornada', color: 'var(--success)' },
    { name: 'Javier López', role: 'Comercial', in: '08:45', status: 'En reunión', color: 'var(--brand-accent)' },
    { name: 'Ana Martín', role: 'Operaciones', in: '—', status: 'Vacaciones', color: 'var(--warning)' },
    { name: 'Carlos Pérez', role: 'Obra', in: '07:30', status: 'En jornada', color: 'var(--success)' },
  ];
  return (
    <BrowserChrome url="prosuite.aferapp.com/control-horario" height={460}>
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <h3 style={{ fontSize: 17, margin: 0, color: 'var(--fg-strong)' }}>Equipo · Hoy</h3>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>14 fichando · 2 ausencias</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
          {[['Horas hoy','86,5 h','var(--brand-primary)'], ['Horas extra','3,2 h','var(--warning)'], ['Productividad','+12%','var(--success)']].map(([l,v,c]) => (
            <div key={l} style={{ padding: 12, background: '#F7F9FC', borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginBottom: 4 }}>{l}</div>
              <div className="afer-tabular" style={{ fontSize: 17, fontWeight: 700, color: c }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{ border: '1px solid var(--border-default)', borderRadius: 10, overflow: 'hidden' }}>
          {employees.map((e, i) => (
            <div key={e.name} style={{
              display: 'grid', gridTemplateColumns: '36px 1fr auto auto', alignItems: 'center', gap: 12,
              padding: '10px 14px', borderBottom: i < employees.length - 1 ? '1px solid var(--border-default)' : 'none',
              background: '#fff',
            }}>
              <div style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--brand-primary-soft)', color: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>
                {e.name.split(' ').map(n => n[0]).join('').slice(0,2)}
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-strong)' }}>{e.name}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{e.role}</div>
              </div>
              <div className="afer-tabular" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{e.in}</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: e.color, padding: '4px 10px', background: '#F7F9FC', borderRadius: 999 }}>{e.status}</div>
            </div>
          ))}
        </div>
      </div>
    </BrowserChrome>
  );
}

// ============= IA MOCKUP =============
function IAMockup() {
  return (
    <BrowserChrome url="prosuite.aferapp.com/ia/asistente" height={460}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: 'calc(100% - 36px)' }}>
        {/* Receipt scan side */}
        <div style={{ padding: 18, borderRight: '1px solid var(--border-default)', background: '#FBFCFD' }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--brand-accent)', marginBottom: 10 }}>OCR · TICKET ESCANEADO</div>
          <div style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 10, padding: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-default)', lineHeight: 1.5, position: 'relative' }}>
            <div style={{ fontWeight: 700, marginBottom: 6 }}>FERRETERÍA RUIZ S.L.</div>
            <div style={{ color: 'var(--fg-muted)', marginBottom: 8 }}>NIF B-12345678<br/>06/05/2026 · 11:24</div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Tornillería M6</span><span>12,40</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Cinta aislante</span><span>3,20</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Brocas SDS</span><span>28,90</span></div>
            <div style={{ borderTop: '1px dashed var(--border-default)', marginTop: 6, paddingTop: 6, display: 'flex', justifyContent: 'space-between', fontWeight: 700 }}>
              <span>TOTAL (IVA inc.)</span><span>44,50 €</span>
            </div>
            <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 9, padding: '2px 6px', background: 'var(--success-soft)', color: 'var(--success-strong)', borderRadius: 4, fontWeight: 700 }}>EXTRAÍDO</div>
          </div>
        </div>
        {/* AI assistant side */}
        <div style={{ padding: 18, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, #7C3AED, #3D6CF5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="sparkle" size={14} color="#fff"/>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Asistente Afer</div>
          </div>
          <div style={{ flex: 1, fontSize: 12, lineHeight: 1.5, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ background: 'var(--surface-subtle)', padding: 10, borderRadius: 10, alignSelf: 'flex-end', maxWidth: '85%', color: 'var(--fg-strong)' }}>
              ¿Cuánto gasté este mes en ferretería?
            </div>
            <div style={{ background: 'var(--brand-accent-soft)', padding: 10, borderRadius: 10, maxWidth: '90%', color: 'var(--neutral-800)' }}>
              En mayo llevas <strong>342,80 €</strong> en proveedores de ferretería, un <strong>+18%</strong> vs. abril. ¿Quieres que lo asigne al proyecto <strong>Reforma Ático Diagonal</strong>?
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <div style={{ padding: '6px 10px', border: '1px solid var(--border-default)', borderRadius: 999, fontSize: 11, fontWeight: 600, color: 'var(--brand-accent)', background: '#fff', cursor: 'pointer' }}>Sí, asignar</div>
              <div style={{ padding: '6px 10px', border: '1px solid var(--border-default)', borderRadius: 999, fontSize: 11, color: 'var(--fg-muted)', background: '#fff', cursor: 'pointer' }}>Más detalle</div>
            </div>
          </div>
          <div style={{ marginTop: 12, padding: '8px 12px', border: '1px solid var(--border-default)', borderRadius: 999, fontSize: 12, color: 'var(--fg-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
            Pregunta a tus datos…
            <span style={{ marginLeft: 'auto', fontSize: 10, padding: '2px 6px', background: 'var(--surface-subtle)', borderRadius: 4 }}>⌘K</span>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { BrowserChrome, FacturacionMockup, HorarioMockup, IAMockup });