// Showcase visual de Obra Simple — un mock "browser window" estático con personalidad.
// Reemplaza al antiguo <Demo> de Gastos Simples.

function ObraSimpleCard({ C }) {
  const cardStyle = {
    background: 'var(--paper)',
    border: '1px solid var(--rule)',
    borderRadius: 14,
    overflow: 'hidden',
    boxShadow: '0 24px 60px -20px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02)',
    fontFamily: 'var(--sans)',
  };

  // browser-style chrome
  const chrome = (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '10px 14px',
      background: 'var(--paper-2, #f6f4ef)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }}/>
      <div style={{
        flex: 1, marginLeft: 12,
        padding: '4px 10px',
        background: 'var(--paper)',
        border: '1px solid var(--rule)',
        borderRadius: 6,
        fontFamily: 'var(--mono)', fontSize: 11,
        color: 'var(--muted)',
        textAlign: 'center',
      }}>
        obrasimple.com.ar
      </div>
    </div>
  );

  return (
    <div style={cardStyle}>
      {chrome}

      {/* hero del mock */}
      <div style={{
        padding: '32px 28px 24px',
        background: 'linear-gradient(180deg, var(--paper) 0%, var(--paper-2, #f6f4ef) 100%)',
        borderBottom: '1px solid var(--rule)',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 10px',
          border: '1px solid var(--rule)',
          borderRadius: 999,
          fontFamily: 'var(--mono)', fontSize: 10,
          color: 'var(--muted)',
          textTransform: 'lowercase',
          marginBottom: 16,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--accent)',
            boxShadow: '0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent)',
          }}/>
          {C.demoTag}
        </div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11,
          color: 'var(--muted)',
          textTransform: 'lowercase',
          marginBottom: 6,
        }}>
          /// {C.demoCardKicker}
        </div>
        <div style={{
          fontFamily: 'var(--sans)', fontWeight: 700,
          fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1.05,
          color: 'var(--ink)',
          margin: '0 0 10px',
        }}>
          {C.demoCardTitle}
        </div>
        <div style={{
          fontSize: 13, lineHeight: 1.5,
          color: 'var(--ink-2)',
          maxWidth: 380,
        }}>
          {C.demoCardSub}
        </div>
      </div>

      {/* "lista" mock — proyectos */}
      <div style={{ padding: '18px 24px 22px' }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10,
          color: 'var(--muted)',
          textTransform: 'lowercase',
          marginBottom: 12,
          letterSpacing: '0.04em',
        }}>
          obras activas — 3
        </div>
        {[
          { name: 'casa pereyra', loc: 'palermo', pct: 78, color: '#10b981' },
          { name: 'edificio belgrano', loc: 'belgrano r', pct: 42, color: '#f59e0b' },
          { name: 'reforma local', loc: 'caballito', pct: 91, color: '#3b82f6' },
        ].map((p, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '12px 0',
            borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
            borderBottom: '1px solid var(--rule)',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: `color-mix(in oklab, ${p.color} 14%, transparent)`,
              border: `1px solid color-mix(in oklab, ${p.color} 30%, transparent)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700,
              color: p.color,
            }}>
              {p.pct}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--sans)', fontWeight: 600,
                fontSize: 14, color: 'var(--ink)',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{p.name}</div>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10,
                color: 'var(--muted)',
                textTransform: 'lowercase',
              }}>{p.loc}</div>
            </div>
            <div style={{
              width: 90, height: 6, borderRadius: 3,
              background: 'color-mix(in oklab, var(--rule) 60%, transparent)',
              overflow: 'hidden',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, bottom: 0,
                width: `${p.pct}%`,
                background: p.color,
                borderRadius: 3,
              }}/>
            </div>
          </div>
        ))}
      </div>

      {/* footer del mock */}
      <div style={{
        padding: '12px 18px',
        background: 'var(--paper-2, #f6f4ef)',
        borderTop: '1px solid var(--rule)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--mono)', fontSize: 10,
        color: 'var(--muted)',
        textTransform: 'lowercase',
      }}>
        <span>+ nueva obra</span>
        <span>↻ sincronizado hace 2 min</span>
      </div>
    </div>
  );
}

window.ObraSimpleCard = ObraSimpleCard;