// Rich placeholder library — fictional but realistic visuals to suggest final imagery
// Logos, case captures, founder portrait, contextual scenes.

// ─── Client wordmark logos (fictional but identity-distinct) ────────────

function ClientLogos({ color = '#94A3B8', height = 24 }) {
  const logos = [
    { name: 'METRO', sub: 'industries' },
    { name: 'NORDA', mark: '◆' },
    { name: 'kapital', italic: true },
    { name: 'PUERTO', sub: '/ logística' },
    { name: 'ATLAS', mark: '○' },
    { name: 'verde', sub: 'agro' },
  ];
  return (
    <div style={{
      display: 'flex', gap: 56, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center',
      opacity: 0.7,
    }}>
      {logos.map((l, i) => (
        <ClientMark key={i} {...l} color={color} height={height} />
      ))}
    </div>
  );
}

function ClientMark({ name, sub, mark, italic, color = '#94A3B8', height = 24 }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      color, fontFamily: '"Syne", "Inter", sans-serif',
      fontSize: height * 0.85, fontWeight: 700, letterSpacing: '0.04em',
      fontStyle: italic ? 'italic' : 'normal',
    }}>
      {mark && <span style={{ fontSize: height, lineHeight: 1, color }}>{mark}</span>}
      <span style={{ textTransform: italic ? 'lowercase' : 'uppercase' }}>{name}</span>
      {sub && (
        <span style={{
          fontSize: height * 0.5, fontFamily: '"JetBrains Mono", monospace',
          fontWeight: 400, color, opacity: 0.8,
          textTransform: 'uppercase', letterSpacing: '0.1em',
        }}>
          {sub}
        </span>
      )}
    </div>
  );
}

// ─── Case visuals — mini realistic UI mockups ──────────────────────────

// Case 1 — Manufactura / formato de recepción digital (mobile form)
function CaseImgManufactura() {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #1E293B 0%, #0F172A 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
    }}>
      {/* Background grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${AXIA.border}aa 1px, transparent 1px), linear-gradient(90deg, ${AXIA.border}aa 1px, transparent 1px)`,
        backgroundSize: '32px 32px',
        opacity: 0.4,
      }} />
      {/* Phone mockup with form */}
      <div style={{
        position: 'relative', width: 180, height: 320,
        background: '#0B0F19', border: `1px solid ${AXIA.borderHi}`, borderRadius: 22,
        padding: 12, boxShadow: '0 30px 60px -20px rgba(0,0,0,0.8)',
        transform: 'rotate(-6deg)',
      }}>
        {/* Notch */}
        <div style={{ position: 'absolute', top: 4, left: '50%', transform: 'translateX(-50%)', width: 60, height: 4, background: '#000', borderRadius: 999 }} />
        {/* Header */}
        <div style={{ marginTop: 12, fontSize: 8, fontFamily: '"JetBrains Mono", monospace', color: AXIA.muted, letterSpacing: '0.1em' }}>RECEPCIÓN / 2347</div>
        <div style={{ marginTop: 6, fontFamily: '"Syne", sans-serif', fontSize: 14, fontWeight: 700, color: AXIA.text }}>Lote acero · MX</div>
        {/* Form fields */}
        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { l: 'Cantidad', v: '420 ton', ok: true },
            { l: 'Temperatura', v: '24°C', ok: true },
            { l: 'Sello', v: 'Verificado', ok: true },
            { l: 'Pesaje', v: 'Pendiente', ok: false },
          ].map((f, i) => (
            <div key={i} style={{ padding: '6px 8px', border: `1px solid ${AXIA.border}`, borderRadius: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: AXIA.card }}>
              <span style={{ fontSize: 8, color: AXIA.mutedHi }}>{f.l}</span>
              <span style={{ fontSize: 8, fontWeight: 600, color: f.ok ? AXIA.accent : '#F59E0B', fontFamily: '"JetBrains Mono", monospace' }}>{f.v}</span>
            </div>
          ))}
        </div>
        {/* Photo block */}
        <div style={{ marginTop: 10, height: 50, background: 'repeating-linear-gradient(45deg, #1F2937, #1F2937 4px, #0F172A 4px, #0F172A 8px)', border: `1px dashed ${AXIA.border}`, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontSize: 7, color: AXIA.muted, fontFamily: '"JetBrains Mono", monospace' }}>📷 evidencia</span>
        </div>
        {/* Submit */}
        <div style={{ marginTop: 8, padding: '8px', background: AXIA.primary, borderRadius: 6, textAlign: 'center', fontSize: 9, fontWeight: 600, color: AXIA.text }}>
          Confirmar recepción
        </div>
      </div>

      {/* Floating chip — completed */}
      <div style={{
        position: 'absolute', top: 24, right: 24,
        padding: '6px 10px', borderRadius: 999,
        background: 'rgba(16,185,129,0.15)', border: `1px solid ${AXIA.accent}55`,
        fontSize: 9, color: AXIA.accent, fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.08em', textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: 999, background: AXIA.accent }} />
        −65% tiempo
      </div>
    </div>
  );
}

// Case 2 — Servicios / CRM operativo (kanban)
function CaseImgCRM() {
  const cols = [
    { t: 'Lead', n: 8, color: AXIA.muted },
    { t: 'Contactado', n: 12, color: '#F59E0B' },
    { t: 'Propuesta', n: 5, color: AXIA.primary },
    { t: 'Cerrado', n: 3, color: AXIA.accent },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #111827 0%, #0B0F19 100%)',
      padding: 20,
    }}>
      {/* App chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <div style={{ display: 'flex', gap: 4 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: '#374151' }} />
          <span style={{ width: 7, height: 7, borderRadius: 999, background: '#374151' }} />
          <span style={{ width: 7, height: 7, borderRadius: 999, background: '#374151' }} />
        </div>
        <span style={{ fontSize: 9, fontFamily: '"JetBrains Mono", monospace', color: AXIA.muted }}>crm · pipeline</span>
        <span style={{ marginLeft: 'auto', fontSize: 9, color: AXIA.accent, fontFamily: '"JetBrains Mono", monospace' }}>+3× visibilidad</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6 }}>
        {cols.map((c, i) => (
          <div key={i} style={{
            background: AXIA.card, border: `1px solid ${AXIA.border}`, borderRadius: 6,
            padding: 8, minHeight: 180,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span style={{ fontSize: 8, fontWeight: 600, color: AXIA.text, fontFamily: '"JetBrains Mono", monospace', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.t}</span>
              <span style={{ fontSize: 8, color: c.color, fontFamily: '"JetBrains Mono", monospace' }}>{c.n}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {Array.from({ length: Math.min(c.n, 4) }).map((_, j) => (
                <div key={j} style={{ padding: 6, background: 'rgba(255,255,255,0.02)', border: `1px solid ${AXIA.border}`, borderRadius: 4 }}>
                  <div style={{ height: 4, width: '70%', background: AXIA.borderHi, borderRadius: 2 }} />
                  <div style={{ marginTop: 4, height: 3, width: '50%', background: AXIA.border, borderRadius: 2 }} />
                  <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 10, height: 10, borderRadius: 999, background: c.color, opacity: 0.4, fontSize: 6, color: AXIA.text, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }} />
                    <span style={{ fontSize: 6, color: AXIA.muted, fontFamily: '"JetBrains Mono", monospace' }}>MXN ${(j + 1) * 12}K</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Case 3 — Logística / Tracker de activos (table + map)
function CaseImgTracker() {
  const items = [
    { id: 'TH-0142', n: 'Taladro hilti', s: 'En obra', c: AXIA.accent },
    { id: 'TH-0089', n: 'Compresor 50L', s: 'Bodega', c: AXIA.muted },
    { id: 'TH-0203', n: 'Cortadora', s: 'En obra', c: AXIA.accent },
    { id: 'TH-0317', n: 'Andamio x4', s: 'Tránsito', c: '#F59E0B' },
    { id: 'TH-0421', n: 'Generador', s: 'Mantenim.', c: AXIA.primary },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #0F172A 0%, #0B0F19 100%)',
      padding: 16, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12,
    }}>
      {/* Table */}
      <div style={{ background: AXIA.card, border: `1px solid ${AXIA.border}`, borderRadius: 8, padding: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontSize: 9, fontWeight: 700, color: AXIA.text, fontFamily: '"Syne", sans-serif' }}>Activos</span>
          <span style={{ fontSize: 8, color: AXIA.accent, fontFamily: '"JetBrains Mono", monospace' }}>0 perdidos</span>
        </div>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 6, alignItems: 'center',
            padding: '5px 0', borderBottom: i < items.length - 1 ? `1px solid ${AXIA.border}` : 'none',
          }}>
            <span style={{ fontSize: 7, fontFamily: '"JetBrains Mono", monospace', color: AXIA.muted }}>{it.id}</span>
            <span style={{ fontSize: 8, color: AXIA.text }}>{it.n}</span>
            <span style={{ fontSize: 7, padding: '2px 5px', borderRadius: 3, background: `${it.c}22`, color: it.c, fontFamily: '"JetBrains Mono", monospace', fontWeight: 600 }}>{it.s}</span>
          </div>
        ))}
      </div>
      {/* Map */}
      <div style={{ position: 'relative', background: AXIA.card, border: `1px solid ${AXIA.border}`, borderRadius: 8, overflow: 'hidden' }}>
        {/* Map grid */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(${AXIA.border} 1px, transparent 1px), linear-gradient(90deg, ${AXIA.border} 1px, transparent 1px)`,
          backgroundSize: '20px 20px', opacity: 0.5,
        }} />
        {/* Roads */}
        <svg viewBox="0 0 100 140" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <path d="M 0 40 Q 30 20, 60 50 T 100 80" stroke={AXIA.borderHi} strokeWidth="0.5" fill="none" />
          <path d="M 20 0 L 30 60 L 50 100 L 80 140" stroke={AXIA.borderHi} strokeWidth="0.5" fill="none" />
        </svg>
        {/* Pins */}
        {[
          { x: 25, y: 30, c: AXIA.accent },
          { x: 60, y: 50, c: AXIA.accent },
          { x: 40, y: 80, c: '#F59E0B' },
          { x: 75, y: 100, c: AXIA.primary },
          { x: 20, y: 110, c: AXIA.muted },
        ].map((p, i) => (
          <div key={i} style={{
            position: 'absolute', left: `${p.x}%`, top: `${p.y}%`,
            width: 10, height: 10, borderRadius: 999, background: p.c,
            transform: 'translate(-50%,-50%)',
            boxShadow: `0 0 0 2px ${p.c}33, 0 0 8px ${p.c}88`,
          }} />
        ))}
        <span style={{
          position: 'absolute', bottom: 6, left: 8, fontSize: 7,
          color: AXIA.muted, fontFamily: '"JetBrains Mono", monospace',
        }}>VHSA · vista en vivo</span>
      </div>
    </div>
  );
}

window.ClientLogos = ClientLogos;
window.ClientMark = ClientMark;
window.CaseImgManufactura = CaseImgManufactura;
window.CaseImgCRM = CaseImgCRM;
window.CaseImgTracker = CaseImgTracker;